WPF: How to have custom button template that uses system's button background by default?

Question

I am creating a style that changes a ControlTemplate of a Button (it actually adds arrow on the right, so that the button looks like dropdown button (which is missing in wpf)).

Inside of template, I put the actual button (because I need the result to still be like button - I could change only ContentTemplate, but I need to display the actual content together with arrow, and putting ContentPresenter inside ContentTemplate yields stack overflow - wpf just expands the template into the presenter and goes on and on), together with arrow.

My problem is that I would like the user to be able to change button's background, so I need to bind Background="{TemplateBinding Background}". With this, the user would have to always provide the background, otherwise it would be null. To prevent this, I understand I need to provide default value for the background, so I added <Setter Property="Background" Value="default Background goes here"/>

The question is, what should be a value of this setter? I assume that wpf's built-in styles are loaded automatically for every application, and I have looked into aero.normalcolor.xaml, where they provide ButtonNormalBackground style, and later use it as default button style <Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/> (aero.normalcolor.xaml, line 47).

Exactly what I wanted, however, when I use this setter, the static resource is not found. I then changed it to DynamicResource, but in that case, the button's background stays transparent - the ButtonNormalBackground isn't used!

How should I provide system's button look as default value? Thank you!

PS: dtto for BorderBrush, BorderThickness - geez, it seems that I am not allowed the tricks that WPF authors use all the time :/

My style:

<Style TargetType="{x:Type ToggleButton}" x:Key="DropDownArrowStyle">
    <Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/>
    <Setter Property="ToggleButton.Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ToggleButton}">
                <ToggleButton 
                    x:Name="PART_ToggleButton"
                    Margin="{TemplateBinding Margin}"
                    Padding="{TemplateBinding Padding}"
                    HorizontalAlignment="Stretch"
                    VerticalAlignment="Stretch"
                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                    IsEnabled="{TemplateBinding IsEnabled}"
                    IsChecked="{Binding IsChecked, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                    ContextMenu="{TemplateBinding ContextMenu}"
                    Background="{TemplateBinding Background}"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    Foreground="{TemplateBinding Foreground}"
                    FocusVisualStyle="{TemplateBinding FocusVisualStyle}"
                    ClickMode="{TemplateBinding ClickMode}"
                    >
                    <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <ContentPresenter
                            x:Name="ButtonContentPresenter"
                            HorizontalAlignment="Left"
                            VerticalAlignment="Stretch"
                            Margin="{TemplateBinding Padding}"
                            Content="{TemplateBinding Content}"
                            Grid.Column="0"
                            />
                        <Border 
                            x:Name="PART_DownArrowBorder"
                            HorizontalAlignment="Stretch"
                            VerticalAlignment="Stretch"
                            Background="Transparent"
                            Focusable="False"
                            Grid.Column="1"
                            >
                            <Path 
                                Focusable="False"
                                x:Name="PART_DownArrow"
                                Data="M 3,0 L 6.5,4 L 10,0" 
                                Width="12" 
                                HorizontalAlignment="Right"
                                VerticalAlignment="Center"
                                Fill="Black" SnapsToDevicePixels="True"
                                >
                            </Path>
                        </Border>
                    </Grid>
                </ToggleButton>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Eduardo Molteni Eduardo Molteni · Accepted Answer · 2011-11-03T14:21:43

You need to define the colors you want to use and reference the system colors:

i.e.

<SolidColorBrush 
   Color="{DynamicResource {x:Static SystemColors.HighlightColorKey}}"
   x:Key="ButtonLinkBackground"/>

or

<Grid Background="{DynamicResource {x:Static SystemColors.DesktopBrushKey}}"/>

More info on SystemColors available How can I list colors in WPF with XAML?

WPF: How to have custom button template that uses system's button background by default?

1 Answers