text on a templated button

Question

I can't make text visible on this particular templated button.
I need the Content value to appear on this button.

     <ControlTemplate x:Key="BooksButton" TargetType="{x:Type Button}">
                <Grid Margin="0,9,0,0">
                    <Rectangle
                        x:Name="rctBooks"
                        Width="97"
                        Height="40"
                        Margin="-2,0,-1,-4"
                        HorizontalAlignment="Left"
                        VerticalAlignment="Top"
                        RadiusX="10"
                        RadiusY="10"
                        Stroke="AliceBlue"
                        StrokeThickness="2">
                        <Rectangle.Fill>
                            <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                                <GradientStop Offset="0" Color="Black" />
                                <GradientStop Color="#FFCBC6A9" />
                            </LinearGradientBrush>
                        </Rectangle.Fill>
                    </Rectangle>
                </Grid>
            </ControlTemplate>

   <Button
        x:Name="btnMarkTwainStories"
        Width="96"
        Height="50"
        Margin="10,0,0,0"
        HorizontalAlignment="Left"
        Click="btnMarkTwainStories_Click"
        Content="Mark Twain"
        FontFamily="Times"
        FontSize="24"
        Foreground="Black"
        Template="{DynamicResource BooksButton}" 
   >

You don't have any element in your ControlTemplate that will take and render the value/object in the Content property. No surprise that you can't see the content value... (Perhaps it would be a good idea to look at the standard control template of the button to get an idea how control templates work...) — , May 07 '17 at 17:07
How to get your hands on the standard control templates (not only of a button): http://stackoverflow.com/a/28212036/2819245. Or use a tool like StyleSnooper: https://github.com/drewnoakes/style-snooper — , May 07 '17 at 17:16
@elgonzo thank you for pointing me to the right direction. StyleSnooper seems to be of interest .... — LetzerWille, May 07 '17 at 17:58

LetzerWille · Answer 1 · 2017-05-07T18:20:08.030

After adding the content presenter to the button template, it is possible to set the Content value.

      <ControlTemplate x:Key="BooksButton" TargetType="{x:Type Button}">
            <Grid Margin="0,9,0,0">
                <Rectangle
                    x:Name="rctBooks"
                    Width="97"
                    Height="40"
                    Margin="-2,0,-1,-4"
                    HorizontalAlignment="Left"
                    VerticalAlignment="Top"
                    RadiusX="10"
                    RadiusY="10"
                    Stroke="AliceBlue"
                    StrokeThickness="2">
                    <Rectangle.Fill>
                        <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                            <GradientStop Offset="0" Color="Black" />
                            <GradientStop Color="#FFCBC6A9" />
                        </LinearGradientBrush>
                    </Rectangle.Fill>
                </Rectangle>
                <ContentPresenter
                    x:Name="contentPresenter"
                    Margin="{TemplateBinding Padding}"
                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                    Content="{TemplateBinding Content}"
                    ContentStringFormat="{TemplateBinding ContentStringFormat}"
                    ContentTemplate="{TemplateBinding ContentTemplate}"
                    Focusable="False"
                    RecognizesAccessKey="True"
                    SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
            </Grid>
        </ControlTemplate>

 <Button
                            x:Name="btnMarkTwainStories"
                            Width="96"
                            Height="50"
                            Margin="10,0,0,0"
                            HorizontalAlignment="Left"
                            Click="btnMarkTwainStories_Click"
                            Content="Mark Twain"
                            FontFamily="Times"
                            FontSize="14"
                            Foreground="Black"
                            FontWeight="Bold"
                            Template="{DynamicResource BooksButton}" />

text on a templated button

1 Answers1