How do I get XAML control to fill available height? - Windows Store 8.1

Question

I'm trying to get my map control to fill the available height no matter what screen resolution. I want the bottom margin to leave exactly enough space for a buttom or text.

But I've been trying variations of solution from other questions but none work. Like setting vertical alignment to stretch, height to Auto.

I want to anchor the edges to the sides somehow, but is that even possible?

Any other ideas?

        <HubSection Width="900" Background="#FF0E0D23">
            <HubSection.Header>
                <TextBlock Text="Location" Margin="0,0,0,0"></TextBlock>
            </HubSection.Header>
            <DataTemplate>
            <Grid VerticalAlignment="Stretch" Margin="0,0,0,0" >
                    <Grid.RowDefinitions>
                        <RowDefinition ></RowDefinition>
                        <RowDefinition></RowDefinition>
                    </Grid.RowDefinitions>
                    <bm:Map Grid.Row="0" Credentials="" x:Name="myMap"  VerticalAlignment="Stretch"></bm:Map>
                    <Button Grid.Row="1" Width="100" Height="100"></Button>

                </Grid>
            </DataTemplate>
        </HubSection>

Possible duplicate: http://stackoverflow.com/q/22907672/50447 — Rowland Shaw, Jun 12 '14 at 19:24

score 2 · Answer 1 · answered Dec 04 '15 at 01:13

You need to use blend so that you can get the default style, create a copy and edit the Container that holds the DataTemplate of your HubSection.

I recommend that your change the setters of:

<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>

to

 <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
 <Setter Property="VerticalContentAlignment" Value="Stretch"/>

Here is the default style for the HubSection:

  <Style x:Key="HubSectionStyle1" 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 BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
                            <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.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHyperlinkBaseMediumBrush}"/>
                                                        </ObjectAnimationUsingKeyFrames>
                                                        <PointerUpThemeAnimation Storyboard.TargetName="ButtonRoot"/>
                                                    </Storyboard>
                                                </VisualState>
                                                <VisualState x:Name="Pressed">
                                                    <Storyboard>
                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumLowBrush}"/>
                                                        </ObjectAnimationUsingKeyFrames>
                                                        <PointerDownThemeAnimation Storyboard.TargetName="ButtonRoot"/>
                                                    </Storyboard>
                                                </VisualState>
                                                <VisualState x:Name="Disabled">
                                                    <Storyboard>
                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}"/>
                                                        </ObjectAnimationUsingKeyFrames>
                                                    </Storyboard>
                                                </VisualState>
                                                <VisualState x:Name="ImitatedTextBlock">
                                                    <Storyboard>
                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlPageTextBaseHighBrush}"/>
                                                        </ObjectAnimationUsingKeyFrames>
                                                    </Storyboard>
                                                </VisualState>
                                            </VisualStateGroup>
                                        </VisualStateManager.VisualStateGroups>
                                        <ContentPresenter x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" OpticalMarginAlignment="TrimSideBearings" VerticalAlignment="Center"/>
                                    </Grid>
                                </ControlTemplate>
                            </Border.Resources>
                            <Grid HorizontalAlignment="Stretch" 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"/>
                                <Grid Grid.Row="1">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*"/>
                                        <ColumnDefinition Width="Auto"/>
                                    </Grid.ColumnDefinitions>
                                    <Button x:Name="HeaderButton" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Grid.Column="0" Foreground="{ThemeResource SystemControlHyperlinkTextBrush}" FontWeight="{ThemeResource HubSectionHeaderThemeFontWeight}" FontSize="{ThemeResource HubSectionHeaderThemeFontSize}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsHitTestVisible="False" IsTabStop="False" Margin="{ThemeResource HubSectionHeaderThemeMargin}" Grid.Row="1" Template="{StaticResource HeaderButtonTemplate}" UseSystemFocusVisuals="True" VerticalAlignment="Bottom"/>
                                    <Button x:Name="SeeMoreButton" ContentTemplate="{TemplateBinding HeaderTemplate}" Grid.Column="1" Foreground="{ThemeResource SystemControlHyperlinkTextBrush}" FontWeight="{ThemeResource HubSectionHeaderThemeFontWeight}" FontSize="{ThemeResource HubSectionHeaderSeeMoreThemeFontSize}" HorizontalAlignment="Right" Margin="{ThemeResource HubSectionHeaderSeeMoreThemeMargin}" Grid.Row="1" Template="{StaticResource HeaderButtonTemplate}" UseSystemFocusVisuals="True" Visibility="Collapsed" VerticalAlignment="Bottom"/>
                                </Grid>
                                <ContentPresenter x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Grid.Row="2" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                            </Grid>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

How do I get XAML control to fill available height? - Windows Store 8.1

1 Answers1