无法在HubSection HeaderTemplate中获取按钮

Question

我有一个带有Textblock的Hubsection和HeaderTemplate中的按钮。它在Windows 8中运行正常，但我已将应用程序迁移到UWP，现在我无法单击该按钮。

<HubSection
Width="480"
HorizontalAlignment="Stretch"
Header="_XX"
IsHeaderInteractive="True">
<HubSection.HeaderTemplate>
    <DataTemplate>
        <Grid Width="392" Margin="0,-10,0,-10">
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>

            <TextBlock
                HorizontalAlignment="Left"
                VerticalAlignment="Top"
                FontSize="28"
                Text="{Binding}" />
            <AppBarButton
                Grid.Column="1"
                HorizontalAlignment="Right"
                VerticalAlignment="Top"
                Command="{Binding ElementName=HubSection, Path=DataContext.MyCommand}">
                <AppBarButton.Icon>
                    <FontIcon
                        FontFamily="{StaticResource IconsFontFamily}"
                        FontSize="26"
                        Glyph="&#xE602;" />
                </AppBarButton.Icon>
            </AppBarButton>
        </Grid>
    </DataTemplate>
</HubSection.HeaderTemplate>
<DataTemplate>
    ...
</DataTemplate>

如果提前感谢，将不胜感激。

Answer 1

问题来自标头的定义方式。标题已经是一个按钮，您可以使用模板在按钮内添加按钮。

解决此问题的一个解决方案是复制Hub模板并用Button替换用于承载标头的ContentControl控件：

<Page.Resources>
    <Style TargetType="HubSection">
        <Setter Property="HorizontalAlignment" Value="Stretch" />
        <Setter Property="VerticalAlignment" Value="Stretch" />
        <Setter Property="HorizontalContentAlignment" Value="Left" />
        <Setter Property="VerticalContentAlignment" Value="Top" />
        <Setter Property="Padding" Value="12,10,12,0" />
        <Setter Property="IsTabStop" Value="False" />
        <Setter Property="UseSystemFocusVisuals" Value="True" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="HubSection">
                    <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                        <Border.Resources>
                            <ControlTemplate x:Key="HeaderButtonTemplate" TargetType="Button">
                                <Grid x:Name="ButtonRoot" Background="Transparent">
                                    <VisualStateManager.VisualStateGroups>
                                        <VisualStateGroup x:Name="CommonStates">
                                            <VisualState x:Name="Normal">
                                                <Storyboard>
                                                    <PointerUpThemeAnimation Storyboard.TargetName="ButtonRoot" />
                                                </Storyboard>
                                            </VisualState>
                                            <VisualState x:Name="PointerOver">
                                                <Storyboard>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource HubSectionHeaderButtonForegroundPointerOver}" />
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <PointerUpThemeAnimation Storyboard.TargetName="ButtonRoot" />
                                                </Storyboard>
                                            </VisualState>
                                            <VisualState x:Name="Pressed">
                                                <Storyboard>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource HubSectionHeaderButtonForegroundPressed}" />
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <PointerDownThemeAnimation Storyboard.TargetName="ButtonRoot" />
                                                </Storyboard>
                                            </VisualState>
                                            <VisualState x:Name="Disabled">
                                                <Storyboard>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource HubSectionHeaderButtonForegroundDisabled}" />
                                                    </ObjectAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </VisualState>
                                            <VisualState x:Name="ImitatedTextBlock">
                                                <Storyboard>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource HubSectionHeaderForeground}" />
                                                    </ObjectAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </VisualState>
                                        </VisualStateGroup>
                                    </VisualStateManager.VisualStateGroups>
                                    <ContentPresenter x:Name="ContentPresenter"
                                    Content="{TemplateBinding Content}"
                                    ContentTemplate="{TemplateBinding ContentTemplate}"
                                    VerticalAlignment="Center"
                                    OpticalMarginAlignment="TrimSideBearings" />
                                </Grid>
                            </ControlTemplate>
                        </Border.Resources>
                        <Grid Margin="{TemplateBinding Padding}" HorizontalAlignment="Stretch" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="*" />
                            </Grid.RowDefinitions>
                            <Rectangle x:Name="HubHeaderPlaceholder" Grid.Row="0" />
                            <Grid Grid.Row="1">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="Auto" />
                                </Grid.ColumnDefinitions>
                                <!-- The change is here -->
                                <ContentControl x:Name="HeaderButton"
                                Grid.Row="1"
                                Grid.Column="0"
                                UseSystemFocusVisuals="True"
                                Content="{TemplateBinding Header}"
                                ContentTemplate="{TemplateBinding HeaderTemplate}"
                                Foreground="{ThemeResource HubSectionHeaderButtonForeground}"
                                Margin="{ThemeResource HubSectionHeaderThemeMargin}"
                                FontSize="{ThemeResource HubSectionHeaderThemeFontSize}"
                                FontWeight="{ThemeResource HubSectionHeaderThemeFontWeight}"
                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                VerticalAlignment="Bottom"
                                IsTabStop="False" />
                                <Button x:Name="SeeMoreButton"
                                Grid.Row="1"
                                Grid.Column="1"
                                UseSystemFocusVisuals="True"
                                Visibility="Collapsed"
                                HorizontalAlignment="Right"
                                VerticalAlignment="Bottom"
                                Foreground="{ThemeResource HubSectionHeaderButtonForeground}"
                                Margin="{ThemeResource HubSectionHeaderSeeMoreThemeMargin}"
                                Template="{StaticResource HeaderButtonTemplate}"
                                FontSize="{ThemeResource HubSectionHeaderSeeMoreThemeFontSize}"
                                FontWeight="{ThemeResource HubSectionHeaderThemeFontWeight}" />
                            </Grid>
                            <ContentPresenter x:Name="ContentPresenter"
                            ContentTemplate="{TemplateBinding ContentTemplate}"
                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                            Grid.Row="2" />
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Page.Resources>