1

私は観察可能なコレクションにバインドされたラップパネルを持っています。

コード ビハインドでコレクションが変更されたときに、UI で項目の動きをアニメーション化する方法はありますか? Windows タイル スタイルの Metro アプリの滑らかな動きのようなものですか?

これをどのように行うかについての設計上のアイデアは高く評価されます。

今のところ、レイアウト変更イベントをアニメーション化することしか考えられませんか?

ありがとう

4

1 に答える 1

2

私は過去にそのようなものが必要でしたが、覚えているように、ここで提供されているサンプルのわずかに変更されたバージョンを使用して終了しました: https://docs.microsoft.com/en-us/archive/blogs/devdave/layout- transitions-an-animatable-wrappanel

このサンプルはやや高度で、コレクションに変更が加えられたときのアイテムのアニメーション化をサポートしています (アイテムの追加、アイテムの削除、パネルのサイズ変更)。

一方、アイテム レベルのみの単純なアニメーションが必要な場合 (アイテムが表示/非表示になる場合など) 、関連するイベント用のItemTemplate を持つコントロールを使用して を簡単に作成できます。EventTriggerこの例では、アイテムが追加されるとアニメーション化されます:

XAML:

<StackPanel>
    <ItemsControl x:Name="itemsControl" Height="300">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel IsItemsHost="True" />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Rectangle Width="80" Height="80" Fill="Red" Margin="4" Opacity="0">
                    <Rectangle.RenderTransform>
                        <TranslateTransform Y="20" />
                    </Rectangle.RenderTransform>
                    <Rectangle.Triggers>
                        <EventTrigger RoutedEvent="Loaded">
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetProperty="Opacity" To="1" Duration="00:00:00.6" />
                                    <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).Y" To="0" Duration="00:00:00.4" />
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                    </Rectangle.Triggers>
                </Rectangle>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
    <Button Width="60" Height="40" Content="Add Item" Click="Button_Click" />
</StackPanel>

コードビハインド:

    ObservableCollection<string> items = new ObservableCollection<string>();

    public MainWindow()
    {
        InitializeComponent();
        itemsControl.ItemsSource = items;
    }

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        items.Add("New Item");
    }
于 2012-06-07T18:49:20.127 に答える