Extensions in UWP Community Toolkit - ListViewExtensions

概述

UWP Community Toolkit Extensions 中有一个为 ListView 提供的扩展 - ListViewExtensions,本篇我们结合代码详细讲解 ListView Extensions 的实现。

ListViewExtensions 为每一种继承了 ListViewBase 类的控件提供了一种轻量级的方式来扩展它的附加属性。目前扩展的附加属性有 AlternateColor、AlternateItemTemplate 和 StretchItemContainerDirection;需要注意的是,扩展使用 ContainerContentChanging 事件来保证工作,如果控件的 ItemsPanel 被设置为 ItemsStackPanel 或 ItemsWrapGrid,那么扩展将不能正常工作。另外 StretchItemContainerDirection 有 Horizontal、Vertical 和 Both 三个选项。我们来看官方示例截图:

Source: https://github.com/Microsoft/UWPCommunityToolkit/tree/master/Microsoft.Toolkit.Uwp.UI/Extensions/ListViewBase

Doc: https://docs.microsoft.com/zh-cn/windows/uwpcommunitytoolkit/extensions/listviewextensions

Namespace: Microsoft.Toolkit.Uwp.UI.Extensions; Nuget: Microsoft.Toolkit.Uwp.UI;

开发过程

代码分析

首先来看 ListView Extension - ListViewBase 的类结构:

  • ListViewBase.Data.cs -  ListViewBase 部分类中 StretchDirection 的定义,枚举类型,有 Horizontal,Vertical 和 Both 三种类型;
  • ListViewBase.Properties.cs - 已标记为 Obsolete,被 ListViewExtensions 替代;
  • ListViewBase.cs - ListViewBase 部分类中负责事件响应处理逻辑的定义;
  • ListViewBaseExtensions.cs - 已标记为 Obsolete,被 ListViewBase 替代;
  • ListViewExtensions.cs - ListView Extension 的依赖属性定义和事件处理逻辑定义;
  • StretchDirection.cs - StretchDirection 的定义,枚举类型,有 Horizontal,Vertical 和 Both 三种类型;

首先来看 ListViewBase.cs 类,类中定义了 4 个PropertyChanged 事件处理方法:

  • OnCommandPropertyChanged(sender, args) - 重新为 listViewBase 绑定 OnItemClicked 事件;
  • OnAlternateColorPropertyChanged(sender, args) - 重新为 listViewBase 绑定 ColorContainerContentChanging 事件;
  • OnAlternateItemTemplatePropertyChanged(sender, args) - 重新为 listViewBase 绑定 ItemTemplateContainerContentChanging 事件;
  • ItemTemplateContainerContentChanging(sender, args) -  重新为 listViewBase 绑定 StretchItemContainerDirectionChanging 事件;

主要看一下后面三个事件的处理方法:

① ColorContainerContentChanging(sender, args): 

获取当前 sender 在 container 中的索引,根据索引的奇偶数来判断,偶数则设置背景为 AlternateColor,奇数则设置背景为空;

private static void ColorContainerContentChanging(Windows.UI.Xaml.Controls.ListViewBase sender, ContainerContentChangingEventArgs args)
{
    var itemContainer = args.ItemContainer as SelectorItem;
    var itemIndex = sender.IndexFromContainer(itemContainer);

    if (itemIndex % 2 == 0)
    {
        itemContainer.Background = GetAlternateColor(sender);
    }
    else
    {
        itemContainer.Background = null;
    }
}

② ItemTemplateContainerContentChanging(sender, args): 

同样获取当前 sender 在 container 中的索引,根据索引的奇偶数来判断,偶数则设置内容模板为 AlternateItemTemplate,奇数则设置为 sender 的元素模板;

private static void ItemTemplateContainerContentChanging(Windows.UI.Xaml.Controls.ListViewBase sender, ContainerContentChangingEventArgs args)
{
    var itemContainer = args.ItemContainer as SelectorItem;
    var itemIndex = sender.IndexFromContainer(itemContainer);

    if (itemIndex % 2 == 0)
    {
        itemContainer.ContentTemplate = GetAlternateItemTemplate(sender);
    }
    else
    {
        itemContainer.ContentTemplate = sender.ItemTemplate;
    }
}

以上两个方法,主要处理就是自定义 ListView 奇偶数元素不同的背景色和元素模板;

③ StretchItemContainerDirectionChanging(sender, args): 

获取当前 sender 的 stretchDirection,如果为 Vertical 或 Both,则 container 的纵向内容对齐设置为 Stretch;如果为 Horizontal 或 Both,则 container 的横向内容对齐设置为 Stretch;

