10

私は時々WPFを不可解だと思っています。次のXAMLを考えると、ObservableCollectionタイムラインに追加された新しいアイテムをアニメーション化(スライドダウン、フェードイン)するためのトリガーをどのように追加しますか。リストボックスのさまざまな例を見てきましたが、アイテムコントロールの例はありません。

<Grid>
    <ScrollViewer>
        <ItemsControl Name="TimelineItem"
                      ItemsSource="{Binding Timeline}"
                      Style="{StaticResource TimelineStyle}"
                      ItemContainerStyle="{StaticResource TweetItemStyle}">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Grid VerticalAlignment="Top"
                          HorizontalAlignment="Left">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Style="{StaticResource TweetImageColumnStyle}" />
                            <ColumnDefinition />
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition />
                            <RowDefinition />
                            <RowDefinition />
                            <RowDefinition />
                        </Grid.RowDefinitions>
                        <Rectangle Grid.Column="0"
                                   Style="{StaticResource TweetImageStyle}">
                            <Rectangle.Fill>
                                <ImageBrush ImageSource="{Binding ProfileImageUrl}" />
                            </Rectangle.Fill>
                        </Rectangle>
                        <StackPanel Grid.Column="1">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="Auto" />
                                </Grid.ColumnDefinitions>
                                <TextBlock Grid.Column="0"
                                           Style="{StaticResource TweetNameStyle}"
                                           Text="{Binding Name}" />
                                <TextBlock Grid.Column="1"
                                           Style="{StaticResource TweetTimeStyle}"
                                           Text="{Binding TimeAgo}" />
                            </Grid>
                            <Controls:TextBlockMarkup Grid.Row="1"
                                                      Grid.Column="1"
                                                      Markup="{Binding MarkupText}"
                                                      Style="{StaticResource TweetStyle}" />
                        </StackPanel>
                        <Separator Grid.Row="2"
                                   Grid.ColumnSpan="2"
                                   Style="{StaticResource TweetSeparatorTop}" />
                        <Separator Grid.Row="3"
                                   Grid.ColumnSpan="2"
                                   Style="{StaticResource TweetSeparatorBottom}" />
                    </Grid>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </ScrollViewer>
</Grid>
4

1 に答える 1

23

WPFをアニメーション化してからしばらく経ちましたが、これは、ロードされたイベントののをに設定することDataTriggerで機能するはずです。DataTemplateItemsControl

いくつかのメモ:

  1. 次のxamlをItemsControlのDataTemplateに追加します
  2. <Grid>DataTemplate内に「MyGrid」という名前を付けます
  3. RenderTransformOriginプロパティをMyGridに追加して、Y原点を上部に設定します。
    • <Grid x:Name="MyGrid" RenderTransformOrigin="0.5,0">
  4. 添付されたプロパティをグリッドに含めるようにGrid.RenderTransformしてください(以下のサンプルを参照)

Xaml

<DataTemplate.Resources>
    <Storyboard x:Key="ItemAnimation" AutoReverse="False">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="MyGrid" Storyboard.TargetProperty="(UIElement.Opacity)">
            <EasingDoubleKeyFrame KeyTime="0" Value="0" />
            <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1" />
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="MyGrid" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
            <EasingDoubleKeyFrame KeyTime="0" Value="0" />
            <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1" />
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
</DataTemplate.Resources>

<DataTemplate.Triggers>
    <EventTrigger RoutedEvent="FrameworkElement.Loaded">
        <BeginStoryboard Storyboard="{StaticResource ItemAnimation}" />
    </EventTrigger>
</DataTemplate.Triggers>

RenderTransformグループをグリッドに追加します

<!-- Include in the Grid -->
<Grid.RenderTransform>
    <TransformGroup>
        <ScaleTransform/>
    </TransformGroup>
</Grid.RenderTransform>

これにより、自分でカスタマイズできるように、十分に近づくことができます。FWIW:Blendを使用してItemTemplateTimelineオブジェクトのスタイルを編集してアニメーションを作成しました。

最後の注意:アニメーションは、元のコレクションの各アイテムについて、ウィンドウが初めてItemsControlをロードするときに発生します。また、コレクションに追加されると、個々のアイテムに対して発生します。この動作は少し不安定なので、xamlでトリガーの明示的なバインドを削除し、ItemsControlまたはWindowが読み込まれた後にコードビハインドでトリガーをバインドできます。

編集

  1. XAMLで動作するように、例を更新しました。
  2. 新しいアイテムをスライド(一種)するための別のアニメーションを追加しました。実際には、Y軸の上から始めて0%から100%のサイズに成長しています。
  3. 上記の注記#3を改訂して、RenderTransformOriginプロパティを含めました。
  4. Grid.RenderTransform添付プロパティを含めるためにメモ#4を追加しました。
于 2012-09-29T23:40:59.177 に答える