背水一戰 Windows 10 (58) - 控制項（集合類）: ListViewBase

背水一戰 Windows 10 之控制項（集合類 - ListViewBase）: ListView, GridView ...

背水一戰 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
[源碼下載]