<Canvas>
<Path Canvas.Left="0" Canvas.Top="0" Fill="#440DB80D" Stroke="{x:Null}" StrokeThickness="2.5"
Width="600"
Height="200">
<Path.Data>
<GeometryGroup>
<PathGeometry>
<PathGeometry.Figures>
<PathFigure IsClosed="True" StartPoint="590,100">
<PathFigure.Segments>
<BezierSegment Point1="000,020" Point2="000,250" Point3="200,200"/>
<BezierSegment Point1="000,000" Point2="580,400" Point3="580,200"/>
<!--<BezierSegment Point1="000,200" Point2="580,200" Point3="600,200"/>-->
</PathFigure.Segments>
</PathFigure>
</PathGeometry.Figures>
</PathGeometry>
</GeometryGroup>
</Path.Data>
</Path>
</Canvas>
Hello.
I am trying to display an image of a figure using wpf xaml PathGeometry BezierSegment.
The path worked so far is as above.
I'd appreciate it if you could tell me how to draw it.
Given a start and end point in xaml, I can draw a straight line.
<Grid Padding="40">
<Path
x:Name="arcPath"
Opacity="1"
StrokeThickness="2"
Stroke="Red">
<Path.Data>
<LineGeometry>
<LineGeometry.StartPoint >
<Point X="0" Y="0"/>
</LineGeometry.StartPoint>
<LineGeometry.EndPoint>
<Point X="0" Y="100"/>
</LineGeometry.EndPoint>
</LineGeometry>
</Path.Data>
</Path>
</Grid>
But now I want to add more, like right angle and arrow. How to do it in xaml.
<Grid VerticalAlignment="Center" HorizontalAlignment="Center" >
<Path StrokeThickness="2"
Stroke="Red"
Fill="{Binding Stroke, RelativeSource={RelativeSource Self}}">
<Path.Data>
<PathGeometry>
<PathFigure StartPoint="0 0" IsFilled="False">
<LineSegment Point="20 0"/>
<LineSegment Point="20 100"/>
<LineSegment Point="0 100"/>
</PathFigure>
<PathFigure StartPoint="0 100" IsClosed="True">
<LineSegment Point="10 95"/>
<LineSegment Point="10 105"/>
</PathFigure>
</PathGeometry>
</Path.Data>
</Path>
</Grid>
I would like to scale an arcsegment similarly to how the linesegment is scaled. I don't want to use Viewbox since this will increase/decrease the line thickness as the window is resized. In my example I have a line segment that is scaled appropriately and I'd like to scale the arc segment similarly. How can this be done in XAML?
<UserControl x:Class="TMUI.UserControls.Chart"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:TMUI"
xmlns:c="clr-namespace:TMUI.Converters"
xmlns:bc="clr-namespace:TMUI.BindingConverters"
xmlns:vm="clr-namespace:TMUI.ViewModels"
mc:Ignorable="d"
Visibility="{Binding BBMainMenuVisibility}" >
<Grid x:Name="grid" Background="Black">
<Grid.Resources>
<ScaleTransform x:Key="transform"
ScaleX="{Binding ActualWidth, ElementName=grid}"
ScaleY="{Binding ActualHeight, ElementName=grid}"/>
</Grid.Resources>
<Path Stroke="White" StrokeThickness="1">
<Path.Data>
<LineGeometry StartPoint="0.01,0.01" EndPoint="0.99,0.99"
Transform="{StaticResource transform}"/>
</Path.Data>
</Path>
<Path Stroke="White" StrokeThickness="1">
<Path.Data>
<PathGeometry>
<PathGeometry.Figures>
<PathFigureCollection>
<PathFigure StartPoint="10,20">
<PathFigure.Segments>
<PathSegmentCollection>
<ArcSegment Size="40,30" RotationAngle="45" IsLargeArc="True" SweepDirection="CounterClockwise" Point="100,100"/>
</PathSegmentCollection>
</PathFigure.Segments>
</PathFigure>
</PathFigureCollection>
</PathGeometry.Figures>
</PathGeometry>
</Path.Data>
</Path>
</Grid>
You would scale the PathGeometry in the same way you scaled the LineGeometry, i.e. by assigning a ScaleTransform to its Transform property.
When you use the same ScaleTransform as for the LineGeometry, you would also need to use the same coordinate range from 0 to 1.
<Path Stroke="White" StrokeThickness="1">
<Path.Data>
<PathGeometry Transform="{StaticResource transform}">
<PathGeometry.Figures>
<PathFigureCollection>
<PathFigure StartPoint="0.1,0.2">
<PathFigure.Segments>
<PathSegmentCollection>
<ArcSegment Size="0.4,0.3" Point="1,1"
RotationAngle="45" IsLargeArc="True"
SweepDirection="CounterClockwise"/>
</PathSegmentCollection>
</PathFigure.Segments>
</PathFigure>
</PathFigureCollection>
</PathGeometry.Figures>
</PathGeometry>
</Path.Data>
</Path>
You may also draw a single Path with multiple geometries in a GeometryGroup:
<Path Stroke="White" StrokeThickness="1">
<Path.Data>
<GeometryGroup Transform="{StaticResource transform}">
<LineGeometry StartPoint="0.01,0.01" EndPoint="0.99,0.99"/>
<PathGeometry>
<PathGeometry.Figures>
...
</PathGeometry.Figures>
</PathGeometry>
</GeometryGroup>
</Path.Data>
</Path>
So i have this Circular Progress-Bar:
<Grid>
<Grid>
<Border>
<Path x:Name="pathRoot"
Stroke="{Binding SegmentColor, ElementName=userControl}"
StrokeThickness="{Binding StrokeThickness, ElementName=userControl}"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Height="100"
Width="100">
<Path.Data>
<PathGeometry>
<PathGeometry.Figures>
<PathFigureCollection>
<PathFigure x:Name="pathFigure">
<PathFigure.Segments>
<PathSegmentCollection>
<ArcSegment x:Name="arcSegment" SweepDirection="Clockwise"/>
</PathSegmentCollection>
</PathFigure.Segments>
</PathFigure>
</PathFigureCollection>
</PathGeometry.Figures>
</PathGeometry>
</Path.Data>
</Path>
</Border>
</Grid>
</Grid>
And i want my Circle border will be rounded, for example:
Any idea how to do that ?
I try to put my main Grid inside border with some corner value but this did not wirk..
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.Shapes. 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.)
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>