Make HubSection fill screen height - windows-8.1

Question

I am creating an application where I use the Hub control, in one of the HubSections I have a Bing Maps MapView. I would like to have that to fill the entire height of the screen, just like with a Hero HubSection, where you just set the HubSection.Background to an ImageBrush.
Now I could probably tweak the MapView Margin and get a dirty and approximate solution to this, but I am not sure if this would work on all screen sizes.
This is what I have now:
This is what I would like:
Do you have any ideas how this can be achieved?

Answer 1

The default HubSection template contains a Grid which divides the Hub's height into three rows:
A placeholder for the Hub's Header
The HubSection's Header
The HubSection's Content
If you want a HubSection to display differently you can apply a customized template.
In the designer open the document outline window and right click on a HubSection. Choose the Edit Template.Edit a Copy... menu. This will create a new HubSectionStyle with a copy of the template.
In the Xaml editor find the template (VS will drop you right there) and scroll down to the bottom where you'll see something like:
<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>
You can edit this to match your needs. The ContentPresenter will contain the HubSection's DataTemplate, so if you want it to start from the top you can change it from Grid.Row 2 to Grid.Row 0 and Grid.RowSpan 3. You could also remove the HeaderButton and HubHeaderPlaceHolder and compress the Grid down if you don't need them, remove the Margin or set Padding to 0, etc.
<Grid HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<ContentPresenter x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}"/>
</Grid>