语义放大显示在放大时不显示正确的项目

Question

我做了一个语义缩放，并把它放在一个弹出框中。它在放大和缩小方面工作正确，但是当它在缩小中从选定的项目放大时，它不会将放大列表放在正确的位置，但它总是在放大列表视图中显示第一个项目。当我将相同的代码放在页面上时，它可以正常工作。下面是弹出框和

页面的代码

<Page
    x:Class="startapp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:wuxdata="using:Windows.UI.Xaml.Data"
    xmlns:local="using:startapp"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:data="using:startapp.Models"
    mc:Ignorable="d">
    <Page.Resources>
        <CollectionViewSource x:Name="ApplicationsCVS"  Source="{x:Bind Groups}" IsSourceGrouped="True" ItemsPath="Items"/>
        <DataTemplate x:Name="ApplicationListViewTemplate" x:DataType="data:AvailableApplication">
            <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="ZoomedInGroupHeaderTemplate" x:DataType="data:GroupInfoList">
            <TextBlock Text="{x:Bind Key}" Foreground="{ThemeResource ApplicationForegroundThemeBrush}" Style="{StaticResource SubtitleTextBlockStyle}"/>
        </DataTemplate>
        <DataTemplate x:Key="ZoomedOutTemplate" x:DataType="wuxdata:ICollectionViewGroup">
            <TextBlock Text="{x:Bind Group.(data:GroupInfoList.Key)}" Style="{StaticResource SubtitleTextBlockStyle}" TextWrapping="Wrap"/>
        </DataTemplate>
    </Page.Resources>
    <Page.TopAppBar>
        <CommandBar ClosedDisplayMode="Compact">
            <CommandBar.Content>
            <AppBarButton x:Name="button" Icon="AllApps" Margin="0,0,0,0" VerticalAlignment="Stretch" HorizontalAlignment="Left" d:LayoutOverrides="Width, Height, LeftPosition, RightPosition">
                <Button.Flyout>
                    <Flyout Placement="Bottom">
                        <StackPanel Orientation="Horizontal" Width="500">
                            <SemanticZoom Width="300" >
                                <SemanticZoom.ZoomedInView>
                                    <ListView x:Name="listView" Margin="0,0,0,0"
                                        ItemsSource="{x:Bind ApplicationsCVS.View}"
                                        ItemTemplate="{StaticResource ApplicationListViewTemplate}"
                                        SelectionMode="None"
                                              ScrollViewer.IsVerticalScrollChainingEnabled="False" >    
                                        <ListView.GroupStyle>
                                            <GroupStyle HeaderTemplate="{StaticResource ZoomedInGroupHeaderTemplate}" />
                                        </ListView.GroupStyle>
                                    </ListView>
                                </SemanticZoom.ZoomedInView>
                                <SemanticZoom.ZoomedOutView>
                                    <GridView ItemsSource="{x:Bind ApplicationsCVS.View.CollectionGroups}" HorizontalAlignment="Stretch"
                                              ScrollViewer.IsHorizontalScrollChainingEnabled="False"
SelectionMode="None" ItemTemplate="{StaticResource ZoomedOutTemplate}"
                                              />
                                </SemanticZoom.ZoomedOutView>
                            </SemanticZoom>
                                <GridView ItemsSource="{x:Bind ApplicationsCVS.View.CollectionGroups}" HorizontalAlignment="Stretch"
                                              ScrollViewer.IsHorizontalScrollChainingEnabled="False"
SelectionMode="None" ItemTemplate="{StaticResource ZoomedOutTemplate}"
                                              />
                            </StackPanel>
                    </Flyout>
                </Button.Flyout>
            </AppBarButton>
            </CommandBar.Content>
        </CommandBar>
    </Page.TopAppBar>
    <StackPanel Orientation="Horizontal">
        <SemanticZoom Width="500" ViewChangeStarted="SemanticZoom_ViewChangeStarted">
            <SemanticZoom.ZoomedInView>
                <ListView x:Name="listView1" Margin="0,0,0,0"
                                        ItemsSource="{x:Bind ApplicationsCVS.View}"
                                        ItemTemplate="{StaticResource ApplicationListViewTemplate}"
                                        SelectionMode="None"
                                              ScrollViewer.IsVerticalScrollChainingEnabled="False" >

                    <ListView.GroupStyle>
                        <GroupStyle HeaderTemplate="{StaticResource ZoomedInGroupHeaderTemplate}" />
                    </ListView.GroupStyle>
                </ListView>
            </SemanticZoom.ZoomedInView>
            <SemanticZoom.ZoomedOutView>
                <GridView ItemsSource="{x:Bind ApplicationsCVS.View.CollectionGroups}" HorizontalAlignment="Stretch"
                                              ScrollViewer.IsHorizontalScrollChainingEnabled="False"
SelectionMode="None" ItemTemplate="{StaticResource ZoomedOutTemplate}"
                                              />
            </SemanticZoom.ZoomedOutView>
        </SemanticZoom>
        <GridView ItemsSource="{x:Bind ApplicationsCVS.View.CollectionGroups}" HorizontalAlignment="Stretch"
                                              ScrollViewer.IsHorizontalScrollChainingEnabled="False"
SelectionMode="None" ItemTemplate="{StaticResource ZoomedOutTemplate}"></GridView>
    </StackPanel>
</Page>

Answer 1

为了看到正确的行为，必须在带有ScrollViewer的Flyout中包装SemanticZoom。代码如下

                <Flyout Placement="Bottom">
                <StackPanel Orientation="Horizontal" Width="500">
                    <ScrollViewer>
                            <SemanticZoom Width="300"  >
                                <SemanticZoom.ZoomedInView>
                                   ...
                                   ...
                                 </SemanticZoom.ZoomedOutView>
                             </SemanticZoom>
                    </ScrollViewer>