How to draw border with dotted line

BitSmithy 1,751

Hello

I want to draw Border with dotted line. How to do such case?
I dont wat to use Rectangle but Border.
<Border></Border>

John Torjo 861 Reputation points

2020-04-15T17:17:27.943+00:00

As far as I know, it's not possible to do it with <Border>

However, with a Rectangle, where you don't specify the Fill (thus, the Fill remains transparent), it's exactly what you want. Why do you want to avoid <Rectangle/> ?
BitSmithy 1,751 Reputation points

2020-04-16T11:59:02.947+00:00

I want to get official info, how it is about <Border>. I could not find anything valuable in net about this topic.
Fay Wang - MSFT 5,191 Reputation points

2020-04-17T03:09:12.217+00:00

Those which can draw dotted lines need to inherit from the Shape class, but the Border inherits from FrameworkElement. Can you tell us why do you need to use Border to draw dotted lines?
BitSmithy 1,751 Reputation points

2020-04-17T09:33:34.763+00:00

I want to make UIElements selection rectangle (when user clicks on UIELement it will be bordered with dotted line), and I am doing investigation in this topic. I couldnt find any trusted an clear answer in net if it is possible in UWP with Borders. Now I know if it is not possible. I will try with Rectangle but Rectangle for example cant carry any context, so below code is not possible:

<Rectangle>
<TextBlock>
</TextBlock>
</Rectangle>
Ivanich 306 Reputation points

2020-04-18T11:39:56.507+00:00

Just a remark to your discussion: it would be nice if somebody will make custom dotted brush for border and include it into Community Toolkit or WinUI. Unfortunatelly, there is nothing similar in the UWP or free libraries right now.

Accepted answer

Fay Wang - MSFT 5,191 Reputation points

2020-04-20T06:38:16.193+00:00
Hello,

Welcome to Microsoft Q&A!

Draw border with dotted line.

Those which can draw dotted lines need to inherit from the Shape class, but the Border inherits from FrameworkElement. So you can't draw a Border with dotted line.

But Rectangle for example cant carry any context.

Rectangle can't add any child content, as a simple workaround, you can put the Rectangle and TextBlock in a Grid, let the TextBlock overlay on the Rectangle. For example:

<Grid Width="200" Height="200"> <Rectangle StrokeDashArray="1.0 1.0" Stroke="Red" StrokeThickness="2" Width="200" Height="200"> </Rectangle> <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center">hello</TextBlock> </Grid>
Please sign in to rate this answer.
John Torjo 861 Reputation points

2020-04-20T07:07:38.687+00:00

I actually wanted to suggest something similar. I do believe he wants something else. Basically, to put the dotted line exactly around the text. But it could hypothetically do that, only after knowing the Width/height of the text.

So, we'd need to bind using ElementName. I know I've had issues in the past using ElementName in UWP, but I believe it could work
Sign in to comment

How to draw border with dotted line

0 additional answers