使HubSection填充屏幕高度

Question

我正在使用Hub控件创建一个应用程序，其中一个HubSections我有一个Bing地图MapView。我希望能够填充整个屏幕高度，就像使用英雄HubSection一样，您只需将HubSection.Background设置为ImageBrush。

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

这就是我现在所拥有的：

这就是我想要的：

您有什么想法可以实现这一目标吗？

Answer 1

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

1. Hub's Header的占位符
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并压缩网格如果你不需要它们，请删除边距或将填充设置为0等。

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