WPF 鼠标单击 returns 故事板到上一个状态

Question

如果单击此代码，这段代码会动画化椭圆的移动。我如何 return （以动画方式 - 正如故事板所做的那样）通过再次单击其新位置使初始位置的椭圆。那可能吗？（最好只在XAML）

<Ellipse x:Name="circle_button" HorizontalAlignment="Left" Height="100" Margin="30,40,0,0" VerticalAlignment="Top" Width="100" Fill="#FF33D3A7" >
        <Ellipse.Triggers>
            <EventTrigger RoutedEvent="Ellipse.MouseDown" >
                <BeginStoryboard>
                    <Storyboard>
                        <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" BeginTime="00:00:00">
                            <SplineThicknessKeyFrame KeyTime="00:00:00" Value="30,40,0,0" />
                            <SplineThicknessKeyFrame KeyTime="00:00:00.4" Value="95,120,0,0" />
                        </ThicknessAnimationUsingKeyFrames>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Ellipse.Triggers>

Answer 1

我认为一种可能的方法是定义故事板并使用一些隐藏代码来触发动画。

这是一个例子：

Xaml:

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApplication1"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <Storyboard x:Key="ElipseStoryboard">
            <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" BeginTime="00:00:00">
                <SplineThicknessKeyFrame KeyTime="00:00:00" Value="30,40,0,0" />
                <SplineThicknessKeyFrame KeyTime="00:00:00.4" Value="95,120,0,0" />
            </ThicknessAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Key="ElipseStoryboardReversed">
            <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" BeginTime="00:00:00">
                <SplineThicknessKeyFrame KeyTime="00:00:00" Value="95,120,0,0" />
                <SplineThicknessKeyFrame KeyTime="00:00:00.4" Value="30,40,0,0" />
            </ThicknessAnimationUsingKeyFrames>
        </Storyboard>
    </Window.Resources>
    <Grid x:Name="CP">
        <Ellipse x:Name="circle_button" MouseDown="Circle_button_OnMouseDown" HorizontalAlignment="Left" Height="100" Margin="30,40,0,0" VerticalAlignment="Top" Width="100" Fill="#FF33D3A7" >
        </Ellipse>
    </Grid>
</Window>

后面的代码：

namespace WpfApplication1
{    
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private bool flag = false;
        private void Circle_button_OnMouseDown(object sender, MouseButtonEventArgs e)
        {
            if (flag)
            {
                var storyboard = this.Resources["ElipseStoryboard"] as Storyboard;
                if (storyboard != null)
                    storyboard.Begin(circle_button);
            }
            else
            {
                var storyboard = this.Resources["ElipseStoryboardReversed"] as Storyboard;
                if (storyboard != null)
                    storyboard.Begin(circle_button);
            }
            flag = !flag;
        }
    }
}

请尝试一下。

仅备选 Xaml 解决方案：

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApplication1"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">

    <Grid x:Name="CP">
        <Ellipse x:Name="circle_button" HorizontalAlignment="Left" Height="100" Margin="30,40,0,0" VerticalAlignment="Top" Width="100" Fill="#FF33D3A7" >
            <Ellipse.Triggers>
                <EventTrigger RoutedEvent="Ellipse.MouseDown" >
                    <BeginStoryboard>
                        <Storyboard>
                            <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" BeginTime="00:00:00">
                                <SplineThicknessKeyFrame KeyTime="00:00:00" Value="30,40,0,0" />
                                <SplineThicknessKeyFrame KeyTime="00:00:00.4" Value="95,120,0,0" />
                            </ThicknessAnimationUsingKeyFrames>
                            <DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="circle_button"
                        From="1.0" To="0.0" Duration="0:0:0" BeginTime="00:00:00.4"></DoubleAnimation>
                            <DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="circle_button2"
                        From="0.0" To="1.0" Duration="0:0:0" BeginTime="00:00:00.4"></DoubleAnimation>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Ellipse.Triggers>
            </Ellipse>

        <Ellipse x:Name="circle_button2" Opacity="0" HorizontalAlignment="Left" Height="100" Margin="95,120,0,0" VerticalAlignment="Top" Width="100" Fill="#FF33D3A7" >
            <Ellipse.Triggers>
                <EventTrigger RoutedEvent="Ellipse.MouseDown" >
                    <BeginStoryboard>
                        <Storyboard>
                            <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" BeginTime="00:00:00" Storyboard.TargetName="circle_button">
                                <SplineThicknessKeyFrame KeyTime="00:00:00" Value="95,120,0,0" />
                                <SplineThicknessKeyFrame KeyTime="00:00:00.4" Value="30,40,0,0" />
                            </ThicknessAnimationUsingKeyFrames>
                            <DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="circle_button2"
                        From="1.0" To="0.0" Duration="0:0:0" ></DoubleAnimation>
                            <DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="circle_button"
                        From="0.0" To="1.0" Duration="0:0:0"></DoubleAnimation>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Ellipse.Triggers>
        </Ellipse>
    </Grid>

</Window>

Answer 2

另一种方法是使用视觉状态并在代码隐藏中简单地在它们之间切换。与将动画作为资源相比，这可能更 更清晰 方法。

xaml:

<Ellipse x:Name="circle_button"
         HorizontalAlignment="Left"
         Height="100"
         Margin="30,40,0,0"
         VerticalAlignment="Top"
         Width="100"
         Fill="#FF33D3A7"
         MouseDown="circle_button_MouseDown">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState x:Name="A">
                <Storyboard>
                    <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="Margin">
                        <SplineThicknessKeyFrame KeyTime="0:0:0.4" Value="95,120,0,0" />
                    </ThicknessAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>
            <VisualState x:Name="B">
                <Storyboard>
                    <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="Margin">
                        <SplineThicknessKeyFrame KeyTime="0:0:0.4" Value="30,40,0,0" />
                    </ThicknessAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</Ellipse>

cs:

bool _isStateB;

void circle_button_MouseDown(object sender, MouseButtonEventArgs e)
{
    _isStateB = !_isStateB;
    VisualStateManager.GoToElementState(circle_button, _isStateB ? "B" : "A", true);
}

演示：

可以使用 Button 而不是 Ellipse（样式包含这样的椭圆），那么您将拥有 Click 事件和聚焦能力，并且 用键盘点击元素。

P.S.: 写完答案我突然有了一个想法.. ToggleButton有2种状态，你可以其实用IsChecked 在 2 个位置之间切换（和运行不同的动画）...直到添加第三个，然后最好使用视觉状态的解决方案。

WPF 鼠标单击 returns 故事板到上一个状态

WPF mouse click returns storyboard to previous state

c#

wpf

xaml

storyboard

wpf-animation