How do I create a dashed border with rounded corners in WPF?

Question

The Rectangle element has StrokeDashArray which allows it to be drawn with dashes, but it doesn't support rounded corners. The Border control supports nice thick lines with rounded corners, but will only draw solid lines.

What's the best way to achieve a dashed border with rounded corners, with any control?

Example of dashed border http://img524.imageshack.us/img524/3186/dashedborder.png

Kent Boogaart · Accepted Answer · 2015-07-29T00:50:35.233

73

You are mistaken that Rectangle does not support this:

<Rectangle StrokeDashArray="0.5 1.0 0.3" Stroke="Black" StrokeThickness="2" RadiusX="10" RadiusY="10"/>

edited Jul 29 '15 at 00:50

answered Jun 26 '09 at 09:21

Kent Boogaart

175,602
35
392
393

Your image link seems to have broken. If you still have the original image, please reupload it to stack.imgur, or just edit your answer to make it work without the image. Thanks. – Ilmari Karonen Jul 27 '15 at 09:48

score 9 · Answer 2 · answered Jun 28 '11 at 07:31

WPF Border control does not support dashed lines. If you want to apply a dotted/dashed border for a control, you can simply decorate the control with an adorner.

Here is the sample adorner class. This is a generic adorner for any UIelement.

class DottedLineAdorner : Adorner
{
    public UIElement AdornedElement { get; set; }

    public DottedLineAdorner(UIElement adornedElement) : base(adornedElement)
    {
        AdornedElement = adornedElement;
    }

    protected override void OnRender(DrawingContext drawingContext)
    {
        Size eltSize = (AdornedElement as FrameworkElement).DesiredSize;
        Pen pen = new Pen(Brushes.Blue, 2) { DashStyle = DashStyles.DashDot };
        drawingContext.DrawRoundedRectangle(null, pen, new Rect(0, 0, eltSize.Width, eltSize.Height), 10, 10);
    }
}

I have a simple textblock in my xaml and it is contained in a grid named 'LayoutGrid'.

Now, the border can be applied in the code behind

    private void Window_Loaded(object sender, RoutedEventArgs e)
    {
        AdornerLayer.GetAdornerLayer(LayoutGrid).Add(new DottedLineAdorner(textblock));
    }

How do I create a dashed border with rounded corners in WPF?

2 Answers2

Linked