"ArcSegment" can't be drawn semi-circle correctly along the circle

[chen9835]

• .NET Core Version: 3.1
• Windows version: Windows 10 Enterprise
• Does the bug reproduce also in WPF for .NET Framework 4.8?: Yes/No
• Is this bug related specifically to tooling in Visual Studio (e.g. XAML Designer, Code editing, etc...)? If yes, please file the issue via the instructions here.

• Security issues and bugs should be reported privately, learn more via our responsible disclosure guidelines.

  Problem description: "ArcSegment" can't be drawn semi-circle correctly along the circle that was drawn by "Ellipse":

  <Window x:Class="WpfStyleApp.Window1"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:local="clr-namespace:WpfStyleApp"
      mc:Ignorable="d"
      Title="Window1" Height="450" Width="800">
  <Grid Height="220" 
        Width="220"
        VerticalAlignment="Center"
        HorizontalAlignment="Center">
      <Ellipse Fill="#66FF0000"
               Height="200"
               Width="200"
               Visibility="Visible"
               StrokeThickness="0">           
      </Ellipse>
      <Path StrokeThickness="20" 
            Stroke="Green"
            Visibility="Visible"
            Fill="Transparent"             
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Opacity="1.0">           
          <Path.Data>
              <PathGeometry>
                  <PathGeometry.Figures>
                      <PathFigureCollection>
                          <PathFigure StartPoint="0, 0">
                              <PathFigure.Segments>
                                  <PathSegmentCollection>
                                      <ArcSegment Size="100,100"                                                
                                          IsLargeArc="True"
                                          SweepDirection="Clockwise"
                                          Point="200, 0"/>
                                  </PathSegmentCollection>
                              </PathFigure.Segments>
                          </PathFigure>
                      </PathFigureCollection>
                  </PathGeometry.Figures>
              </PathGeometry>
          </Path.Data>           
      </Path>       
  </Grid>
  </Window>

  Actual behavior:

  Expected behavior: "ArcSegment" can be drawn semi-circle correctly along the circle that was drawn by "Ellipse", Or how can I achieve that? Thanks.

  Minimal repro:

[miloush]

That is because the Ellipse is filling the whole Grid that grows bigger because of the arc stroke. It then uses the Stretch property to decide how to fill into the extra space. It is asymmetrical because the stroke normally counts into the path size, except that you force it to go negative on the left side.

If you change the stroke thickness of the ellipse and look at its line in the designer, you will see that it positions the ellipse so that it fits into the size including the stroke. That's what you need to do with your path.

You have two possible solutions:

• set HorizontalAlignment="Left" on the Ellipse. That will align the stroke-less ellipse to left zero where you have the center of the path stroke
• or, more consistent with the framework, you include your path thickness into the path points, i.e. StartPoint should be 10, 0 and ArcSegment.Point should be 210, 0. (half of the stroke thickness)

[chen9835]

@miloush Thanks. I has tried, it works well.