Семантическое увеличение во всплывающем окне не показывает правильный элемент при увеличении

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

Чтобы увидеть правильное поведение, нужно обернуть SemanticZoom во всплывающем окне с помощью ScrollViewer. Код выглядит следующим образом

                <Flyout Placement="Bottom">
                <StackPanel Orientation="Horizontal" Width="500">

                    <ScrollViewer>
                            <SemanticZoom Width="300"  >
                                <SemanticZoom.ZoomedInView>
                                   ...
                                   ...
                                 </SemanticZoom.ZoomedOutView>
                             </SemanticZoom>
                    </ScrollViewer>