Semantic​Zoom Semantic​Zoom Semantic​Zoom Semantic​Zoom Class

Definition

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.

public : sealed class SemanticZoom : Control, ISemanticZoompublic sealed class SemanticZoom : Control, ISemanticZoomPublic NotInheritable Class SemanticZoom Inherits Control Implements ISemanticZoom// This API is not available in Javascript.
<SemanticZoom ...>
  <SemanticZoom.ZoomedOutView>
    zoomedOutViewContent
  </SemanticZoom.ZoomedOutView>
  <SemanticZoom.ZoomedInView>
    zoomedInViewContent
  </SemanticZoom.ZoomedInView>
</SemanticZoom>

Inheritance
Attributes
Windows 10 requirements
Device family
Windows 10 (introduced v10.0.10240.0)
API contract
Windows.Foundation.UniversalApiContract (introduced v1)

Inherited Members

Inherited properties

Inherited events

Inherited methods

Examples

For more examples, download the XAML GridView grouping and SemanticZoom sample.

Remarks

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">.

Constructors

SemanticZoom() SemanticZoom() SemanticZoom() SemanticZoom()

Initializes a new instance of the SemanticZoom class.

public : SemanticZoom()public SemanticZoom()Public Sub New()// This API is not available in Javascript.

Properties

CanChangeViews CanChangeViews CanChangeViews CanChangeViews

Gets or sets a value that declares whether the SemanticZoom can change display views.

public : PlatForm::Boolean CanChangeViews { get; set; }public bool CanChangeViews { get; set; }Public ReadWrite Property CanChangeViews As bool// This API is not available in Javascript.
<SemanticZoom CanChangeViews="bool" />
Value
PlatForm::Boolean bool bool bool

true if views can be changed; otherwise, false. The default is true.

CanChangeViewsProperty CanChangeViewsProperty CanChangeViewsProperty CanChangeViewsProperty

Identifies the CanChangeViews dependency property.

public : static DependencyProperty CanChangeViewsProperty { get; }public static DependencyProperty CanChangeViewsProperty { get; }Public Static ReadOnly Property CanChangeViewsProperty As DependencyProperty// This API is not available in Javascript.

IsZoomedInViewActive IsZoomedInViewActive IsZoomedInViewActive IsZoomedInViewActive

Gets or sets a value that determines whether the ZoomedInView is the active view.

public : PlatForm::Boolean IsZoomedInViewActive { get; set; }public bool IsZoomedInViewActive { get; set; }Public ReadWrite Property IsZoomedInViewActive As bool// This API is not available in Javascript.
<SemanticZoom IsZoomedInViewActive="bool" />
Value
PlatForm::Boolean bool bool bool

true if the ZoomedInView is the active view. false if the ZoomedOutView is the active view.

IsZoomedInViewActiveProperty IsZoomedInViewActiveProperty IsZoomedInViewActiveProperty IsZoomedInViewActiveProperty

Identifies the IsZoomedInViewActive dependency property.

public : static DependencyProperty IsZoomedInViewActiveProperty { get; }public static DependencyProperty IsZoomedInViewActiveProperty { get; }Public Static ReadOnly Property IsZoomedInViewActiveProperty As DependencyProperty// This API is not available in Javascript.

IsZoomOutButtonEnabled IsZoomOutButtonEnabled IsZoomOutButtonEnabled IsZoomOutButtonEnabled

Gets or sets a value that indicates whether the ZoomedInView shows a button that activates the ZoomedOutView.

public : PlatForm::Boolean IsZoomOutButtonEnabled { get; set; }public bool IsZoomOutButtonEnabled { get; set; }Public ReadWrite Property IsZoomOutButtonEnabled As bool// This API is not available in Javascript.
<SemanticZoom IsZoomOutButtonEnabled="bool" />
Value
PlatForm::Boolean bool bool bool

True if the ZoomedInView shows a button that activates the ZoomedOutView; otherwise, false. The default is true.

Remarks

By default, when the zoomed in view is active and receives mouse or keyboard input, the SemanticZoom control shows a button the user can click to activate the zoomed out view. To hide this button, set the IsZoomOutButtonEnabled property to false.