private static void StretchItemContainerDirectionChanging(Windows.UI.Xaml.Controls.ListViewBase sender, ContainerContentChangingEventArgs args)
{
    var itemContainer = args.ItemContainer as SelectorItem;
    var stretchDirection = GetStretchItemContainerDirection(sender);

    if (stretchDirection == StretchDirection.Vertical || stretchDirection == StretchDirection.Both)
    {
        itemContainer.VerticalContentAlignment = VerticalAlignment.Stretch;
    }

    if (stretchDirection == StretchDirection.Horizontal || stretchDirection == StretchDirection.Both)
    {
        itemContainer.HorizontalContentAlignment = HorizontalAlignment.Stretch;
    }
}

接下来看 ListViewExtensions 类,首先来看类中定义的依赖属性:

  • AlternateColor - ListView 的备用颜色画刷,改变时触发 OnAlternateColorPropertyChanged 事件;
  • AlternateItemTemplate - ListView 的备用元素模板,改变时触发 OnAlternateItemTemplatePropertyChanged 事件;
  • StretchItemContainerDirection - 拉伸元素容器方向,改变时触发 OnStretchItemContainerDirectionPropertyChanged 事件;

来看这三个事件的处理逻辑:

① OnAlternateColorPropertyChanged(sender, args):

分别重新绑定 ColorContainerContentChanging、ColorItemsVectorChanged 和 OnListViewBaseUnloaded 事件;其中主要处理在 ColorItemsVectorChanged 中;

private static void OnAlternateColorPropertyChanged(DependencyObject sender, DependencyPropertyChangedEventArgs args)
{
    Windows.UI.Xaml.Controls.ListViewBase listViewBase = sender as Windows.UI.Xaml.Controls.ListViewBase;

    if (listViewBase == null)
    {
        return;
    }

    listViewBase.ContainerContentChanging -= ColorContainerContentChanging;
    listViewBase.Items.VectorChanged -= ColorItemsVectorChanged;
    listViewBase.Unloaded -= OnListViewBaseUnloaded;

    _itemsForList[listViewBase.Items] = listViewBase;
    if (AlternateColorProperty != null)
    {
        listViewBase.ContainerContentChanging += ColorContainerContentChanging;
        listViewBase.Items.VectorChanged += ColorItemsVectorChanged;
        listViewBase.Unloaded += OnListViewBaseUnloaded;
    }
}

ColorItemsVectorChanged(sender, args) 方法对于 ColorContainerContentChanging 方法中未处理的 Insert 和 Remove 场景做处理,获取当前的 ListViewBase,遍历每个元素,为元素容器设置背景,依据是元素的索引;ColorContainerContentChanging 方法的处理同样是根据元素的索引奇偶数来设置背景;

private static void ColorItemsVectorChanged(IObservableVector<object> sender, IVectorChangedEventArgs args)
{
    // If the index is at the end we can ignore
    if (args.Index == (sender.Count - 1)) { return; }

    // Only need to handle Inserted and Removed because we'll handle everything else in the
    // ColorContainerContentChanging method
    if ((args.CollectionChange == CollectionChange.ItemInserted) || (args.CollectionChange == CollectionChange.ItemRemoved))
    {
        _itemsForList.TryGetValue(sender, out Windows.UI.Xaml.Controls.ListViewBase listViewBase);
        if (listViewBase == null) { return; }

        int index = (int)args.Index;
        for (int i = index; i < sender.Count; i++)
        {
            var itemContainer = listViewBase.ContainerFromIndex(i) as Control;
            if (itemContainer != null)
            {
                SetItemContainerBackground(listViewBase, itemContainer, i);
            }
        }
    }
}

② OnAlternateItemTemplatePropertyChanged(sender, args):

分别重新绑定 ItemTemplateContainerContentChanging 和 OnListViewBaseUnloaded 事件,处理主要是根据元素的索引的奇偶数,设置元素模板;  

private static void OnAlternateItemTemplatePropertyChanged(DependencyObject sender, DependencyPropertyChangedEventArgs args)
{
    Windows.UI.Xaml.Controls.ListViewBase listViewBase = sender as Windows.UI.Xaml.Controls.ListViewBase;

    if (listViewBase == null)
    {
        return;
    }

    listViewBase.ContainerContentChanging -= ItemTemplateContainerContentChanging;
    listViewBase.Unloaded -= OnListViewBaseUnloaded;

    if (AlternateItemTemplateProperty != null)
    {
        listViewBase.ContainerContentChanging += ItemTemplateContainerContentChanging;
        listViewBase.Unloaded += OnListViewBaseUnloaded;
    }
}

③ OnStretchItemContainerDirectionPropertyChanged(sender, args):

