0

長方形オブジェクトの行を含むグリッドを持つメトロアプリがあります。すべての長方形を同時にアニメートしたいと思います（1秒で0から1までスケールします）。リソースを可能な限り使用し、コードの重複を避けたいと思います。グリッドの基本的なスケルトンは以下のとおりです。

<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エラーが発生します。

どんな助けでも素晴らしいでしょう。

4

1 に答える 1

0

そのようなスタイルで定義された名前付き要素を参照することはできないと思います。

おそらく、コードビハインドを使用できますか？

これを試したことはありませんが、私の頭のすぐ上で、これを行うことができます：

  1. XAMLですべての長方形に名前を付けます
  2. InitializeComponent呼び出し後の.xaml.csで、すべての長方形をリストに入れ、それぞれをループして、プログラムでレンダリング変換を追加します。
  3. 次に、アニメーションを開始する必要があるときに、リスト内のすべての長方形のレンダリング変換をアニメーション化します。
于 2012-09-11T07:11:45.887 に答える