HubSection HubSection HubSection Class

Definition

Represents a single group of content in a Hub.

public class HubSection : Control, IHubSectionpublic class HubSection : Control, IHubSectionPublic Class HubSection Inherits Control Implements IHubSection
<HubSection .../>
-or-
<HubSection ...>
  oneOrMoreComponents
</HubSection>
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

You put the content of your Hub in various HubSection elements. Like the Hub, each HubSection has a Header and HeaderTemplate property that you can use to set an optional header for the section. You can also make the section header interactive. Typically, the user can tap an interactive header to navigate to the corresponding app section page. When its IsHeaderInteractive property is true, the default header includes a chevron glyph, and "Hover" and "Pressed" visual states, and it raises a SectionHeaderClick event.

You don't add content directly to a hub section; instead, you define the content of your HubSection in a DataTemplate. Content can be defined inline, or bound to a data source. Any valid XAML can be used in a hub section.

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 HubSection control.

Resource keyDescription
HubSectionHeaderForegroundHeader text color
HubSectionHeaderButtonForegroundButton icon color at rest
HubSectionHeaderButtonForegroundPointerOverButton icon color on hover
HubSectionHeaderButtonForegroundPressedButton icon color when pressed
HubSectionHeaderButtonForegroundDisabledButton icon color when disabled

Examples

This example shows the basic XAML used to create a Hub with 3 HubSection s.

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

    <HubSection Header="Tech" IsHeaderInteractive="True"  
                Background="#222222" 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 Header="Sports" IsHeaderInteractive="True" 
                Background="#444444" 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>

Constructors

HubSection() HubSection() HubSection()

Initializes a new instance of the HubSection class.

public HubSection()public HubSection()Public Sub New()
Attributes

Properties

ContentTemplate ContentTemplate ContentTemplate

Gets or sets the data template that is used to display the content of the HubSection.

public DataTemplate ContentTemplate { get; set; }public DataTemplate ContentTemplate { get; set; }Public ReadWrite Property ContentTemplate As DataTemplate
<HubSection>
  <HubSection.ContentTemplate>
    dataTemplate
  </HubSection.ContentTemplate>
</HubSection>
Value
DataTemplate DataTemplate DataTemplate

The data template that is used to display the content of the HubSection.

Attributes

ContentTemplateProperty ContentTemplateProperty ContentTemplateProperty

Identifies the ContentTemplate dependency property.

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

The identifier for the ContentTemplate dependency property.

Attributes

Header Header Header

Gets or sets the content for the hub section header.

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

Value
object object object

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

Attributes

Remarks

Add a header to let users know the context of your Hub section. 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 section header scrolls with the hub section.

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

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 can respond to a tapped header by handling the Hub.SectionHeaderClick event. You get the section that was clicked from the SectionHeaderClickEventArgs.Section property of the event data.

Windows 10

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. The text is rendered as a hyperlink, which uses the user selected system accent color by default.

Windows 8.x

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.

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 section header.

public DataTemplate HeaderTemplate { get; set; }public DataTemplate HeaderTemplate { get; set; }Public ReadWrite Property HeaderTemplate As DataTemplate
<HubSection>
  <HubSection.HeaderTemplate>
    singleDataTemplate
  </HubSection.HeaderTemplate>
</HubSection>
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

IsHeaderInteractive IsHeaderInteractive IsHeaderInteractive

Gets or sets a value that indicates whether the section header raises a SectionHeaderClick event on its containing Hub.

public bool IsHeaderInteractive { get; set; }public bool IsHeaderInteractive { get; set; }Public ReadWrite Property IsHeaderInteractive As bool
<HubSection IsHeaderInteractive="bool" />
Value
bool bool bool

true if the section header raises a SectionHeaderClick event; otherwise, false. The default is false.

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 can respond to a tapped header by handling the Hub.SectionHeaderClick event. You get the section that was clicked from the SectionHeaderClickEventArgs.Section property of the event data.

Windows 10

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. The text is rendered as a hyperlink, which uses the user selected system accent color by default.

Windows 8.x

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.

IsHeaderInteractiveProperty IsHeaderInteractiveProperty IsHeaderInteractiveProperty

Identifies the IsHeaderInteractive dependency property.

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

The identifier for the IsHeaderInteractive dependency property.

Attributes

See Also