Can semantic zoom display different type of item in uwp

Question

I want to display a setting page by semantic zoom in uwp. But I don't know how to bind a layout control as an item of semantic zoom.

My expected result(in ZoomIn mode) is below.

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

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

I followed the example in XAML Gallery but it seems only can display the specific type of data.

So I generate a StackPanel to hold setting controls for each item, but I don't know how to display this StackPanel in the ZoomInDataTemplate.

I wonder if Semantic Zoom can do this?

And is it possible to describe ZoomInPart and ZoomOutPart manually(like below) but not bind to something, cause a setting page don't need to change over runtime.

<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

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.