如何在 wpf 中制作按钮和背景闪烁

本文关键字：按钮 背景 闪烁 wpf | 更新日期: 2023-09-27 18:37:16

Issue

我遇到的问题是，当用户单击一个按钮时，我希望按钮开始从 100% 可见闪烁到 20% 左右可见，并且 WPF 窗口的背景将颜色从 #ffffff 更改为#d6786a，这应该发生，直到再次单击按钮。然后动画应该停止。

法典

我已经做了一些挖掘，以找到 somone 在哪里这样做，但我似乎什么也看不到。我目前拥有的代码如下。

这是我想在单击时从 100% 可见闪烁到 20% 可见的按钮：

<Button Name="button2" Style="{DynamicResource NoChromeButton}" Visibility="{Binding VisableState, Converter={StaticResource BoolToVis}}" ToolTip="Start Live Stream" Command="{Binding PlayStream}" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Column="5" Height="22" Width="22" >
    <Image Source="../Images/recordicon.png"/>
</Button>

我试图在按钮中添加故事板，但它不起作用：

<Button.Triggers>
  <EventTrigger RoutedEvent="Button.Click">
    <EventTrigger.Actions>
      <BeginStoryboard>
        <Storyboard BeginTime="00:00:00" 
                                RepeatBehavior="Forever" 
                                Storyboard.TargetName="button2" 
                                Storyboard.TargetProperty="(Visibility)">
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger.Actions>
  </EventTrigger>
</Button.Triggers>

我是WPF的新手，所以进入动画对我来说更困难。如果有人能在这个舞台上给我一点帮助，那就太好了。

如何在 wpf 中制作按钮和背景闪烁

定义资源中的动画，例如这样

<Window x:Name="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="FlashButton" RepeatBehavior="Forever">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="button">
            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.2"/>
            <EasingDoubleKeyFrame KeyTime="0:0:2" Value="1"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
    <Storyboard x:Key="ChangeColor">
        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="grid">
            <EasingColorKeyFrame KeyTime="0:0:1" Value="Red"/>
        </ColorAnimationUsingKeyFrames>
    </Storyboard>
    <Storyboard x:Key="ChangeColor2">
        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="grid">
            <EasingColorKeyFrame KeyTime="0:0:1" Value="White"/>
        </ColorAnimationUsingKeyFrames>
    </Storyboard>
</Window.Resources>
<Grid x:Name="grid" Background="White">
    <Button x:Name="button" Content="Button" Margin="10,10,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" Width="75" Click="button_Click"/>
</Grid>

并创建按钮单击处理程序

        private bool isRunning;
    private void button_Click(object sender, RoutedEventArgs e)
    {
        var flashButton = FindResource("FlashButton") as Storyboard;
        var changeColor = FindResource("ChangeColor") as Storyboard;
        var changeColor2 = FindResource("ChangeColor2") as Storyboard;
        if (isRunning)
        {
            flashButton.Stop();
            changeColor2.Begin();
            isRunning = false;
        }
        else
        {
            flashButton.Begin();
            changeColor.Begin();
            isRunning = true;
        }
    }

>要将"可见性更改为大约 20%"，您必须对属性（从 0.0 到 1.0 double 类型）Opacity进行动画处理，而不是Visibility（enum有 3 个值，请参阅 msdn）。

如果您可以使用ToggleButton，则可以轻松实现目标（因为它的Checked很好，路由事件Unckecked）：

<ToggleButton>
    <ToggleButton.Triggers>
        <EventTrigger RoutedEvent="ToggleButton.Checked">
            <BeginStoryboard x:Name="storyboard">
                <Storyboard RepeatBehavior="Forever"
                            AutoReverse="True">
                    <DoubleAnimation Storyboard.TargetProperty="Opacity"
                                     To="0.2"
                                     Duration="0:0:1" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
        <EventTrigger RoutedEvent="ToggleButton.Unchecked">
            <StopStoryboard BeginStoryboardName="storyboard" />
        </EventTrigger>
    </ToggleButton.Triggers>
</ToggleButton>
相关文章：