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

Syntax

Declaration

public sealed class SemanticZoompublic sealed class SemanticZoomPublic NotInheritable Class SemanticZoom
<SemanticZoom ...>
  <SemanticZoom.ZoomedOutView>
    zoomedOutViewContent
  </SemanticZoom.ZoomedOutView>
  <SemanticZoom.ZoomedInView>
    zoomedInViewContent
  </SemanticZoom.ZoomedInView>
</SemanticZoom>

Inheritance Hierarchy

Inherited Members

Inherited properties

, , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,
Tag
Tag
Tag
, , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,

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 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 IsVerticalScrollChainingEnabled attached property to false, like this: <ListView ScrollViewer.IsVerticalScrollChainingEnabled="False">.

Examples

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

Constructors summary

Initializes a new instance of the SemanticZoom class.

Properties summary

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

Identifies the CanChangeViews dependency property.

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

Identifies the IsZoomedInViewActive dependency property.

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

Identifies the IsZoomOutButtonEnabled dependency property.

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

Identifies the ZoomedInView dependency property.

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

Identifies the ZoomedOutView dependency property.

Methods summary

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.

Events summary

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

Occurs when a view change is requested.

Constructors

  • SemanticZoom()
    SemanticZoom()
    SemanticZoom()
    SemanticZoom()

    Initializes a new instance of the SemanticZoom class.

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

Properties

  • CanChangeViews
    CanChangeViews
    CanChangeViews
    CanChangeViews

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

    public bool CanChangeViews { get; set; }public bool CanChangeViews { get; set; }Public ReadWrite Property CanChangeViews As boolpublic bool CanChangeViews { get; set; }
    <SemanticZoom CanChangeViews="bool" />
    

    Property Value

    • 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 DependencyPropertypublic static DependencyProperty CanChangeViewsProperty { get; }

    Property Value

  • IsZoomedInViewActive
    IsZoomedInViewActive
    IsZoomedInViewActive
    IsZoomedInViewActive

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

    public bool IsZoomedInViewActive { get; set; }public bool IsZoomedInViewActive { get; set; }Public ReadWrite Property IsZoomedInViewActive As boolpublic bool IsZoomedInViewActive { get; set; }
    <SemanticZoom IsZoomedInViewActive="bool" />
    

    Property Value

  • 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 DependencyPropertypublic static DependencyProperty IsZoomedInViewActiveProperty { get; }

    Property Value

  • IsZoomOutButtonEnabled
    IsZoomOutButtonEnabled
    IsZoomOutButtonEnabled
    IsZoomOutButtonEnabled

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

    public bool IsZoomOutButtonEnabled { get; set; }public bool IsZoomOutButtonEnabled { get; set; }Public ReadWrite Property IsZoomOutButtonEnabled As boolpublic bool IsZoomOutButtonEnabled { get; set; }
    <SemanticZoom IsZoomOutButtonEnabled="bool" />
    

    Property Value

    • 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 DependencyPropertypublic static DependencyProperty IsZoomOutButtonEnabledProperty { get; }

    Property Value

  • 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 ISemanticZoomInformationpublic ISemanticZoomInformation ZoomedInView { get; set; }
    <SemanticZoom ...>
      <SemanticZoom.ZoomedInView>
        zoomedInViewContent
      </SemanticZoom.ZoomedInView>
    </SemanticZoom>
    
    

    Property Value

  • 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 DependencyPropertypublic static DependencyProperty ZoomedInViewProperty { get; }

    Property Value

  • 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 ISemanticZoomInformationpublic ISemanticZoomInformation ZoomedOutView { get; set; }
    <SemanticZoom ...>
      <SemanticZoom.ZoomedOutView>
        zoomedOutViewContent
      </SemanticZoom.ZoomedOut>
    </SemanticZoom>
    
    

    Property Value

  • 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 DependencyPropertypublic static DependencyProperty ZoomedOutViewProperty { get; }

    Property Value

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 voidpublic void ToggleActiveView()

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 ViewChangeCompletedpublic event SemanticZoomViewChangedEventHandler ViewChangeCompleted
    <SemanticZoom ViewChangeCompleted="eventhandler" />
    
  • ViewChangeStarted
    ViewChangeStarted
    ViewChangeStarted
    ViewChangeStarted

    Occurs when a view change is requested.

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

Device family

Windows 10 (introduced v10.0.10240.0)

API contract

Windows.Foundation.UniversalApiContract (introduced v1)

Attributes

Windows.Foundation.Metadata.ActivatableAttribute
Windows.Foundation.Metadata.ContractVersionAttribute
Windows.Foundation.Metadata.MarshalingBehaviorAttribute
Windows.Foundation.Metadata.StaticAttribute
Windows.Foundation.Metadata.ThreadingAttribute
Windows.Foundation.Metadata.WebHostHiddenAttribute
Windows.UI.Xaml.Markup.ContentPropertyAttribute

Details

Assembly

Windows.UI.Xaml.Controls.dll