Dotted border around a button

Question

I'm trying to draw a dotted border around a button, however the border doesn't appear. Not sure what I'm doing wrong here, can you please help?

My Xaml code:

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Height="300" Width="300">

    <Grid Background="Ivory">
        <Border Width="101" Height="31">
            <Border.BorderBrush>
                <VisualBrush>
                    <VisualBrush.Visual>
                        <Rectangle StrokeThickness="1" Stroke="Red" StrokeDashArray="1 2"/>
                    </VisualBrush.Visual>
                </VisualBrush>
            </Border.BorderBrush>
            <Button Width="100" Height="30">
                Focus Here</Button>
        </Border>
    </Grid>
</Page>

Note: The immediate issue was with border thickness, but still the dotted border is not appearing even after adding borderthickness.

Quillet

Don't you also need to set BorderThickness to greater than 0? StrokeThickness is the brushes stroke, BorderThickness on the border determines visibility as far as I know – Crasis

I've not seen a dotted border set like this before - have you tried setting the Rectangle dimensions to the same as the border. May be something to do with the rectangles size? – Crasis

Yes that's the issue - I think what the border is actually doing is rendering a brush for each 'edge' of itself, basically rendering 4 rectangles. If you set the size the rectangles are all the right size but centered correctly based on their origin so it looks fine. There may be a better way of getting a dotted border... – Crasis

Answer 1

Visual of the VisualBrush was not able to determine its size automatically so the VisualBrush was not drawn according to the size of the Border. Also note that you need to set same BorderThickness for Border as well as Rectangle. Have a look on the XAML below. Hope it will work good for you.

<Border x:Name="MyBorderedButton" Width="101" Height="31" BorderThickness="2" >
      <Border.BorderBrush>
           <VisualBrush>
               <VisualBrush.Visual>
                   <Rectangle StrokeDashArray="4 2"
                      Stroke="Red"
                      StrokeThickness="2"
                      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>
       <Button>Focus Here</Button>
</Border>

Its working for me

Cherrylchersonese

Answer 2

In your solution, your rectangle has no size, so when it is drawn, there is nothing to draw, the solution is to inherit the size from the parent border:

<Border Width="101" Height="31" BorderThickness="1">
    <Border.BorderBrush>
        <VisualBrush>
            <VisualBrush.Visual>
                <Rectangle StrokeThickness="1"
                    Stroke="Red" 
                    StrokeDashArray="1 2"
                    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>
    <Button>
        Focus Here
    </Button>
</Border>

Skedaddle