Реализовать Semantic Zoom без просмотра списка, Gridview?

Question

Я пытаюсь реализовать управление семантическим масштабированием, но не с помощью списка, Gridview или группировки. Мой пользовательский интерфейс имеет следующий XAML

Приблизить

<!--Your ZoomIn view here-->
                <ScrollViewer>
                    <StackPanel>
                        <Grid x:Name="Item1" />
                        <Grid x:Name="Item2" />
                        <Grid x:Name="Item3" />
                        <Grid x:Name="Item4" />
                        <Grid x:Name="Item5" />
                    </StackPanel>
                </ScrollViewer>

Уменьшить

         <!--Your ZoomOut view here-->
            <ScrollViewer>
                <StackPanel>
                    <Image x:Name="ImageItem1" />
                    <Image x:Name="ImageItem2" />
                    <Image x:Name="ImageItem3" />
                    <Image x:Name="ImageItem4" />
                    <Image x:Name="ImageItem5" />
                </StackPanel>
            </ScrollViewer>

При нажатии на изображение в Zoomout оно должно перейти к соответствующей сетке в представлении Zoomin.

Как я могу достичь этого? До сих пор я реализовал семантическое масштабирование с использованием списка, сетки и группирования.

Answer 1

Это небрежно использовать элемент управления, как SemanticZoom для элементов управления он не предназначен для использования.

Сказав это, вы можете сделать это:

<SemanticZoom>
    <SemanticZoom.ZoomedInView>
        <GridView>
            <GridView.Header>
                <StackPanel>
                    <TextBlock>One</TextBlock>
                    <TextBlock>Two</TextBlock>
                    <TextBlock>Three</TextBlock>
                </StackPanel>
            </GridView.Header>
        </GridView>
    </SemanticZoom.ZoomedInView>
    <SemanticZoom.ZoomedOutView>
        <GridView>
            <GridView.Header>
                <StackPanel>
                    <TextBlock>Four</TextBlock>
                    <TextBlock>Five</TextBlock>
                    <TextBlock>Six</TextBlock>
                </StackPanel>
            </GridView.Header>
        </GridView>
    </SemanticZoom.ZoomedOutView>
</SemanticZoom>

Удачи!