Question

我有以下两种样式，按钮可以是常规按钮，也可以是红色警告。但是当它是红色时，我希望它闪烁而不是坚固的红色。有没有办法使用WPF动画或某些功能，我可以使用样式来实现这一点？

 <ControlTemplate x:Key="ToolbarButtonRed" TargetType="{x:Type Button}">
        <Border Margin="0.3" BorderThickness="1,1,1,1" CornerRadius="4,4,4,4" BorderBrush="#cccccc" Background="#999999" Width="47">
            <Grid>
                <Border x:Name="BorderUp" BorderThickness="2,2,2,2" CornerRadius="4,4,4,4">
                    <Border.Background>
                        <LinearGradientBrush StartPoint=".5,0" EndPoint=".5,1">
                            <GradientStop Color="#ffaaaa" Offset="0"/>
                            <GradientStop Color="#cc6666" Offset="0.6"/>
                            <GradientStop Color="#bb2222" Offset="1"/>
                        </LinearGradientBrush>
                    </Border.Background>
                </Border>
                <Border x:Name="BorderDown" BorderThickness="2,2,2,2" CornerRadius="4,4,4,4" Opacity="0">
                    <Border.BorderBrush>
                        <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1" >
                            <GradientStop Color="White" Offset="1"/>
                            <GradientStop Color="#222222" Offset="0"/>
                        </LinearGradientBrush>
                    </Border.BorderBrush>
                    <Border.Background>
                        <LinearGradientBrush StartPoint=".5,0" EndPoint=".5,1">
                            <GradientStop Color="#ff9966" Offset="0"/>
                            <GradientStop Color="#bb2222" Offset="0.6"/>
                            <GradientStop Color="#441111" Offset="1"/>
                        </LinearGradientBrush>
                    </Border.Background>
                </Border>
                <ContentPresenter x:Name="Contents" 
                                      HorizontalAlignment="Center" 
                                      VerticalAlignment="Center" 
                                      Width="Auto"
                                      TextBlock.Foreground="White"
                                      Margin="3,3,3,3"/>
            </Grid>
        </Border>
        <ControlTemplate.Triggers>
            <Trigger Property="IsPressed" Value="True">
                <Setter TargetName="BorderDown" Property="Opacity" Value="1"/>
                <Setter TargetName="Contents" Property="Margin" Value="4,4,2,2"/>
            </Trigger>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter TargetName="BorderDown" Property="Opacity" Value="1"/>
            </Trigger>
        </ControlTemplate.Triggers>

    </ControlTemplate>

    <Style x:Key="ToolbarButtonDisplay" TargetType="Button">
        <Setter Property="ContentTemplate">
            <Setter.Value>
                <DataTemplate>
                    <StackPanel Orientation="Vertical">
                        <Image Source="{Binding Path=(Windows:ButtonProperties.Image), RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}" Margin="0,2,0,0" Width="32"/>
                        <TextBlock FontSize="9" FontWeight="Normal" FontFamily="Arial" Foreground="White" HorizontalAlignment="Center" Margin="2,2,2,2">
                                <ContentPresenter Content="{Binding Path=Content, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}"></ContentPresenter>
                        </TextBlock>
                    </StackPanel>
                </DataTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="Windows:ButtonProperties.IsRed" Value="True">
                <Setter Property="Template" Value="{DynamicResource ToolbarButtonRed}"/>
            </Trigger>
            <Trigger Property="Windows:ButtonProperties.IsRed" Value="False">
                <Setter Property="Template" Value="{DynamicResource ToolbarButton}"/>
            </Trigger>
        </Style.Triggers>
    </Style>

Answer 1

您可以在任何画笔的不透明度上使用动画。这是一个例子：

<Border x:Name="AnimatedColorButton" Width="100" Height="30" BorderThickness="2" BorderBrush="Red">
    <Border.Triggers>
        <EventTrigger RoutedEvent="Border.Loaded">
            <BeginStoryboard>
                <Storyboard >
                    <DoubleAnimation Storyboard.TargetName="AnimatedColorButton"
                                     Storyboard.TargetProperty="BorderBrush.Opacity"
                                     RepeatBehavior="Forever"
                                     AutoReverse="True"
                                     To="0.0"
                                     Duration="0:0:0.5" ></DoubleAnimation>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Border.Triggers>
    <Button>Test</Button>
</Border>

WPF中的闪烁按钮内容模板

1 个答案: