ListView的项目在WinRT中插入动画

最近我开始构建自己的大型Windows 8商店应用程序。 在UI上工作我开始复制一些好的UI。

我在标准的Mail应用程序中遇到了在列表视图中插入新元素的非常有趣的动画。 当您单击链时，它会展开并显示链中的所有消息。

这是拍摄的video。

我不知道他们用什么技术来实现这个动画和行为。

任何人都可以帮助我，解释或举例说明我该如何实现这种行为？ 谢谢。

Answer 1

邮件应用程序是用JavaScript编写的，因此它不会帮助你了解它是如何完成的，因为这个UI堆栈与XAML堆栈完全不同。 但事实是列表控件可能以相同的方式设置动画，因此您只需添加/删除列表中的某些项目即可获得扩展/折叠效果。

我玩了一下这就是我想到的，它使用ListView的ItemTemplateSelector属性来定义一些不同的项模板。

代码背后：

 using System.Collections; using System.Collections.Generic; using System.Collections.ObjectModel; using App82.Common; using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; namespace App82 { public sealed partial class MainPage : Page { public MainPage() { this.InitializeComponent(); var items = new ObservableCollection(); var item1 = new BasicItem { Title = "Item 1", Gist = "This item has some content that is not fully shown..." }; var item2 = new ExpandedItem { Title = "Item 2", Gist = "This item has some content that is not fully shown..." }; var item3 = new ExpandedItem { Title = "Item 3", Gist = "This item has some content that is not fully shown..." }; var item4 = new ExpandedItem { Title = "Item 4", Gist = "This item has some content that is not fully shown..." }; var item5 = new BasicItem { Title = "Item 5", Gist = "This item has some content that is not fully shown..." }; var itemGroup1 = new CollapsibleItem(items, new[] { item2, item3, item4 }); items.Add(item1); items.Add(itemGroup1); items.Add(item5); this.ListView.ItemsSource = items; } private void OnItemClick(object sender, ItemClickEventArgs e) { var collapsibleItem = e.ClickedItem as CollapsibleItem; if (collapsibleItem != null) collapsibleItem.ToggleCollapse(); } } public class CollapsibleListItemTemplateSelector : DataTemplateSelector { public DataTemplate BasicItemTemplate { get; set; } public DataTemplate CollapsibleItemTemplate { get; set; } public DataTemplate ExpandedItemTemplate { get; set; } protected override Windows.UI.Xaml.DataTemplate SelectTemplateCore(object item, Windows.UI.Xaml.DependencyObject container) { if (item is ExpandedItem) return ExpandedItemTemplate; if (item is BasicItem) return BasicItemTemplate; //if (item is CollapsibleItem) return CollapsibleItemTemplate; } } public class BasicItem : BindableBase { #region Title private string _title; public string Title { get { return _title; } set { this.SetProperty(ref _title, value); } } #endregion #region Gist private string _gist; public string Gist { get { return _gist; } set { this.SetProperty(ref _gist, value); } } #endregion } public class ExpandedItem : BasicItem { } public class CollapsibleItem : BindableBase { private readonly IList _hostCollection; #region IsExpanded private bool _isExpanded; public bool IsExpanded { get { return _isExpanded; } set { if (this.SetProperty(ref _isExpanded, value)) { if (_isExpanded) Expand(); else Collapse(); } } } #endregion #region ChildItems private ObservableCollection _childItems; public ObservableCollection ChildItems { get { return _childItems; } set { this.SetProperty(ref _childItems, value); } } #endregion public CollapsibleItem( IList hostCollection, IEnumerable childItems) { _hostCollection = hostCollection; _childItems = new ObservableCollection(childItems); } public void ToggleCollapse() { IsExpanded = !IsExpanded; } private void Expand() { int i = _hostCollection.IndexOf(this) + 1; foreach (var childItem in ChildItems) { _hostCollection.Insert(i++, childItem); } } private void Collapse() { int i = _hostCollection.IndexOf(this) + 1; for (int index = 0; index < ChildItems.Count; index++) { _hostCollection.RemoveAt(i); } } } }