Как убрать черную обводку при наведении мыши на кнопку?

Question

[postya]

Есть окно, в котором есть две кнопки, у них задан одинаковый стиль. При наведении на кнопку у неё меняется background и цвет текста становится черным.
При наведении мыши вылезает артифакт, внутренняя обводка, как будто внутри самой кнопки есть границы черного цвета.
Хотя в стилях я никакую обводку не указывал
Как можно от этого избавится?
Video

<Style x:Key="RoundedButton" TargetType="Button">
        <Setter Property="Grid.Column" Value="1"/>
        <Setter Property="Margin" Value="20 32"/>
        <Setter Property="HorizontalContentAlignment" Value="Center" />
        <Setter Property="VerticalContentAlignment" Value="Center" />
        <Setter Property="FontSize" Value="14"/>
        <Setter Property="FontFamily" Value="Verdana"/>
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Border Name="RoundedButtonBorder"
                            CornerRadius="15"
                            Background="{TemplateBinding Background}"
                            BorderBrush="White"
                            Padding="30 7"
                            BorderThickness="2"
                            >
                        <ContentPresenter HorizontalAlignment="Center"
                                          VerticalAlignment="Center"
                                         >
                        </ContentPresenter>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter Property="Background" Value="White" />
                            <Setter Property="Foreground" Value="Black" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

<Button Content="OK"
                Click="SaveSettings"
                Style="{StaticResource RoundedButton}"
                Grid.Row="0" />

Answer 1

[yuopi]

Надо либо Border'у выставить свойство

RenderOptions.EdgeMode="Aliased"

, но тогда графика совсем не о чем

Либо рисовать второй бордер:

Код

<Style x:Key="RoundedButton" TargetType="Button">
            <Setter Property="Grid.Column" Value="1"/>
            <Setter Property="Margin" Value="20 32"/>
            <Setter Property="HorizontalContentAlignment" Value="Center" />
            <Setter Property="VerticalContentAlignment" Value="Center" />
            <Setter Property="FontSize" Value="14"/>
            <Setter Property="FontFamily" Value="Verdana"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="Background" Value="Transparent"/>

            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Grid>
                            <Border Name="RoundedButtonBorder"
                            Margin="0"
                            CornerRadius="15"
                            Background="{TemplateBinding Background}"
                            BorderBrush="White"
                            BorderThickness="3"
                            >
                                <ContentPresenter HorizontalAlignment="Center"
                                          VerticalAlignment="Center"
                                         >
                                </ContentPresenter>
                            </Border>
                            <Border Name="RoundedButtonBorderHidden"
                            Margin="0"
                            CornerRadius="15"
                            BorderBrush="White"
                            BorderThickness="5"
                                    Visibility="Hidden"
                            >
                                <ContentPresenter HorizontalAlignment="Center"
                                          VerticalAlignment="Center"
                                         >
                                </ContentPresenter>
                            </Border>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="true">
                                <Setter Property="Background" Value="White" />
                                <Setter Property="Foreground" Value="Black" />
                                <Setter TargetName="RoundedButtonBorderHidden" Property="Visibility" Value="Visible"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

Comments

[postya]

1. Свойство RenderOptions.EdgeMode="Aliased" не существует у border


2. Добавление второго Border вызывает ошибку "Добавление второго элемента не возможно":

[yuopi]

postya, посмотрите внимательнее, эти 2 бордера я поместил в грид
а по первому пункту вот -

[postya]

По первому пункту: почему-то у меня нет такого свойства RenderOptions. Может надо добавлять какой-то пакет отдельный?


По второму пункту: все также видны какие-то черные границы, только ещё более отчетливо

[yuopi]

.net framework 4.6.1.
подключено:

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

Вот у меня так
Попробуйте весь код заменить, сработает?

код

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.Resources>
        <Style x:Key="RoundedButton" TargetType="Button">
            <Setter Property="Grid.Column" Value="1"/>
            <Setter Property="Margin" Value="20 32"/>
            <Setter Property="HorizontalContentAlignment" Value="Center" />
            <Setter Property="VerticalContentAlignment" Value="Center" />
            <Setter Property="FontSize" Value="14"/>
            <Setter Property="FontFamily" Value="Verdana"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="Background" Value="Transparent"/>

            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Grid>
                            <Border Name="RoundedButtonBorder"
                            Margin="0"
                            CornerRadius="15"
                            Background="{TemplateBinding Background}"
                            BorderBrush="White"
                            BorderThickness="3"
                            >
                                <ContentPresenter HorizontalAlignment="Center"
                                          VerticalAlignment="Center"
                                         >
                                </ContentPresenter>
                            </Border>
                            <Border Name="RoundedButtonBorderHidden"
                            Margin="0"
                            CornerRadius="15"
                            BorderBrush="White"
                            BorderThickness="10"
                                    Visibility="Hidden"
                            >
                                <ContentPresenter HorizontalAlignment="Center"
                                          VerticalAlignment="Center"
                                         >
                                </ContentPresenter>
                            </Border>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="true">
                                <Setter Property="Background" Value="White" />
                                <Setter Property="Foreground" Value="Black" />
                                <Setter TargetName="RoundedButtonBorderHidden" Property="Visibility" Value="Visible"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid Background="Black">
        <Button Content="OK"
                Style="{StaticResource RoundedButton}"
                Grid.Row="0" Grid.Column="0" Margin="157,74,462,294"
                />
    </Grid>
    
</Window>

[postya]

yuopi, Не знаю в чем была причина. но ваш код сработал. Благодарю!