Skip to content

Latest commit

 

History

History
81 lines (62 loc) · 4.42 KB

hubsection.md

File metadata and controls

81 lines (62 loc) · 4.42 KB
-api-id -api-type
T:Windows.UI.Xaml.Controls.HubSection
winrt class

Windows.UI.Xaml.Controls.HubSection

-description

Represents a single group of content in a Hub.

-xaml-syntax

<HubSection .../>
-or-
<HubSection ...>
  oneOrMoreComponents
</HubSection>

-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 XAML styles. 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\<SDK version>\Generic folder from a Windows SDK installation. Styles and resources from different versions of the SDK might have different values.

XAML also includes resources that you can use to modify the colors of a control in different visual states without modifying the control template. Modifying these resources is preferred to setting properties such as Background and Foreground. For more info, see the Light-weight styling section of the XAML styles article. Light-weight styling resources are available starting in Windows 10, version 1607 (SDK 14393).

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

-see-also

Control, Hub, HubSectionCollection, HubSectionHeaderClickEventArgs, ISemanticZoomInformation, XAML Hub control sample