Getting Started

Re: Re: Re: Collapsing a Canvas

markheath — Sat, 02 Jun 2007 07:56:03 GMT

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

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.

Re: Re: Re: Collapsing a Canvas

markheath — Wed, 30 May 2007 06:58:37 GMT

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

Re: Re: Re: Collapsing a Canvas

swirlingmass — Tue, 29 May 2007 22:20:31 GMT

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.Clip>

</PathFigure>

</PathGeometry>

</Canvas.Clip>

<Canvas.Triggers>

<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>

</Canvas>

Re: Re: Re: Collapsing a Canvas

markheath — Tue, 29 May 2007 08:54:07 GMT

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.

Re: Re: Collapsing a Canvas

Bill Reiss — Sun, 27 May 2007 00:40:17 GMT

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.

Re: Re: Collapsing a Canvas

LostInTheCosmos — Sat, 26 May 2007 18:02:41 GMT

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.

Re: Re: Collapsing a Canvas

Bill Reiss — Sat, 26 May 2007 17:46:21 GMT

markheath:

I tried another idea, where I tried to animate the scale of my clip rectangle from ScaleX = 1 to ScaleX = 0, which does at least mean I can use a DoubleAnimation, but it doesn't seem to do anything:

    <Canvas.Clip>
      <RectangleGeometry x:Name="MidCanvasClipRect" Rect="0,0,500,100">
        <RectangleGeometry.Transform>
          <TransformGroup>
            <ScaleTransform x:Name="ClipScale" ScaleX="1.0" ScaleY="1.0" />
            </TransformGroup>
        </RectangleGeometry.Transform>
      </RectangleGeometry>
    </Canvas.Clip>

Animation:

       <DoubleAnimation Storyboard.TargetName="ClipScale" Storyboard.TargetProperty="ScaleX"
      To="0" Duration="0:0:1" />

again, any suggestions gratefully received, as I am running out of ideas!

Mark

I tried this too, and it behaves the way you want it to in Blend when you play the animation, so it looks like it may be a bug. I also tried to set ScaleX like it's defined above on a timer and it didn't seem to work either. You could only set it once and then it wouldn't respond anymore. Hope you have better results.

Re: Re: Re: Collapsing a Canvas

LostInTheCosmos — Sat, 26 May 2007 11:42:24 GMT

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:

var xIndex -= 5
var ClippingString = '<RectangleGeometry x:Name="MidCanvasClipRect" Rect="0,0,' + xIndex + ',100">';
var ClippingGeometry = SilverlightContent.createFromXaml(ClippingString);

myCanvas.clip = ClippingGeometry;

Re: Re: Re: Collapsing a Canvas

markheath — Sat, 26 May 2007 10:41:19 GMT

Here's a full sample you can paste into SilverlightPad (http://www.simplegeek.com/mharsh/silverlightpad/) which might make it easier to visualise what I am trying to achieve.


<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  Width="500" Height="200" Background="White">
<TextBlock Canvas.Top="5">Hidden Text - Should be revealed as Canvas Collapses</TextBlock>
<Canvas x:Name="CollapseMe" Background="LightBlue" Width="400" Height="60">
<Canvas.Triggers>
<EventTrigger>
<BeginStoryboard>
<Storyboard x:Name="Collapse">
      <DoubleAnimation Storyboard.TargetName="CollapseMe" Storyboard.TargetProperty="Width"
      To="100" Duration="0:0:1" 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">This text and rectangle should be clipped</TextBlock>
</Canvas>
</Canvas>

Obviously I need to animate the Canvas' Clip Rectangle width, not the Canvas width itself, but I can't work out how to do this.

Mark

Re: Re: Collapsing a Canvas

markheath — Sat, 26 May 2007 10:06:36 GMT

I tried another idea, where I tried to animate the scale of my clip rectangle from ScaleX = 1 to ScaleX = 0, which does at least mean I can use a DoubleAnimation, but it doesn't seem to do anything:

    <Canvas.Clip>
      <RectangleGeometry x:Name="MidCanvasClipRect" Rect="0,0,500,100">
        <RectangleGeometry.Transform>
          <TransformGroup>
            <ScaleTransform x:Name="ClipScale" ScaleX="1.0" ScaleY="1.0" />
            </TransformGroup>
        </RectangleGeometry.Transform>
      </RectangleGeometry>
    </Canvas.Clip>

Animation:

again, any suggestions gratefully received, as I am running out of ideas!

Mark

Re: Collapsing a Canvas

markheath — Sat, 26 May 2007 09:50:19 GMT

thanks Dave, its a useful sample, but I think you are able to get away with sliding one object behind another, which I do not want to do (although I may have to use as a last resort).

What I think I need is a RectAnimation, but this doesn't seem to be supported in Silverlight, so unless I can point a DoubleAnimation at the Rect.Width property of a RectangleGeometry, then I am not sure how I can animate the Clip rectangle for my Canvas. But all my attempts to animate Rect.Width have failed.

here's my Canvas

here's my attempt at animating the Clip Rect width, but it doesn't do anything

Mark

Re: Collapsing a Canvas

WynApse — Fri, 25 May 2007 21:27:30 GMT

Hi Mark...

I thought you wanted the whole canvas to shrink down, initially, but after reading this post (and maybe I'm worng), it doesn't sound that way.

I had questions early-on about something that I think is related to this... I wanted to slide a rectangle out of a point on a canvas, and then slide it back in. I ended up using that as a slide-out menu on one demo, and ultimately wrote an article about clipping rectangles here:

http://www.wynapse.com/Silverlight/Tutor/Clipping_Silverlight_Animated_Rectangles.aspx

I understand it's not exactly what you're asking about, but it's a working example of something that you might be able to modify into what you DO want.. let me know if I'm completely off base, or if it gets you closer.

-Dave

Re: Collapsing a Canvas

markheath — Fri, 25 May 2007 21:18:24 GMT

thanks for the suggestion, but I actually don't want the contents of the Canvas to move or change size - I just want the right hand edge to progressively be chopped off, a bit like when you resize a window in Windows to make it narrower.

Imagine that XXX and YYY are other visual elements and in between them there is a Canvas with a "hello world" textblock on it. What I want to happen is this:

XXX hello world YYY (before animation)

XXX hello woYYY (1/2 way through animation)

XXX heYYY (after animation)

but what I see is:

XXX heYYYorld

not sure if that makes it clearer or not! (obviously in this trivial example I could simply reduce the width of the textblock, but the Canvas has more than just one element on it).

Mark

Re: Collapsing a Canvas

LostInTheCosmos — Fri, 25 May 2007 20:46:06 GMT

Some XAML code to help:

</Canvas>

Re: Collapsing a Canvas

LostInTheCosmos — Fri, 25 May 2007 20:43:36 GMT

You could collapse a canvas by doing a scale transform on the X from 100% (1.0) to 0% (0.0). Is this the effect you are trying to achieve?