How to make a dotted border on a Border element in Silverlight?

Question

How can I make the bottom border of this Border Silverlight element have a red dotted inside of a red solid line?

Border border = new Border();
border.CornerRadius = new CornerRadius(5);
border.BorderThickness = new Thickness(0, 0, 0, 1);
border.BorderBrush = new SolidColorBrush(Colors.Red);

Stephan · Answer 1 · 2010-05-28T13:31:32.673

Can you replace the border with a Grid and give it a Rectangle that fills the whole area?

<Rectangle Stretch="Fill" RadiusX="10" RadiusY="10" StrokeDashArray="10, 2" Stroke="Black" Fill="White" />

The StrokeDashArray can be used to draw it dotted but a Border has no such property.

EDIT:

Since I noticed you are only dotting the bottom border you could do something like this

<Border Width="100" Height="100" Background="Blue" BorderThickness="0,0,0,1">
    <Border.BorderBrush>
        <LinearGradientBrush StartPoint="0,0" EndPoint=".2,0" SpreadMethod="Repeat" >
            <GradientStopCollection>
                <GradientStop Color="Transparent" Offset="0" />
                <GradientStop Color="Transparent" Offset="0.3" />
                <GradientStop Color="Red" Offset="0.3" />
                <GradientStop Color="Red" Offset="0.6" />
                <GradientStop Color="Transparent" Offset="0.6" />
                <GradientStop Color="Transparent" Offset="1" />
            </GradientStopCollection>
        </LinearGradientBrush>
    </Border.BorderBrush>
</Border>

Adjust the Offset of the middle two GradientStop's to adjust the width of the red dot/dash. You may also need to adjust the endpoint to make it repeat at your desired interval.

If you don't want the dashes along the line to move about as it's resized, you should set `MappingMode="Absolute"` on the `LinearGradientBrush`. You may also have to tweak some other parameters after making that change. — Drew Noakes, Dec 21 '11 at 16:57

Drew Noakes · Answer 2 · 2011-12-21T17:08:24.740

Stephan's answer is helpful. However if you want a simple dotted line that doesn't stretch about as it is resized, try this XAML:

<!-- Horizontal dotted line -->
<Border HorizontalAlignment="Stretch" Height="1" BorderThickness="0,0,0,1">
  <Border.BorderBrush>
    <LinearGradientBrush StartPoint="0,0" EndPoint="2,0"
                         SpreadMethod="Repeat" MappingMode="Absolute">
        <GradientStop Color="Transparent" Offset="0" />
        <GradientStop Color="Transparent" Offset="0.499" />
        <GradientStop Color="#999" Offset="0.5" />
    </LinearGradientBrush>
  </Border.BorderBrush>                              
</Border>

Here's an alternative for a vertical dotted line:

<!-- Vertical dotted line -->
<Border VerticalAlignment="Stretch" Width="1" BorderThickness="0,0,1,0">
  <Border.BorderBrush>
    <LinearGradientBrush StartPoint="0,0" EndPoint="0,2"
                         SpreadMethod="Repeat" MappingMode="Absolute">
        <GradientStop Color="Transparent" Offset="0" />
        <GradientStop Color="Transparent" Offset="0.499" />
        <GradientStop Color="#999" Offset="0.5" />
    </LinearGradientBrush>
  </Border.BorderBrush>                              
</Border>

Coincidentally, if you use this brush on an area that's not 1px wide/tall, then you get a nice pinstripe pattern.

How to make a dotted border on a Border element in Silverlight?

2 Answers2

Linked