wpf - WPF 中的 slider "animation"？

Question

我有一个按钮和一个 slider ，当我按下按钮时，我是否希望 slider 勾选一步，直到达到最大值。

但是，一旦我单击该按钮，它就会休眠一段时间，然后将 slider 显示为最大值，而不显示每个刻度。为什么？

<小时/>

这是我的 XAML 代码:

<StackPanel Orientation="Horizontal">
    <Button x:Name="AnimationGoButton" Content="Go" />
    <Slider x:Name="AnimationSlider" TickFrequency="1" TickPlacement="BottomRight" IsSnapToTickEnabled="True" Width="200" Maximum="20" Value="0" />
</StackPanel>

这是我的代码:

Private Sub AnimationGoButton_Click(sender As System.Object, e As System.Windows.RoutedEventArgs) Handles AnimationGoButton.Click
    While (Me.AnimationSlider.Value < Me.AnimationSlider.Maximum)
        Me.AnimationSlider.Value += 1
        System.Threading.Thread.Sleep(100)
    End While
End Sub

我尝试过使用动态资源，但结果是一样的。

XAML:

<Window.Resources>
    <sys:Double x:Key="AnimationSliderValue">0</sys:Double>
</Window.Resources>

然后我将 XAML 中 slider 的值更改为:

Value="{DynamicResource AnimationSliderValue}"

并将后面的代码更改为:

While (Me.AnimationSlider.Value < Me.AnimationSlider.Maximum)
    Resources("AnimationSliderValue") += 1
    System.Threading.Thread.Sleep(100)
End While

结果是一样的。当我按下按钮时，UI 不会更新，直到达到最大值。

如何为 slider 创建我想要的“动画”？

Answer 1

您可以使用Storyboard用于动画。

<Window x:Class="WpfApplication1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525" x:Name="userControl">
<Window.Resources>
    <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
    <Storyboard x:Key="SlideUpAnimation">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(RangeBase.Value)" Storyboard.TargetName="slider1">
            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="10"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
    <Storyboard x:Key="SlideDownAnimation">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(RangeBase.Value)" Storyboard.TargetName="slider1">
            <SplineDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
</Window.Resources>
<Window.Triggers>
    <EventTrigger RoutedEvent="FrameworkElement.Loaded">
        <BeginStoryboard Storyboard="{StaticResource SlideUpAnimation}"/>
    </EventTrigger>
</Window.Triggers>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Top">
    <Button x:Name="btnSlideDown" Click="btnSlideDown_Click" Content="Slide Down" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    <Slider Height="23" x:Name="slider1" Width="100" />
    <Button x:Name="btnSlideUp" Click="btnSlideUp_Click" HorizontalAlignment="Center" VerticalAlignment="Center" Content="Slide Up" />
</StackPanel>

然后通过单击按钮启动 Storyboard :

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

    private void btnSlideUp_Click(object sender, System.Windows.RoutedEventArgs e)
    {
        this.BeginStoryboard((Storyboard)this.FindResource("SlideUpAnimation"));
    }

    private void btnSlideDown_Click(object sender, System.Windows.RoutedEventArgs e)
    {
        this.BeginStoryboard((Storyboard)this.FindResource("SlideDownAnimation"));
    }
}

注意:您需要在项目引用中添加PresentationFramework.dll，以便在代码中访问Storyboard 类。

更新下面的评论

您希望仅使用动画将 Slider.Value 增加整个整数。由于目标值类型为 Double，因此动画会根据动画帧速率计算 Double 值并将其应用于目标。 (默认情况下，动画帧速率为 60 fps，但即使您确实降低了它，仍然可能会或可能不会为您提供偶数值，具体取决于起始值)。我不知道有什么方法可以告诉 DoubleAnimation 仅使用偶数值。存在 Int32Animation 类，但不能将其应用于 double 类型的 Slider.Value。

这是我的 hacky 解决方案(我不太喜欢):将 SliderIntValue (Int32) 依赖属性添加到父级(例如 MainWindow 或可能是您的 View 模型)，并使用双向绑定(bind)将其绑定(bind)到 Slider.Value。 Binding 类将神奇地处理类型转换。然后将动画应用到 SliderIntValue 而不是 slider 本身:

<Window x:Class="WpfApplication1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525" x:Name="userControl">
<Window.Resources>
    <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
    <Storyboard x:Key="SlideUpAnimation">
        <Int32AnimationUsingKeyFrames Storyboard.TargetProperty="SliderIntValue" Storyboard.TargetName="userControl">
            <EasingInt32KeyFrame KeyTime="0:0:1" Value="10"/>
        </Int32AnimationUsingKeyFrames>
    </Storyboard>
    <Storyboard x:Key="SlideDownAnimation">
        <Int32AnimationUsingKeyFrames Storyboard.TargetProperty="SliderIntValue" Storyboard.TargetName="userControl">
            <EasingInt32KeyFrame KeyTime="0:0:1" Value="0"/>
        </Int32AnimationUsingKeyFrames>
    </Storyboard>
</Window.Resources>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Top">
    <Button x:Name="btnSlideDown" Click="btnSlideDown_Click" Content="Slide Down" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    <Slider Height="23" x:Name="slider1" Width="100" IsSnapToTickEnabled="True" Value="{Binding SliderIntValue, ElementName=userControl, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
    <Button x:Name="btnSlideUp" Click="btnSlideUp_Click" HorizontalAlignment="Center" VerticalAlignment="Center" Content="Slide Up" />
    <TextBox TextWrapping="Wrap" Text="{Binding Value, ElementName=slider1}" Margin="20,0,0,0"/>
</StackPanel>

这是添加到 MainWindow 类的依赖属性:

public partial class MainWindow : Window
{
    public static readonly DependencyProperty SliderIntValueProperty = DependencyProperty.Register("SliderIntValue",
                typeof(int), typeof(MainWindow));

    public MainWindow()
    {
        InitializeComponent();
    }

    private void btnSlideUp_Click(object sender, System.Windows.RoutedEventArgs e)
    {
        this.BeginStoryboard((Storyboard)this.FindResource("SlideUpAnimation"));
    }

    private void btnSlideDown_Click(object sender, System.Windows.RoutedEventArgs e)
    {
        this.BeginStoryboard((Storyboard)this.FindResource("SlideDownAnimation"));
    }
}