如何在XAML中划分为三分之一的圆圈？

Question

在我的WPF应用程序中，我想绘制一个分为三个相等弧的圆，如和平符号或饼图。

换句话说，我想画一下：http://i.stack.imgur.com/7Mxwn.jpg

我知道如何创建System.Windows.Shape。它在代码中的路径，但不是如何在XAML中这样做。

为这样的形状创建Path元素的正确XAML标记是什么？

更新：给出的答案让我意识到我不清楚我在寻找什么：我想为每个人提供一个Geometry对象（单个Path或GeometryGroup）三个封闭的部门之一（馅饼的切片）。

Answer 1

有几种方法可以做到这一点，最简单的可能就是：

<Image Width="200" Height="200">
    <Image.Source>
        <DrawingImage>
            <DrawingImage.Drawing>
                <GeometryDrawing>
                    <GeometryDrawing.Pen>
                        <Pen Brush="Red"/>
                    </GeometryDrawing.Pen>
                    <GeometryDrawing.Geometry>
                        <GeometryGroup>
                        <PathGeometry>
                            <PathFigure StartPoint="100,100">
                                <PathFigure.Segments>
                                    <LineSegment Point="100,0"/>
                                </PathFigure.Segments>
                            </PathFigure>
                        </PathGeometry>
                        <PathGeometry>
                            <PathFigure StartPoint="100,100">
                                <PathFigure.Segments>
                                    <LineSegment Point="186.6,150"/>
                                </PathFigure.Segments>
                            </PathFigure>
                        </PathGeometry>
                        <PathGeometry>
                            <PathFigure StartPoint="100,100">
                                <PathFigure.Segments>
                                    <LineSegment Point="13.4,150"/>
                                </PathFigure.Segments>
                            </PathFigure>
                        </PathGeometry>
                        <EllipseGeometry Center="100,100" RadiusX="100" RadiusY="100"/>

                        </GeometryGroup>
                    </GeometryDrawing.Geometry>
                </GeometryDrawing>
            </DrawingImage.Drawing>
        </DrawingImage>
    </Image.Source>
</Image>

可以使用几何迷你语言将上述几何体压缩为以下几何：

<GeometryGroup>
    <PathGeometry Figures="M100,100 L100,0"/>
    <PathGeometry Figures="M100,100 L186.6,150"/>
    <PathGeometry Figures="M100,100 L13.4,150"/>
    <EllipseGeometry Center="100,100" RadiusX="100" RadiusY="100"/>
</GeometryGroup>

这只是创建一个圆圈和从中心到边缘的三条线，您需要通过polar to cartesian conversion计算点数。

另一种方法是使用ArcSegments，这是一个很大的痛苦。

编辑：可怕的ArcSegment版本：

<Image Width="200" Height="200" Margin="20">
    <Image.Source>
        <DrawingImage>
            <DrawingImage.Drawing>
                <DrawingGroup>

                    <GeometryDrawing Brush="Red">
                        <GeometryDrawing.Pen>
                            <Pen Brush="Black" />
                        </GeometryDrawing.Pen>
                        <GeometryDrawing.Geometry>
                            <PathGeometry>
                                <PathFigure StartPoint="100,100">
                                    <PathFigure.Segments>
                                        <LineSegment Point="100,0"/>
                                        <ArcSegment Point="186.6,150"  SweepDirection="Clockwise" Size="100,100"/>
                                        <LineSegment Point="100,100"/>
                                    </PathFigure.Segments>
                                </PathFigure>
                            </PathGeometry>
                        </GeometryDrawing.Geometry>
                    </GeometryDrawing>

                    <GeometryDrawing Brush="Blue">
                        <GeometryDrawing.Pen>
                            <Pen Brush="Black"/>
                        </GeometryDrawing.Pen>
                        <GeometryDrawing.Geometry>
                            <PathGeometry>
                                <PathFigure StartPoint="100,100">
                                    <PathFigure.Segments>
                                        <LineSegment Point="186.6,150"/>
                                        <ArcSegment Point="13.4,150" SweepDirection="Clockwise" Size="100,100"/>
                                        <LineSegment Point="100,100"/>
                                    </PathFigure.Segments>
                                </PathFigure>
                            </PathGeometry>
                        </GeometryDrawing.Geometry>
                    </GeometryDrawing>

                    <GeometryDrawing Brush="Green">
                        <GeometryDrawing.Pen>
                            <Pen Brush="Black"/>
                        </GeometryDrawing.Pen>
                        <GeometryDrawing.Geometry>
                            <PathGeometry>
                                <PathFigure StartPoint="100,100">
                                    <PathFigure.Segments>
                                        <LineSegment Point="13.4,150"/>
                                        <ArcSegment Point="100,0" SweepDirection="Clockwise" Size="100,100"/>
                                        <LineSegment Point="100,100"/>
                                    </PathFigure.Segments>
                                </PathFigure>
                            </PathGeometry>
                        </GeometryDrawing.Geometry>
                    </GeometryDrawing>

                </DrawingGroup>
            </DrawingImage.Drawing>
        </DrawingImage>
    </Image.Source>
</Image>

压缩几何：

<GeometryDrawing Brush="Red" Geometry="M100,100 L100,0 A100,100,0,0,1,186.6,150 L100,100"/>
<GeometryDrawing Brush="Blue" Geometry="M100,100 L186.6,150 A100,100,0,0,1,13.4,150 L100,100"/>
<GeometryDrawing Brush="Green" Geometry="M100,100 L13.4,150 A100,100,0,0,1,100,0 L100,100"/>

这里的关键点是ArcSegment.Size定义了得到的椭圆的半径，因此它应该是“100,100”，因为那是实际圆的半径。

Answer 2

有许多不同的方法可以做到这一点，具有不同程度的冗长。这是一个中间的一个：

    <Path Width="200" Height="200" Stroke="Black" StrokeThickness="3" Stretch="Uniform">
        <Path.Data>
            <GeometryGroup>
                <EllipseGeometry Center="1,1" RadiusX="1" RadiusY="1"/>
                <LineGeometry StartPoint="1,1" EndPoint="1,0"/>
                <LineGeometry StartPoint="1,1" EndPoint="1.866,1.5"/>
                <LineGeometry StartPoint="1,1" EndPoint="0.134,1.5"/>
            </GeometryGroup>
        </Path.Data>
    </Path>