WPF: Styled Button does not display access key

When creating a new style for a button this is something that can easily fall through the cracks into production code.

The Problem

Imagine that you have a standard WPF button using its default template. Something like this:

<Button Content="C_ommit" Command="{Binding CommitCommand}"/>
<Button Content="_Cancel" Command="{Binding CancelCommand}"/>

You use the underscore to specify which access key should be used in conjunction with the Alt key to execute the command associated with the button. So when you press the Alt key you can see ‘o’ and ‘C’ underlined:

Until now all goes well. The trouble comes when you want to add a personalized style to your button. Now you want your buttons to have a fancy glass button style. FYI this style was created based on Martin Grayson’s “Creating a glass button: The complete tutorial” blog post. Moving on:

<Style x:Key="{x:Type Button}" TargetType="{x:Type ButtonBase}">
    <Setter Property="SnapsToDevicePixels" Value="True"/>
    <Setter Property="OverridesDefaultStyle" Value="True"/>
    <Setter Property="Foreground" Value="#FFDDDDDD"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border BorderBrush="{DynamicResource ControlBorderBrush}" 
                        BorderThickness="1,1,1,1" CornerRadius="4,4,4,4">
                    <Border 
                        Background="{DynamicResource ControlBackgroundBrush}"
                        BorderBrush="{DynamicResource ControlInnerBorderBrush}"
                        BorderThickness="1,1,1,1" CornerRadius="4,4,4,4"
                        x:Name="border">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition/>
                                <RowDefinition/>
                            </Grid.RowDefinitions>
                            <Border 
                                Background="{DynamicResource ControlGlowBrush}"
                                x:Name="glow" 
                                Grid.RowSpan="2" CornerRadius="4,4,4,4" 
                                Opacity="0"/>
                            <ContentPresenter 
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center"
                                Grid.RowSpan="2" Margin="4,4,4,4"/>
                            <Border 
                                Background="{DynamicResource ControlShineBrush}" 
                                Grid.RowSpan="1" CornerRadius="4,4,0,0" 
                                x:Name="shine"/>
                        </Grid>
                    </Border>
                </Border>
                <ControlTemplate.Triggers>
                    (...)
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

And suddenly the button starts to display the underscores as part of its content:

Obviously this should be taken care of when we created the style, but it is easy to forget if you create a style without using some base code. If you do not know the code base that well this is something that may end up consuming you a lot of precious time. Once you know how to fix this, this is something you will never, ever, forget! Yes, unfortunately, I am basing this on my personal experience!

The Solution

The solution to this problem could not be simpler:

(...)

<ContentPresenter 
    HorizontalAlignment="Center" VerticalAlignment="Center"
    Grid.RowSpan="2" Margin="4,4,4,4"
    RecognizesAccessKey="True"/>

(...)

You just need to check that your ControlTemplate has the RecognizesAccessKey property set to true.

This way, when you add underscores to the text content of a button they will be processed as access keys.

3 thoughts on “WPF: Styled Button does not display access key

Leave a Reply

Your email address will not be published. Required fields are marked *