背水一战 Windows 10 (58)

[源码下载]

背水一战 Windows 10 (58) - 控件（集合类）: ListViewBase - ListView, GridView

作者：webabcd


介绍
背水一战 Windows 10 之 控件（集合类 - ListViewBase）

• ListView
• GridView

示例
1、ListView 的示例
Controls/CollectionControl/ListViewBaseDemo/ListViewDemo.xaml

<Page
    x:Class="Windows10.Controls.CollectionControl.ListViewDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Windows10.Controls.CollectionControl"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"

    xmlns:common="using:Windows10.Common">

    <Page.Resources>
        <Style x:Key="ListViewItemStyle" TargetType="ListViewItem">
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListViewItem">
                        <!--
                            ListViewItemPresenter - ListViewItem 的 Presenter（继承自 ContentPresenter, 请参见 /Controls/BaseControl/ContentControlDemo/ContentPresenterDemo.xaml）
                                有好多属性，详见文档
                                默认样式就是 generic.xaml 中的 <Style TargetType="ListViewItem"> 节点
                                如果需要自定义的话，那么就在 generic.xaml 中的 <Style TargetType="ListViewItem" x:Key="ListViewItemExpanded"> 节点的基础上修改
                                如果还不能满足要求的话就通过继承 ContentPresenter 来实现自定义的 ContentPresenter
                        -->
                        <!--
                            此处的 TemplatedParent 是 ListViewItem
                            这里借用 Tag 保存一下 ListViewItem 的 IsSelected，之后的数据模板可以绑定 ListViewItemPresenter 的 Tag，从而实现数据模板间接绑定 ListViewItem 的 IsSelected
                            此处通过 Tag 属性做中转，如果 Tag 有别的用处的话，那么就自己写个附加属性做中转吧
                        -->
                        <ListViewItemPresenter Margin="10" SelectedBackground="Red" SelectedPointerOverBackground="Red"
                                               Tag="{Binding IsSelected, RelativeSource={RelativeSource Mode=TemplatedParent}, Mode=TwoWay}" />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <common:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
    </Page.Resources>

    <Grid Background="Transparent">

        <!--
            ListView - ListView 控件（继承自 ListViewBase, 请参见 /Controls/CollectionControl/ListViewBaseDemo/）
                ListView 的默认布局控件是 ItemsStackPanel，请参见 /Controls/CollectionControl/ItemsControlDemo/LayoutControl/ItemsStackPanelDemo.xaml
                ListView 的 ItemContainer 是 ListViewItem
        -->

        <ListView x:Name="listView" Margin="10 0 10 10" 
                  ItemContainerStyle="{StaticResource ListViewItemStyle}"
                  SelectionMode="Multiple"
                  ItemsSource="{x:Bind Employees}">
            <ListView.ItemTemplate>
                <DataTemplate x:DataType="common:Employee">
                    <StackPanel Height="100" Width="100" Background="Blue">
                        <TextBlock x:Name="lblName" Text="{x:Bind Name}" />
                        <TextBlock x:Name="lblIsMale" Text="{x:Bind IsMale}" />
                        <!--
                            这里有个需求：当 ListViewItem 的 IsSelected 为 true 时显示，反之则不显示
                            此处的 TemplatedParent 是 ListViewItemPresenter，而不是 ListViewItem，所以需要 ListViewItemPresenter 中转一下（ListViewItemPresenter 的 TemplatedParent 是 ListViewItem）
                            此处通过 Tag 属性做中转，如果 Tag 有别的用处的话，那么就自己写个附加属性做中转吧
                        
                            如果以后 uwp 支持了 FindAncestor 的话，就可以不用中转了，直接这样写就行了
                            {Binding Path=IsSelected, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListViewItem}}}
                        -->
                        <TextBlock x:Name="lblAge" Text="{x:Bind Age}" 
                                   Visibility="{Binding Path=Tag, RelativeSource={RelativeSource Mode=TemplatedParent}, Converter={StaticResource BooleanToVisibilityConverter}}" />
                    </StackPanel>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>


        <!--
            通过 xaml 方式为 ListView 添加 item
            <ListView>
                <ListViewItem>
                    <TextBlock Text="item1"/>
                </ListViewItem>
                <ListViewItem>
                    <TextBlock Text="item2"/>
                </ListViewItem>
                <ListViewItem>
                    <TextBlock Text="item3"/>
                </ListViewItem>
            </ListView>
        -->

    </Grid>
