Animate Clip rect height and width

Question

I need to animate Heigth and Width of the Clip Rect using Story, If I write like below code

<DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetProperty="(UIElement.Clip).(RectangleGeometry.Rect).Height" Storyboard.TargetName="ellipse">
    <EasingDoubleKeyFrame KeyTime="0:0:1" Value="55"/>
</DoubleAnimationUsingKeyFrames>

Designer crash and says Cannot resolve TargetProperty (UIElement.Clip).(RectangleGeometry.Rect).Height.

How to overcome this !!!

Even we can achieve it by Transforms. But how can I animate the Height and Width property of the Clip rect in Xaml.

Thanks in advance.

Answer 1

You need to animate the RectangleGeometry itself.  There's a WPF/XAML sample here:

http://msdn.microsoft.com/en-us/library/ms746814(v=vs.110).aspx

If you post the rest of the code, I'll check it out.

---

Matt Small - Microsoft Escalation Engineer - Forum Moderator
If my reply answers your question, please mark this post as answered.

NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

Answer 2

Since RectAnimation is not part of WinRT you are left with using Object animation with key frames. See this example

<Page
    x:Class="MsdnSample15072014.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:MsdnSample15072014"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:control="using:MsdnSample15072014"
    mc:Ignorable="d">
    <Page.Resources>
        <Storyboard x:Name="AnimateClip">
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Image.Clip)" 
                                           Storyboard.TargetName="image">
                <DiscreteObjectKeyFrame KeyTime="0:0:0.25">
                    <DiscreteObjectKeyFrame.Value>
                        <RectangleGeometry Rect="0,0,25,25"/>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
                <DiscreteObjectKeyFrame KeyTime="0:0:0.50">
                    <DiscreteObjectKeyFrame.Value>
                        <RectangleGeometry Rect="0,0,50,50"/>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
                <DiscreteObjectKeyFrame KeyTime="0:0:0.75">
                    <DiscreteObjectKeyFrame.Value>
                        <RectangleGeometry Rect="0,0,100,100"/>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
                <DiscreteObjectKeyFrame KeyTime="0:0:1">
                    <DiscreteObjectKeyFrame.Value>
                        <RectangleGeometry Rect="0,0,200,200"/>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
        </Storyboard>
		
	</Page.Resources>

    <Grid>
        <Image x:Name="image" Source="Assets/sample.jpg" Stretch="None">
            <Image.Clip>
                <RectangleGeometry Rect="0,0,10,10"/>
            </Image.Clip>
		</Image>
    </Grid>
</Page>

Unfortunately object animation does not support easing so you will have to add more and more frames to make it look smooth.

---

-- Vishal Kaushik --

Please 'Mark as Answer' if my post answers your question and 'Vote as Helpful' if it helps you. Happy Coding!!!

My Samples

My Codeplex Project