SemanticZoom中的UWP GridView ItemTemplateSelector不适用

Question

在SemanticZoom控件中，我有一个GridView作为缩小视图。此GridView使用自定义DataTemplateSelector作为ItemTemplateSelector。DataTemplateSelector返回一个具有不同前景颜色的DataTemplate，这取决于组中是否包含任何项目。

但是，即使DataTemplateSelector看起来工作正常并返回正确的模板，但GridView只使用了一个模板，并且文本都是相同的颜色。

下面是GroupedListView的XAML：

<UserControl
    x:Class="GroupList.GroupList.GroupedListView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:GroupList.GroupList"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:data="using:GroupList.Model"
    xmlns:wuxdata="using:Windows.UI.Xaml.Data"
    mc:Ignorable="d">

    <UserControl.Resources>
        <!-- Use a collection view source for content that presents itself as a list of items that can be grouped or sorted.  Otherwise, you can use x:Bind
        directly on the ListView's item source to for further optimization. Please see the AppUIBasics sample for an example of how to do this.  -->
        <CollectionViewSource x:Name="ContactsCVS"  IsSourceGrouped="True" />

        <Style TargetType="TextBlock" x:Key="TileHeaderTextStyle" BasedOn="{StaticResource ProximaNovaSemiBold}">
            <Setter Property="FontSize" Value="54" />
            <Setter Property="Foreground" Value="White" />
            <Setter Property="FontWeight" Value="ExtraBold"/>
            <Setter Property="FontStretch" Value="Expanded" />
        </Style>

        <Style TargetType="TextBlock" x:Key="TileHeaderTextStyleGray" BasedOn="{StaticResource TileHeaderTextStyle}">
            <Setter Property="Foreground" Value="Khaki" />
        </Style>

        <!-- When using x:Bind, you need to set x:DataType -->
        <DataTemplate x:Name="ContactListViewTemplate" x:DataType="data:Contact">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Ellipse x:Name="Ellipse"
                         Grid.RowSpan="2"
                         Width ="32"
                         Height="32"
                         Margin="6"
                         VerticalAlignment="Center"
                         HorizontalAlignment="Center"
                         Fill="LightGray"/>
                <TextBlock Grid.Column="1"
                           Text="{x:Bind Name}" 
                           x:Phase="1"  
                           Style="{ThemeResource BaseTextBlockStyle}"
                           Margin="12,6,0,0"/>
                <TextBlock  Grid.Column="1"
                            Grid.Row="1"
                            Text="{x:Bind Position}" 
                            x:Phase="2"
                            Style="{ThemeResource BodyTextBlockStyle}"
                            Margin="12,0,0,6"/>
            </Grid>
        </DataTemplate>
        <DataTemplate x:Key="GrayZoomedOutTemplate" x:DataType="wuxdata:ICollectionViewGroup">
            <TextBlock Text="{x:Bind Group.(data:GroupInfoList.Key)}" Margin="0,0,0,5" Style="{StaticResource TileHeaderTextStyleGray}" />
        </DataTemplate>
        <DataTemplate x:Key="ZoomedOutTemplate" x:DataType="wuxdata:ICollectionViewGroup">
            <TextBlock Text="{x:Bind Group.(data:GroupInfoList.Key)}" Margin="0,0,0,5" Style="{StaticResource TileHeaderTextStyle}" />
        </DataTemplate>
        <local:GroupEmptyOrFullSelector x:Key="GroupEmptyOrFullSelector" Empty="{StaticResource GrayZoomedOutTemplate}" Full="{StaticResource ZoomedOutTemplate}" />
    </UserControl.Resources>
    <!--#region Navigation Panel -->
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <StackPanel Orientation="Vertical">
            <TextBlock Margin="15,0,0,0" Text="Paula's SemanticZoom Sandbox" Grid.Row="0"
                           VerticalAlignment="Center"
                           Style="{ThemeResource TitleTextBlockStyle}" />
            <Button x:Name="ZoomInOutBtn" Content="ABC↕" Click="ZoomInOutBtn_Click" Width="60" HorizontalAlignment="Center" BorderThickness="0" />
        </StackPanel>
        <!--#endregion-->
        <SemanticZoom x:Name="ZoomControl" Grid.Row="1">
            <SemanticZoom.ZoomedInView>
                <GridView ItemsSource="{x:Bind ContactsCVS.View}"
                          ItemTemplate="{StaticResource ContactListViewTemplate}"
                          SelectionMode="Single"
                          ShowsScrollingPlaceholders="True">

                    <GridView.GroupStyle>
                        <GroupStyle HidesIfEmpty="True">
                            <GroupStyle.HeaderTemplate>
                                <DataTemplate x:DataType="data:GroupInfoList">
                                    <TextBlock Text="{x:Bind Key}" 
                                               Style="{ThemeResource TitleTextBlockStyle}" />
                                </DataTemplate>
                            </GroupStyle.HeaderTemplate>
                        </GroupStyle>
                    </GridView.GroupStyle>
                </GridView>
            </SemanticZoom.ZoomedInView>
            <SemanticZoom.ZoomedOutView>
                <GridView ItemTemplateSelector="{StaticResource GroupEmptyOrFullSelector}" ScrollViewer.VerticalScrollBarVisibility="Disabled"  Margin="0, 200" Width="475" ItemsSource="{x:Bind ContactsCVS.View.CollectionGroups}" SelectionMode="None" >
                </GridView>
            </SemanticZoom.ZoomedOutView>
        </SemanticZoom>
    </Grid>
