2

ボタンを通常または警告の赤にするための次の 2 つのスタイルがあります。しかし、赤の場合は、真っ赤になるのではなく、点滅させたい. スタイルを使用するだけでこれを実現できる 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>
4

1 に答える 1

4

任意のブラシの不透明度でアニメーションを使用できます。次に例を示します。

<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>
于 2012-11-07T11:55:37.457 に答える