Why does the style change when I add an an accelerator to my button?

Question

When I have my button's content as a normal string e.g. <Button Content="Ok" /> then button behaves as normal. But if I change the content to have a keyboard accelerator e.g. <Button Content="_Ok" /> the button's style changes to have different margins and sizes.

I have a TextBlock style that doesn't have a key so is being applied to all TextBlocks, my question is why is it applied when it the content has an accelerator and not when it doesn't?

Edit: For extra info: The default style is inside the resources of a StackPanel that is the button is inside. I guess the question is really, why doesn't the default TextBlock style get applied when the button has an accelerator?

Answer 1

You should verify this with Snoop but <Button Content="Ok" /> produces a TextBlock to handle the text within a button. Since TextBlock doesn't support accelerator keys I would bet that <Button Content="_Ok" /> causes it to produce a Label instead since a Label will take care of the accelerator key.

Answer 2

WPF adds a TextBlock to each Button (and Menu) with an accelerator.
You can see this effect by running the following XAML (remember to hook up the Command if needed).

The key to fixing the problem, given the scope of your question, is to set the TextAlignment to a value of Center for the TextBlock. If you set the Width for the TextBlock style (my line is commented out below) the text will start to shift. Adding HorizontalAlignment = Center also helps center text in the TextBlock/Button, but this also impacts the other TextBlock controls.

<Window x:Class="ButtonAccelerator.Views.MainView"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="Main Window" Height="400" Width="800">
  <Window.Resources>
    <Style TargetType="TextBlock">
        <!--<Setter Property="Width" Value="70"/>-->
        <Setter Property="Height" Value="23"/>
        <Setter Property="Background" Value="Pink"/>
        <Setter Property="TextAlignment" Value="Center"/>
    </Style>
    <Style TargetType="Button">
        <Setter Property="Width" Value="70"/>
        <Setter Property="Height" Value="23"/>
    </Style>
  </Window.Resources>
  <DockPanel>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <StackPanel 
            Grid.Row="1" Grid.Column="1"
            HorizontalAlignment="Right"
            Orientation="Horizontal">
            <TextBlock Text="OK" />
            <Button 
                Content="OK"/>
            <Button 
                Content="_OK"/>
        </StackPanel>
    </Grid>
  </DockPanel>
</Window>