Question

我有一个地铁应用程序，其网格包含一行矩形对象，我想同时为所有矩形设置动画（在1秒内从0到1缩放）。我想尽可能多地使用Resources并避免代码重复。网格的基本骨架是下面的。

<Grid>
    <Grid.Resources>
        <Style TargetType="Rectangle" x:Key="RectangleStyle">
            <Setter Property="Height" Value="100"/>
            <Setter Property="Width" Value="100"/>
            <Setter Property="Margin" Value="10"/>
            <Setter Property="RadiusX" Value="10"/>
            <Setter Property="RadiusY" Value="10"/>
            <Setter Property="RadiusY" Value="10"/>
            <Setter Property="RenderTransform">
                <Setter.Value>
                        <ScaleTransform x:Name="RectangleScaleTransform"  ScaleX="1" ScaleY="1" />
                </Setter.Value>
            </Setter>
        </Style>
    </Grid.Resources>
    <Grid.Triggers>
       <EventTrigger RoutedEvent="Rectangle.Loaded">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="RectangleScaleTransform"
                        Storyboard.TargetProperty="(ScaleTransform.ScaleX)" From="0" To="1.0" Duration="0:0:1"  />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
        <EventTrigger RoutedEvent="Rectangle.Loaded">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="RectangleScaleTransform"
                                    Storyboard.TargetProperty="(ScaleTransform.ScaleY)" From="0" To="1.0" Duration="0:0:1"  />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Grid.Triggers>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Rectangle Fill="Red" Grid.Row="0" Grid.Column="0" Style="{StaticResource RectangleStyle}" />
        <Rectangle Fill="Red" Grid.Row="0" Grid.Column="1" Style="{StaticResource RectangleStyle}" />
        <Rectangle Fill="Red" Grid.Row="0" Grid.Column="2" Style="{StaticResource RectangleStyle}"/>
        <Rectangle Fill="Red" Grid.Row="0" Grid.Column="3" Style="{StaticResource RectangleStyle}"/>
        <Rectangle Fill="Red" Grid.Row="0" Grid.Column="4" Style="{StaticResource RectangleStyle}"/>
        <Rectangle Fill="Red" Grid.Row="0" Grid.Column="5" Style="{StaticResource RectangleStyle}"/>
        <Rectangle Fill="Red" Grid.Row="0" Grid.Column="6" Style="{StaticResource RectangleStyle}"/>
        <Rectangle Fill="Red" Grid.Row="0" Grid.Column="7" Style="{StaticResource RectangleStyle}"/>
    </Grid>
</Grid>

我不想将RenderTransform添加到每个单独的矩形，我不想为每个矩形三角形添加一个触发器，因为这似乎是很多重复。使用上面的代码，我收到Cannot resolve TargetName "RectangleScaleTransform错误。

任何帮助都会很棒。

Answer 1

我认为你不能引用像这样的样式定义的命名元素。

也许你可以使用代码隐藏？

没有试过这个，但是我可以做到这一点：

在XAML中命名所有矩形
在InitializeComponent调用之后的.xaml.cs中，将所有矩形放在一个列表中，并循环遍历每个矩形以编程方式添加渲染变换。
然后，当您需要启动动画时，为列表中所有矩形的渲染变换设置动画

使用XAML中的ScaleTransform和DoubleAnimation同时缩放多个对象

1 个答案: