在没有列表视图、网格视图的情况下实现语义缩放

本文关键字：视图 情况下 实现 语义 缩放 列表 网格 | 更新日期: 2023-09-27 18:25:04

我正在尝试实现Semantic Zoom控件，但没有使用listview、Gridview或分组。我的UI具有以下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>

在"缩小"视图中单击图像时，该图像应位于"放大"视图中对应的网格处。

我怎样才能做到这一点？到目前为止，我已经使用listview、gridview和grouping实现了语义缩放。

在没有列表视图、网格视图的情况下实现语义缩放

对于不打算使用的控件使用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>

祝你好运！

相关文章：