[UWP]了解模板化控件(8)：ItemsControl

原文:[UWP]了解模板化控件(8)：ItemsControl

1. 模仿ItemsControl

顾名思义，ItemsControl是展示一组数据的控件，它是UWP UI系统中最重要的控件之一，和展示单一数据的ContentControl构成了UWP UI的绝大部分，ComboBox，ListBox，ListView，FlipView，GridView等控件都继承自ItemsControl。曾经有个说法：了解ContentControl和ItemsControl才能算是了解WPF的控件，这一点在UWP中也是一样的。

以我的经验来说，通过继承ItemsControl来自定义模板化控件十分常见，了解ItemsControl对将来要自定义模板化控件十分有用。但ItemsControl的话题十分庞大，和ContentControl不同，不太适合在这里展开讨论，所以这里就只是稍微讨论核心的思想。

虽然ItemsControl及其派生类很复杂，但核心功能很简单，所以索性自己实现一次。这次用于讨论的SimpleItemsControl直接继承自Control，简单地模仿ItemsControl实现了它基本的功能，通过这个控件可以一窥ItemsControl的原理。在XAML中使用如下，基本上和ItemsControl一样：

<StackPanel Margin="20" HorizontalAlignment="Center"><local:SimpleItemsControl><ContentPresenter Content="this is ContentPresenter" /><Rectangle  Height="50"
                    HorizontalAlignment="Stretch"
                    Fill="Red" /><local:ScoreModel /></local:SimpleItemsControl><local:SimpleItemsControl Margin="0,20,0,0"><local:SimpleItemsControl.ItemTemplate><DataTemplate><TextBlock Text="{Binding Score}" /></DataTemplate></local:SimpleItemsControl.ItemTemplate><local:ScoreModel Score="70" /><local:ScoreModel Score="80" /><local:ScoreModel Score="90" /><local:ScoreModel Score="100" /></local:SimpleItemsControl>
</StackPanel>

SimpleItemsControl除了没有ItemsSource、ItemsPanelTemplate及虚拟化等功能等功能外，拥有ItemsControl基本的功能。

1.1 Items属性

public ICollection<object> Items{get;}

实现这个控件首要的是提供Items属性，Items在构造函数中实例化成ObservableCollection类型，并且订阅它的CollectionChanged事件。注意：TemplatedControl中的集合属性通常都被可以被实例化成O巴塞尔，以便监视事件。

var items = new ObservableCollection<object>();
items.CollectionChanged += OnItemsCollectionChanged;
Items = items;

当然，为了可以在XAML的子节点直接添加元素，别忘了使用ContentPropertyAttribute。

[ContentProperty(Name = "Items")]

1.2 ItemsPanel

在ItemsControl中，ControlTemplate包含一个ItemsPresenter，它根据ItemsControl的ItemsPanelTemplate生成一个Panel，并且把Items中各个元素放入这个Panel。

SimpleItemsControl由于不是继承自ItemsControl，所以直接在ControlTemplate中放一个StackPanel代替。

_itemsPanel = GetTemplateChild(ItemsPanelPartName) as Panel;


<Style TargetType="local:SimpleItemsControl"><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="local:SimpleItemsControl"><StackPanel Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"><StackPanel x:Name="ItemsPanel" /></StackPanel></ControlTemplate></Setter.Value></Setter>
</Style>

ControlTemplate中只需要一个用于承载Items的ItemsPanel。在这个例子中使用StackPanel。

1.3 ItemTemplate属性

接下来需要提供public DataTemplate ItemTemplate { get; set; }属性，它定义了Items中每一项数据如何显示。事实上Items中每一项通常都默认使用ContentControl或ContentPresenter显示（譬如ListBoxItem和ComboxItem），所以ItemTemplate相当于它们的ContentTemplate。熟悉ContentControl的话会更容易理解这个属性。

1.4 GetContainerForItemOverride

//
// 摘要:
//     创建或标识用于显示给定项的元素。
//
// 返回结果:
//     用于显示给定项的元素。
protected virtual DependencyObject GetContainerForItemOverride()
{return new ContentPresenter();
}

ItemsControl使用GetContainerForItemOverride函数为Items中每一个item创建它的容器用于在UI上显示，默认是ContentPresenter。对于不是派生自UIElement的Item，它们无法直接在UI上显示，所以Container是必须的。

1.5 IsItemItsOwnContainerOverride

//
// 摘要:
//     确定指定项是否是为自身的容器，或是否可以作为其自身的容器。
//
// 参数:
//   item:
//     要检查的项。
//
// 返回结果:
//     如果项是其自己的容器（或可以作为自己的容器），则为 true；否则为 false。
protected virtual System.Boolean IsItemItsOwnContainerOverride(System.Object item)
{return item is ContentPresenter;
}

对于Items中的每一个item，ItemsControl在为它创建容器前都用这个方法检查它是不是就是容器本身。譬如这段XAML：

