-1

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

我的预期结果（在放大模式下）如下。

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

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

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

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

我想知道 Semantic Zoom 是否可以做到这一点？

是否可以手动描述 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>
4

1 回答 1

0

Basing on your description, the SemanticZoom is not the correct control to achieve the effect you want. You can try the TreeView control to implement the UI.

If you look into the Official XamlUIBasics sample, you will find the similar effect is achieved by the group source and similar UI control layout. When you switch between the ZoomedInView and ZoomedOutView, it has different Control DataTemplate to make the UI look like there are children showing or hiding.

The Semantic zoom control is for letting the user switch between two different views of the same content so that they can quickly navigate through a large set of grouped data. You can write the ZoomInPart and ZoomOutPart manually, then you can switch between views programmatically by setting the IsZoomedInViewActive property. Otherwise, you can handle the ViewChangeStarted event and synchronize the items in the event handler.

Here is a simple example:

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>

Code behind:

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;
}

If you insist to use this SemanticZoom, you should do more works on the data model and view controls as the official sample to make the UI look like what you want. So I suggest you to try the TreeView control, it should be more suitable.

于 2018-03-27T07:19:43.050 回答