Animating control rotation

Question

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?

Answer 1

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>