在WinRT中ListView的项目插入动画(ListView's item insert

2019-08-05 03:10发布

最近,我开始建设自己的大的Windows 8 Store应用。 工作UI我开始复制一些很好的用户界面。

一个我遇到插入在标准的邮件应用程序列表视图中的新元素非常有趣的动画。 当你点击IT连锁展开并显示在链上的所有信息。

这里是拍摄的视频。

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

谁能帮我解释或者给的例子,我如何能实现这样的行为? 谢谢。

Answer 1:

邮件应用程序是用JavaScript编写的,所以它不会帮助你多少知道它是怎么做,因为这UI栈比XAML一个很大的不同。 事情虽然是列表控件动画可能以同样的方式,所以你只需要在列表中添加/删除一些项目得到扩展/折叠效果。

我打了它一下,这是我想出了一个使用ListView的ItemTemplateSelector属性定义了几个不同的项目模板。

<Page
    x:Class="App82.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App82"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Page.Resources>
        <local:CollapsibleListItemTemplateSelector
            x:Key="collapsibleListItemTemplateSelector">
            <local:CollapsibleListItemTemplateSelector.BasicItemTemplate>
                <DataTemplate>
                    <Border
                        Margin="5"
                        Height="50"
                        VerticalAlignment="Stretch"
                        BorderBrush="ForestGreen"
                        BorderThickness="2,0,0,0">
                        <StackPanel
                            Margin="10,0,0,0">
                            <TextBlock
                                FontWeight="Bold"
                                Text="{Binding Title}" />
                            <TextBlock
                                Text="{Binding Gist}" />
                        </StackPanel>
                    </Border>
                </DataTemplate>
            </local:CollapsibleListItemTemplateSelector.BasicItemTemplate>
            <local:CollapsibleListItemTemplateSelector.ExpandedItemTemplate>
                <DataTemplate>
                    <Border
                        Margin="15,5,5,5"
                        Height="50"
                        VerticalAlignment="Stretch"
                        BorderBrush="Yellow"
                        BorderThickness="2,0,0,0">
                        <StackPanel
                            Margin="10,0,0,0">
                            <TextBlock
                                FontWeight="Bold"
                                Text="{Binding Title}" />
                            <TextBlock
                                Text="{Binding Gist}" />
                        </StackPanel>
                    </Border>
                </DataTemplate>
            </local:CollapsibleListItemTemplateSelector.ExpandedItemTemplate>
            <local:CollapsibleListItemTemplateSelector.CollapsibleItemTemplate>
                <DataTemplate>
                    <Border
                        Margin="5"
                        Height="50"
                        VerticalAlignment="Stretch"
                        BorderBrush="DodgerBlue"
                        BorderThickness="2,0,0,0">
                        <StackPanel
                            Margin="10,0,0,0"
                            Orientation="Horizontal">
                            <TextBlock
                                FontWeight="Bold"
                                Text="{Binding ChildItems.Count}" />
                            <TextBlock
                                FontWeight="Bold"
                                Text="&#160;Items" />
                        </StackPanel>
                    </Border>
                </DataTemplate>
            </local:CollapsibleListItemTemplateSelector.CollapsibleItemTemplate>
        </local:CollapsibleListItemTemplateSelector>
    </Page.Resources>
    <Grid
        Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <ListView
            x:Name="ListView"
            ItemTemplateSelector="{StaticResource collapsibleListItemTemplateSelector}"
            ItemClick="OnItemClick"
            IsItemClickEnabled="True" />
    </Grid>
</Page>

后面的代码:

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<BindableBase>();
            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<BasicItem> _childItems;
        public ObservableCollection<BasicItem> ChildItems
        {
            get { return _childItems; }
            set { this.SetProperty(ref _childItems, value); }
        }
        #endregion

        public CollapsibleItem(
            IList hostCollection,
            IEnumerable<BasicItem> childItems)
        {
            _hostCollection = hostCollection;
            _childItems = new ObservableCollection<BasicItem>(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);
            }
        }
    }
}


文章来源: ListView's item insert animations in WinRT