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="Forever"></ColorAnimation>替换为RepeatBehavior="1x"></ColorAnimation>或look here for further options。

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

XAML从按钮启动动画

1 个答案: