Hub.Header template

Question

I want to create template for Hub, because I need complicated StackPanel in Header, but I can't figure out how to do it. First of All I wanted to check TextBlock control, so I wrote three sample styles:

<Style x:Key="HubSectionStyle" TargetType="HubSection">
    <Setter Property="Header" Value="With Style1">
    </Setter>
</Style>

<Style x:Key="HubSectionStyle2" TargetType="HubSection">
    <Setter Property="Header">
        <Setter.Value>
            <DataTemplate>
                <TextBlock>With Style2</TextBlock>
            </DataTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style x:Key="HubSectionStyle3" TargetType="HubSection">
    <Setter Property="Header">
        <Setter.Value>
            <ControlTemplate>
                <TextBlock>With Style3</TextBlock>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

And tried this way:

<HubSection>
    <HubSection.Header>
        <TextBlock>Without Style</TextBlock>
    </HubSection.Header>
</HubSection>

<HubSection Style="{StaticResource HubSectionStyle}">
</HubSection>

<HubSection Style="{StaticResource HubSectionStyle2}">
</HubSection>

<HubSection Style="{StaticResource HubSectionStyle3}">
</HubSection>

As a result I've four columns with following headers:

Without Style, With Style1, Windows.UI.Xaml.DataTemplate, Windows.UI.Xaml.ControlTemplate

Answer 1

Use HeaderTemplate to define Template for Header..

<Style x:Key="HubSectionStyle2" TargetType="HubSection">
  <Setter Property="HeaderTemplate">
    <Setter.Value>
      <DataTemplate>
        <TextBlock>With Style2</TextBlock>
      </DataTemplate>
    </Setter.Value>
  </Setter>
</Style>

Get more details about HeaderTemplate you can get here..