Powered by MSDN

US - English
NEW! Silverlight 5 is available Learn More

Collapsing a Canvas RSS

15 replies

Last post Jun 02, 2007 07:56 AM by markheath

(0)
  • LostInTheCosmos

    LostInTheCosmos

    Member

    64 Points

    38 Posts

    Re: Re: Collapsing a Canvas

    May 26, 2007 06:02 PM | LINK

    Maybe because Blend works for WPF but not for Silverlight?

    The way I get this to work is by replacing the Canvas.Clip property every frame.

     

  • Bill Reiss

    Bill Reiss

    Contributor

    4973 Points

    947 Posts

    Re: Re: Collapsing a Canvas

    May 27, 2007 12:40 AM | LINK

    I meant Blend 2 in a Silverlight project. The things that aren't supported are typically because that particular control hasn't been implemented in Silverlight, but I would expect that if a property can be set manually, that it would also work in an animation. Thanks for the help.


    Bill Reiss, Coauthor of Hello! Silverlight
    My blog
  • markheath

    markheath

    Member

    117 Points

    63 Posts

    Re: Re: Re: Collapsing a Canvas

    May 29, 2007 08:54 AM | LINK

    LostInTheCosmos

    How about this...

     Make a timer (using either set Interval or a Silverlight Animation timer) and with each tick of the timer you switch out the clip object:

     Yes, this would work, and looks like my only option. I would still be interested to hear from Microsoft if there is a way I can achieve what I want using normal animation, or if they have plans to add this to a future Silverlight.

     

  • swirlingmass

    swirlingmass

    Participant

    1358 Points

    385 Posts

    Re: Re: Re: Collapsing a Canvas

    May 29, 2007 10:20 PM | LINK

    You can use a different geometry for your clip.  Specifically, a pathgeometry, composed of four linesegments, which together make your rectangle.  Use two pointanimations to simultaneously collapse the top and bottom lines:

    <Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="500" Height="200" Background="White">

    <TextBlock Canvas.Top="5" Text="Hidden Text - Should be revealed as Canvas Collapses"></TextBlock>

    <Canvas Name="CollapseMe" Background="LightBlue" Width="400" Height="60">

    <Canvas.Clip>

    <PathGeometry>

    <PathFigure IsClosed="true">

    <LineSegment Name="seg1" Point="0,0"/>

    <LineSegment Name="seg2" Point="400,0"/>

    <LineSegment Name="seg3" Point="400,60"/>

    <LineSegment Name="seg4" Point="0,60"/>

    </PathFigure>

    </PathGeometry>

    </Canvas.Clip>

    <Canvas.Triggers>

    <EventTrigger>

    <BeginStoryboard>

    <Storyboard Name="Collapse">

    <PointAnimation Storyboard.TargetName="seg2" Storyboard.TargetProperty="point"

    To="0,0" Duration="0:0:2" AutoReverse="true" RepeatBehavior="forever" />

    <PointAnimation Storyboard.TargetName="seg3" Storyboard.TargetProperty="point"

    To="0,60" Duration="0:0:2" AutoReverse="true" RepeatBehavior="forever" />

    </Storyboard>

    </BeginStoryboard>

    </EventTrigger>

    </Canvas.Triggers>

    <Rectangle Stroke="Black" Canvas.Left="50" Canvas.Top="30" Width="200" Height="20" />

    <TextBlock Canvas.Top="5" Canvas.Left="5" Text="This text and rectangle should be clipped"></TextBlock>

    </Canvas>

    </Canvas>

  • markheath

    markheath

    Member

    117 Points

    63 Posts

    Re: Re: Re: Collapsing a Canvas

    May 30, 2007 06:58 AM | LINK

    swirlingmass


    You can use a different geometry for your clip.  Specifically, a pathgeometry, composed of four linesegments, which together make your rectangle.  Use two pointanimations to simultaneously collapse the top and bottom lines:

     Excellent - that is exactly what I wanted to achieve! Hopefully we'll get RectAnimation in the future, but this solution will work for now.

    thanks

    Mark

     

  • markheath

    markheath

    Member

    117 Points

    63 Posts

    Re: Re: Re: Collapsing a Canvas

    Jun 02, 2007 07:56 AM | LINK

    I've found another easy way to do what I want in WPF, which allows the width of the Canvas to be animated with a DoubleAnimation rather than needing to animate the Canvas' Clip Geometry

    <Canvas x:Name="CollapseMe" Background="LightBlue" Width="400" Height="60" ClipToBounds="true" >

    Unfortunately it looks like the Silverlight Canvas doesn't have this capability either, so here's another feature request for the next drop of Silverlight.

    Canvas Animation ClipToBounds RectAnimation Clip