CODEWITHSUNDEEP
c#wpfexpression-blend
Jim_CS
Jim_CS

Reputation: 4172

Animating control rotation

I have defined a simple control, just a red square with a black triangle inside it. When the user clicks the control I want to rotate the black triangle 180 degrees. I need to animate the rotation. Here's the xaml for the control (and main window) -

<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="WpfApplication1.MainWindow"
x:Name="Window"
Title="MainWindow"
Width="640" Height="480">
<Window.Resources>
    <ControlTemplate x:Key="ControlControlTemplate1" TargetType="{x:Type Control}">
        <Grid>
            <Border Background="Red"/>
            <Path Grid.Row="1" x:Name="myPath" Visibility="Visible" Data="M0,0 L1,0 0.5,1 z" Stretch="Fill" 
                Width="80" Height="60" Fill="Black" Opacity="1"
                VerticalAlignment="Center" HorizontalAlignment="Center" RenderTransformOrigin="0.5,0.4">
            </Path>
        </Grid>
    </ControlTemplate>
</Window.Resources>

<Grid x:Name="LayoutRoot">
    <Control HorizontalAlignment="Left" Height="100" VerticalAlignment="Top" Width="100" Template="{DynamicResource ControlControlTemplate1}">
    </Control>
</Grid>

  1. I tried setting a Trigger on the control to do a rotate when the control is pressed but it seems that there is no IsPressed property (yet there is a IsMouseOver property for some reason). So how I trigger the rotation when the IsPressed property isnt available?
  2. How can I make this an animated rotation?

Upvotes: 0

Views: 1261

Answers (3)

rfresia
rfresia

Reputation: 556

You need to add a MouseDown event to the path, an event trigger event that will start the StoryBoard. I took you sample and created the requested rotation in Expression Blend. To alter you can change the rotation degree in the storyboard - "OnMouseDown1"

 <Window.Resources>
    <ControlTemplate x:Key="ControlControlTemplate1" TargetType="{x:Type Control}">
        <ControlTemplate.Resources>
            <Storyboard x:Key="OnMouseDown1">
                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="myPath">
                    <EasingDoubleKeyFrame KeyTime="0:0:1" Value="180"/>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>
        </ControlTemplate.Resources>
        <Grid>
            <Border Background="Red"/>
            <Path Grid.Row="1" x:Name="myPath" Visibility="Visible" Data="M0,0 L1,0 0.5,1 z" Stretch="Fill"  
            Width="80" Height="60" Fill="Black" Opacity="1" 
            VerticalAlignment="Center" HorizontalAlignment="Center" RenderTransformOrigin="0.5,0.4">
                <Path.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform/>
                        <SkewTransform/>
                        <RotateTransform/>
                        <TranslateTransform/>
                    </TransformGroup>
                </Path.RenderTransform>
            </Path>
        </Grid>
        <ControlTemplate.Triggers>
            <EventTrigger RoutedEvent="Mouse.MouseDown" SourceName="myPath">
                <BeginStoryboard Storyboard="{StaticResource OnMouseDown1}"/>
            </EventTrigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
    <Storyboard x:Key="OnMouseDown1">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="control">
            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="180"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
</Window.Resources>

<Grid x:Name="LayoutRoot">
    <Control x:Name="control" HorizontalAlignment="Left" Height="100" VerticalAlignment="Top" Width="100" Template="{DynamicResource ControlControlTemplate1}" RenderTransformOrigin="0.5,0.5">
        <Control.RenderTransform>
            <TransformGroup>
                <ScaleTransform/>
                <SkewTransform/>
                <RotateTransform/>
                <TranslateTransform/>
            </TransformGroup>
        </Control.RenderTransform>
    </Control>
</Grid>

Upvotes: 2

Hothreeyn
Hothreeyn

Reputation: 59

I recommended that you create your animation via Microsoft Expression Blend, version 3 or 4; writing code in xaml is so hard in this case (i.e., animation).

Good Luck .

Upvotes: 0

Nuffin
Nuffin

Reputation: 3972

You could use an EventTrigger and listen to the MouseLeftButtonDown event...

As for the rotation, the Path you want to rotate needs to look like this:

<Path ...>
    <Path.RenderTransform>
        <RotateTransform />
    </Path.RenderTransform>
</Path>

The animation itself would look like this (with a duration of half a second):

<DoubleAnimation BeginTime="0"
                 Duration="0:0:0.5"
                 To="180"
                 Storyboard.TargetName="nameOfThePath"
                 Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" />

But, as Hothreeyn already pointed out, using Blend for this is definitely easier.

Upvotes: 1

Related Questions