IsZoomOutButtonEnabledProperty IsZoomOutButtonEnabledProperty IsZoomOutButtonEnabledProperty IsZoomOutButtonEnabledProperty

Identifies the IsZoomOutButtonEnabled dependency property.

public : static DependencyProperty IsZoomOutButtonEnabledProperty { get; }public static DependencyProperty IsZoomOutButtonEnabledProperty { get; }Public Static ReadOnly Property IsZoomOutButtonEnabledProperty As DependencyProperty// This API is not available in Javascript.

ZoomedInView ZoomedInView ZoomedInView ZoomedInView

Gets or sets the semantically more complete zoomed-in view of the SemanticZoom.

public : ISemanticZoomInformation ZoomedInView { get; set; }public ISemanticZoomInformation ZoomedInView { get; set; }Public ReadWrite Property ZoomedInView As ISemanticZoomInformation// This API is not available in Javascript.
<SemanticZoom ...>
  <SemanticZoom.ZoomedInView>
    zoomedInViewContent
  </SemanticZoom.ZoomedInView>
</SemanticZoom>

Value
ISemanticZoomInformation ISemanticZoomInformation ISemanticZoomInformation ISemanticZoomInformation

An object that implements ISemanticZoomInfo. Typically this is a practical ListViewBase implementation such as GridView.

ZoomedInViewProperty ZoomedInViewProperty ZoomedInViewProperty ZoomedInViewProperty

Identifies the ZoomedInView dependency property.

public : static DependencyProperty ZoomedInViewProperty { get; }public static DependencyProperty ZoomedInViewProperty { get; }Public Static ReadOnly Property ZoomedInViewProperty As DependencyProperty// This API is not available in Javascript.
Value
DependencyProperty DependencyProperty DependencyProperty DependencyProperty

The identifier for the ZoomedInView dependency property.

ZoomedOutView ZoomedOutView ZoomedOutView ZoomedOutView

Gets or sets the zoomed-out view of the SemanticZoom.

public : ISemanticZoomInformation ZoomedOutView { get; set; }public ISemanticZoomInformation ZoomedOutView { get; set; }Public ReadWrite Property ZoomedOutView As ISemanticZoomInformation// This API is not available in Javascript.
<SemanticZoom ...>
  <SemanticZoom.ZoomedOutView>
    zoomedOutViewContent
  </SemanticZoom.ZoomedOut>
</SemanticZoom>

Value
ISemanticZoomInformation ISemanticZoomInformation ISemanticZoomInformation ISemanticZoomInformation

An object that implements ISemanticZoomInfo. Typically this is a practical ListViewBase implementation such as GridView.

ZoomedOutViewProperty ZoomedOutViewProperty ZoomedOutViewProperty ZoomedOutViewProperty

Identifies the ZoomedOutView dependency property.

public : static DependencyProperty ZoomedOutViewProperty { get; }public static DependencyProperty ZoomedOutViewProperty { get; }Public Static ReadOnly Property ZoomedOutViewProperty As DependencyProperty// This API is not available in Javascript.

Methods

ToggleActiveView() ToggleActiveView() ToggleActiveView() ToggleActiveView()

Changes from the current active view to the other possible view. For example, if IsZoomedInViewActive is true, calling this method changes to zoomed-out view.

public : void ToggleActiveView()public void ToggleActiveView()Public Function ToggleActiveView() As void// This API is not available in Javascript.

Events

ViewChangeCompleted ViewChangeCompleted ViewChangeCompleted ViewChangeCompleted

Occurs when a view change is complete and the view is displayed.

public : event SemanticZoomViewChangedEventHandler ViewChangeCompletedpublic event SemanticZoomViewChangedEventHandler ViewChangeCompletedPublic Event ViewChangeCompleted// This API is not available in Javascript.
<SemanticZoom ViewChangeCompleted="eventhandler" />

ViewChangeStarted ViewChangeStarted ViewChangeStarted ViewChangeStarted

Occurs when a view change is requested.

public : event SemanticZoomViewChangedEventHandler ViewChangeStartedpublic event SemanticZoomViewChangedEventHandler ViewChangeStartedPublic Event ViewChangeStarted// This API is not available in Javascript.
<SemanticZoom ViewChangeStarted="eventhandler" />

See Also