How to get rid of element focus border in xaml

Question

In WPF, I created a custom button template which looks like this:

<ToggleButton x:Name="button" HorizontalAlignment="Left" Margin="0,0,0,0" >
        <ToggleButton.Template>
            <ControlTemplate TargetType="{x:Type ToggleButton}">
                <Grid Background="#01FFFFFF" Width="62" Height="53">
                    <Border VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Background="#01FFFFFF" IsHitTestVisible="True"/>
                    <Canvas Width="26" Height="32" x:Name="background" IsHitTestVisible="True" >
                       <!-- Omitted for brevity--->
                    </Canvas>
                </Grid>
            </ControlTemplate>
        </ToggleButton.Template>
    </ToggleButton>

The result of this code is a simple Off button:

Now, when this button gets to focus of the mouse, and then the screen looses focus, the button gets a dashed border around it like so:

My question is quite simple: how do I get rid of this border? I tried playing around with the FocusVisualStyle properties, but could not get it to work.

Answer 1

You can just remove the FocusVisualStyle in your style, this should remove the dotted border

   <ToggleButton FocusVisualStyle="{x:Null}" x:Name="button" HorizontalAlignment="Left" Margin="0,0,0,0"  >