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

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

Examples

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

Constructors

SemanticZoom() SemanticZoom() SemanticZoom()

Initializes a new instance of the SemanticZoom class.

public SemanticZoom()public SemanticZoom()Public Sub New()
Attributes

Properties

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
<SemanticZoom CanChangeViews="bool" />
Value
bool bool bool

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

Attributes

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
Value
DependencyProperty DependencyProperty DependencyProperty

The identifier for the CanChangeViews dependency property.

Attributes

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
<SemanticZoom IsZoomedInViewActive="bool" />
Value
bool bool bool

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

Attributes

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
Value
DependencyProperty DependencyProperty DependencyProperty

The identifier for the IsZoomedInViewActive dependency property.

Attributes

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
<SemanticZoom IsZoomOutButtonEnabled="bool" />
Value
bool bool bool

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

Attributes

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

Identifies the IsZoomOutButtonEnabled dependency property.

public static DependencyProperty IsZoomOutButtonEnabledProperty { get; }public static DependencyProperty IsZoomOutButtonEnabledProperty { get; }Public Static ReadOnly Property IsZoomOutButtonEnabledProperty As DependencyProperty
Value
DependencyProperty DependencyProperty DependencyProperty

The identifier of the IsZoomOutButtonEnabled dependency property.

Attributes

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
<SemanticZoom ...>
  <SemanticZoom.ZoomedInView>
    zoomedInViewContent
  </SemanticZoom.ZoomedInView>
</SemanticZoom>

Value
ISemanticZoomInformation ISemanticZoomInformation ISemanticZoomInformation

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

Attributes

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
Value
DependencyProperty DependencyProperty DependencyProperty

The identifier for the ZoomedInView dependency property.

Attributes

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
<SemanticZoom ...>
  <SemanticZoom.ZoomedOutView>
    zoomedOutViewContent
  </SemanticZoom.ZoomedOut>
</SemanticZoom>

Value
ISemanticZoomInformation ISemanticZoomInformation ISemanticZoomInformation

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

Attributes

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
Value
DependencyProperty DependencyProperty DependencyProperty

The identifier for the ZoomedOutView dependency property.

Attributes

Methods

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
Attributes

Events

ViewChangeCompleted ViewChangeCompleted ViewChangeCompleted

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

public event SemanticZoomViewChangedEventHandler ViewChangeCompletedpublic event SemanticZoomViewChangedEventHandler ViewChangeCompletedPublic Event ViewChangeCompleted
<SemanticZoom ViewChangeCompleted="eventhandler" />
Attributes

ViewChangeStarted ViewChangeStarted ViewChangeStarted

Occurs when a view change is requested.

public event SemanticZoomViewChangedEventHandler ViewChangeStartedpublic event SemanticZoomViewChangedEventHandler ViewChangeStartedPublic Event ViewChangeStarted
<SemanticZoom ViewChangeStarted="eventhandler" />
Attributes

See Also