</UserControl>

下面是DataTemplateSelector：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.Foundation.Collections;
using GroupList.Model;

namespace GroupList.GroupList
{
    /// <summary>
    /// This determines whether or not the Group passed during binding is empty or not and allows selection
    /// of the proper DataTemplate based on this value.
    /// </summary>
    class GroupEmptyOrFullSelector : DataTemplateSelector
    {
        private DataTemplate _full;
        private DataTemplate _empty;
        public DataTemplate Full
        {
            set { _full = value; }
            get { return _full; }
        }
        public DataTemplate Empty
        {
            set { _empty = value; }
            get { return _empty; }
        }


        protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
        {

            var itemType = item.GetType();
            var isGroup = itemType.Name == "GroupInfoList";
            bool isEmpty = false;
            GroupInfoList groupItem;

            if (isGroup)
            {
                groupItem = item as GroupInfoList;
                isEmpty = groupItem.Count == 0;
            }

            // Disable empty items
            var selectorItem = container as SelectorItem;
            if (selectorItem != null)
            {
                selectorItem.IsEnabled = !isEmpty;
            }

            if (isEmpty)
            {
                return Empty;
            }
            else
            {
                return Full;
            }
        }
    }
}

Answer 1

所以，问题来了：

在DataTemplateSelector清单中，即使传递的“对象项”不是一个组，它也会受到模板选择逻辑的影响。有时，传递给你的函数的“对象”不是一个组对象，而是一个通用的DependencyObject。在这种情况下，您的模板选择逻辑需要返回一个默认模板，仅当"object item“是Group对象时才返回一个特定的模板。因此，新函数如下所示：

    protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
    {

        var itemType = item.GetType();
        var isGroup = itemType.Name == "GroupInfoList";
        bool isEmpty = false;
        GroupInfoList groupItem;

        if (isGroup)
        {
            groupItem = item as GroupInfoList;
            isEmpty = groupItem.Count == 0;

            // Disable empty items
            var selectorItem = container as SelectorItem;
            if (selectorItem != null)
            {
                selectorItem.IsEnabled = !isEmpty;
            }

            if (isEmpty)
            {
                return Empty;
            }
            else
            {
                return Full;
            }

        }

        return Full;

    }