In my WPF application, I'd like to draw a circle divided into three equal arcs, like the peace symbol, or a pie chart.
In other words, I'd like to draw this: http://i.stack.imgur.com/7Mxwn.jpg
I know how to create a System.Windows.Shape
s. Path for it in code, but not how to do so in XAML.
What is the proper XAML markup to create a Path element for such a shape?
Update: the answers given made me realize I wasn't clear in what I'm looking for: I'd like to have a Geometry object (a single Path or a GeometryGroup) for each one of the three closed sectors (slices of the pie.)
So how can we make one in XAML without acutally cropping the image? It's simple. First, use "ellipse" to draw a circle, make it's width equal to height, that makes a circle. Ellipse has many options on "Fill", such as solid color, gradient color, image, and web.
Use its Stroke property to specify the Brush that is used to paint the outline of the ellipse. The StrokeThickness property specifies the thickness of the ellipse outline. To draw a circle, make the Width and Height of the Ellipse element equal to each other.
Position the pointer on the canvas, then click and drag to draw an ellipse. Hold the Shift key as you drag if you want to make a circle.
There are severals ways in which this can be done, the easiest is probably this:
<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>
The above geometry can be compressed to the following using the geometry mini-language:
<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>
This just creates a circle and three lines from the center to the edges, you will need to calculate the points via polar to cartesian conversion.
Another method would be using ArcSegments
, which is a major pain.
Edit: The dreaded ArcSegment version:
<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>
Compressed geometry:
<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"/>
Keypoint here is that the ArcSegment.Size
defines the radii of the resulting ellipse, which hence should be "100,100" since that is the radius of the actual circle.
There are a lot of different ways you could do this, with varying levels of verbosity. Here's one that's sort of in the middle:
<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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With