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>
Related
<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.
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>
The arrow is supposed to have a red fill but the fill is missing at certain angles of the RotateTransform. It vanishes from ~92° to ~279°
In my full project it also occured that only a part of the arrow was filled. Is this a WPF rendering bug or am I doing something wrong here?
<StackPanel Orientation="Vertical">
<Slider x:Name="slider"
Value="180"
Minimum="0"
Maximum="360" />
<Canvas Width="296"
Height="296">
<Canvas.Background>
<DrawingBrush Stretch="Uniform">
<DrawingBrush.Drawing>
<DrawingGroup>
<GeometryDrawing Brush="Red">
<GeometryDrawing.Pen>
<Pen Brush="Lime"
Thickness="2" />
</GeometryDrawing.Pen>
<GeometryDrawing.Geometry>
<PathGeometry>
<PathGeometry.Transform>
<TransformGroup>
<RotateTransform Angle="{Binding ElementName=slider, Path=Value}" />
</TransformGroup>
</PathGeometry.Transform>
<PathGeometry.Figures>
<PathFigure IsClosed="True"
StartPoint="100 50">
<LineSegment Point="50 87.5" />
<LineSegment Point="50 62.5" />
<LineSegment Point=" 0 62.5" />
<LineSegment Point=" 0 37.5" />
<LineSegment Point="50 37.5" />
<LineSegment Point="50 12.5" />
</PathFigure>
</PathGeometry.Figures>
</PathGeometry>
</GeometryDrawing.Geometry>
</GeometryDrawing>
</DrawingGroup>
</DrawingBrush.Drawing>
</DrawingBrush>
</Canvas.Background>
</Canvas>
</StackPanel>
You could simply rotate a Path by its RenderTransform:
<Path Width="296" Height="296" Stretch="Uniform"
Fill="Red" Stroke="Lime" StrokeThickness="8"
Data="M100,50 L50,87.5 50,62.5 0,62.5 0,37.5 50,37.5 50,12.5Z"
RenderTransformOrigin="0.5,0.5">
<Path.RenderTransform>
<RotateTransform Angle="{Binding ElementName=slider, Path=Value}" />
</Path.RenderTransform>
</Path>
How can I have a curved control (e.g. ScrollBar) like this?
I read this question, but it has no useful information.
This could give you some idea how to do it.
<Path Stroke="Black" StrokeThickness="1">
<Path.Data>
<PathGeometry>
<PathGeometry.Figures>
<PathFigureCollection>
<PathFigure StartPoint="10,100">
<PathFigure.Segments>
<PathSegmentCollection>
<QuadraticBezierSegment Point1="200,200" Point2="300,100" />
</PathSegmentCollection>
</PathFigure.Segments>
</PathFigure>
</PathFigureCollection>
</PathGeometry.Figures>
</PathGeometry>
</Path.Data>
</Path>
for more details please this link.
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..