Question

I’m trying to create a Button that contains a grid, with rows that contain certain text.

The Button will have two rows, both with different pieces of text. The text that is passed to the ControlTemplate is showing, but not the text specified in the template.

Also, the heights of the Grid rows is not showing. I want it to expand the height of the button. In fact, I’m not sure that the Grid is showing at all really.

<Window x:Class="MAQButtonTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="695" Width="996">        
    <Window.Resources>
        <Style TargetType="TextBlock">
            <Setter Property="OverridesDefaultStyle" Value="True"/>
        </Style>
        <ControlTemplate TargetType="Control" x:Key="1">
            <Grid Width="444">
                <Grid.RowDefinitions>
                    <RowDefinition Height="51" />
                    <RowDefinition Height="36" />
                </Grid.RowDefinitions>
                <Grid Grid.Row="0" Background="#286c97">
                    <TextBlock>This is the first piece of text</TextBlock>
                </Grid>
                <Grid Grid.Row="1" Background="#5898c0">
                    <ContentPresenter Grid.Row="0" />
                </Grid>
            </Grid>
        </ControlTemplate>
    </Window.Resources>
    <Grid>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="300" />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Grid Grid.Column="0" Background="#e9f1f6"></Grid>
        <Grid Grid.Column="1" Background="#d2e3ed">
            <StackPanel>
                <TextBlock FontFamily="Segoe UI" FontSize="22" FontWeight="Medium" Margin="52,58,0,0" Foreground="#0c3d5d">Your Quizzes <TextBlock FontFamily="Segoe UI" FontSize="18" FontWeight="Medium" Foreground="#0c3d5d">(7)</TextBlock></TextBlock>
                <Grid>
                    <Button Width="444" Background="{x:Null}" BorderThickness="0" Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}">
                        <TextBlock>This is a second piece of text</TextBlock>
                    </Button>
                </Grid>
            </StackPanel>
        </Grid>

    </Grid>
</Window>

Here’s how it shows at the moment with a rough illustration of what I’m trying to achieve as a button layout:

Answer 1

You’re setting the Style of the Button, when you should be setting the Template

Resource:

    <ControlTemplate TargetType="Button" x:Key="ButtonTemplate">
        <Grid Width="444">
            <Grid.RowDefinitions>
                <RowDefinition Height="51" />
                <RowDefinition Height="36" />
            </Grid.RowDefinitions>
            <Grid Grid.Row="0" Background="#286c97">
                <TextBlock>This is the first piece of text</TextBlock>
            </Grid>
            <Grid Grid.Row="1" Background="#5898c0">
                <ContentPresenter />
            </Grid>
        </Grid>
    </ControlTemplate>

And the button:

    <Button Template="{StaticResource ButtonTemplate}" >
        Text 2
    </Button>