WPF Rectangle with different stroke thickness on sides or Border with dashed stroke?

Question

I know I can create a dashed border with a rectangle or a border with different stroke thickness for different sides:

        <StackPanel Orientation="Horizontal">
            <Rectangle Stroke="Green" StrokeThickness="2" StrokeDashArray="4 2"  Fill="LightGreen" Height="64" Width="32" Margin="5"/>
            <Border BorderBrush="Green" BorderThickness="2,2,2,0" Background="LightGreen" Height="64" Width="32" Margin="5" />
        </StackPanel>

enter image description here

Is there anyway I can achieve both:

enter image description here

?

UPDATE: This needs to fill the space in it's parent (unlike my example with fixed sizes), e.g. a Grid - so a DrawingGeometry which has fixed sizes and my own Pen cannot be used to achieve this.. can it?

lisp · Accepted Answer · 2013-06-05T07:10:15.167

Try this:

<Border BorderThickness="4,4,4,0"  Background="LightGreen">
    <Border.BorderBrush>
        <VisualBrush>
            <VisualBrush.Visual>
                <Rectangle 
                    Stroke="Green" Fill="LightGreen"
                    StrokeDashArray="4 2"
                    StrokeThickness="4"
                    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>

It's border, so when put inside of grid it will use the available space and you can set different width for every side, it uses rectangle for visual brush, so you can easily set the borders to dashed.

enter image description here

Good one! I never knew I could define my own brush like that! — markmnl, Jun 10 '13 at 06:02

score 2 · Answer 2 · answered Jun 05 '13 at 06:02

A hacky solution but it works is to cover the side of the dashed Rectangle you want hidden:

            <Grid Width="100" Height="100">
                <Rectangle Stroke="Green" StrokeThickness="4" StrokeDashArray="4 2"  Fill="LightGreen" Margin="10"/>
                <Rectangle StrokeThickness="0" Height="4" Margin="10" VerticalAlignment="Bottom" Fill="LightGreen"/>
            </Grid>

enter image description here

WPF Rectangle with different stroke thickness on sides or Border with dashed stroke?

2 Answers2