[UWP]Ellipse and ArcSegment Query

RobDev 401

Greetings All,

in UWP, if I draw an ellipse with, for example, a Width and Height of 100 and specify the StrokeThickness as, say, 10, what will the diameter of the resulting circle be? Is the curve of the ellipse, drawn with the specified StrokeThickness, draw on the outside of the 100 x 100 circle, making the overall diameter 120 , or is it drawn on the inside of the circle, thus retaining the circle's 100 x 100 dimension?

Likewise, what happens if the same circle, with the same StrokeThickness, is drawn with an ArcSegment?

Kind regards.

3 answers

Castorix31 83,206 Reputation points

2022-03-22T16:07:07.563+00:00
You can do a test with an Ellipse and a Line with Width = 100 =>

<Ellipse HorizontalAlignment="Left" Width="100" Height="100" Margin="10,200,0,0" Fill="Red" Stroke="Blue" VerticalAlignment="Top" StrokeThickness="10"/> <Line X1="10" Y1="315" X2="110" Y2="315" Stroke="Red" StrokeThickness="10"/>
Please sign in to rate this answer.
RobDev 401 Reputation points

2022-03-23T16:19:12.917+00:00

Hi @Castorix31 ,

I've tested out the Ellipse, slightly differently to your example. I drew an Ellipse within a rectangle, both of which had the same Width and Height values, then increased the Ellipse's StrokeThickness to 10. The result is show below:

As you can see, it seems that the StrokeThickness does not affect the outer diameter of the circle, it encroaches on the circle's inside.

I haven't tried an ArcSegment yet. I going to try that out tomorrow and let you know the result.

The documentation doesn't seem to specify this behaviour or, if it does, I couldn't find it.

Thanks for your help.

Castorix31 83,206 Reputation points

2022-03-24T07:48:22.687+00:00

ArcSegment seems different, as the StrokeThickness is in the Path

Test with StrokeThickness = 10 and StrokeThickness = 2 :

RobDev 401 Reputation points

2022-03-25T15:31:49.07+00:00

Hi @Castorix31 ,

sorry for not replying sooner, yesterday was a bit busy. Anyway, I seem to have come up with a slightly different view of the ArcSegment than you and I'm not sure how. I amended my test app to draw the ArcSegment within a fixed size square; firstly with a 2 px StrokeThickness and then a 10 px StrokeThickness, as you suggested. However, my results seem to be different from yours. My screenshot is as follows:

By the way, I've included theEllipse as well. As you can see, it looks like the ArcSegment/Path StrokeThickness seems to behave like the Ellipse i.e. it encroaches inwards and doesn't affect the circle's outer diameter. This doesn't seems to be the same as your seeing with your example. Do you knows what's happening here?

Kind regards.

Castorix31 83,206 Reputation points

2022-03-25T15:41:15.703+00:00

I just adapted a random XAML from Google to test quickly, it could be wrong :

<Path Stroke="Blue" Fill="Red" StrokeThickness="10" > <Path.Data> <PathGeometry> <PathGeometry.Figures> <PathFigure StartPoint="10,380"> <PathFigure.Segments> <ArcSegment x:Name="UpperArcSegment2" IsLargeArc="True" Size="20,20" SweepDirection="Clockwise" Point="110,380" /> </PathFigure.Segments> </PathFigure> </PathGeometry.Figures> </PathGeometry> </Path.Data> </Path>

RobDev 401 Reputation points

2022-03-26T15:26:52.473+00:00

Hi @Castorix31 ,

I've been trying to post my ArcSegment Xaml but for some reason this website won't accept it. I'll try again tomorrow.

Kind regards.

Roy Li - MSFT 32,731 Reputation points Microsoft Vendor

2022-03-28T07:40:23.957+00:00

You could update the code in your original post. I have the same behavior with @Castorix31 on ArcSegment. Like this:

<Canvas> <Rectangle Canvas.Left="50" Canvas.Top="50" Fill="DodgerBlue" Width="200" Height="200" Stroke="Black" StrokeThickness="1"/> <Path Stroke="Red" StrokeThickness ="20"> <Path.Data> <PathGeometry> <PathFigure StartPoint="250,150"> <ArcSegment Size="100,100" Point="50,150"/> </PathFigure> </PathGeometry> </Path.Data> </Path> </Canvas>

And this is the result:

RobDev 401 Reputation points

2022-03-28T14:33:36.627+00:00

Hi @Roy Li - MSFT ,

how do I edit my original post? The website doesn't seem to give me that option. My Xaml code for the ArcSebment is below (if the website allows it).

<Path Grid.Row="1" Grid.Column="2" Fill="Transparent" Stroke="Green" StrokeThickness="10" StrokeEndLineCap="Flat" HorizontalAlignment="Center" VerticalAlignment="Center" UseLayoutRounding="False" Width="100" Height="100" Stretch="Fill"> <Path.Data> <PathGeometry> <PathGeometry.Figures> <PathFigureCollection> <PathFigure StartPoint="0,0"> <PathFigure.Segments> <PathSegmentCollection> <ArcSegment Size="50,50" IsLargeArc="True" SweepDirection="Clockwise" Point="-0.01,0" /> </PathSegmentCollection> </PathFigure.Segments> </PathFigure> </PathFigureCollection> </PathGeometry.Figures> </PathGeometry> </Path.Data> </Path>

RobDev 401 Reputation points

2022-03-28T14:37:38.88+00:00

Hi @Castorix31 ,

I've managed to upload my Xaml code fro the ArcSegment in my reply to @Roy Li - MSFT . Can either of you spot the difference? I should point out that my ArcSegment was defined in a Grid (row,column) whereas yours seems to be in a Canvas - I don't know if this makes any difference.

Many thanks.

Kind regards.

Roy Li - MSFT 32,731 Reputation points Microsoft Vendor

2022-03-29T07:43:09.487+00:00

I think it's because you are the setting Stretch="Fill", If I put the Path into a Grid with row and column defined, setting the Stretch property as Fill, the path content is resized to fill the destination dimensions. So the Path won't render beyond the border of the Row and Column that you defined. If you are not using Fill or you are using the default value None, then the Path will render out of the border. For more information, you could refer to Stretch Enum.

RobDev 401 Reputation points

2022-03-29T14:52:44.173+00:00

Hi @Roy Li - MSFT ,

many thanks for your reply. You're right it is the 'Stretch' setting. If I set it to 'None' the ArcSegment looks very weird (see below):

All I was really trying to do is to get the ArcSegment to behave in the same manner as the Ellipse when it came to StrokeThickness. It seems the best setting is 'Uniform'.

I wish all of this was in the documentation, it would have saved me a lot of time.

I think you reply is the answer.

Thanks, once again.

Kind regards.

Roy Li - MSFT 32,731 Reputation points Microsoft Vendor

2022-03-30T01:20:25.17+00:00

@RobDev Glad to hear that. I've updated my reply. Please consider accepting it as answer if it helps.

RobDev 401 Reputation points

2022-03-30T15:08:45.403+00:00

HI @Roy Li - MSFT ,

I've done a bit more experimentation with the ArcSegment and I think I've found a situation where the ArcSegment radius (i.e. SIze) is at the centre of the StrokeThickness line - if that makes sense. I've drawn the rectangle to show the specific radius of the ArcSegment and I've got a screenshot that shows it:

The website won't let me submit the Xaml code that produced this but I can try it with another separate comment later, if you wish. However, this does seem to be another variant, what do you reckon?

Kind regards.

Roy Li - MSFT 32,731 Reputation points Microsoft Vendor

2022-04-01T02:52:21.19+00:00

I'm not sure how you did this? Do you mean you change the size even with the Stretch property is set to fill?

