WPF Button Style Doesn't Show Text

Question

I'm new to this so please bear with me.

I now have this Style. Paste this into a window to see it in action.

<Window.Resources>

<Style x:Key="SelectionButton3"
        TargetType="{x:Type Button}">

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">

                <Grid HorizontalAlignment="Stretch"
                        VerticalAlignment="Stretch"
                        ClipToBounds="False">

                    <Grid.RowDefinitions>
                        <RowDefinition Height="75" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="100" />
                        <ColumnDefinition Width="55" />
                    </Grid.ColumnDefinitions>

                    <Border x:Name="TheBorder"
                            BorderThickness="0,1.5,1.5,1.5"
                            CornerRadius="3"
                            Background="SteelBlue"
                            Height="35"
                            Grid.Column="1"
                            Grid.Row="0"
                            Margin="-31"
                            BorderBrush="DarkSlateBlue"/>

                    <Rectangle Name="TheRectangle"
                                Fill="SteelBlue"
                                Stroke="DarkSlateBlue"
                                Grid.Row="0"
                                Grid.Column="0">

                        <Rectangle.LayoutTransform>
                            <RotateTransform Angle="-45" />
                        </Rectangle.LayoutTransform>

                        <Rectangle.BitmapEffect>
                            <DropShadowBitmapEffect ShadowDepth="5" />
                        </Rectangle.BitmapEffect>

                    </Rectangle>

                    <ContentPresenter x:Name="ContentArea"
                                       VerticalAlignment="Center"
                                       HorizontalAlignment="Center"
                                       Content="{Binding Path=Content, RelativeSource={RelativeSource TemplatedParent}}" />
                </Grid>

                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver"
                                Value="True">
                        <Setter TargetName="TheBorder"
                                Property="BitmapEffect">
                            <Setter.Value>
                                <DropShadowBitmapEffect ShadowDepth="0" />
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>

    </Setter>

    <Setter Property="Foreground"
            Value="White"/>
    <Setter Property="FontFamily"
            Value="Segoe UI" />
    <Setter Property="FontSize"
            Value="20" />

    </Style>

<Grid.RowDefinitions>
    <RowDefinition Height="20"/>
    <RowDefinition Height="Auto"/>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="Auto" />
    <RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
    <ColumnDefinition Width="20"/>
    <ColumnDefinition Width="250" />
</Grid.ColumnDefinitions>

<Button Grid.Row="1"
        Grid.Column="1"
        Style="{StaticResource SelectionButton3}"
        Margin="0,0,0,5"
        Click="Button_Click">

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>

        <Image Height="35"
               Width="35"
               Stretch="Fill"
               HorizontalAlignment="Center"
               VerticalAlignment="Center"
               Grid.Column="0"
               Margin="32.5,0,0,0"
               Source="/app;component/Media/Images/Mail/email.png" />

        <TextBlock Text="Email"
                   Grid.Column="1"
                   HorizontalAlignment="Center"
                   VerticalAlignment="Center"
                   Margin="22,0,0,0"/>

    </Grid>


</Button>

I have 2 questions:

1) Why is only part of the text showing up?

2) How do I put the Image and TextBlock in the Template and just bind to them?

Answer 1

The reason why your Text is clipped is because you did not specify Grid.Row and Grid.Column for your ContentPresenter. This causes your button's content to default to the 0th Row and 0th Column on your ControlTemplate, which in combination with your margins and positions causes the Textblock on your Button Element to be cut off. I am guessing this might be your intent?

<ContentPresenter x:Name="ContentArea"
   Grid.Column="0"
   Grid.ColumnSpan="2"
   Grid.Row="0"
   VerticalAlignment="Stretch"
   HorizontalAlignment="Stretch"
   Content="{Binding Path=Content, 
             RelativeSource={RelativeSourceTemplatedParent}}" />

Now the ContentPresenter will span both columns on the ControlTemplate's Grid, so your Textblock will have more room to display itself.

To answer your second question How do I put the Image and Textblock in the template and just bind to them?

One way to do it is to subclass the Button class, call it MyImageButton for example, and implement two new Dependency Properties called Image and Text in this new class. Then you can move your <Image> and <TextBlock> into your Control Template and bind them to your new Image and Text Properties. You can then instantiate MyImageButton and used the new Properties to set the button's image and text.