I am trying to draw in C# for the first time and I have a problem with positioning.
I made some background but I have problem to finish it. I always destroy the whole figure...
I need to change down edges and make them soft/rounded like on mobile screen. I have tried to change this, but I don't understand where to input <ArcSegment>(or some other command) and how to rotate that part of edge.
This is how my .xaml code looks:
<Path.Data>
<PathGeometry>
<PathFigure StartPoint="0,0">
<ArcSegment Size="50,50" RotationAngle="180" IsLargeArc="True" SweepDirection="Clockwise" Point="500,0"/>
<LineSegment Point="500,400"/>
<LineSegment Point="450,500"/>
<LineSegment Point="50,500" />
<LineSegment Point="0,400"/>
<LineSegment Point="0,0" />
</PathFigure>
</PathGeometry>
</Path.Data>
After my code I got:
Thank you in advance!
Here is how I solved my problem.
<LineSegment Point="0,475"/>
<BezierSegment Point1="0,475" Point2="0,500" Point3="25,500" />
<LineSegment Point="475,500" />
<BezierSegment Point1="475,500" Point2="500,500" Point3="500,475" />
<LineSegment Point="500,0" />
I have applied BezierSegment to make rounded/soft edges.
Explanation:
In BezierSegment I have three points. I drew first LineSegment which is going to the first red arrow, then I set the same spot to be the first point. After that I move to spot where is going to be rounded shape, and then I place Point3 which will connect another two. I did the same thing for right part.
Also, you can check curved angle in this answer. There are a lot more things described there. It seems to be the same thing, but I didn't understand how to apply it at that time because I didn't know about the name of BezierSegment and I was confused with all other commands.
At least I presented a specific case of layout and code, hope it will help someone.
Anyone know a good way to create this object from Xaml? It also has to work at .5 Opacity when layered on top of other controls.
It also has to be resizable via Horizontal or Vertical Alignment.
I'm having some difficulty. The closest I get is with 2 borders, one having a negative margin--but it doesn't work when Opacity is applied.
Code that works:
<Path Fill="Black">
<Path.Data>
<CombinedGeometry GeometryCombineMode="Exclude">
<CombinedGeometry.Geometry1>
<RectangleGeometry RadiusX="5" RadiusY="5" Rect="0,0,200,100" />
</CombinedGeometry.Geometry1>
<CombinedGeometry.Geometry2>
<RectangleGeometry RadiusX="5" RadiusY="5" Rect="105,5,90,90" />
</CombinedGeometry.Geometry2>
</CombinedGeometry>
</Path.Data>
</Path>
Use a GeometryGroup with an EvenOdd FillRule, or a CombinedGeometry with a GeometryCombineMode of Xor or Exclude. The geometries to combine will both be RectangleGeometry objects, with an appropriate RadiusX and RadiusY. The result will be the outer rectangle with a "hole" in it where the inner rectangle was located. (I assume this is what you want rather than a white rectangle within the black one.)
You can then assign this composite geometry to a Path as its Data property, and set the Fill and Opacity as required.
How I can change a path position on my canvas. It don't moves by Canvas.Left/Top/Right/Bottom properties and it has not X, not Y.
If anyone know how it do, help me please.
For example: I have some path and I need change position for him programatically.
<Canvas>
<Path Stroke="Black" StrokeThickness="10">
<Path.Data>
<PathGeometry>
<PathGeometry.Figures>
<PathFigureCollection>
<PathFigure StartPoint="100,80">
<PathFigure.Segments>
<PathSegmentCollection>
<PolyBezierSegment Points="90,200 140,200 160,200 180,200 430,190 430,280" />
</PathSegmentCollection>
</PathFigure.Segments>
</PathFigure>
</PathFigureCollection>
</PathGeometry.Figures>
</PathGeometry>
</Path.Data>
</Path>
</Canvas>
It doesn't have X nor Y properties, because a Path object does not really care much where it sits in.
You can place a Path inside a Canvas, or inside a Grid, or inside a StackPanel. Why would a Path need X/Y when it is put in a Grid that lays out the items with columns and rows? Same reasoning goes for Grid and its Columns and Rows. The Path does not have Grid-related Column or Row properties either, right?
Those settings are set by so-called attached properties. The Canvas define properties like Canvas.Left and Canvas.Top that you can use to position your Path inside Canvas. It works just the same way as Grid and Grid.Column/Grid.Row properties.
Actually, it's worth noting that Canvas provide you not with X/Y attached properties, but rather Left/Right and Top/Bottom, that allow you to choose where the position is aligned to.
XAML:
<Canvas>
<Path x:Name="mypath" Canvas.Left="50" Canvas.Top="25" .... />
</Canvas>
C#:
Canvas.SetLeft(mypath, 50.0);
Canvas.SetTop(mypath, 25.0);
Requirement: i have to come with a voltmeter user control.
The following code draws a arc, consisting of voltmeter ticks and values.
<Path Name="Pth" Stroke="DarkGray" StrokeThickness="2" Width="Auto" Height="48" Canvas.Top="12">
<Path.Data>
<PathGeometry >
<PathFigure StartPoint="35,28">
<ArcSegment IsLargeArc="False"
Size="23,75"
Point="200,28"
SweepDirection="Clockwise"
RotationAngle="90"/>
</PathFigure>
</PathGeometry>
</Path.Data>
As one one can see above, the pen used is stroke=dark gray. i am not talking about Fill property.
A section of the arc ,however, has to be rendered in blue(as alarm value) in response to user specified range.Any section of the arc .
The big picture is the predominant section of arc is rendered by gray pen and the alarm section is blue.
The problem as one can see above , we can assign the pen only to Path(not the arcsegment or geometry or pathfigure) and the path can use only one pen at a time .
A gradient brush won't work here as colors blend in.Here the two sections of the arc has to be clearly distinct by color from each other.
if i use two paths dividing the arc into 2arcsegments , i have to take of the various existing calculations ,which depends on the path geometry's fraction values.
what's the best approach for my case? any suggestions guys?
Taken from here:
One idea could be using a gradient brush with no spacing between the color blocks.
For example:
<Rectangle Width="200" Height="50">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Red" Offset="0.500"/>
<GradientStop Color="Lime" Offset="0.500"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
Would result into something such as:
Although I'm afraid that you might have trouble finding the correct offset for it, in case it should be calculated dynamically.
EDIT: could you show us how the arc would approximately look like?
I'm trying to figure out how to completely fill a custom geometry. It seems like it should be a common question, but I haven't really been able to find any solutions.
I have the following example geometry:
<Path Fill="White" Stretch="Fill" Stroke="Black" StrokeThickness="2">
<Path.Data>
<PathGeometry
Figures="M112,296C112,296 136,296 136,320 M112,344C112,344 136,344 136,320 M112,296L112,296 96,296 96,344 112,344"/>
</Path.Data>
</Path>
Which produces the following result:
This is the result I would like to see:
Any Ideas? I know I could make a single arc and that would resolve this particular case, but in my application the user can draw any type of geometry so the result could be composed of any number of "primitives" (PolyLineSegments, EllipseGeometries, ArcSegments, etc) and in the case that the resultant geometry contains some type of closed area, I'd like to accurately fill that area.
EDIT:
Here is an example of what a CombinedGeometry looks like if I ensure all three adjacent geometries overlap and create a unioned CombinedGeometry with the following code:
<Path Grid.Row="2" Fill="White" Stretch="Fill" Stroke="Black" StrokeThickness="2">
<Path.Data>
<CombinedGeometry GeometryCombineMode="Union">
<CombinedGeometry.Geometry1>
<CombinedGeometry GeometryCombineMode="Union">
<CombinedGeometry.Geometry1>
<PathGeometry
Figures="M111,293C111,296 136,293 136,325"/>
</CombinedGeometry.Geometry1>
<CombinedGeometry.Geometry2>
<PathGeometry
Figures="M111,346C111,344 136,344 136,320"/>
</CombinedGeometry.Geometry2>
</CombinedGeometry>
</CombinedGeometry.Geometry1>
<CombinedGeometry.Geometry2>
<PathGeometry
Figures="M125,296L115,296 96,296 96,344 120,344"/>
</CombinedGeometry.Geometry2>
</CombinedGeometry>
</Path.Data>
</Path>
And here is the result:
I was hoping it would union just the strokes and automagically figure out the correct filling for the new contiguous polygon... bummer.
EDIT 2:
Hmm so I think I've come up with a couple possible solutions, neither of which are as easy as I was hoping they would be. The first option would be to combine all of the geometries as above using a CombineGeometry structure, then I called "GetFlattenedPathGeometry" on the resultant "CombineGeometry" in order to get a PathGeometry. Next I iterate over each Figure in the PathGeometry and just remove those which are holes (which I think you should be able to do by getting rid of all the figures which are entirely contained by another, or holes may follow a convention of having either clockwise or counter-clockwise coordinates, not sure..), if all goes well you should be left with a single fully filled geometry.
The second option would be to again call "GetFlattenedPathGeometry" on whatever the resultant path is, so as to get a vertex based polygonal approximation of the path (without all the curve, arc, ellipse, etc notation, we want a path containing only points and lines). After that, you would just combine all the resultant figures/segments into a single figure whose segments are ordered either clockwise or counter-clockwise.
I've tested both approaches and they seem to work with at least the simple test case outlined above, though they will not work with more complex shapes (self-intersecting, concave, etc).. support which I require.. so the question remains, how do I do this??
EDIT 3:
Here is a more complicated geometry in which ordering/combining becomes more difficult:
<Path Fill="White" Stretch="Fill" Stroke="Black" StrokeThickness="2">
<Path.Data>
<PathGeometry
Figures="M104,160C104,160 72,160 72,136
M104,128C104,128 72,128 72,152
M152,232L152,232 152,216 120,216 120,160 128,160
M152,232L152,232 72,232 104,216 104,160 96,160
M104,128L104,128 168,128
M128,160L128,160 168,160
M165,160L168,160 200,128
M200,160L200,160 200,128
M200,160L200,160 168,128 152,128"/>
</Path.Data>
</Path>
Which produces:
Your example geometry is a combination of three adjacent shapes which do not overlap. The stroke is drawn on the outside edges simply because the shapes are not closed and the inner stroke lines do not exist. Although it may appear that the shapes are being merged and the stroke is applied to the geometry as a whole, that is not what is happening.
Closing the hole becomes a more complex problem of programmatically detecting the hole and closing it with the appropriate shape or by creating a new combined shape which doesn't have the hole (possibly by detecting and tracing the outer points). I am not aware of any functionality in WPF which can help you with this task. There does exist a CombinedGeometry class which can produce a union of two overlapping shapes. The shapes in this example are not overlapping.
Without context, it is hard to recommend a solution. If this is a free form drawing program, perhaps the user simply has to draw another shape in the middle to close the geometry.
Treat it as a "connect the points" problem :)
You have 5 points:
96,296 - top left point (corner)
112,296 - top - start of bezier curve
136,320 - far right - end of first bezier curve, start of second one
112,344 - bottom - end of second bezier
96,344 - bottom left point (corner)
And now, we shall connect them.
<Path Fill="White" Stretch="Fill" Stroke="Black" StrokeThickness="2">
<Path.Data>
<PathGeometry Figures="M112,296 C112,296 136,296 136,320 C136,320 136,344 112,344 M112,344 96,344 96,296 112,296"/>
</Path.Data>
</Path>
You can also use <GeometryGroup FillRule="Nonzero" ...> to fill your custom path from 1st post. Default is FillRule="EvenOdd", which produces filling like yours.*
See Path Markup Syntax (http://msdn.microsoft.com/en-us/library/ms752293.aspx) for more information on path mini-language.
Changed <Path> to <GeometryGroup>
EDIT 1:
I reordered your path a bit:
<Path Fill="White" Stretch="Fill" Stroke="Black" StrokeThickness="2">
<Path.Data>
<PathGeometry Figures="M72,152 C72,152 72,128 104,128 L168,128 200,160 200,128 168,160 120,160 120,216 152,216 152,232 72,232 104,216 104,160 C104,160 72,160 72,136"/>
</Path.Data>
</Path>
Which gives us:
New shape
Drawing path is like using some kind of "draw shape" tool in vector editing software, where you have to select next points, and when you don't have next one - shape is automatically closed (last point is connected to first one, but just for the purpose of filling shape - we can see how it's done, when we look at the 'nose' of new shape).
In your example You have 9 separate shapes (each one in separate line, where M specifies start of new figure), and they are all filled in the said-above-way.
Ofcourse, you can use GeometryGroup (with FillRule) or CombinedGeometry (with CombinedGeometryMode) to connect shapes.
I found an interesting article about creating shapes with wpf using a svg-file created with a graphic-tool like inkscape. This might give you some insight.