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


    Wednesday, July 16, 2014 7:59 AM

Answers

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

    Wednesday, July 16, 2014 1:07 PM
    Moderator
  • 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!!!

    Wednesday, July 16, 2014 6:47 PM

All replies

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

    Wednesday, July 16, 2014 1:07 PM
    Moderator
  • 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!!!

    Wednesday, July 16, 2014 6:47 PM