Question

I have just started working with with Styles and Control Templates and have created the following styles to display a button as text in a grid. I would like to embed Font Styling into the styles for underlining but have not figured it out.

<Style x:Key="TextButtonStyle" TargetType="Button">
    <Setter Property="Background" Value="LightGray" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ContentControl">
                <ContentPresenter Content="{TemplateBinding Content}" />
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style x:Key="TextButtonInGridStyle" TargetType="Button" BasedOn="{StaticResource TextButtonStyle}">
    <Setter Property="VerticalAlignment" Value="Center" />
    <Setter Property="Margin" Value="4,4,4,4" />
</Style>

I would like to embed Font Styling into the styles for underlining but have not figured it out. Is there any way to do this without embedding a TextBlock into the ControlTemplate or nesting a TextBlock in the Button element declaration?

Thanks

Answer 1

You definitely can, or maybe I don’t understand the problem, but see if this example is what you’re after:

<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"
x:Class="SilverlightApplication1.MainPage"
Width="640" Height="480">
<UserControl.Resources>
    <Style x:Key="TextButtonStyle" TargetType="Button">
        <Setter Property="Background" Value="LightGray" />
        <Setter Property="Template">
            <Setter.Value>
                    <ControlTemplate TargetType="ContentControl">
                            <ContentPresenter Content="{TemplateBinding Content}" />
                    </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="TextButtonInGridStyle" TargetType="Button" BasedOn="{StaticResource TextButtonStyle}">
        <Setter Property="VerticalAlignment" Value="Center" />
        <Setter Property="Margin" Value="4,4,4,4" />
        <Setter Property="FontFamily" Value="Arial"/>
        <Setter Property="FontWeight" Value="Bold"/>
        <Setter Property="Foreground" Value="Red"/>
    </Style>
</UserControl.Resources>

<StackPanel x:Name="LayoutRoot" Background="White">
    <Button Content="Button" Style="{StaticResource TextButtonStyle}"/>
    <Button HorizontalAlignment="Left" VerticalAlignment="Stretch" Width="75" Style="{StaticResource TextButtonInGridStyle}" Margin="4,0,0,0">
        Button
    </Button>
    <Button HorizontalAlignment="Left" VerticalAlignment="Stretch" Width="75" Style="{StaticResource TextButtonInGridStyle}" Margin="4,0,0,0">
        <Rectangle Fill="#FFF4F4F5" Height="10" Stroke="Black"/>
    </Button>
</StackPanel>

You can see that there’s no TextBlock in the Button, and if the content is a rectangle it’ll be shown instead of the text nicely.