防止 Border CornerRadius 不均匀

Question

我正在尝试制作一个 Pill 按钮，其中 CornerRadius 是按钮高度的一半（在按钮的每一端给出一个半圆。真的，我希望它是小的一半按钮的尺寸（那么高和瘦的就可以了）

当我增加 CornerRadius（例如，如果我将它绑定到高度）时，它会扭曲角直到它变成一个完整的椭圆。有没有办法让半径保持圆？

Answer 1

您可以使用多绑定和多转换器。您可能还想考虑一个不同的除数。也许 3.

    <Border  Background="Blue">
        <Border.CornerRadius>
            <MultiBinding Converter="{local:MultiDividerConverter Divisor=2}">
                <Binding Path="ActualWidth"
                         RelativeSource="{RelativeSource Self}" 
                         />
                <Binding Path="ActualHeight"
                         RelativeSource="{RelativeSource Self}" 
                         />
            </MultiBinding>
        </Border.CornerRadius>
    </Border>

和

public class MultiDividerConverter : MarkupExtension, IMultiValueConverter
{
    public double Divisor { get; set; } = 2.0;

    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
    {
        double minDim = values.Select(x => System.Convert.ToDouble(x ?? 0.0)).Min();
        if (minDim == 0)
            return new CornerRadius(0);
        return new CornerRadius(minDim / Divisor);
    }

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
    {
        return null;
    }

    public override object ProvideValue(IServiceProvider serviceProvider)
    {
        return this;
    }
}

防止 Border CornerRadius 不均匀

Prevent uneven Border CornerRadius

wpf

xaml

border

styling

cornerradius