分别重新绑定 StretchItemContainerDirectionChanging 和 OnListViewBaseUnloaded 事件,处理是获取当前 itemContainer 的 stretchDirection,如果为 Vertical 或 Both,则 container 的纵向内容对齐设置为 Stretch;如果为 Horizontal 或 Both,则 container 的横向内容对齐设置为 Stretch;

private static void OnStretchItemContainerDirectionPropertyChanged(DependencyObject sender, DependencyPropertyChangedEventArgs args)
{
    Windows.UI.Xaml.Controls.ListViewBase listViewBase = sender as Windows.UI.Xaml.Controls.ListViewBase;

    if (listViewBase == null)
    {
        return;
    }

    listViewBase.ContainerContentChanging -= StretchItemContainerDirectionChanging;
    listViewBase.Unloaded -= OnListViewBaseUnloaded;

    if (StretchItemContainerDirectionProperty != null)
    {
        listViewBase.ContainerContentChanging += StretchItemContainerDirectionChanging;
        listViewBase.Unloaded += OnListViewBaseUnloaded;
    }
}

调用示例

我们把 AlternateColor 设置为浅灰色,AlternateItemTemplate 中的文字前景色设置为橙色,StretchItemContainerDirection 设置为 Both;可以看到运行显示中 test01 test03 这些元素的显示和设置是一致的。

<Page.Resources>
    <DataTemplate x:Name="NormalTemplate">
        <TextBlock Text="{Binding Title}" Foreground="Green"></TextBlock>
    </DataTemplate>
    <DataTemplate x:Name="AlternateTemplate">
        <TextBlock Text="{Binding Title}" Foreground="Orange"></TextBlock>
    </DataTemplate>
</Page.Resources>

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <ListView x:Name="SampleListView" Margin="12"
                    ItemTemplate="{StaticResource NormalTemplate}"
                    extensions:ListViewExtensions.AlternateColor="LightGray"
                    extensions:ListViewExtensions.AlternateItemTemplate="{StaticResource AlternateTemplate}"
                    extensions:ListViewExtensions.StretchItemContainerDirection="Both">
    </ListView>
</Grid>

总结

到这里我们就把 UWP Community Toolkit Extensions 中的 ListViewExtensions 的源代码实现过程和简单的调用示例讲解完成了,希望能对大家更好的理解和使用这个扩展有所帮助。欢迎大家多多交流,谢谢!

最后,再跟大家安利一下 UWPCommunityToolkit 的官方微博:https://weibo.com/u/6506046490大家可以通过微博关注最新动态。

衷心感谢 UWPCommunityToolkit 的作者们杰出的工作,Thank you so much, UWPCommunityToolkit authors!!!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏林德熙的博客

win10 uwp 渲染原理 DirectComposition 渲染 例子创建工程如何写显示CompositionSurfaceBrush

本文来告诉大家一个新的技术DirectComposition,在 win7 之后(实际上是 vista),微软正在考虑一个新的渲染机制。

2271
来自专栏我和未来有约会

建立可扩展的silverlight 应用框架 step-6

整理导航模块“LeftNav” 首先说一下我想要实现的效果。 我希望在左侧的导航点击了以后右侧的主体部分发声变化。 之前我在LeftNav模块用的控件是Togg...

21310
来自专栏james大数据架构

.net页面生命周期

.net页面生命周期 (1)Page_Init();---初始化对象 这一过程主要是初始化包括页面本身的所有控件,每次的页面载入就会执行一次初试过程,而在这里面...

1897
来自专栏Windows Community

Extensions in UWP Community Toolkit - Overview

概述 UWP Community Toolkit  中有一个 Extensions 的集合,它们可以帮助开发者实现很多基础功能,省去自己造轮子的过程,本篇我们先...

38812
来自专栏Golang语言社区

厚土Go学习笔记 | 14. switch 的条件写的有点灵活,不过风格还是go的一贯风格

switch是很容易理解的,先来个代码,运行起来,看看你的操作系统是什么吧。 package main import ( "fmt" "run...

3649
来自专栏行者常至

014.golang 并发concurrency

1094
来自专栏james大数据架构

在ASPNET中使用JS集锦

(一).确认删除用法: 1. BtnDel.Attributes.Add("onclick","return confirm('"+"确认删除?"+"')")...

2197
来自专栏iOSer成长记录

AlamofireImage 源码阅读

3326
来自专栏吴老师移动开发

[Flutter]一些常用操作(持续更新...)

给Container添加一个点击隐藏子widget TextField隐藏键盘的操作,加上去后发现没有用,点击空白处并不能收起键盘。给container添加一个...

7031
来自专栏瞎说开发那些事

RPA解决网页元素随机变化的问题

2086

扫码关注云+社区

领取腾讯云代金券