How do I make my TextBlocks be the correct sizes in my C# XAML Windows 8.1 app?

Question

I'm new to Windows 8.1 development, so forgive me if this question is obvious or rudimentary. I've experimented around with the various attributes quite a bit, and I can't make it work the way I want it to, so I figured maybe someone here could give me a hand.

A description of what I'm doing: I made a UserControl so I can isolate the UI for this one thing I'm trying to do, and also so I can use it in various places in my real UI. The UserControl consists of a Button with a Grid in it. The Grid has definitions for 3 rows, and I want the rows (and the Border elements and TextBlock elements they contain) to take up 20% of the total height, 60% of the height, and 20% of the height for rows 0, 1, and 2, respectively. I also want the Grid to take up the entire height of the Button.

Here's the XAML markup for the UserControl, garishly colored so it's obvious where everything is.

<UserControl
    x:Name="UserControlRoot"
    d:DesignHeight="300"
    d:DesignWidth="400"
    mc:Ignorable="d"
>
    <Grid x:Name="LayoutRoot" Margin="0" Background="Red">
        <Grid.Resources>
            <Style TargetType="TextBlock" x:Key="UCTextBlock">
                <Setter Property="FontSize" Value="20" />
                <Setter Property="TextAlignment" Value="Center" />
                <Setter Property="TextWrapping" Value="NoWrap" />
            </Style>
        </Grid.Resources>
        <!-- THIS BUTTON HAS SPACING AROUND IT - WHY? -->
        <Button 
            VerticalAlignment="Stretch"
            HorizontalAlignment="Stretch"
            BorderBrush="White"
            BorderThickness="5"
            Background="Green"
            Padding="0"
            Foreground="Blue"
            Margin="0"
        >
            <Grid Background="#ff333333">
                <Grid.RowDefinitions>
                    <RowDefinition Height="2*" />
                    <RowDefinition Height="6*" />
                    <RowDefinition Height="2*" />
                </Grid.RowDefinitions>

                <Border Grid.Row="0" HorizontalAlignment="Stretch">
                    <TextBlock Text="THIS IS MY RED TEXT" Foreground="LightCoral" Style="{StaticResource UCTextBlock}" />
                </Border>
                <Border Grid.Row="1" HorizontalAlignment="Stretch">
                    <TextBlock Text="THIS IS MY WHITE TEXT, NOT TALL" Foreground="White" Style="{StaticResource UCTextBlock}" />
                </Border>
                <Border Grid.Row="2" HorizontalAlignment="Stretch">
                    <TextBlock Text="THIS IS MY BLUE TEXT" Foreground="LightSkyBlue" Style="{StaticResource UCTextBlock}" />
                </Border>
            </Grid>
        </Button>
    </Grid>
</UserControl>

This is what it looks like in the designer:

Note that the white text, which is in Row 1 (Height="6*"), is not 3x as tall as Row 0 and Row 2. As far as I understand it, the Height="6*" vs Height="2*" should make Row 1 bigger than Rows 0 and 2. I'm obviously misisng something obvious here, but I don't know what it is.

Any ideas as to why the TextBlocks aren't sizing the way I want them to? There are no external DesignTemplates that are affecting the style of any of the elements (as far as I can tell, though I'm not sure if there's a way for me to explicitly/exhaustively determine whether or not this is truly the case).

A mostly-unrelated aside: In case this helps someone else, I found that putting a Margin="0,-10" on the Button will get rid of the red area around the button within the outer Grid. It took awhile to figure that out, so hopefully it'll save someone else some time. There may be a ThemeResource that has the same effect, but if so I never found it.

Answer 1

In the Button set the horizontal and vertical content alignment to Stretch. This will stretch the content grid.

<Button HorizontalContentAlignment="Stretch" ...
</Button>

Answer 2

TL;DR: Set HorizontalContentAlignment and VerticalContentAlignment to Stretch

The ContentPresenter in the button has its HorizontalAlignment and VerticalAlignment property bound to the HorizontalContentAlignment and VerticalContentAlignment property respectively. You can see this in the default control template found on MSDN.

<Grid>
...
<Border x:Name="Border"
      Background="{TemplateBinding Background}"
      BorderBrush="{TemplateBinding BorderBrush}"
      BorderThickness="{TemplateBinding BorderThickness}"
      Margin="3">
     <ContentPresenter x:Name="ContentPresenter"
                     Content="{TemplateBinding Content}"
                     ContentTransitions="{TemplateBinding ContentTransitions}"
                     ContentTemplate="{TemplateBinding ContentTemplate}"
                     Margin="{TemplateBinding Padding}"
                     HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                     VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
                                      AutomationProperties.AccessibilityView="Raw"/>
                </Border>
                ...
            </Grid>

Because your Grid is actually inside the content presenter, it fills that space (not the entire space of the button). By setting those properties to Stretch you have the ContentPresenter fill the available space, which the Grid then also does, giving you the correct behavior.