Question

我已经定义了一个简单的控件，只是一个内部带有黑色三角形的红色正方形。当用户点击控件时，我想将黑色三角形旋转180度。我需要为旋转设置动画。这是控件（和主窗口）的xaml -

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

我尝试在控件上设置一个触发器，在按下控件时进行旋转，但似乎没有IsPressed属性（但由于某种原因，还有一个IsMouseOver属性）。那么当IsPressed属性不可用时我如何触发旋转呢？
如何将其设为动画旋转？

Answer 1

您需要将一个MouseDown事件添加到路径中，这是一个将启动StoryBoard的事件触发器事件。我带了你的样本并在Expression Blend中创建了请求的旋转。要改变你可以改变故事板中的旋转度 - “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>

Answer 2

您可以使用EventTrigger并收听MouseLeftButtonDown事件......

对于旋转，您要旋转的路径需要如下所示：

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

动画本身看起来像这样（持续时间为半秒）：

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

但是，正如Hothreeyn已经指出的那样，使用Blend非常容易。

Answer 3

我建议您通过Microsoft Expression Blend，版本3或4创建动画;在这种情况下，在xaml中编写代码非常困难（即动画）。

祝你好运。

动画控制旋转

3 个答案: