I just started using Geomectry Drawing in xaml and I came across this interesting article https://msdn.microsoft.com/en-us/library/aa480159.aspx. Here, I find out that the following drawingbrush gives a graph diagram as an output.
<DrawingBrush x:Name="gridBackgroundBrush"
Viewport="0,0,10,10"
ViewportUnits="Absolute"
TileMode="Tile">
<DrawingBrush.Drawing>
<DrawingGroup>
<DrawingGroup.Children>
<GeometryDrawing Geometry="M0,0 L1,0 1,0.1, 0,0.1Z" Brush="Green" />
<GeometryDrawing Geometry="M0,0 L0,1 0.1,1, 0.1,0Z" Brush="Green" />
</DrawingGroup.Children>
</DrawingGroup>
</DrawingBrush.Drawing>
</DrawingBrush>
From further reading, I figure out that M means starting point or move to, L means line and Z means close but could not figure out how this will give me two lines - one horizontal and one vertical? Any help understanding this will be highly appreciated. Thanks.
So here's a quick break down for you.
Your example is a DrawingBrush which is explicitly set to TileMode="Tile" which is the equivalent of repeat-x/repeat-y if you're more familiar with CSS as example. So it's instructed to repeat itself up-down/left-right repeating.
Your two bits of your Geometry Drawing if translated individually are two squares with one stretching vertical, one stretching horizontal. While your explicitly set ViewportUnits is dictating the size and position effectively making repeated columns and rows.
Your Path Geometry uses Path Markup Syntax to draw these lines as you pointed out. For a more visual explanation replace your Brush on each.
<GeometryDrawing Geometry="M0,0 L1,0 1,0.1, 0,0.1Z" Brush="Red" />
<GeometryDrawing Geometry="M0,0 L0,1 0.1,1, 0.1,0Z" Brush="Blue" />
...and voila! You have yourself a repeated line background with effective vertical/horizontal columns creating your grid. See links for more detail and hope this helps. Cheers!
Oh, and the question you got that from also had a link that would have shed a little light on it but not as much as you'd like so I didn't mark this duplicate.
ADDENDUM:
A little more clarification. Though if you want to learn more I'd follow the documentation link someone spent a lot of time writing to answer this already. Think if you have an x,y grid you're drawing points on.
Say you're using the pen tool in something like Adobe Illustrator, or Blend. Your first click is setting your M as your start point based on the relative size of the container. Then you click in another spot...well now you effectively have a L line.
So when we see: M0,0 L1,0 that's our first starting Line. In this case it's the top corner stretching to the right corner since there's not another anchor in the line between the two points. The next set acts as the anchor to tell that line to change it's direction to make the side, and so on, and so fourth until you hit the end at Z. Hope this helps but I would encourage the documentation first.
Here they are individually if you feel like tinkering with numbers and learning:
<Path Data="M0,0 L1,0 1,0.1, 0,0.1Z"
Height="150" Width="150" Stroke="Red" />
<Path Data="M0,0 L0,1 0.1,1, 0.1,0Z"
Height="150" Width="150" Stroke="Blue" />
I came cross the same thing when I used GMaps V3. It is an SVG path notation path that allows you to draw on WPF and on browsers too. You can find the complete documentation in the link.
Related
I am new to WPF and I have been trying hard for several days to figure out how to interact with elements of a vector image. In my case GeometryDrawing elements.
I understand that in WPF one would normally use shapes when needing to create interactive GUI elements, as they are uielements so there are all sorts of event handling goodness on them. Sadly I need to interact with a collection of GeometryDrawings which don’t seem to be designed for interactivity.
My problem:
I need to load an SVG image and allow the user to interact with some of its elements. Imagine loading an SVG map and make some countries clickable.
What I have managed:
I managed to convert the SVG into xaml using a very cool library called SvgToXaml.
With this library, I can load a given SVG image and convert it into xaml. So I end up with something like this after the conversion:
<DrawingImage x:Key="iconDrawingImage">
<DrawingImage.Drawing>
<DrawingGroup ClipGeometry="M0,0 V600 H600 V0 H0 Z">
<DrawingGroup>
<GeometryDrawing Geometry="F1 M600,600z M0,0z M371.987,227.641C419.615,275.269 457.026,326.349 478.901,371.193 505.259,425.226 508.997,470.915 490.004,489.907 470.211,509.7 421.737,505.791 364.273,476.928 320.828,455.107 272.242,417.809 227.031,372.597 180.677,326.243 142.081,277.052 120.364,232.781 92.884,176.758 90.307,129.038 109.721,109.624 128.559,90.785 172.969,93.568 226.415,119.381 271.574,141.193 323.895,179.548 371.987,227.641z">
<GeometryDrawing.Pen>
<Pen Brush="#FFE91E63" Thickness="24" StartLineCap="Flat" EndLineCap="Flat" LineJoin="Miter" MiterLimit="1" />
</GeometryDrawing.Pen>
</GeometryDrawing>
<GeometryDrawing Geometry="F1 M600,600z M0,0z M272.931,201.125C337.983,183.66 400.92,176.771 450.698,180.223 510.672,184.383 552.118,203.97 559.083,229.911 566.342,256.944 538.738,296.984 485.029,332.345 444.421,359.078 387.84,382.533 326.088,399.114 262.776,416.112 200.881,424.972 151.68,421.667 89.42,417.486 46.796,395.878 39.676,369.361 32.769,343.63 57.364,306.55 106.426,273.147 147.879,244.923 207.243,218.761 272.931,201.125z">
<GeometryDrawing.Pen>
<Pen Brush="#FFE91E63" Thickness="24" StartLineCap="Flat" EndLineCap="Flat" LineJoin="Miter" MiterLimit="1" />
</GeometryDrawing.Pen>
</GeometryDrawing>
</DrawingGroup>
</DrawingImage.Drawing>
</DrawingImage>
I used this xaml as an image source and I can render the image but I have not figured out how to interact with it elements.
I thought that because I had the SVG tranlated into XAML I should be able to identify and interact with the shapes or geometries.
So far I have not found a way, and google does not seem to be able to help me find a solution.
Is it even possible to interact with GeometryDrawing or DrawingImage elements all?
Is there any other way to achieve this in WPF? My alternative is to work on HTML using javascript to parse the SVG and add event handlers to the elements I need to interact with. But I was hoping to use WPF.
Thank you very much for your advice.
So while your question is way too broad for a full answer (maybe if someone else has that kind of free time I suppose) but I can at least offer a quickie example related to your goal. You can plop the following example wherever and give it a shot. What the PoC is conveying is how you can interact with a Path in various ways (Red on MouseOver, Green on Click) but I didn't take the time to wire up any actual commands or anything because realistically that becomes a lot more work and I'd likely be doing things like turning each shape into a ButtonBase like ToggleButton type to retain properties like IsChecked and making cooler animations like Marching Ants around the selection etc.
Anyway, hope this helps get creative juices flowing. The primary tools used for the PoC below are Mike Swanson's AI to XAML export plugin, and Blend. Hope it helps, cheers.
Visual Example (in a choppy gif, sorry);
and some XAML to play with you can plop wherever;
PASTEBIN LINK : https://pastebin.com/u6qP2qFt
Sorry had to use PasteBin to plop the sample, ran over the character limit for an answer submission.
Wherever you look in Windows 10, there are circles. It's fairly easy to make images circular, but camera is a bit different. Is there a simple XAML way to clip the camera stream in a CaptureElement to make it a circle?
I tried putting it in a border, but CaptureElement doesn't care about its borders. I also tried using the Clip property, but it can only clip to RectangleGeometry.
One way would certainly be to grab CaptureElement frames, transforming them to images (frame by frame) and applying to Image element, and then clipping the image, but it seems like that would have awful performance.
Is there something in the framework to make this really simple, but I'm not seeing it?
Well after seeing that might be the background is always black of the Canvas DirectX the only way I see is:
1.- Clip a rectangle with an ellipse in Inkscape for instance.
2.- Copy to Expression Design and Ctrl-Shift-C (to copy XAML)
3.- Place inside a ViewBox only the path generated
<Grid Width="300" Height="300">
<CaptureElement Name="PreviewControl" Stretch="Uniform" Width="280" Height="280" />
<Viewbox Width="280" Height="280">
<Path Width="813.701" Height="813.701" Canvas.Left="-33.3503" Canvas.Top="-45.3503" Stretch="Fill" Fill="#FF800080" Data="F1 M -33.3503,-45.3503L -33.3503,768.35L 780.35,768.35L 780.35,-45.3503L -33.3503,-45.3503 Z M 373.54,158.095C 485.863,158.095 576.985,249.137 576.985,361.54C 576.985,473.863 485.863,564.985 373.54,564.985C 261.137,564.985 170.095,473.863 170.095,361.54C 170.095,249.137 261.137,158.095 373.54,158.095 Z "/>
</Viewbox>
</Grid>
With that you can place an image in the path or a solid color, that's the only way I see to do it. Hope it helps
I'd like to create a neon(-like) effect in wpf/c#, to be used on a series of polylines.
The closest i come to this was using blur (not very close, but eh), but the it dims the colors too dark and I have no idea how to make even that glow. Is there an effect close to this, or I should try to write a shader for it somehow?
I'd like to do this for a school project and i'd rather not turn in a bunch of outside libraries for a small amount of self-written code. Also about google: most of the stuff i found were pretty much using blur/dropshadow to create these fading colors, not something that actually has this neon-y effect.
As others have already suggested you should use DropShadowEffect to achieve a neon-like effect:
<Canvas Height="120" Width="280" Background="Black">
<Polyline
Points="10,110 60,10 110,110 105,110 60,18 15,110 10,110"
Stroke="#BB0000"
Fill="#FF0000"
StrokeThickness="2" >
<Polyline.Effect>
<DropShadowEffect Color="#FF9999" ShadowDepth="0" Direction="0" BlurRadius="25" />
</Polyline.Effect>
</Polyline>
<Polyline
Points="10,105 110,105 110,10 115,10 115,110 10,110 10,105"
Stroke="#00BB00"
Fill="#00FF00"
StrokeThickness="2"
Canvas.Left="150">
<Polyline.Effect>
<DropShadowEffect Color="#99FF99" ShadowDepth="0" Direction="0" BlurRadius="25" />
</Polyline.Effect>
</Polyline>
</Canvas>
Unfortunately there is no built-in effect which is specifically designed to create neon effect, but by tweaking the colors you can create quite good (or at least acceptable) results (especially for a school project...):
I have clipped Image:
<Image Name="Img" Source="/UntitledImage.jpg">
<Image.Clip>
<EllipseGeometry Center="115,115" RadiusX="50" RadiusY="50"></EllipseGeometry>
</Image.Clip>
</Image>
or:
<Image Name="oldImg" Source="/UntitledImage.jpg">
<Image.Clip>
<RectangleGeometry Rect="115,115,50,50"></RectangleGeometry>
</Image.Clip>
</Image>
I want added blur for each edge for Image after clip.
I want manage thick blur area for Image.
Is it possible?
Rather than creating a blurred version of each image, why not put a semi-transparent image over the top of the image to give the appearance of a blurred edge instead?
This would, I expect, be much quicker and simpler.
This solution might be a little heavier for your purpose, but I suppose it will serve any need you could have.
You can try to use Nokia Imaging SDK to process your images. The SDK usage is very simple and well documented In the developer library.
Also, before you decide, the link above contains sample apps to explore the effects.
I am arranging quite freely a lot of elements on a Canvas layout, in fact the elements represent an interactive flow-chart. As transformations are applied, I need relative transformations on some of the elements.
Especially I require some elements being anchored or docked to their parent elements. I found different solutions, however I don't know if they solve my problem in the most elegant way.
Here is an example:
<Line X1="80" X2="800" Y1="730" Y2="730"/>
<Polygon Points="0,30 40,0 40,60" Canvas.Left="48" Canvas.Top="700"/>
The Polygon draws a triangle and I would like to let it dock on the left side of line. Which means, when translating the line to a new position or when scaling it down, the Polygon should move with it.
Is this possible?
put them in a canvas of their own, that way you can position the outer canvas absolutely and keep the inner stuff together.
like this:
<Canvas>
<Line X1="60" X2="820" Y1="60" Y2="760"> <!--some other line--> </Line>
<Canvas Canvas.Left="48" Canvas.Top="700">
<Polygon Points="0,30 40,0 40,60"/>
<Line X1="32" X2="752" Y1="30" Y2="30"/>
</Canvas>
</Canvas>