I'm using this StackPanel
, with 3 ToggleButton
:
<StackPanel x:Name="LanguageBoxAuth"
Orientation="Horizontal"
HorizontalAlignment="Center"
VerticalAlignment="Top"
Margin="0,280,0,0">
<ToggleButton Content="IT"
Click="OnLanguageButtonAuth_Click" />
<ToggleButton Content="EN"
Click="OnLanguageButtonAuth_Click" />
<ToggleButton Content="ES"
Click="OnLanguageButtonAuth_Click" />
</StackPanel>
That's the style:
<Window.Resources>
<Style TargetType="{x:Type ToggleButton}"
BasedOn="{StaticResource MahApps.Styles.ToggleButton}">
<Setter Property="Width"
Value="35" />
<Setter Property="Height"
Value="30" />
<Setter Property="VerticalAlignment"
Value="Center" />
<Setter Property="Margin"
Value="2" />
<Setter Property="Padding"
Value="5,3" />
<Setter Property="BorderThickness"
Value="2" />
<Setter Property="BorderBrush"
Value="Transparent" />
<Setter Property="Background"
Value="Transparent" />
<Setter Property="FontWeight"
Value="Bold" />
<Setter Property="FontSize"
Value="14" />
<Style.Triggers>
<Trigger Property="IsFocused"
Value="True">
<Setter Property="Background"
Value="Orange" />
<Setter Property="BorderThickness"
Value="2" />
<Setter Property="BorderBrush"
Value="Black" />
</Trigger>
<Trigger Property="IsChecked"
Value="True">
<Setter Property="Background"
Value="Orange" />
<Setter Property="BorderThickness"
Value="2" />
<Setter Property="BorderBrush"
Value="Black" />
</Trigger>
<Trigger Property="IsMouseOver"
Value="True">
<Setter Property="Background"
Value="Orange" />
<Setter Property="BorderThickness"
Value="2" />
<Setter Property="BorderBrush"
Value="Black" />
</Trigger>
<Trigger Property="IsPressed"
Value="True">
<Setter Property="Background"
Value="Orange" />
<Setter Property="BorderThickness"
Value="2" />
<Setter Property="BorderBrush"
Value="Black" />
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
Which correctly display as:
But, when I over with mouse (ES in the example), a strange "gray" border appears:
Also, if I change window, a dotten one is introduced:
How can i remove the two? Removing dotted (of course) and keep Black also on over?
Note, I'm using MahApps.Metro alongside, which could override some properties I guess?
To get rid of the dots, you could set the FocusVisualStyle
to null
in yoyr Style
:
<Style TargetType="{x:Type ToggleButton}" BasedOn="{StaticResource MahApps.Styles.ToggleButton}">
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
...
The mouse over border colour can be set using the ControlsHelper.MouseOverBorderBrush
attached property:
<Setter Property="mah:ControlsHelper.MouseOverBorderBrush" Value="Black" />