2012-11-07 58 views
2

我有以下兩種樣式,一個按鈕爲常規或紅色警告。但是當它是紅色時,我希望它閃爍而不是堅實的紅色。有沒有一種方法使用WPF動畫或一些功能,我可以做到這一點只是使用樣式?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

您可以在任何畫筆的不透明度上使用動畫。 這裏是一個例子:

<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> 
+0

我們是否也可以用同樣的方式動畫按鈕內容? –