<local:SimpleItemsControl><ContentPresenter Content="this is ContentPresenter" /><Rectangle  Height="50"
                Width="200"
                Fill="Red" /><local:ScoreModel />
</local:SimpleItemsControl>

在这段XAML中，ContentPresenter本身就是容器，所以它将直接被放到ItemsPanel中；Rectangle 不是容器，需要创建一个ContentPresenter，将Rectangle 设置为这个ContentPresenter的Content再放到ItemsPanel中。

1.6 PrepareContainerForItemOverride

//
// 摘要:
//     准备指定元素以显示指定项。
//
// 参数:
//   element:
//     用于显示指定项的元素。
//
//   item:
//     要显示的项。
protected virtual void PrepareContainerForItemOverride(DependencyObject element, System.Object item)
{ContentControl contentControl;ContentPresenter contentPresenter;if ((contentControl = element as ContentControl) != null){contentControl.Content = item;contentControl.ContentTemplate = ItemTemplate;}else if ((contentPresenter = element as ContentPresenter) != null){contentPresenter.Content = item;contentPresenter.ContentTemplate = ItemTemplate;}
}

这个方法在Item被呈现到UI前调用，目标是设定ContainerForItem中的某些值，譬如Content及ContentTemplate。其中参数element即之前创建的ContainerForItem（也有可能是Item自己）。在调用这个函数后ContainerForItem将被放到ItemsPanel中。

1.7 UpdateView

private void UpdateView()
{if (_itemsPanel == null)return;_itemsPanel.Children.Clear();foreach (var item in Items){DependencyObject container;if (IsItemItsOwnContainerOverride(item)){container = item as DependencyObject;}else{container = GetContainerForItemOverride();PrepareContainerForItemOverride(container, item);}if (container is UIElement)_itemsPanel.Children.Add(container as UIElement);}
}

这个函数在OnItemsCollectionChanged或OnApplyTemplate后调用，简单地将ItemsPanel.Children清空，然后将所有Item创建容器（或者不创建）然后放进ItemsPanel。实际上ItemsControl的逻辑要复杂很多，这里只是个极端简化的版本。

到这一步一个简单的ItemsControl就完成了，总共只有100多行代码。

看到这里可能会有个疑惑，GetContainerForItemOverride、IsItemItsOwnContainerOverride、PrepareContainerForItemOverride三个函数明明做的是同一件事（为Item创建Container），为什么要将它们分开？这是因为ItemsControl支持使用UI虚拟化技术。

假设Items中包含一万个项，为这一万个项创建容器并放到ItemsPanel上，将会造成巨大的内存消耗。而且拖动ItemsControl的滚动条时由于要将所有一万个容器同时移动，对CPU造成很大的负担。UI虚拟化就是为了解决这两个问题。通常一个ItemsControl能同时显示的Item最多几十个，ItemsControl就只是创建几十个容器，在拖动滚动条时回收移出可视范围的容器，更改容器的内容（因为容器通常是ContentControl，所以就是更改ContentControl.Content），再重新放到可视范围里面。为了实现这个技术，Item和它的Container就不能是一一对应的，所以才会把上述的三个函数分离。

注意: UWP中ItemsControl默认没有启用UI虚拟化，但它的派生类有。

1.8 完整的代码

[TemplatePart(Name = ItemsPanelPartName, Type = typeof(Panel))]
[ContentProperty(Name = "Items")]
public class SimpleItemsControl : Control
{private const string ItemsPanelPartName = "ItemsPanel";public SimpleItemsControl(){this.DefaultStyleKey = typeof(SimpleItemsControl);var items = new ObservableCollection<object>();items.CollectionChanged += OnItemsCollectionChanged;Items = items;}/// <summary>/// 获取或设置ItemTemplate的值/// </summary>  public DataTemplate ItemTemplate{get { return (DataTemplate)GetValue(ItemTemplateProperty); }set { SetValue(ItemTemplateProperty, value); }}/// <summary>/// 标识 ItemTemplate 依赖属性。/// </summary>public static readonly DependencyProperty ItemTemplateProperty =DependencyProperty.Register("ItemTemplate", typeof(DataTemplate), typeof(SimpleItemsControl), new PropertyMetadata(null, OnItemTemplateChanged));private static void OnItemTemplateChanged(DependencyObject obj, DependencyPropertyChangedEventArgs args){SimpleItemsControl target = obj as SimpleItemsControl;DataTemplate oldValue = (DataTemplate)args.OldValue;DataTemplate newValue = (DataTemplate)args.NewValue;if (oldValue != newValue)target.OnItemTemplateChanged(oldValue, newValue);}protected virtual void OnItemTemplateChanged(DataTemplate oldValue, DataTemplate newValue){UpdateView();}public ICollection<object> Items{get;}private Panel _itemsPanel;protected override void OnApplyTemplate(){base.OnApplyTemplate();_itemsPanel = GetTemplateChild(ItemsPanelPartName) as Panel;UpdateView();}private void OnItemsCollectionChanged(object sender, NotifyCollectionChangedEventArgs e){UpdateView();}//// 摘要://     创建或标识用于显示给定项的元素。//// 返回结果://     用于显示给定项的元素。protected virtual DependencyObject GetContainerForItemOverride(){return new ContentPresenter();}//// 摘要://     确定指定项是否是为自身的容器，或是否可以作为其自身的容器。//// 参数://   item://     要检查的项。//// 返回结果://     如果项是其自己的容器（或可以作为自己的容器），则为 true；否则为 false。protected virtual System.Boolean IsItemItsOwnContainerOverride(System.Object item){return item is ContentPresenter;}//// 摘要://     准备指定元素以显示指定项。//// 参数://   element://     用于显示指定项的元素。////   item://     要显示的项。protected virtual void PrepareContainerForItemOverride(DependencyObject element, System.Object item){ContentControl contentControl;ContentPresenter contentPresenter;if ((contentControl = element as ContentControl) != null){contentControl.Content = item;contentControl.ContentTemplate = ItemTemplate;}else if ((contentPresenter = element as ContentPresenter) != null){contentPresenter.Content = item;contentPresenter.ContentTemplate = ItemTemplate;}}private void UpdateView(){if (_itemsPanel == null)return;_itemsPanel.Children.Clear();foreach (var item in Items){DependencyObject container;if (IsItemItsOwnContainerOverride(item)){container = item as DependencyObject;}else{container = GetContainerForItemOverride();PrepareContainerForItemOverride(container, item);}if (container is UIElement)_itemsPanel.Children.Add(container as UIElement);}}
}

