HubSection
HubSection
HubSection
HubSection
Class
Definition
public : class HubSection : Control, IHubSectionpublic class HubSection : Control, IHubSectionPublic Class HubSection Inherits Control Implements IHubSection// This API is not available in Javascript.
<HubSection .../>
-or-
<HubSection ...>
oneOrMoreComponents
</HubSection>
- Inheritance
- Attributes
| Device family |
Windows 10 (introduced v10.0.10240.0)
|
| API contract |
Windows.Foundation.UniversalApiContract (introduced v1)
|
Inherited Members
Inherited properties
Inherited events
Inherited methods
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>
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<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 key | Description |
|---|---|
| HubSectionHeaderForeground | Header text color |
| HubSectionHeaderButtonForeground | Button icon color at rest |
| HubSectionHeaderButtonForegroundPointerOver | Button icon color on hover |
| HubSectionHeaderButtonForegroundPressed | Button icon color when pressed |
| HubSectionHeaderButtonForegroundDisabled | Button icon color when disabled |
Constructors
HubSection() HubSection() HubSection() HubSection()
Initializes a new instance of the HubSection class.
public : HubSection()public HubSection()Public Sub New()// This API is not available in Javascript.
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// This API is not available in Javascript.
<HubSection>
<HubSection.ContentTemplate>
dataTemplate
</HubSection.ContentTemplate>
</HubSection>
The data template that is used to display the content of the HubSection.
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// This API is not available in Javascript.
The identifier for the ContentTemplate dependency property.
Header Header Header Header
Gets or sets the content for the hub section header.
public : PlatForm::Object Header { get; set; }public object Header { get; set; }Public ReadWrite Property Header As object// This API is not available in Javascript.
<HubSection Header="headerString"/>
- Value
- PlatForm::Object 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 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.
- See Also
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// This API is not available in Javascript.
The identifier for the Header dependency property.
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// This API is not available in Javascript.
<HubSection>
<HubSection.HeaderTemplate>
singleDataTemplate
</HubSection.HeaderTemplate>
</HubSection>
The template that specifies the visualization of the header object. The default is null.
- See Also
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// This API is not available in Javascript.
The identifier for the HeaderTemplate dependency property.
IsHeaderInteractive IsHeaderInteractive IsHeaderInteractive IsHeaderInteractive
Gets or sets a value that indicates whether the section header raises a SectionHeaderClick event on its containing Hub.
public : PlatForm::Boolean IsHeaderInteractive { get; set; }public bool IsHeaderInteractive { get; set; }Public ReadWrite Property IsHeaderInteractive As bool// This API is not available in Javascript.
<HubSection IsHeaderInteractive="bool" />
- Value
- PlatForm::Boolean 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 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.
- See Also
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// This API is not available in Javascript.
The identifier for the IsHeaderInteractive dependency property.