| -api-id | -api-type |
|---|---|
T:Windows.UI.Xaml.Controls.SemanticZoom |
winrt class |
Represents a scrollable control that incorporates two views that have a semantic relationship. For example, the ZoomedOutView might be an index of titles, and the ZoomedInView might include details and summaries for each of the title entries. Views can be changed using zoom or other interactions.
<SemanticZoom ...>
<SemanticZoom.ZoomedOutView>
zoomedOutViewContent
</SemanticZoom.ZoomedOutView>
<SemanticZoom.ZoomedInView>
zoomedInViewContent
</SemanticZoom.ZoomedInView>
</SemanticZoom>
The SemanticZoom control enables the user to zoom between two different views of the same content so that they can quickly navigate through a large data set. The zoomed-in view is the main view of the content. You show the complete data set in this view. The zoomed-out view is a higher-level view of the same content. You typically show the group headers for a grouped data set in this view. For example, when viewing an address book, the user could zoom in on a letter and see the names associated with that letter.
To define the zoomed-in view and the zoomed-out view of the SemanticZoom control, you can use any two controls that implement the ISemanticZoomInformation interface. The Extensible Application Markup Language (XAML) framework provides several controls that implement this interface: ListView, GridView, and Hub. You set these controls to the ZoomedInView and ZoomedOutView properties of the SemanticZoom.
The user can switch between views with touch using the pinch-in and pinch-out gestures. By default, the zoomed-in view also shows a button that the user can press to activate the zoomed-out view. You can hide the zoom-out button by setting the IsZoomOutButtonEnabled property to false. You can switch between views programmatically by setting the IsZoomedInViewActive property.
The ZoomedInView and ZoomedOutView should be synchronized, so if a user selects a group in the ZoomedOutView, the details of that group are shown in the ZoomedInView. You can use a CollectionViewSource or add code to synchronize the views. Any controls that you bind to the same CollectionViewSource will always have the same current item. If both views use the same CollectionViewSource as the their data source, the CollectionViewSource will synchronize the views automatically. Otherwise, you can handle the ViewChangeStarted event and synchronize the items in the event handler like this.
private void SemanticZoom_ViewChangeStarted(object sender, SemanticZoomViewChangedEventArgs e)
{
if (e.IsSourceZoomedInView == false)
{
e.DestinationItem.Item = e.SourceItem.Item;
}
}When you use a GridView in a SemanticZoom control, always set the ScrollViewer.IsHorizontalScrollChainingEnabled attached property to false on the ScrollViewer that's in the GridView's control template, like this: <GridView ScrollViewer.IsHorizontalScrollChainingEnabled="False">. When you use a ListView in a SemanticZoom control, always set the ScrollViewer.IsVerticalScrollChainingEnabled attached property to false, like this: <ListView ScrollViewer.IsVerticalScrollChainingEnabled="False">.
Tip
For more info, design guidance, and code examples, see Semantic zoom.
[!div class="nextstepaction"] Open the WinUI 2 Gallery app and see the SemanticZoom in action
The WinUI 2 Gallery app includes interactive examples of most WinUI 2 controls, features, and functionality. Get the app from the Microsoft Store or get the source code on GitHub.