WPF 按钮样式，带有相对于按钮大小和彩色线条的圆角

Question

我需要帮助制作一个看起来像这样的按钮：

无论按钮的大小如何，它都应该有那些圆角。

到目前为止我所拥有的：

App.xaml 中按钮的样式

<!-- Standard Button Colors-->
<SolidColorBrush x:Key="StandardButtonBackground" Color="#1C536F" />
<SolidColorBrush x:Key="StandardButtonForeground" Color="#FEFEFE" />

<!-- Standard Button Template-->
<Style x:Key="StandardButton" TargetType="Button">
    <Setter Property="Background" Value="{StaticResource StandardButtonBackground}" />
    <Setter Property="Foreground" Value="{StaticResource StandardButtonForeground}" />

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border CornerRadius="55" Background="{StaticResource StandardButtonBackground}">
                    <ContentPresenter Margin="2" HorizontalAlignment="Center" VerticalAlignment="Center" RecognizesAccessKey="True"/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

在视图中使用：

<Button Style="{StaticResource StandardButton}" Content="Test" FontSize="20"/>

它看起来像这样：

但是角是像素大小的，所以当按钮的大小改变时，角不会相应地改变。

接下来是这条彩色线，它应该显示一个状态。我怎样才能添加这样的一行？

Answer 1

您可以使用转换器获取半径和高光的第二个边框。

主窗口.xaml

<Window 

    ...

    >
    <Window.Resources>
        <!-- Converter -->
        <local:HeightToRadiusConverter x:Key="HeightToRadiusConverter"/>
        <!-- Standard Button Colors-->
        <SolidColorBrush x:Key="StandardButtonBackground" Color="#1C536F" />
        <SolidColorBrush x:Key="StandardButtonForeground" Color="#FEFEFE" />
        <SolidColorBrush x:Key="StandardButtonHighlight" Color="GreenYellow" />
        <!-- Standard Button Template-->
        <Style x:Key="StandardButton" TargetType="Button">
            <Setter Property="Background" Value="{StaticResource StandardButtonBackground}" />
            <Setter Property="Foreground" Value="{StaticResource StandardButtonForeground}" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border CornerRadius="{Binding ActualHeight, RelativeSource={RelativeSource Self}, Converter={StaticResource HeightToRadiusConverter}}"
                                Background="{TemplateBinding Background}">
                            <Border Margin="5" BorderThickness="2" BorderBrush="{StaticResource StandardButtonHighlight}"
                                CornerRadius="{Binding ActualHeight, RelativeSource={RelativeSource Self}, Converter={StaticResource HeightToRadiusConverter}}">
                                <ContentPresenter Margin="2" HorizontalAlignment="Center" VerticalAlignment="Center" RecognizesAccessKey="True"/>
                            </Border>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid>
        <Button Style="{StaticResource StandardButton}" Content="Test" FontSize="20"/>
    </Grid>
</Window>

转换器

public class HeightToRadiusConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        double height = (double)value;
        return height / 2;
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        return new NotImplementedException();
    }
}

调整窗口大小将相应地调整按钮的大小。