</Page>

Controls/CollectionControl/ListViewBaseDemo/ListViewDemo.xaml.cs

/*
 * ListView - ListView 控件（继承自 ListViewBase, 请参见 /Controls/CollectionControl/ListViewBaseDemo/）
 */

using System.Collections.ObjectModel;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows10.Common;

namespace Windows10.Controls.CollectionControl
{
    public sealed partial class ListViewDemo : Page
    {
        public ObservableCollection<Employee> Employees { get; set; } = new ObservableCollection<Employee>(TestData.GetEmployees());

        public ListViewDemo()
        {
            this.InitializeComponent();
        }
    }
}

2、GridView 的示例
Controls/CollectionControl/ListViewBaseDemo/GridViewDemo.xaml

<Page
    x:Class="Windows10.Controls.CollectionControl.GridViewDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Windows10.Controls.CollectionControl"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    
    xmlns:common="using:Windows10.Common">

    <Page.Resources>
        <Style x:Key="GridViewItemStyle" TargetType="GridViewItem">
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="GridViewItem">
                        <!--
                            ListViewItemPresenter - GridViewItem 的 Presenter（继承自 ContentPresenter, 请参见 /Controls/BaseControl/ContentControlDemo/ContentPresenterDemo.xaml）
                                默认样式就是 generic.xaml 中的 <Style TargetType="GridViewItem"> 节点
                                如果需要自定义的话，那么就在 generic.xaml 中的 <Style TargetType="GridViewItem" x:Key="GridViewItemExpanded"> 节点的基础上修改
                                如果还不能满足要求的话就通过继承 ContentPresenter 来实现自定义的 ContentPresenter
                        -->
                        <ListViewItemPresenter Margin="10" SelectionCheckMarkVisualEnabled="True" SelectedBackground="Red" CheckBrush="Yellow" />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Page.Resources>

    <Grid Background="Transparent">

        <!--
            GridView - GridView 控件（继承自 ListViewBase, 请参见 /Controls/CollectionControl/ListViewBaseDemo/）
                GridView 的默认布局控件是 ItemsWrapGrid，请参见 /Controls/CollectionControl/ItemsControlDemo/LayoutControl/ItemsWrapGridDemo.xaml
                GridView 的 ItemContainer 是 GridViewItem
        -->

        <GridView x:Name="gridView" Margin="10 0 10 10" 
                  ItemContainerStyle="{StaticResource GridViewItemStyle}"
                  SelectionMode="Multiple"
                  ItemsSource="{x:Bind Employees}">
            <GridView.ItemTemplate>
                <DataTemplate x:DataType="common:Employee">
                    <StackPanel Height="100" Width="100" Background="Blue">
                        <TextBlock x:Name="lblName" Text="{x:Bind Name}" Foreground="Yellow" />
                        <TextBlock x:Name="lblAge" Text="{x:Bind Age}" Foreground="Aqua" />
                        <TextBlock x:Name="lblIsMale" Text="{x:Bind IsMale}" Foreground="Gray" />
                    </StackPanel>
                </DataTemplate>
            </GridView.ItemTemplate>
        </GridView>

        
        <!--
            通过 xaml 方式为 GridView 添加 item
            <GridView>
                <GridViewItem>
                    <TextBlock Text="item1"/>
                </GridViewItem>
                <GridViewItem>
                    <TextBlock Text="item2"/>
                </GridViewItem>
                <GridViewItem>
                    <TextBlock Text="item3"/>
                </GridViewItem>
            </GridView>
        -->
        
    </Grid>
</Page>

Controls/CollectionControl/ListViewBaseDemo/GridViewDemo.xaml.cs

/*
 * GridView - GridView 控件（继承自 ListViewBase, 请参见 /Controls/CollectionControl/ListViewBaseDemo/）
 */

using System.Collections.ObjectModel;
using Windows.UI.Xaml.Controls;
using Windows10.Common;

namespace Windows10.Controls.CollectionControl
{
    public sealed partial class GridViewDemo : Page
    {
        public ObservableCollection<Employee> Employees { get; set; } = new ObservableCollection<Employee>(TestData.GetEmployees());

        public GridViewDemo()
        {            
            this.InitializeComponent();
        }
    }
}

OK
[源码下载]