WPF Dashed Border Control

Question

I want to make a control that inherits from Border and simply allows me to specific a StrokeDashArray to dash the border line.

I don't want to use the 'google' suggested hacks i.e. rectangles etc as I want the flexibility the border control gives.

However, I have no experience with creating custom controls and don't know where to start?

Could you point me in the right direction

Thanks!

Solution 1

Still not optimal but how about using the solution from the link by Matt Hamilton as a VisualBrush

Comparison using VisualBrush with dashed Rectangle and SolidColorBrush

<Border BorderThickness="3,2,1,0" CornerRadius="10">
    <Border.BorderBrush>
        <VisualBrush>
            <VisualBrush.Visual>
                <Rectangle StrokeDashArray="1.0 1.0"
                           Stroke="Red"
                           StrokeThickness="{Binding RelativeSource={RelativeSource AncestorType={x:Type Border}},
                                                     Path=BorderThickness,
                                                     Converter={StaticResource ThicknessMaxConverter}}"
                           RadiusX="{Binding RelativeSource={RelativeSource AncestorType={x:Type Border}}, Path=CornerRadius.TopRight}"
                           RadiusY="{Binding RelativeSource={RelativeSource AncestorType={x:Type Border}}, Path=CornerRadius.BottomLeft}"
                           Width="{Binding RelativeSource={RelativeSource AncestorType={x:Type Border}}, Path=ActualWidth}"
                           Height="{Binding RelativeSource={RelativeSource AncestorType={x:Type Border}}, Path=ActualHeight}"/>
            </VisualBrush.Visual>
        </VisualBrush>
    </Border.BorderBrush>
</Border>

ThicknessMaxConverter

public class ThicknessMaxConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        Thickness thickness = (Thickness)value;
        double horizontalMax = Math.Max(thickness.Left, thickness.Right);
        double verticalMax = Math.Max(thickness.Top, thickness.Bottom);
        return Math.Max(horizontalMax, verticalMax);
    }
    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

Solution 2

Sorry this is a bit late, but here's a solution for WPF using the StrokeDashArray property.

ellipse Ellipse = new Ellipse();
/*code to change ellipse size, margin, color, etc*/
ellipse.StrokeDashArray=new DoubleCollection(new double[] {4, 3})
//First number is the dash length, second number the dash gap

I realize this is c# code and not XML, but the property is still the same. If you want more control of your dashes, use the other "Stroke" properties for controls found here.