C# SemanticZoom中的ZoomeOutView不工作

我的应用程序中有不同的

DataTemplate

s，它们对应于不同的

VisualStates

，并在页面中显示数据

以下是MainPage.xaml页面：

<Page.Resources>
    <DataTemplate x:Key="CustomListItemTemplate"
                  x:DataType="data:ItemsClass">
        <UserControl>
            <RelativePanel>
                <Image Name="itemImage"
                       Stretch="UniformToFill"
                       Source="{x:Bind ItemImage, Mode=OneWay}"/>
                <TextBlock Name="itemTitle"
                           TextTrimming="CharacterEllipsis"
                           Text="{x:Bind ItemName, Mode=OneWay}"/>
                <TextBlock Name="itemSpecies"
                           FontStyle="Italic"
                           TextTrimming="CharacterEllipsis"
                           Text="{x:Bind SpeciesName, Mode=OneWay}"/>

                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup>
                        <VisualState>
                            <VisualState.StateTriggers>
                                <AdaptiveTrigger MinWindowWidth="0"/>
                            </VisualState.StateTriggers>
                            <VisualState.Setters>
                                <Setter Target="itemImage.Width"
                                        Value="60"/>
                                <Setter Target="itemImage.Height"
                                        Value="60"/>
                                <Setter Target="itemImage.(RelativePanel.AlignLeftWithPanel)"
                                        Value="True"/>

                                <Setter Target="itemTitle.(RelativePanel.RightOf)"
                                        Value="itemImage"/>
                                <Setter Target="itemTitle.Margin"
                                        Value="10,0"/>
                                <Setter Target="itemTitle.Style"
                                        Value="{StaticResource BaseTextBlockStyle}"/>

                                <Setter Target="itemSpecies.(RelativePanel.RightOf)"
                                        Value="itemImage"/>
                                <Setter Target="itemSpecies.Margin"
                                        Value="10,5"/>
                                <Setter Target="itemSpecies.(RelativePanel.Below)"
                                        Value="itemTitle"/>
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
            </RelativePanel>
        </UserControl>
    </DataTemplate>

    <DataTemplate x:Key="ListviewGroupHeader">
        <UserControl>
            <TextBlock Text="{Binding Key}"
                       TextTrimming="Clip"/>
        </UserControl>
    </DataTemplate>

    <CollectionViewSource x:Key="GroupedItemsCollection"
                          x:Name="GroupedItemsCollection"
                          IsSourceGrouped="True"/>

    <DataTemplate x:Key="CustomGridItemTemplate"
                  x:DataType="data:ItemsClass">
        <UserControl>
            <StackPanel Margin="10">
                <Image Height="200"
                       Width="200"
                       Stretch="UniformToFill"
                       Margin="5"
                       Source="{x:Bind ItemImage, Mode=OneWay}"/>
                <TextBlock Text="{x:Bind ItemName, Mode=OneWay}"
                           TextTrimming="CharacterEllipsis"
                           Style="{StaticResource TitleTextBlockStyle}"/>
                <TextBlock Text="{x:Bind SpeciesName, Mode=OneWay}"
                           TextTrimming="CharacterEllipsis"
                           Style="{StaticResource BaseTextBlockStyle}"
                           FontStyle="Italic"/>
            </StackPanel>
        </UserControl>
    </DataTemplate>

    <DataTemplate x:Key="ZoomedOutTemplate"
                  x:DataType="data:ItemsClass">
        <UserControl>
            <TextBlock Text="{x:Bind GroupName}"
                       TextTrimming="CharacterEllipsis"/>
        </UserControl>
    </DataTemplate>

    <DataTemplate x:Key="CustomSwitchableGridTemplate">
        <UserControl>
            <SemanticZoom HorizontalAlignment="Stretch">
                <SemanticZoom.ZoomedOutView>
                    <ListView ItemsSource="{Binding Source={StaticResource GroupedItemsCollection}}"
                              ItemTemplate="{StaticResource ZoomedOutTemplate}"/>
                </SemanticZoom.ZoomedOutView>
                <SemanticZoom.ZoomedInView>
                    <GridView ItemsSource="{Binding Source={StaticResource GroupedItemsCollection}}"
                              ItemTemplate="{StaticResource CustomGridItemTemplate}"
                              SelectionMode="None"
                              IsItemClickEnabled="True"
                              HorizontalContentAlignment="Center">
                        <GridView.ItemsPanel>
                            <ItemsPanelTemplate>
                                <ItemsWrapGrid HorizontalAlignment="Center"
                                               Orientation="Horizontal"/>
                            </ItemsPanelTemplate>
                        </GridView.ItemsPanel>
                        <GridView.GroupStyle>
                            <GroupStyle HeaderTemplate="{StaticResource ListviewGroupHeader}"/>
                        </GridView.GroupStyle>
                    </GridView>
                </SemanticZoom.ZoomedInView>
            </SemanticZoom>
        </UserControl>
    </DataTemplate>




    <DataTemplate x:Key="CustomSwitchableListTemplate">
        <UserControl>
            <SemanticZoom>
                <SemanticZoom.ZoomedInView>
                    <ListView ItemsSource="{Binding Source={StaticResource GroupedItemsCollection}}"
                      ItemTemplate="{StaticResource CustomListItemTemplate}"
                      SelectionMode="None"
                      IsItemClickEnabled="True">
                        <ListView.GroupStyle>
                            <GroupStyle HeaderTemplate="{StaticResource ListviewGroupHeader}"/>
                        </ListView.GroupStyle>
                    </ListView>
                </SemanticZoom.ZoomedInView>
                <SemanticZoom.ZoomedOutView>
                    <ListView ItemsSource="{Binding Source={StaticResource GroupedItemsCollection}}"
                          ItemTemplate="{StaticResource ZoomedOutTemplate}">
                    </ListView>
                </SemanticZoom.ZoomedOutView>
            </SemanticZoom>
        </UserControl>
    </DataTemplate>


