Prevent uneven Border CornerRadius

0
votes

I'm trying to make a Pill button, where the CornerRadius is half the height of the button (giving a half-circle on each end of the button. Really, I'd want it to be half the smaller dimension of the button (so tall and skinny ones would work)

As I increase the CornerRadius (for instance if I bound it to the height), it distorts the corner until it's a full ellipse. Is there a way to keep the radius round?

enter image description here

1
wpfxamlborderstylingcornerradius

1 Answers

2
votes

You could use a multibinding and multiconverter. You might also want to consider a different divisor. Maybe 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>

and

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;
    }
}