Question

我想通过uwp中的语义缩放来显示设置页面。但我不知道如何将布局控件绑定为语义缩放项。

我的预期结果（在ZoomIn模式下）低于。

Group1  
----------------------------
toggleButton 
slider

Group2
----------------------------
datePicker

我按照XAML图库中的示例进行操作，但似乎只能显示特定类型的数据。

所以我生成一个StackPanel来保存每个项目的设置控件，但我不知道如何在ZoomInDataTemplate中显示这个StackPanel。

我想知道语义缩放能否做到这一点？

是否可以手动描述ZoomInPart和ZoomOutPart（如下所示），但不能绑定到某些内容，导致设置页面不需要在运行时进行更改。

<SemanticZoom>
    <SemanticZoom.ZoomedOutView>
            <ListView>
                <TextBlock Text="Group1"/>
                <TextBlock Text="Group2"/>
                ...
            </ListView>
        </SemanticZoom.ZoomedOutView>

        <SemanticZoom.ZoomedInView>
            <ListView>
                <TextBlock Text="Item1 of Group1"/>
                <TextBlock Text="Item2 of Group1"/>
                ...
            </ListView>
        </SemanticZoom.ZoomedInView>
</SemanticZoom>

Answer 1

根据您的描述，SemanticZoom不是达到您想要的效果的正确控件。您可以尝试TreeView控件来实现UI。

如果您查看官方XamlUIBasics示例，您会发现组源和类似的UI控件布局实现了类似的效果。当您在ZoomedInView和ZoomedOutView之间切换时，它具有不同的控件DataTemplate，以使用户界面看起来像有儿童显示或隐藏。

语义缩放控件用于让用户在相同内容的两个不同视图之间切换，以便他们可以快速浏览大量分组数据。您可以手动编写ZoomInPart和ZoomOutPart，然后可以通过设置IsZoomedInViewActive属性以编程方式在视图之间切换。否则，您可以处理ViewChangeStarted事件并同步事件处理程序中的项目。

这是一个简单的例子：

的Xaml：

<SemanticZoom Name="MySemanticZoom" 
              IsZoomedInViewActive="False"
              ViewChangeStarted="SemanticZoom_ViewChangeStarted"
              Height="500">
    <SemanticZoom.ZoomedOutView >
        <ListView Name="ZoomedOutListView" ItemClick="ZoomedOutListView_ItemClick"
                  ScrollViewer.IsVerticalScrollChainingEnabled="False" >
            <TextBlock Text="Group1"/>
            <TextBlock Text="Group2"/>
        </ListView>
    </SemanticZoom.ZoomedOutView>

    <SemanticZoom.ZoomedInView>
        <ListView Name="ZoomedInListView" IsItemClickEnabled="True"
                  ItemClick="ZoomedInListView_ItemClick">
            <TextBlock Text="Item1 of Group1"/>
            <TextBlock Text="Item1 of Group2"/>
        </ListView>
    </SemanticZoom.ZoomedInView>
</SemanticZoom>

代码背后：

private void SemanticZoom_ViewChangeStarted(object sender, SemanticZoomViewChangedEventArgs e)
{
    if (e.IsSourceZoomedInView == false)
    {
        e.DestinationItem.Item = e.SourceItem.Item;
    }
}


private void ZoomedInListView_ItemClick(object sender, ItemClickEventArgs e)
{
    MySemanticZoom.IsZoomedInViewActive = false;
}

private void ZoomedOutListView_ItemClick(object sender, ItemClickEventArgs e)
{
    MySemanticZoom.IsZoomedInViewActive = true;
}

如果您坚持使用此SemanticZoom，您应该在数据模型和视图控件上做更多工作，作为使UI看起来像您想要的官方示例。所以我建议你尝试TreeView控件，它应该更合适。

语义缩放可以在uwp中显示不同类型的项目

1 个答案: