Hub Hub Hub Class

Definition

Represents a control that displays groups of content in a panning view.

public class Hub : Control, IHub, ISemanticZoomInformationpublic class Hub : Control, IHub, ISemanticZoomInformationPublic Class Hub Inherits Control Implements IHub, ISemanticZoomInformation
<Hub .../>
-or-
<Hub ...>
  oneOrMoreComponents
</Hub>
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

Use a Hub to show different collections of data, either from the same source or from different sources.

Hub content

Add content to the Hub by adding HubSection objects to the Sections collection. These sections use a DataTemplate to define the content for the section, and a Header property, which can be any content. If the Header object is a complex data type as opposed to just a string, you can define the look of the header using the HeaderTemplate property.

The Hub uses virtualization to load sections as the user pans. You can handle the SectionsInViewChanged event to respond to changes.

Interactive section headers

You can set the HubSectionHeader.IsHeaderInteractive property is true to let a user navigate to the corresponding app section page. When its IsHeaderInteractive property is true, the default header includes the text, See more. When a user taps the See more text, the SectionHeaderClick event is raised. If you use a custom HeaderTemplate, you should provide similar visual cues to indicate that the header is interactive.

You can handle the SectionHeaderClick event to respond to a tapped header. You get the section that was clicked from the SectionHeaderClickEventArgs.Section property of the event data.

Hub and SemanticZoom

If you declare a Hub as the ZoomedInView of a SemanticZoom, the section headers change to HyperlinkButton s that invoke the ZoomedOutView of the SemanticZoom when they're clicked.

Control style and template

You can modify the default Style and ControlTemplate to give the control a unique appearance. For information about modifying a control's style and template, see Styling controls. The default style, template, and resources that define the look of the control are included in the generic.xaml file. For design purposes, generic.xaml is available in the (Program Files)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP&lt;SDK version>\Generic folder from a Windows Software Development Kit (SDK) installation. Styles and resources from different versions of the SDK might have different values.

Starting in Windows 10, version 1607 (Windows Software Development Kit (SDK) version 10.0.14393.0), generic.xaml includes resources that you can use to modify the colors of a control in different visual states without modifying the control template. In apps that target this software development kit (SDK) or later, modifying these resources is preferred to setting properties such as Background and Foreground. For more info, see the Light-weight styling section of the Styling controls article.

This table shows the resources used by the Hub control.

Resource keyDescription
HubForegroundControl foreground color

Examples

This example shows the basic XAML used to create a Hub.

<Hub Header="News" SectionHeaderClick="Hub_SectionHeaderClick">
    <HubSection MinWidth="600" Header="Latest">
        <DataTemplate>
            <Grid>
                <TextBlock Text="The most recent news will be here." 
                   Style="{ThemeResource BodyTextBlockStyle}"/>
            </Grid>
        </DataTemplate>
    </HubSection>

    <HubSection x:Name="Tech" Header="Tech" IsHeaderInteractive="True"  
        Background="#F4F4F4" MinWidth="250">
        <DataTemplate>
            <StackPanel>
                <TextBlock Text="Tech news goes here."
                   Style="{ThemeResource BodyTextBlockStyle}"/>
                <TextBlock Text="Click the header to go to the Tech page."
                   Style="{ThemeResource BodyTextBlockStyle}"/>
            </StackPanel>
        </DataTemplate>
    </HubSection>

    <HubSection x:Name="Sports" Header="Sports" IsHeaderInteractive="True" 
        Background="#F9F9F9" MinWidth="250">
        <DataTemplate>
            <StackPanel>
                <TextBlock Text="Sports news goes here."
                   Style="{ThemeResource BodyTextBlockStyle}"/>
                <TextBlock Text="Click the header to go to the Sports page." 
                   Style="{ThemeResource BodyTextBlockStyle}"/>
            </StackPanel>
        </DataTemplate>
    </HubSection>
</Hub>
private void Hub_SectionHeaderClick(object sender, HubSectionHeaderClickEventArgs e)
{
    switch (e.Section.Name)
    {
        case "Sports":
            Frame.Navigate(typeof(SportsNewsPage));
            break;
        case "Tech":
            Frame.Navigate(typeof(TechNewsPage));
            break;
    }
}

Constructors

Hub() Hub() Hub()

Initializes a new instance of the Hub class.

public Hub()public Hub()Public Sub New()
Attributes

Properties

DefaultSectionIndex DefaultSectionIndex DefaultSectionIndex

Gets or sets the index of the hub section to show first when the Hub is initialized.

public int DefaultSectionIndex { get; set; }public int DefaultSectionIndex { get; set; }Public ReadWrite Property DefaultSectionIndex As int
<Hub DefaultSectionIndex=int/>

Value
int int int

The index of the hub section to show first when the Hub is initialized.

Attributes

DefaultSectionIndexProperty DefaultSectionIndexProperty DefaultSectionIndexProperty

Identifies the DefaultSectionIndex dependency property.

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

The identifier for the DefaultSectionIndex dependency property.

Attributes

Header Header Header

Gets or sets the content for the hub header.

public object Header { get; set; }public object Header { get; set; }Public ReadWrite Property Header As object
<Hub Header="headerString"/>

Value
object object object

The content of the hub header. The default is null.

Attributes

Remarks

Add a header to let users know the context of your Hub. This is often the name of your app. It's important to remember that although you can use arbitrary content in the header, the height of the header affects the amount of vertical space available for your hub section content. The header remains fixed in its position and doesn't scroll with the hub sections.

You can use a data template for the header by setting the HeaderTemplate property.

HeaderProperty HeaderProperty HeaderProperty

Identifies the Header dependency property.

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

The identifier for the Header dependency property.

Attributes

HeaderTemplate HeaderTemplate HeaderTemplate

Gets or sets the DataTemplate used to display the content of the hub header.

public DataTemplate HeaderTemplate { get; set; }public DataTemplate HeaderTemplate { get; set; }Public ReadWrite Property HeaderTemplate As DataTemplate
<Hub HeaderTemplate="resourceReferenceToDataTemplate"/>
Value
DataTemplate DataTemplate DataTemplate

The template that specifies the visualization of the header object. The default is null.

Attributes

HeaderTemplateProperty HeaderTemplateProperty HeaderTemplateProperty

Identifies the HeaderTemplate dependency property.

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

The identifier for the HeaderTemplate dependency property.

Attributes

IsActiveView IsActiveView IsActiveView

Gets or sets a value that indicates whether the Hub instance is the active view in its owning SemanticZoom.

public bool IsActiveView { get; set; }public bool IsActiveView { get; set; }Public ReadWrite Property IsActiveView As bool
Value
bool bool bool

true if the Hub is the active view; otherwise, false.

Attributes

Remarks

You typically don't set this property in XAML or in app code. The property is set implicitly when the view is set as either the ZoomedInView or ZoomedOutView of a SemanticZoom control.

IsActiveViewProperty IsActiveViewProperty IsActiveViewProperty

Identifies the IsActiveView dependency property.

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

The identifier for the IsActiveView dependency property.

Attributes

IsZoomedInView IsZoomedInView IsZoomedInView

Gets or sets a value that indicates whether the Hub instance is the zoomed-in view in its owning SemanticZoom.

public bool IsZoomedInView { get; set; }public bool IsZoomedInView { get; set; }Public ReadWrite Property IsZoomedInView As bool
Value
bool bool bool

true if the Hub is the zoomed-in view; otherwise, false.

Attributes

Remarks

You typically don't set this property in XAML or in app code. The property is set implicitly when the view is set as either the ZoomedInView or ZoomedOutView of a SemanticZoom control.

IsZoomedInViewProperty IsZoomedInViewProperty IsZoomedInViewProperty

Identifies the IsZoomedInView dependency property.

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

The identifier for the IsZoomedInView dependency property.

Attributes

Orientation Orientation Orientation

Gets or sets the orientation of a Hub.

public Orientation Orientation { get; set; }public Orientation Orientation { get; set; }Public ReadWrite Property Orientation As Orientation
<Hub Orientation="Horizontal"/>
-or-
<Hub Orientation="Vertical"/>
Value
Orientation Orientation Orientation

One of the Orientation values. The default is Horizontal.

Attributes

OrientationProperty OrientationProperty OrientationProperty

Identifies the Orientation dependency property.

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

The identifier for the Orientation dependency property.

Attributes

SectionHeaders SectionHeaders SectionHeaders

Gets a collection of the headers of the hub sections.

public IObservableVector<object> SectionHeaders { get; }public IObservableVector<object> SectionHeaders { get; }Public ReadOnly Property SectionHeaders As IObservableVector<object>
Value

The headers of the hub sections. The default is an empty collection.

Attributes

Sections Sections Sections

Gets all the hub sections in the Hub.

public IVector<HubSection> Sections { get; }public IVector<HubSection> Sections { get; }Public ReadOnly Property Sections As IVector<HubSection>
<Hub ...>
  oneOrMoreHubSections
</Hub>
Value

All the hub sections in the Hub. The default is an empty collection.

Attributes

SectionsInView SectionsInView SectionsInView

Gets the hub sections currently on the screen.

public IVector<HubSection> SectionsInView { get; }public IVector<HubSection> SectionsInView { get; }Public ReadOnly Property SectionsInView As IVector<HubSection>
Value

The hub sections currently on the screen.

Attributes

SemanticZoomOwner SemanticZoomOwner SemanticZoomOwner

Gets or sets the SemanticZoom instance that hosts the Hub.

public SemanticZoom SemanticZoomOwner { get; set; }public SemanticZoom SemanticZoomOwner { get; set; }Public ReadWrite Property SemanticZoomOwner As SemanticZoom
Value
SemanticZoom SemanticZoom SemanticZoom

The SemanticZoom instance that hosts this Hub, or null if the Hub is not hosted in a SemanticZoom control.

Attributes

Remarks

You don't set this property in XAML or in your app code. The property is set implicitly when the view is set as either the ZoomedInView or ZoomedOutView of a SemanticZoom control.

SemanticZoomOwnerProperty SemanticZoomOwnerProperty SemanticZoomOwnerProperty

Identifies the SemanticZoomOwner dependency property.

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

The identifier for the SemanticZoomOwner dependency property.

Attributes

Methods

CompleteViewChange() CompleteViewChange() CompleteViewChange()

Changes related aspects of presentation when the overall view for a SemanticZoom changes.

public void CompleteViewChange()public void CompleteViewChange()Public Function CompleteViewChange() As void
Attributes

CompleteViewChangeFrom(SemanticZoomLocation, SemanticZoomLocation) CompleteViewChangeFrom(SemanticZoomLocation, SemanticZoomLocation) CompleteViewChangeFrom(SemanticZoomLocation, SemanticZoomLocation)

Completes item-wise operations that are related to a view change when the Hub instance is the source view and the new view is a potentially different implementing view.

public void CompleteViewChangeFrom(SemanticZoomLocation source, SemanticZoomLocation destination)public void CompleteViewChangeFrom(SemanticZoomLocation source, SemanticZoomLocation destination)Public Function CompleteViewChangeFrom(source As SemanticZoomLocation, destination As SemanticZoomLocation) As void
Parameters
source
SemanticZoomLocation SemanticZoomLocation SemanticZoomLocation

The view item as represented in the source view.

destination
SemanticZoomLocation SemanticZoomLocation SemanticZoomLocation

The view item as represented in the destination view.

Attributes

CompleteViewChangeTo(SemanticZoomLocation, SemanticZoomLocation) CompleteViewChangeTo(SemanticZoomLocation, SemanticZoomLocation) CompleteViewChangeTo(SemanticZoomLocation, SemanticZoomLocation)

Completes item-wise operations that are related to a view change when the Hub instance is the destination view and the source view is a potentially different implementing view.

public void CompleteViewChangeTo(SemanticZoomLocation source, SemanticZoomLocation destination)public void CompleteViewChangeTo(SemanticZoomLocation source, SemanticZoomLocation destination)Public Function CompleteViewChangeTo(source As SemanticZoomLocation, destination As SemanticZoomLocation) As void
Parameters
source
SemanticZoomLocation SemanticZoomLocation SemanticZoomLocation

The view item as represented in the source view.

destination
SemanticZoomLocation SemanticZoomLocation SemanticZoomLocation

The view item as represented in the destination view.

Attributes

InitializeViewChange() InitializeViewChange() InitializeViewChange()

Initializes the changes to related aspects of presentation (such as scrolling UI or state) when the overall view for a SemanticZoom is about to change.

public void InitializeViewChange()public void InitializeViewChange()Public Function InitializeViewChange() As void
Attributes

MakeVisible(SemanticZoomLocation) MakeVisible(SemanticZoomLocation) MakeVisible(SemanticZoomLocation)

