Search code examples
.netwpfmahapps.metro

ToggleButton weird border color on over?

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:

enter image description here

But, when I over with mouse (ES in the example), a strange "gray" border appears:

enter image description here

Also, if I change window, a dotten one is introduced:

enter image description here

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?

Solution

  • 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" />