I am trying to draw a minus symbol, based on a canvas of 100x100, but I end up with a square, because WPF does not know how big my canvas is. How can I tell it about the Path container size?
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckIcon"
Storyboard.TargetProperty="Data">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<PathGeometry >
<PathFigure StartPoint="20,60">
<LineSegment Point="20,60"/>
<LineSegment Point="80,60"/>
<LineSegment Point="80,45"/>
<LineSegment Point="20,45"/>
</PathFigure>
</PathGeometry>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
That was not intuitive, but Clemens helped me to get to the answer
<PathGeometry>
<PathFigure>
<LineSegment Point="0,0" IsStroked="False"/>
<LineSegment Point="20,60" IsStroked="False"/>
<LineSegment Point="20,60"/>
<LineSegment Point="20,60"/>
<LineSegment Point="80,60"/>
<LineSegment Point="80,45"/>
<LineSegment Point="100,100" IsStroked="False"/>
<LineSegment Point="80,45" IsStroked="False"/>
<LineSegment Point="20,45"/>
<LineSegment Point="20,60"/>
</PathFigure>
</PathGeometry>
Related
I need to have some drawing (triangle and circle) as one object (to set it as content). Triangle should be filled and circle shouldn't be filled with color. The problem is that EllipseGeometry doesn't have IsFilled property. If I remove Fill property at Path both wouldn't be filled. How can I have filled PathFigure and not filled Ellipse having them both in one Path parent?
<Path Stroke="#FFF633FF"
StrokeThickness="1"
Fill="#FFF633FF">
<Path.Data>
<GeometryGroup>
<EllipseGeometry Center="6,0"
RadiusX="4"
RadiusY="4">
</EllipseGeometry>
<PathGeometry >
<PathGeometry.Figures>
<PathFigure StartPoint="6,-15"
IsClosed="True">
<LineSegment Point="1,-25" />
<LineSegment Point="11,-25" />
</PathFigure>
</PathGeometry.Figures>
</PathGeometry>
</GeometryGroup>
</Path.Data>
</Path>
A simple trick would be to replace the EllipseGeometry by a non-filled PathGeometry with two ArcSegments:
<PathGeometry >
<PathGeometry.Figures>
<PathFigure StartPoint="2,0" IsFilled="False">
<ArcSegment Point="10,0" Size="4,4" />
<ArcSegment Point="2,0" Size="4,4" />
</PathFigure>
</PathGeometry.Figures>
</PathGeometry>
The whole point of a geometry is to describe a shape. Stroke and fill are always taken from the owning Path since the Path is responsible for drawing the shape. So what you're asking is not possible. You need to use two Paths here.
I have a path like this,
<Path Stroke="Black" StrokeThickness="1" Fill="#CCCCFF">
<Path.Data>
<PathGeometry>
<PathFigure StartPoint="6.0,12.5" >
<LineSegment Point="50.0,6.0"></LineSegment>
<LineSegment Point="94.0,12.5"></LineSegment>
<LineSegment Point="60.0,19.0"></LineSegment>
<LineSegment Point="20.0,19.0"></LineSegment>
<LineSegment Point="6.0,12.5"></LineSegment>
</PathFigure>
<PathFigure StartPoint="7.97852754592896,12.2077178955078">
<ArcSegment IsLargeArc="True" Point="4.02147245407104,12.7922821044922" RotationAngle="171.59663391113281" Size="2,4" SweepDirection="Counterclockwise"></ArcSegment>
<ArcSegment IsLargeArc="True" Point="7.97852754592896,12.2077178955078" RotationAngle="171.59663391113281" Size="2,4" SweepDirection="Counterclockwise"></ArcSegment>
</PathFigure>
<PathFigure StartPoint="51.9785270690918,6.29228210449219">
<ArcSegment IsLargeArc="True" Point="48.0214729309082,5.70771789550781" RotationAngle="188.40336608886719" Size="2,4" SweepDirection="Counterclockwise"></ArcSegment>
<ArcSegment IsLargeArc="True" Point="51.9785270690918,6.29228210449219" RotationAngle="188.40336608886719" Size="2,4" SweepDirection="Counterclockwise"></ArcSegment>
</PathFigure>
</PathGeometry>
</Path.Data>
</Path>
It represents a polygon with some circles at a couple of the corners.
One of the circles is not filled in correctly. It happens to be part of the circle that covers the polygon.
It reminds me of graphics that use XOR. Put two over the top of each other and they cancel out.
If I remove the polygon (the linesegments) then it works fine.
In looking at your Path and playing around with the PathGeometry.FillRule Property I am getting the same results for both of the options.
This is using the Nonzero FilRule with a single Path.
The only way that I was able to get the results I beleive you are looking for was to use the Nonzero FillRule and create a seperate path for the problem PathFigure's.
This is using the Nonzero FillRule with a seperate Path for the problem PathFigures.
<Path Stroke="Black" StrokeThickness="1" Fill="#CCCCFF">
<Path.Data>
<PathGeometry FillRule="Nonzero">
<PathFigure StartPoint="6.0,12.5" >
<LineSegment Point="50.0,6.0"></LineSegment>
<LineSegment Point="94.0,12.5"></LineSegment>
<LineSegment Point="60.0,19.0"></LineSegment>
<LineSegment Point="20.0,19.0"></LineSegment>
<LineSegment Point="6.0,12.5"></LineSegment>
</PathFigure>
</PathGeometry>
</Path.Data>
</Path>
<Path Stroke="Black" StrokeThickness="1" Fill="#CCCCFF">
<Path.Data >
<PathGeometry FillRule="Nonzero">
<PathFigure StartPoint="51.9785270690918,6.29228210449219">
<ArcSegment IsLargeArc="True" Point="48.0214729309082,5.70771789550781" RotationAngle="188.40336608886719" Size="2,4" SweepDirection="Counterclockwise"></ArcSegment>
<ArcSegment IsLargeArc="True" Point="51.9785270690918,6.29228210449219" RotationAngle="188.40336608886719" Size="2,4" SweepDirection="Counterclockwise" ></ArcSegment>
</PathFigure>
<PathFigure StartPoint="7.97852754592896,12.2077178955078" >
<ArcSegment IsLargeArc="True" Point="4.02147245407104,12.7922821044922" RotationAngle="171.59663391113281" Size="2,4" SweepDirection="Counterclockwise"></ArcSegment>
<ArcSegment IsLargeArc="True" Point="7.97852754592896,12.2077178955078" RotationAngle="171.59663391113281" Size="2,4" SweepDirection="Counterclockwise"></ArcSegment>
</PathFigure>
</PathGeometry>
</Path.Data>
</Path>
On your PathGeometry element try setting
FillRule="NonZero"
The default of EvenOdd gives the XOR behavior you're describing.
I'm trying to find the equivalent of IsFilled="False" that is used in a PathGeometry, but for Path Mini.
You can see that the two paths below are identical, except for the one with geometries has IsFilled="False" in the second <PathGeometry>.<PathGeometry.Figures>.<PathFigure>. This is the desired behavior, but I'd like to have it for a Path Mini (i.e. in the first <Path>). I've looked through the documentation and can't seem to locate anything on it as it appears that Path Mini is not a collection of figures.
As I understand it, all shapes/geometries will get converted to path mini at run-time, so is there some way to reflect the compiled XAML to see how the interpreter renders the one with PathGeometry to Path Mini?
<Canvas Background="#FDB" Width="800" Height="600">
<!-- this is the LEFT-HAND Path in the picture above -->
<Path Canvas.Left="100" Canvas.Top="100"
Stroke="#385D8A" StrokeThickness="2" StrokeLineJoin="Round" Fill="#4F81BD"
Data="M0,0L102,0L102,102L0,102Z M46.15,49.01L-73.36,130.99L-96.42,-96.12L109.35,355.18">
</Path>
<!-- this is the RIGHT-HAND Path in the picture above -->
<Path Canvas.Left="300" Canvas.Top="100" Stroke="#385D8A" StrokeThickness="2" StrokeLineJoin="Round" Fill="#4F81BD">
<Path.Data>
<GeometryGroup>
<PathGeometry>
<PathGeometry.Figures>
<PathFigure StartPoint="0,0" IsClosed="True">
<PathFigure.Segments>
<LineSegment Point="102,0" />
<LineSegment Point="102,102" />
<LineSegment Point="0,102" />
</PathFigure.Segments>
</PathFigure>
</PathGeometry.Figures>
</PathGeometry>
<PathGeometry>
<PathGeometry.Figures>
<PathFigure IsFilled="False" StartPoint="46.15,49.01">
<PathFigure.Segments>
<LineSegment Point="-73.36,130.99" />
<LineSegment Point="-96.42,-96.12" />
<LineSegment Point="109.35,355.18" />
</PathFigure.Segments>
</PathFigure>
</PathGeometry.Figures>
</PathGeometry>
</GeometryGroup>
</Path.Data>
</Path>
</Canvas>
The path mini-lanuage only supports outlines so strokes must be converted to fills. This is straightforward to do yourself if you want one-pixel wide lines and you aren't too fussy about mitering or endcaps. Just use skinny rectangles. A true mathematical "grow" of an infinitely narrow stroke using the minimum number of points and handling crossings is quite a bit harder. However you might be able to use the WPF rendering engine to do that for you since obviously it can already do it.
Is there a way to get an ArcSegment to draw in a particular direction? As far as I can tell, it is always drawing top to bottom to top. For example, I have an ArcSegment which starts at 180 degrees (270 degrees is north) and draws an almost ellipse to 180 degrees. Right now, the drawing goes clockwise from....well, sorry, let me show you.
The left-hand one is the values I receive from a conversion set of values, but I need it to act like the right-hand one.
<Canvas Background="#FDB" Width="720" Height="540">
<Path Canvas.Left="100" Canvas.Top="100" Stroke="#385D8A" StrokeThickness="2" StrokeLineJoin="Round" Fill="#4F81BD">
<!-- this is the LEFT shape that I need drawn like the other one -->
<Path.Data>
<GeometryGroup>
<PathGeometry>
<PathGeometry.Figures>
<PathFigure StartPoint="0,51" IsClosed="True">
<PathFigure.Segments>
<LineSegment Point="51,51" />
</PathFigure.Segments>
</PathFigure>
<PathFigure StartPoint="25.5,0">
<PathFigure.Segments>
<LineSegment Point="25.5,102" />
</PathFigure.Segments>
</PathFigure>
<PathFigure StartPoint="25.5,51" IsClosed="True" >
<PathFigure.Segments>
<ArcSegment Size="25.5,25.5" IsLargeArc="True" SweepDirection="Clockwise" Point="25.49,51" />
</PathFigure.Segments>
</PathFigure>
</PathGeometry.Figures>
</PathGeometry>
</GeometryGroup>
</Path.Data>
</Path>
<Path Canvas.Left="200" Canvas.Top="100" Stroke="#385D8A" StrokeThickness="2" StrokeLineJoin="Round" Fill="#4F81BD">
<!-- this is the RIGHT shape, the way it should behave, but notice the different StartPoint and Point -->
<Path.Data>
<GeometryGroup>
<PathGeometry>
<PathGeometry.Figures>
<PathFigure StartPoint="0,51" IsClosed="True">
<PathFigure.Segments>
<LineSegment Point="51,51" />
</PathFigure.Segments>
</PathFigure>
<PathFigure StartPoint="25.5,0">
<PathFigure.Segments>
<LineSegment Point="25.5,102" />
</PathFigure.Segments>
</PathFigure>
<PathFigure StartPoint="51,25.5" IsClosed="True" >
<PathFigure.Segments>
<ArcSegment Size="25.5,25.5" IsLargeArc="True" SweepDirection="Clockwise" Point="50.99,25.5" />
</PathFigure.Segments>
</PathFigure>
</PathGeometry.Figures>
</PathGeometry>
</GeometryGroup>
</Path.Data>
</Path>
</Canvas>
I've tried toying around with RotationAngle, but that doesn't seem to have any effect as it works only with the X-axis, not Y-axis.
The first Path's values come from a conversion routine, so it's not that I can easily modify them.
I think I've figured it out - just make the Y-axis shorter instead of the X-axis. So:
<PathFigure StartPoint="51,25.5" IsClosed="True" >
<PathFigure.Segments>
<ArcSegment Point="50.99,25.5" Size="25.5,25.5" IsLargeArc="True" SweepDirection="Clockwise" />
</PathFigure.Segments>
</PathFigure>
should be:
<PathFigure StartPoint="51,25.5" IsClosed="True" >
<PathFigure.Segments>
<ArcSegment Point="51,24.99" Size="25.5,25.5" IsLargeArc="True" SweepDirection="Clockwise" />
</PathFigure.Segments>
</PathFigure>
As simple as that.
I have a canvas that contains a couple other elements. I need this canvas to animate continuously along a circular (elliptical) path.
How can I do this in XAML?
not sure if this is doing it the hard way or not but this works...
<Canvas>
<Rectangle Height="30" Width="30" Fill="Blue">
<Rectangle.RenderTransform>
<MatrixTransform x:Name="elementMatrixTransform">
<MatrixTransform.Matrix >
<Matrix />
</MatrixTransform.Matrix>
</MatrixTransform>
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<MatrixAnimationUsingPath
Storyboard.TargetName="elementMatrixTransform"
Storyboard.TargetProperty="Matrix"
Duration="0:0:10"
RepeatBehavior="Forever">
<MatrixAnimationUsingPath.PathGeometry>
<PathGeometry>
<PathFigure StartPoint="0,50">
<ArcSegment Point="50,0" Size="50,50" SweepDirection="Clockwise"></ArcSegment>
<ArcSegment Point="100,50" Size="50,50" SweepDirection="Clockwise"></ArcSegment>
<ArcSegment Point="50,100" Size="50,50" SweepDirection="Clockwise"></ArcSegment>
<ArcSegment Point="0,50" Size="50,50" SweepDirection="Clockwise"></ArcSegment>
</PathFigure>
</PathGeometry>
</MatrixAnimationUsingPath.PathGeometry>
</MatrixAnimationUsingPath>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</Canvas>