HubSection HubSection HubSection Class

Represents a single group of content in a Hub.

Syntax

Declaration

public class HubSectionpublic class HubSectionPublic Class HubSection
<HubSection .../>
-or-
<HubSection ...>
  oneOrMoreComponents
</HubSection>

Inheritance Hierarchy

Inherited Members

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

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 summary

Initializes a new instance of the HubSection class.

Properties summary

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

Identifies the ContentTemplate dependency property.

Gets or sets the content for the hub section header.

Identifies the Header dependency property.

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

Identifies the HeaderTemplate dependency property.

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

Identifies the IsHeaderInteractive dependency property.

Constructors

  • HubSection()
    HubSection()
    HubSection()
    HubSection()

    Initializes a new instance of the HubSection class.

    public HubSection()public HubSection()Public Function HubSection() As

Properties

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

    Property Value

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

    Property Value

  • Header
    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"/>
    
    

    Property Value

    • object
      object
      object

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

    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 SectionHeaderClick event. You get the section that was clicked from the 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
    HeaderProperty

    Identifies the Header dependency property.

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

    Property Value

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

    Property Value

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

    Property Value

  • IsHeaderInteractive
    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" />
    

    Property Value

    • bool
      bool
      bool

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

    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 SectionHeaderClick event. You get the section that was clicked from the 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
    IsHeaderInteractiveProperty

    Identifies the IsHeaderInteractive dependency property.

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

    Property Value

Device family

Windows 10 (introduced v10.0.10240.0)

API contract

Windows.Foundation.UniversalApiContract (introduced v1)

Attributes

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

Details

Assembly

Windows.UI.Xaml.Controls.dll