使 HubSection 填充屏幕高度

Question

我正在创建一个使用Hub 控件的应用程序，其中一个HubSections 我有一个必应地图MapView。我想让它填满屏幕的整个高度，就像英雄HubSection 一样，您只需将HubSection.Background 设置为ImageBrush。

现在我可以调整 MapView Margin 并得到一个肮脏和近似的解决方案，但我不确定这是否适用于所有屏幕尺寸。

这就是我现在拥有的：

这就是我想要的：

您对如何实现这一点有任何想法吗？

Answer 1

默认的 HubSection 模板包含一个 Grid，它将 Hub 的高度分为三行：

1. Hub 标题的占位符
2. HubSection 的标题
3. HubSection 的内容

如果您希望 HubSection 以不同方式显示，您可以应用自定义模板。

在设计器中打开文档大纲窗口并右键单击 HubSection。选择编辑模板。编辑副本... 菜单。这将创建一个带有模板副本的新 HubSectionStyle。

在 Xaml 编辑器中找到模板（VS 会直接将您放在那里）并向下滚动到底部，您会看到如下内容：

<Grid HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Rectangle x:Name="HubHeaderPlaceholder" Grid.Row="0"/>
    <Button x:Name="HeaderButton" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" FontWeight="{ThemeResource HubSectionHeaderThemeFontWeight}" FontSize="{ThemeResource HubSectionHeaderThemeFontSize}" Margin="{ThemeResource HubSectionHeaderThemeMargin}" Grid.Row="1" Template="{StaticResource HeaderButtonTemplate}"/>
    <ContentPresenter x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Grid.Row="2"/>
</Grid>

您可以根据需要对其进行编辑。 ContentPresenter 将包含 HubSection 的 DataTemplate，因此如果您希望它从顶部开始，您可以将其从 Grid.Row 2 更改为 Grid.Row 0 和 Grid.RowSpan 3。您还可以删除 HeaderButton 和 HubHeaderPlaceHolder 并压缩 Grid如果不需要它们，请删除 Margin 或将 Padding 设置为 0 等。

<Grid HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
   <ContentPresenter x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}"/>
</Grid>