Hub Page Header Template doesn't work as expected - xaml

Question

I'm porting over some Win RT code to UWP. One of the pages that doesn't work as expected is the HubPage.
I have a button in the HubSection HeaderTemplate which should be replacing the "see more" HyperLink. My button in my template appears but doesn't accept clicks.
The documentation states that I should be able to replace the "see more" hyperlink with my own template, I believe this is what my code is doing but doesn't work.
I'm unsure what value IsHeaderInteractive should be if I've attempting to replace the HubSection HeaderTemplate. Any help apprecaited
<Page
x:Class="Hub_Page.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Hub_Page"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
<Style TargetType="HubSection">
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<Button Content="This doesn't click!"
Background="DarkCyan" Tapped="UIElement_OnTapped"/>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid x:Name="outerGrid">
<Grid x:Name="innerGrid"
VerticalAlignment="Top">
<Hub x:Name="hub" SectionHeaderClick="Hub_OnSectionHeaderClick" >
<Hub.Header>
<!-- Back button and page title -->
<Grid>
<StackPanel Margin="13,0,20,0" Orientation="Horizontal">
<Button x:Name="backButton" Margin="0,0,20,0"/>
<TextBlock Text="x Manage Playlists" Margin="0,0,10,5" HorizontalAlignment="Left"/>
<Button Content="This does click"
Background="DarkGray" Tapped="UIElement_OnTapped"/>
</StackPanel>
</Grid>
</Hub.Header>
<!-- Playlists section -->
<HubSection Header="x Playlists" IsHeaderInteractive="True" >
<DataTemplate>
<ListView x:Name="playlistListView"
HorizontalAlignment="Stretch"
VerticalAlignment="Top"
SelectionMode="Single">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
<!-- A playlist -->
<Grid HorizontalAlignment="Stretch">
<StackPanel Margin="10" Orientation="Vertical" HorizontalAlignment="Stretch" MaxWidth="500">
<TextBlock Text="{Binding Name}" TextTrimming="WordEllipsis" />
</StackPanel>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</DataTemplate>
</HubSection>
</Hub>
</Grid>
</Grid>
</Grid>
</Page>

Answer 1

It's by design. You could make your own HubSection's button by yourself. For example like the following:
<HubSection>
<DataTemplate>
<StackPanel>
<Button Content="Header" Click="Button_Click" Margin="0 0 0 10"></Button>
<TextBlock Text="here is content."></TextBlock>
</StackPanel>
</DataTemplate>
</HubSection>