Outline around toggle button in WPF

I have some toggle buttons that control the visibility of some tabs. The buttons are styled so that they turn blue when pushed and grey when not. The problem is that when one toggle button is pushed then another the first one will switch back to grey but have a blue outline. If some other control (not one of the toggle buttons) is selected the button will turn grey without a blue outline. I don't want the blue outline.

My style is:

<Style x:Key="TabToggleButtonStyle" TargetType="{x:Type ToggleButton}">
    <Setter Property="Background" Value="lightGray"/>
    <Setter Property="Margin" Value="3" />
    <Setter 开发者_运维技巧Property="Padding" Value="7,2,7,2" />
    <Style.Triggers>
        <Trigger Property="IsChecked" Value="True">
            <Setter Property="Background" Value="#FF41B8F2" />
        </Trigger>
    </Style.Triggers>
</Style>

The toggles:

<DockPanel LastChildFill="False">
  <ToggleButton
      DockPanel.Dock="Right"
      Style="{StaticResource TabToggleButtonStyle}"
      Click="BtnOneClick"
      IsChecked="{Binding ElementName=_mainTabControl, Path=BtnOneTab.IsSelected}"
      Content="Agent Info"/>

    <ToggleButton
      DockPanel.Dock="Right"
      Style="{StaticResource TabToggleButtonStyle}"
      Click="BtnTwoClick"
      IsChecked="{Binding ElementName=_mainTabControl, Path=BtnTwoTab.IsSelected}"
      Content="Help"/>
</DockPanel>

The click commands set IsSelected = true on a tab.

I think that your problem is that the template for ToggleButton is using ButtonChrome for styling the possible states, like IsKeyboardFocused.

So when you uncheck a ToggleButton it will still have the keyboard focus (since you just clicked it) so it will still be styled as such.

The default template for ToggleButton looks like this

<ControlTemplate TargetType="{x:Type ToggleButton}">
    <MS_Themes:ButtonChrome x:Name="Chrome"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            Background="{TemplateBinding Background}"
                            RenderMouseOver="{TemplateBinding IsMouseOver}"
                            RenderPressed="{TemplateBinding IsPressed}"
                            RenderDefaulted="{TemplateBinding Button.IsDefaulted}"
                            SnapsToDevicePixels="true">
        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                          Margin="{TemplateBinding Padding}"
                          RecognizesAccessKey="True"
                          SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
    </MS_Themes:ButtonChrome>
    <ControlTemplate.Triggers>
        <Trigger Property="IsKeyboardFocused" Value="true">
            <Setter Property="RenderDefaulted" TargetName="Chrome" Value="true"/>
        </Trigger>
        <Trigger Property="IsChecked" Value="true">
            <Setter Property="RenderPressed" TargetName="Chrome" Value="true"/>
        </Trigger>
        <Trigger Property="IsEnabled" Value="false">
            <Setter Property="Foreground" Value="#ADADAD"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

Removing the IsKeyboardFocused trigger should solve your problem (This would also require you to add a reference to PresentationFramework.Aero). But since you can't just change parts of a template (it's an all or nothing deal), you'll have to rewrite it

So the ToggleButton style would be

<Style x:Key="TabToggleButtonStyle" TargetType="{x:Type ToggleButton}">
    <Setter Property="Background" Value="lightGray"/>
    <Setter Property="Margin" Value="3" />
    <Setter Property="Padding" Value="7,2,7,2" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ToggleButton}"
                             xmlns:MS_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero">
                <MS_Themes:ButtonChrome x:Name="Chrome"
                                        BorderBrush="{TemplateBinding BorderBrush}"
                                        Background="{TemplateBinding Background}"
                                        RenderMouseOver="{TemplateBinding IsMouseOver}"
                                        RenderPressed="{TemplateBinding IsPressed}"
                                        RenderDefaulted="{TemplateBinding Button.IsDefaulted}"
                                        SnapsToDevicePixels="true">
                    <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                        Margin="{TemplateBinding Padding}"
                                        RecognizesAccessKey="True"
                                        SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </MS_Themes:ButtonChrome>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsChecked" Value="true">
                        <Setter Property="RenderPressed" TargetName="Chrome" Value="true"/>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Foreground" Value="#ADADAD"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="IsChecked" Value="True">
            <Setter Property="Background" Value="#FF41B8F2" />
        </Trigger>
    </Style.Triggers>
</Style>

Most likely your issue is the Focus Visual Style. You can get rid of it by adding this construct to your resources:

<!-- StyleNoFocusRect -->
<Style x:Key="StyleNoFocusRect">
    <Setter Property="Control.Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Control}">
                <Canvas></Canvas>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Then add it to your ToggleButton style:

<Setter Property="FocusVisualStyle" Value="{StaticResource StyleNoFocusRect}"/>

That should get rid of your blue outline.

In .net 4.0, I just added this

<Style TargetType="ToggleButton">
    <Setter Property="Focusable" Value="False" />
</Style>

It removed the outline blue when I toggle another button but the button can't be focus anymore by the keyboard.