防止不均匀的Border CornerRadius

Posted 2023-02-24

【中文标题】防止不均匀的Border CornerRadius

【英文标题】：Prevent uneven Border CornerRadius

【发布时间】：2018-04-03 17:17:11

【问题描述】：

我正在尝试制作一个 Pill 按钮，其中 CornerRadius 是按钮高度的一半（在按钮的每一端都有一个半圆。真的，我希望它是较小尺寸的一半按钮（又高又瘦的也可以）

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

【参考方案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;