如何一次设置一个堆叠面板项目的动画？ [英] How could I animate one stack panel item at a time?

问题描述

说我有一个StackPanel，里面有一些物品。加载视图时，我想对它们应用一些动画。但是我希望每个项目都依次进行动画处理。我将如何去做呢？特别是，在MVVM框架中是否有一种干净的方法可以做到这一点？

Say I have a StackPanel with a few items in it. When I load my view, I want to apply some animation to them. But I want each item to animate in sequence, one after the other. How would I go about doing this? In particular, is there a clean way to do this in an MVVM framework?

编辑-我应该提到这些项目是通过ItemsControl数据绑定到StackPanel的，这可能使事情变得更加困难。看起来像这样

Edit - I should mention that the items are databound to the StackPanel through an ItemsControl, which might make things substantially more difficult. It looks like this

                   <ItemsControl x:Name="Items">
                        <ItemsControl.ItemsPanel>
                            <ItemsPanelTemplate>
                                <StackPanel />
                            </ItemsPanelTemplate>
                        </ItemsControl.ItemsPanel>
                        <ItemsControl.ItemTemplate>
                            <DataTemplate>
                                <Button Content="{Binding ButtonName}"/>
                            </DataTemplate>
                        </ItemsControl.ItemTemplate>
                    </ItemsControl>

为清晰起见，省略了一些UI代码。

Some UI code omitted for clarity.

推荐答案

复制/粘贴/编译/运行：我会给出一个解释，但要讨论的主题太多。基本上，该示例显示了如何在不冻结UI的情况下如何在后台进行MultiTrigger，动画，加载项目以及如何使用PropertyChanged通知UI。
享受。

Copy/Paste/Compile/Run : I'd throw an explanation but too many topics to cover. Basically the sample shows how to MultiTrigger, Animate, Load Items in the Background without freezing UI and use of PropertyChanged to notify UI. Enjoy.

这里是XAML

<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"
    x:Name="wnd">
<Window.Resources>
    <BooleanToVisibilityConverter x:Key="BoolToVisibility" />
</Window.Resources>

<ItemsControl x:Name="Items" ItemsSource="{Binding TestItems, ElementName=wnd}" Loaded="Items_Loaded">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Button x:Name="item" Content="{Binding DisplayString}" Margin="5">
                <Button.Style>
                    <Style TargetType="{x:Type Button}">
                        <Setter Property="Opacity" Value="0"/>
                        <Setter Property="Visibility" Value="{Binding Path=IsVisible, Converter={StaticResource BoolToVisibility}}"/>
                        <Style.Triggers>
                            <MultiDataTrigger>
                                <MultiDataTrigger.Conditions>
                                    <Condition Binding="{Binding IsLoading}" Value="True"/>
                                    <Condition Binding="{Binding IsVisible}" Value="True"/>
                                </MultiDataTrigger.Conditions>
                                <MultiDataTrigger.EnterActions>
                                    <BeginStoryboard>
                                        <Storyboard >
                                            <DoubleAnimation Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:1.5" AccelerationRatio="0.3"/>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </MultiDataTrigger.EnterActions>
                            </MultiDataTrigger>
                        </Style.Triggers>
                    </Style>
                </Button.Style>
            </Button>                   
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

然后这是后面的代码

using System.Collections.Generic;
using System.ComponentModel;
using System.Globalization;
using System.Threading;
using System.Threading.Tasks;
using System.Windows;

namespace WpfApplication1
{

public partial class MainWindow : Window
{
    private List<TestItem> _items;
    public List<TestItem> TestItems
    {
        get
        {
            if(_items == null)
            {
                _items = new List<TestItem>();
                for(int i = 0; i < 10; i++)
                    _items.Add(new TestItem{ DisplayString = i.ToString(CultureInfo.InvariantCulture), IsVisible = true});
            }
                return _items;
        }
    }

    public MainWindow()
    {
        InitializeComponent();
    }

    private void Items_Loaded(object sender, RoutedEventArgs e)
    {
        /*in background so not to freeze the UI thread*/
        Task.Factory
            .StartNew(() =>
                        {
                            foreach (var item in TestItems)
                            {
                                item.IsLoading = true;
                                item.IsVisible = true;
                                /*using sleep as quick and dirty just to slow down loading and show the animation (otherwise it's a no-no )*/
                                Thread.Sleep(500);
                            }
                        }
            );
    }
}

public class TestItem : INotifyPropertyChanged
{
    private string _displayString;
    private bool _isVisible;
    private bool _isLoading;

    public string DisplayString
    {
        get { return _displayString; } 
        set
        {
            if (_displayString == value) return;
            _displayString = value;
            RaisePropertyChanged("DisplayString");
        }
    }

    public bool IsVisible
    {
        get { return _isVisible; }
        set
        {
            if (_isVisible == value) return;
            _isVisible = value;
            RaisePropertyChanged("IsVisible");
        }
    }

    public bool IsLoading
    {
        get { return _isLoading; }
        set
        {
            if (_isLoading == value) return;
            _isLoading = value;
            RaisePropertyChanged("IsLoading");
        }
    }


    public event PropertyChangedEventHandler PropertyChanged;

    private void RaisePropertyChanged(string propertyName)
    {
        if(PropertyChanged != null)
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }
}
}

这篇关于如何一次设置一个堆叠面板项目的动画？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！