Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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);
like image 788
Edward Tanguay Avatar asked May 28 '10 13:05

Edward Tanguay


2 Answers

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.

like image 109
Stephan Avatar answered Nov 15 '22 14:11

Stephan


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.

like image 6
Drew Noakes Avatar answered Nov 15 '22 14:11

Drew Noakes