2. 扩展ItemsControl

了解过ItemsControl的原理，或通过继承ItemsControl自定义控件就很简单了。譬如要实现这个功能：一个事件列表，自动为事件添加上触发的时间。效果如下：

通过重载GetContainerForItemOverride、IsItemItsOwnContainerOverride、PrepareContainerForItemOverride这三个函数，很简单就能实现这个需求：

public class EventListView : ListView
{public EventListView(){_items = new Dictionary<object, DateTime>();}private Dictionary<object, DateTime> _items;protected override DependencyObject GetContainerForItemOverride(){return new HeaderedContentControl();}protected override bool IsItemItsOwnContainerOverride(object item){return item is HeaderedContentControl;}protected override void PrepareContainerForItemOverride(DependencyObject element, object item){base.PrepareContainerForItemOverride(element, item);var control = element as HeaderedContentControl;control.Content = item;if (_items.ContainsKey(item)){var time = _items[item];control.Header = time.ToString("HH:mm:ss")+": ";}}protected override void OnItemsChanged(object e){base.OnItemsChanged(e);foreach (var item in Items){if (_items.ContainsKey(item) == false)_items.Add(item, DateTime.Now);}}
}

public sealed class EventListViewItem : ListViewItem
{public EventListViewItem(){this.DefaultStyleKey = typeof(EventListViewItem);}public object Header{get { return (object)GetValue(HeaderProperty); }set { SetValue(HeaderProperty, value); }}// Using a DependencyProperty as the backing store for Header.  This enables animation, styling, binding, etc...public static readonly DependencyProperty HeaderProperty =DependencyProperty.Register("Header", typeof(object), typeof(EventListViewItem), new PropertyMetadata(null));}

3. 集合类型属性

在XAML中使用集合类型属性，通常不会这样：

<ItemsControl><ItemsControl.Items><ItemCollection><local:ScoreModel Score="70" /><local:ScoreModel Score="80" /><local:ScoreModel Score="90" /><local:ScoreModel Score="100" /></ItemCollection></ItemsControl.Items>
</ItemsControl>

而是这样：

<ItemsControl><ItemsControl.Items><local:ScoreModel Score="70" /><local:ScoreModel Score="80" /><local:ScoreModel Score="90" /><local:ScoreModel Score="100" /></ItemsControl.Items>
</ItemsControl>

因为集合类型属性通常定义为只读的，不必也不可以对它赋值，只可以向它添加内容。

控件中的集合属性一般遵循以下做法：

3.1 只读属性

public IList<HubSection> Sections { get; }

这是Hub的Section属性，模板化控件中的集合类型属性基本都定义成这样的CLR属性。

3.2 监视更改通知

如果需要监视集合项更改，可以将属性定义为继承INotifyCollectionChanged 自的集合类型，譬如 ObservableCollection。

3.3 不使用依赖属性

因为集合属性通常不会使用动画，或者通过Style中的Setter赋值，而且依赖属性标识符是静态的，集合属性的初始值有可能引起单例的问题。集合属性通常在构造函数中初始化。

3.4 绑定到集合属性

通常不会绑定到集合属性，更常见的做法是如ItemsControl那样，绑定到ItemsSource。

posted on 2018-01-25 23:48 NET未来之路阅读(...) 评论(...) 编辑收藏

转载于:https://www.cnblogs.com/lonelyxmas/p/8353745.html