XAML從按鈕啓動動畫

Question

如何通過單擊按鈕觸發下面的顏色動畫，而不使用任何代碼隱藏？

我知道如何在程序上啓動動畫 - 但我想將所有內容保存在XAML中。

目前動畫運行所有的時間，因爲它是由Grid的裝載觸發它包含在。

<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"> 
    <Grid> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="auto"></RowDefinition> 
      <RowDefinition Height="*"></RowDefinition> 
     </Grid.RowDefinitions> 
     <Grid.Triggers> 
      <EventTrigger RoutedEvent="Grid.Loaded"> 
       <BeginStoryboard> 
        <Storyboard> 
         <ColorAnimation 
          Storyboard.TargetName="ChangingBrush" 
          Storyboard.TargetProperty="Color" 
          From="White" 
          To="Blue" 
          Duration="0:0:2" 
          AutoReverse="True" 
          RepeatBehavior="Forever"></ColorAnimation> 
        </Storyboard> 
       </BeginStoryboard> 
      </EventTrigger> 
     </Grid.Triggers> 
     <Button 
      Grid.Row="0">Do Work</Button> 
     <Image Grid.Row="1"> 
      <Image.Source> 
       <DrawingImage> 
        <DrawingImage.Drawing> 
         <GeometryDrawing> 
          <GeometryDrawing.Brush> 
           <SolidColorBrush x:Name="ChangingBrush" Color="LightBlue"></SolidColorBrush> 
          </GeometryDrawing.Brush> 
          <GeometryDrawing.Geometry> 
           <EllipseGeometry RadiusX="1" RadiusY="1"></EllipseGeometry> 
          </GeometryDrawing.Geometry> 
         </GeometryDrawing> 
        </DrawingImage.Drawing> 
       </DrawingImage> 
      </Image.Source> 
     </Image> 
    </Grid> 
</Window> 

Answer 1

給您的按鈕名稱和觸發器綁定到它。如果您不希望它繼續重複，請用RepeatBehavior="1x"></ColorAnimation>或look here for further options替換RepeatBehavior="Forever"></ColorAnimation>。

<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"> 
    <Grid> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="auto"></RowDefinition> 
      <RowDefinition Height="*"></RowDefinition> 
     </Grid.RowDefinitions> 
     <Grid.Triggers> 
      <EventTrigger RoutedEvent="Button.Click" SourceName="BeginButton"> 
       <BeginStoryboard> 
        <Storyboard> 
         <ColorAnimation 
          Storyboard.TargetName="ChangingBrush" 
          Storyboard.TargetProperty="Color" 
          From="White" 
          To="Blue" 
          Duration="0:0:2" 
          AutoReverse="True" 
          RepeatBehavior="Forever"></ColorAnimation> 
        </Storyboard> 
       </BeginStoryboard> 
      </EventTrigger> 
     </Grid.Triggers> 
     <Button 
      Name="BeginButton" 
      Grid.Row="0">Do Work</Button> 
     <Image Grid.Row="1"> 
      <Image.Source> 
       <DrawingImage> 
        <DrawingImage.Drawing> 
         <GeometryDrawing> 
          <GeometryDrawing.Brush> 
           <SolidColorBrush x:Name="ChangingBrush" Color="LightBlue"></SolidColorBrush> 
          </GeometryDrawing.Brush> 
          <GeometryDrawing.Geometry> 
           <EllipseGeometry RadiusX="1" RadiusY="1"></EllipseGeometry> 
          </GeometryDrawing.Geometry> 
         </GeometryDrawing> 
        </DrawingImage.Drawing> 
       </DrawingImage> 
      </Image.Source> 
     </Image> 
    </Grid> 
</Window>