Forces content in the view to scroll until the item that's specified by SemanticZoomLocation is visible. Also focuses the item if it finds the item.

public void MakeVisible(SemanticZoomLocation item)public void MakeVisible(SemanticZoomLocation item)Public Function MakeVisible(item As SemanticZoomLocation) As void
Parameters
item
SemanticZoomLocation SemanticZoomLocation SemanticZoomLocation

The item in the view to scroll to.

Attributes

Remarks

You use the MakeVisible method to bring an item into view when the Hub control is used as a view in a SemanticZoom control. To bring an item into view when the Hub control is not used in a SemanticZoom, use the ScrollToSection method instead.

ScrollToSection(HubSection) ScrollToSection(HubSection) ScrollToSection(HubSection)

Scrolls the hub to bring the specified hub section into view.

public void ScrollToSection(HubSection section)public void ScrollToSection(HubSection section)Public Function ScrollToSection(section As HubSection) As void
Parameters
section
HubSection HubSection HubSection

The hub section to bring into view.

Attributes

Remarks

You use the ScrollToSection method to bring a section into view when the Hub control is not used as a view in a SemanticZoom control. To bring a section into view when the Hub control is used in a SemanticZoom, use the MakeVisible method instead.

StartViewChangeFrom(SemanticZoomLocation, SemanticZoomLocation) StartViewChangeFrom(SemanticZoomLocation, SemanticZoomLocation) StartViewChangeFrom(SemanticZoomLocation, SemanticZoomLocation)

Initializes item-wise operations that are related to a view change when the Hub instance is the source view and the pending destination view is a potentially different implementing view.

public void StartViewChangeFrom(SemanticZoomLocation source, SemanticZoomLocation destination)public void StartViewChangeFrom(SemanticZoomLocation source, SemanticZoomLocation destination)Public Function StartViewChangeFrom(source As SemanticZoomLocation, destination As SemanticZoomLocation) As void
Parameters
source
SemanticZoomLocation SemanticZoomLocation SemanticZoomLocation

The view item as represented in the source view.

destination
SemanticZoomLocation SemanticZoomLocation SemanticZoomLocation

The view item as represented in the destination view.

Attributes

StartViewChangeTo(SemanticZoomLocation, SemanticZoomLocation) StartViewChangeTo(SemanticZoomLocation, SemanticZoomLocation) StartViewChangeTo(SemanticZoomLocation, SemanticZoomLocation)

Initializes item-wise operations that are related to a view change when the source view is a different view and the pending destination view is the Hub instance.

public void StartViewChangeTo(SemanticZoomLocation source, SemanticZoomLocation destination)public void StartViewChangeTo(SemanticZoomLocation source, SemanticZoomLocation destination)Public Function StartViewChangeTo(source As SemanticZoomLocation, destination As SemanticZoomLocation) As void
Parameters
source
SemanticZoomLocation SemanticZoomLocation SemanticZoomLocation

The view item as represented in the source view.

destination
SemanticZoomLocation SemanticZoomLocation SemanticZoomLocation

The view item as represented in the destination view.

Attributes

Events

SectionHeaderClick SectionHeaderClick SectionHeaderClick

Occurs when a section header is clicked and the section's IsHeaderInteractive property is true.

public event HubSectionHeaderClickEventHandler SectionHeaderClickpublic event HubSectionHeaderClickEventHandler SectionHeaderClickPublic Event SectionHeaderClick
<Hub SectionHeaderClick="eventhandler" />
Attributes

Remarks

You can make a section header interactive by setting the IsHeaderInteractive property to true. Typically, the user can tap an interactive header to navigate to the corresponding app section page.

You get the section that was clicked from the SectionHeaderClickEventArgs.Section property of the event data.

When its IsHeaderInteractive property is true, the default header includes a chevron glyph, and "Hover" and "Pressed" visual states. If you use a custom HeaderTemplate, you should provide similar visual cues to indicate that the header is interactive.

SectionsInViewChanged SectionsInViewChanged SectionsInViewChanged

Occurs when the SectionsInView collection changes.

public event SectionsInViewChangedEventHandler SectionsInViewChangedpublic event SectionsInViewChangedEventHandler SectionsInViewChangedPublic Event SectionsInViewChanged
<Hub SectionsInViewChanged="eventhandler" />
Attributes

See Also