</Page.Resources>

<Grid>
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState>
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="0"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="PivotContent.ContentTemplate"
                            Value="{StaticResource ResourceKey=CustomSwitchableListTemplate}"/>
                </VisualState.Setters>
            </VisualState>
            <VisualState>
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="550"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="PivotContent.ContentTemplate"
                            Value="{StaticResource ResourceKey=CustomSwitchableGridTemplate}"/>
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

    <Grid.Background>
        <ImageBrush Opacity="0.5"
                    x:Name="BackgroundBrush"/>
    </Grid.Background>

    <Pivot>
        <PivotItem>
            <PivotItem.Header>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="Vegetables &amp; Fruits"
                               VerticalAlignment="Center"
                               Margin="5"/>
                    <Image Source="ms-appx:///Assets/fruits.png"
                           Height="40"/>
                </StackPanel>
            </PivotItem.Header>

            <PivotItem.Content>
                <ContentPresenter Name="PivotContent"
                                  HorizontalAlignment="Stretch"/>
            </PivotItem.Content>
        </PivotItem>
    </Pivot>
</Grid>

在MainPage.xaml.cs中：

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
        DataContext = Helpers.INotifyClass.INotifyObj;
        GetItems();
    }

    private async void GetItems()
    {
        Helpers.INotifyClass.INotifyObj.VegetablesList = await Helpers.DataHelper.GetItems();
        var groups = from g in Helpers.INotifyClass.INotifyObj.VegetablesList group g by g.GroupName;
        GroupedItemsCollection.Source = groups;
    }

}

我在我的应用程序中获得以下视图：

[图1]： [图2]：

如您所见，

缩小视图

显示组，但组基本上是所有数据，除了数据中的名称是组的名称。我似乎无法理解，因为如何在

缩小视图中仅显示组名数据。如果有人能帮我解决这个问题，请提供你的建议。此外，如果还有其他方法，我愿意接受建议

注意：我看过微软的UWP示例，但我不能将
x:Bind
放在
DataTemplate
中，因为它要求在模板中输入
DataType

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
        DataContext = Helpers.INotifyClass.INotifyObj;
        GetItems();
    }

    private async void GetItems()
    {
        Helpers.INotifyClass.INotifyObj.VegetablesList = await Helpers.DataHelper.GetItems();
        var groups = from g in Helpers.INotifyClass.INotifyObj.VegetablesList group g by g.GroupName;
        GroupedItemsCollection.Source = groups;
    }

}