如何在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>

这只是创建一个圆和从中心到边缘的三条线,您需要通过极坐标到笛卡尔坐标转换来计算点数.

另一种方法是使用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",因为它是实际圆的半径.