假设我有一个StackPanel,里面有几个项目。当我加载视图时,我想对它们应用一些动画。但我希望每个项目按顺序动画,一个接一个。我该怎么做呢?特别是,在MVVM框架中有一种干净的方法吗?
编辑 - 我应该提到这些项目是通过ItemsControl数据绑定到StackPanel,这可能会使事情变得更加困难。看起来像这样
<ItemsControl x:Name="Items">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Content="{Binding ButtonName}"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
为清晰起见,省略了一些UI代码。
答案 0 :(得分:1)
复制/粘贴/编译/运行:我会提供一个解释,但要涵盖的主题太多。基本上,该示例演示如何在不冻结UI的情况下使用MultiTrigger,Animate,在后台加载项目以及使用PropertyChanged来通知UI。 享受。
这是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));
}
}
}