Question

I have been trying to create a user control library which simply has styled version of the default WPF controls. Basically I use the same style of controls in every project I do.

So I thought rather than restyling everything in each project I could create a user control library which would have all the controls pre styled. However I can’t seem to apply a style to a control as it leaves me with a blank box.

Here is the XAML for a button control. I know I must be doing something completely wrong but I cant seem to find any info on the net about how to do this.

Basically I just want this to be a standard wpf button but with “Century Gothic” for the font, Green background when clicked, etc.

Could anyone point me in the right direction?

<Button x:Class="IM.WPF.Controls.imButton"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        mc:Ignorable="d"
        d:DesignHeight="23"
        d:DesignWidth="75">

  <Button.Style>
    <Style TargetType="Button"
           x:Name="imButtonStyle">
      <Setter Property="SnapsToDevicePixels"
              Value="True" />
      <Setter Property="OverridesDefaultStyle"
              Value="True" />
      <Setter Property="Content"
              Value="imButton" />
      <Setter Property="BorderBrush"
              Value="#006150" />
      <Setter Property="FontFamily"
              Value="Century Gothic" />
      <Setter Property="FontSize"
              Value="12" />
      <Setter Property="Foreground"
              Value="#006150" />
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="Button">
            <ControlTemplate.Triggers>
              <Trigger Property="IsPressed"
                       Value="True">
                <Setter Property="Background">
                  <Setter.Value>
                    <LinearGradientBrush>
                      <GradientStop Color="#006150"
                                    Offset="0" />
                      <GradientStop Color="#006150"
                                    Offset="0.5" />
                      <GradientStop Color="#006150"
                                    Offset="0.5" />
                      <GradientStop Color="#006150"
                                    Offset="0.9" />
                    </LinearGradientBrush>
                  </Setter.Value>
                </Setter>
              </Trigger>
            </ControlTemplate.Triggers>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>
  </Button.Style>

  <Button.Background>
    <LinearGradientBrush StartPoint="0,0"
                         EndPoint="0,1">
      <GradientStop Color="White"
                    Offset="0" />
      <GradientStop Color="#E0E0E0"
                    Offset="0.5" />
      <GradientStop Color="LightGray"
                    Offset="0.5" />
      <GradientStop Color="DarkGray"
                    Offset="0.9" />
    </LinearGradientBrush>
  </Button.Background>

</Button>

Thanks

Answer 1

You are setting the Template of the control to an empty template (your template only contains a trigger). This is overriding anny existing display logic. Try setting your trigger in a Style Triger instead.

Also, if all you’re doing is changing the appearance of the controls, a better (and easier) approach than subclassing every control would be to just provide a set of Xaml styles for the existing controls. This way you have a reusable ResourceDictionary that can be applied to any existing application, and your Xaml doesn’t have to use a load of non-standard controls. You can also choose to package this as either an individual Xaml file, or put it in a separate assembly that can be reused.