RobDev 401 Reputation points

2022-04-01T14:58:02.313+00:00

Hi @Roy Li - MSFT ,

I set the Path Width & Height both to 200, I set the Stretch to 'None', I set the PathFigure StartPoint to "150,100" and set the ArcSegment Point to "150,99.9". I've also added another ArcSegment with exactly the same parameters except the StrokeThickness is set to 1 and the Stroke set to "White" so it draws the circle exactly over the previous circle so you can see the circle radius. Here's a screenshot of it now:

As you can see, it looks like the StrokeThickness makes the ArcSegment circle be drawn either side of its radius. It looks to me like the Path Width and Height is the key but I could be wrong.
I would very much like to send you the code but this website doesn't give me enough space to do so. I could send you the whole thing if I set it up as a 'dummy' answer, if you would like.

Kind regards.
Sign in to comment
Roy Li - MSFT 32,731 Reputation points Microsoft Vendor

2022-03-24T06:58:58.403+00:00

Hello,

Welcome to Microsoft Q&A!

is it drawn on the inside of the circle, thus retaining the circle's 100 x 100 dimension?

Yes, for Ellipse, the StrokeThickness represents the width of the Shape stroke outline, it's a part inside the shape, not an extra part of the shape. It won't draw on the outside of the shape.

But it's different for the Path and the ArcSegment. Setting the StrokeThickness of the Path will make the overall diameter bigger. A workaround is setting the Stretch property of the Path, it could help to keep the Path render inside its parent control.

Thank you.

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.
Please sign in to rate this answer.
RobDev 401 Reputation points

2022-03-25T15:37:58.667+00:00

Hi @Roy Li - MSFT ,

many thanks for your reply. Was this effect explained in the documentation? If it was, I couldn't find it.

By the way, with regard to ArcSegment/Path StrokeThickness property do you have any ideas as to why my results and @Castorix31 's results are different? I'd be grateful for any help you can give.

Kind regards.

Roy Li - MSFT 32,731 Reputation points Microsoft Vendor

2022-03-28T07:42:12.937+00:00

No, there is no document that mentions this. I've commented with the result for ArcSegment/Path under @Castorix31 's answer as well.

RobDev 401 Reputation points

2022-04-08T15:16:06.91+00:00

Hi @Roy Li - MSFT ,

as far as I can determine, it would seem that for an ArcSegment when the Stretch property is set to 'None', if the path height and width is greater than the drawn result (i.e. ArcSegment Size) then the StrokeThickness extends the inner and outer radius of the ArcSegment (i.e. it draws either side of the defined ArcSegment radius). However, if the ArcSement is defined be the same size as the path width and height and the Stretch property is set is set to something other than 'None', then the ArcSegment StrokeThickness is drawn only on the inside, reducing the inner diameter but retaining the outer diameter.

I think this is what you were referring to in your proposed answer, If this is so could you please confirm it so I can mark your comment as the answer.

Kind regards.
Sign in to comment
RobDev 401 Reputation points

2022-05-25T15:07:41.29+00:00

Greetings All,

it seems that everybody has lost interest in my query and related info so I'm posting my last comment here and marking it as the answer, unless and until someone else can come up with a better one:

"as far as I can determine, it would seem that for an ArcSegment when the Stretch property is set to 'None', if the path height and width is greater than the drawn result (i.e. ArcSegment Size) then the StrokeThickness extends the inner and outer radius of the ArcSegment (i.e. it draws either side of the defined ArcSegment radius). However, if the ArcSement is defined be the same size as the path width and height and the Stretch property is set is set to something other than 'None', then the ArcSegment StrokeThickness is drawn only on the inside, reducing the inner diameter but retaining the outer diameter."

Cheers.
Please sign in to rate this answer.

0 comments No comments
Sign in to comment

Share via

[UWP]Ellipse and ArcSegment Query

3 answers