Converting polygon to path - xaml

On a Windows app store project i have these polygons
<Polygon x:Name="AcItemTriangle" Stroke="#aa6861" Fill="#aa6861" Visibility="Collapsed" Points="0,0 28,0 14,35" />
and
<Polygon x:Name="AcItemTriangle" Points="0,0 28,0 14,35" Stroke="#67a0bb" Fill="#67a0bb" Visibility="Collapsed" />
I would like to know if there is a way i can convert my polygon points to a Path


This should work:
<Path Data="M0,0 L28,0 14,35Z" Stroke="#aa6861" Fill="#aa6861" ... />

Related

Convert XAML path to SVG

I have the following XAML path which I want to convert to SVG. Is there a way to do it?
<Path Stroke="{DynamicResource ForegroundColorBrush}" Canvas.Right="0" Width="186" Height="216" Stretch="Fill" StrokeThickness="3" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="F1 M 184.69,166.333L 173.338,166.333L 173.338,80.8143L 153.122,15.4178L 153.122,5.35669C 152.785,4.01523 152.448,2.67374 140.823,2.00302C 129.199,1.33228 106.287,1.33228 94.6631,2.00302C 83.0388,2.67374 82.7018,4.01523 82.3649,5.35669L 82.3649,15.4178L 62.1486,80.8143L 62.1486,166.333L 1.49997,166.333L 1.49997,206.577L 62.1486,206.577L 62.1486,211.607C 65.1811,212.613 68.2135,213.62 85.2288,214.123C 102.244,214.626 133.242,214.626 150.258,214.123C 167.273,213.62 170.305,212.613 173.338,211.607L 173.338,206.577L 184.7,206.5" RenderTransformOrigin="0.5,0.5">
<Path.RenderTransform>
<ScaleTransform ScaleY="1" ScaleX="-1"/>
</Path.RenderTransform>
</Path>

what is replacing drawingbrush in windows universal projects

I have the following code in wpf, which I want to use in Windows Universal,
<Border>
<Border.Background>
<DrawingBrush Stretch="None" TileMode="Tile" Viewport="0,0,10,10" ViewportUnits="Absolute">
<DrawingBrush.Drawing>
<DrawingGroup>
<GeometryDrawing Geometry="M0,0 L10,0 10,10, 0,10Z" Brush="White" />
<GeometryDrawing Geometry="M0,10 L20,10 20,20, 10,20 10,0 0,0Z" Brush="Gray" />
</DrawingGroup>
</DrawingBrush.Drawing>
</DrawingBrush>
</Border.Background>
</Border>
But I get the following error:
DrawingBrush is not supported in a Windows Universal project.
What this does is the background for transparent color with gray and white squares. Any one knows a solution for how to redo it without using an image?
Thanks.

You can use Path in UWP like this
<Path Stroke="White"
StrokeThickness="1"
Data="M0,0 L10,0 10,10, 0,10Z" />

How to make a squared image to a round image on Windows Phone

Is it possible to make a round image from a squared image on a Windows phone? I have a lot of images which should be displayed as a circle. But how can I do this?

In XAML you want to make the circle using an Ellipse control. Then give it an ImageBrush fill.
<Ellipse Height="100" Width="100">
<Ellipse.Fill>
<ImageBrush ImageSource="YourImage.png"/>
</Ellipse.Fill>
</Ellipse>

My idea is very simple:
<Image Source="ImagePath" Width="326" Height="188">
<Image.Clip>
<EllipseGeometry Center="170,90" RadiusX="90" RadiusY="90" />
</Image.Clip>
</Image>
Or you can apply an OpacityMask to an Image to create a variety of opacity-related photo masking
<Image Source="ImagePath" >
<Image.OpacityMask>
<RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5">
<GradientStop Color="#ffffffff" Offset="0.5" />
<GradientStop Color="#00ffffff" Offset="0.8" />
</RadialGradientBrush>
</Image.OpacityMask>
</Image>

You can use Image.Clip but i prefer the #robwirving solution. But you need to choice now!
Information here => http://msdn.microsoft.com/fr-fr/library/system.windows.uielement.clip(v=vs.110).aspx

SVG: make an element's property dependent on a property of another element

I have a simple SVG tree where I want the x property of rect2 to be dependent (referencing) on the width of rect1:
<rect id="rect1" style="fill:black" x="35" y="0" width="30" height="40" />
<rect id="rect2" style="fill:black" x="**rect1.width**" y="40" width="26" height="10" />
Is something like that possible in SVG, I couldn't find it in yahoogle or the SVG reference.
Another approach would be variables
**var widthOfRect1 = 30**
<rect id="rect1" style="fill:black" x="35" y="0" width="widthOfRect1" height="40" />
<rect id="rect2" style="fill:black" x="widthOfRect1" y="40" width="26" height="10" />
Is there a way to do that? I know you can pass in parameters, but that's not exactly what I'm looking for.
Ideas?

There is an option of doing this with the mutation events.
Created fiddle http://jsfiddle.net/Afhmn/
As the width of the rect1 increases the x of the rect2 is changed inside the DOMAttrModified handler.

Combining canvas with multiple paths to one path

I have a collection of paths in canvas and I need to convert them into one Path.
I'm trying to do that by Object->Combine->Unite but this option is not enabled.
I would be gratefull for any help.
This is my XAML:
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"
x:Class="SilverlightApplication1.MainPage"
Width="640" Height="480">
<Grid x:Name="LayoutRoot" Background="White">
<Canvas x:Name="field" HorizontalAlignment="Left" Height="500" UseLayoutRounding="False" VerticalAlignment="Top" Width="500">
<Canvas x:Name="Layer_2" Height="509.154" Canvas.Left="92.5" Canvas.Top="11.346" Width="350">
<Path Data="F1M391.8379,54.6753C391.0249,44.3673,381.7899,40.5433,377.0209,39.9613C368.0439,38.8093,156.5579,11.6653,153.6879,11.4043C153.2659,11.3663,152.8279,11.3463,152.3859,11.3463C149.2859,11.3463,146.5969,12.2933,146.3009,12.4013L146.1119,12.4693L145.9329,12.5553L132.0459,19.2413L129.1479,21.5923C126.1149,25.5313,126.3449,30.2683,126.5119,34.4753C126.4769,53.7523,125.8859,380.4613,126.5149,399.9613C127.1799,420.5743,136.1569,422.8063,138.9229,423.0023C151.9159,426.1893,344.9659,473.5313,363.7739,477.2933C366.5159,477.8423,369.0429,478.1193,371.2839,478.1193C376.0709,478.1193,379.7899,476.8793,382.3579,474.4293C390.4349,470.3023,392.4539,463.7933,392.3649,460.4653C392.3759,443.3883,392.6119,64.4803,391.8379,54.6753" Stroke="Black" Height="466.773" Canvas.Left="33.727" Stretch="Fill" Canvas.Top="0" Width="266.181"/>
<Path Data="F1M147.165,16.193L133.278,22.879C133.278,22.879,371.147,475.214,379.633,471.099L379.633,471.099C388.12,466.985,387.862,460.557,387.862,460.557L387.862,460.557C387.862,460.557,388.119,64.795,387.347,55.024L387.347,55.024C386.576,45.252,376.034,43.966,376.034,43.966L376.034,43.966C376.034,43.966,155.65,15.678,152.823,15.421L152.823,15.421C152.508,15.392,152.194,15.38,151.884,15.38L151.884,15.38C149.4,15.38,147.165,16.193,147.165,16.193" Height="455.747" Canvas.Left="40.778" Stretch="Fill" Canvas.Top="4.034" Width="254.625">
</Path>
<Path Data="F1M130.009,34.09C130.009,34.09,129.37,380.042,130.009,399.865L130.009,399.865C130.648,419.688,138.963,419.049,138.963,419.049L138.963,419.049C138.963,419.049,344.871,469.567,364.055,473.404L364.055,473.404C383.238,477.241,381.32,465.092,381.32,465.092L381.32,465.092L381.32,65.424C380.681,48.798,365.334,47.519,365.334,47.519L365.334,47.519C365.334,47.519,156.228,21.94,141.52,21.301L141.52,21.301C141.178,21.286,140.847,21.279,140.524,21.279L140.524,21.279C126.96,21.279,130.009,34.09,130.009,34.09" Height="452.874" Canvas.Left="37.216" Stretch="Fill" Canvas.Top="9.933" Width="251.658">
</Path>
<Path Data="F1M130.009,34.09C130.009,34.09,129.775,160.894,129.732,265.362L129.732,265.362C219.448,338.824,357.291,327.6,381.32,324.991L381.32,324.991L381.32,65.424C380.681,48.798,365.334,47.519,365.334,47.519L365.334,47.519C365.334,47.519,156.228,21.94,141.52,21.301L141.52,21.301C141.179,21.286,140.846,21.279,140.524,21.279L140.524,21.279C126.957,21.277,130.009,34.09,130.009,34.09" Height="305.882" Canvas.Left="37.215" Stretch="Fill" Canvas.Top="9.933" Width="251.605">
</Path>
<Path Data="F1M381.3203,465.0918L381.3203,65.4238C380.6803,48.7978,365.3343,47.5188,365.3343,47.5188C365.3343,47.5188,156.2283,21.9398,141.5203,21.3008C136.9533,21.1028,134.1153,22.2608,132.3693,23.9518C133.9243,23.4038,135.8693,23.1128,138.3233,23.2188C153.0303,23.8588,362.1363,49.4378,362.1363,49.4378C362.1363,49.4378,377.4833,50.7158,378.1233,67.3418L378.1233,467.0098C378.1233,467.0098,378.7003,470.7098,375.9973,473.3818C382.2753,471.1958,381.3203,465.0918,381.3203,465.0918" Stroke="Black" Height="452.103" Canvas.Left="39.869" Stretch="Fill" Canvas.Top="9.932" Width="249.003"/>
<Path Data="F1M141.691,395.498C141.691,405.922,149.756,407.904,149.756,407.904L149.756,407.904C149.756,407.904,328.467,450.977,344.525,454.425L344.525,454.425C357.506,457.213,359.753,452.715,360.031,450.083L360.031,450.083C360.31,447.449,360.031,128.777,360.031,128.777L360.031,128.777L141.072,94.663C141.072,94.663,141.691,382.473,141.691,395.498" Height="360.642" Canvas.Left="48.572" Stretch="Fill" Canvas.Top="83.317" Width="219.083">
</Path>
<Path Data="F1M360.1494,326.6006C360.1254,236.0256,360.0314,128.7776,360.0314,128.7776L141.0724,94.6626C141.0724,94.6626,141.2784,190.6626,141.4534,274.2856C215.1814,326.6436,314.5184,328.8516,360.1494,326.6006" Fill="White" Height="232.497" Canvas.Left="48.572" Stretch="Fill" Canvas.Top="83.316" Width="219.077"/>
<Path Data="F1M248.96,226.704L297.708,235.978L298.237,214.253L249.489,206.305z" Height="29.673" Canvas.Left="156.46" Stretch="Fill" Canvas.Top="194.959" Width="49.277" Fill="Black">
</Path>
<Path Data="F1M137.934,45.137C137.156,54.738,138.193,85.353,138.193,85.353L138.193,85.353L363.661,119.083L362.883,73.937C362.883,73.937,362.623,66.153,352.245,65.116L352.245,65.116C341.867,64.078,149.869,37.612,149.869,37.612L149.869,37.612C149.869,37.612,148.852,37.423,147.411,37.423L147.411,37.423C144.079,37.423,138.477,38.435,137.934,45.137" Height="81.66" Canvas.Left="45.145" Stretch="Fill" Canvas.Top="26.077" Width="226.016">
</Path>
<Path Data="F1M149.08,398.571L348.092,446.953L348.092,130.23L149.08,98.307z M154.067,394.082L154.067,103.794L198.458,110.821L198.458,404.857z M203.446,153.085L203.446,111.61L343.104,133.72L343.104,176.122z M203.446,175.032L203.446,157.075L245.843,164.069L245.843,182.026z M250.83,182.848L250.83,164.891L295.222,172.214L295.222,190.17z M300.209,190.992L300.209,173.036L343.104,180.111L343.104,198.068z M203.446,196.977L203.446,179.021L245.843,186.015L245.843,203.971z M250.83,204.794L250.83,186.838L295.222,194.16L295.222,212.116z M300.209,212.939L300.209,194.983L343.104,202.059L343.104,220.014z M203.446,217.453L203.446,200.968L245.843,207.961L245.843,224.884z M250.83,225.757L250.83,208.784L295.222,216.107L295.222,233.537z M300.209,234.412L300.209,216.928L343.104,224.004L343.104,241.93z M203.446,238.402L203.446,221.444L245.843,228.874L245.843,245.832z M250.83,246.706L250.83,229.748L295.222,237.528L295.222,254.486z M300.209,255.36L300.209,238.402L343.104,245.92L343.104,262.878z M203.446,261.346L203.446,242.393L245.843,249.822L245.843,268.776z M250.83,269.65L250.83,250.696L295.222,258.477L295.222,277.43z M300.209,278.304L300.209,259.351L343.104,266.868L343.104,285.822z M203.446,282.793L203.446,265.336L245.843,272.765L245.843,290.223z M250.83,291.096L250.83,273.64L295.222,281.42L295.222,298.877z M300.209,299.751L300.209,282.294L343.104,289.811L343.104,307.269z M203.446,302.289L203.446,286.783L245.843,294.213L245.843,310.447z M250.83,311.407L250.83,295.087L295.222,302.868L295.222,319.95z M300.209,320.909L300.209,303.742L343.104,311.259L343.104,329.163z M203.446,323.258L203.446,306.28L245.843,314.437L245.843,331.766z M250.83,332.767L250.83,315.397L295.222,323.939L295.222,341.675z M300.209,342.676L300.209,324.9L343.104,333.154L343.104,351.283z M203.446,343.741L203.446,327.248L245.843,335.756L245.843,352.827z M250.83,353.895L250.83,336.757L295.222,345.665L295.222,363.407z M300.209,364.476L300.209,346.666L343.104,355.274L343.104,373.668z M203.446,364.242L203.446,347.732L245.843,356.816L245.843,374.193z M250.83,375.363L250.83,357.885L295.222,367.398L295.222,385.781z M203.446,386.189L203.446,368.233L245.843,378.182L245.843,396.139z M300.209,386.951L300.209,368.467L343.104,377.658L343.104,397.018z M250.83,397.31L250.83,379.353L295.222,389.772L295.222,407.727z M203.446,406.069L203.446,390.178L245.843,400.129L245.843,416.36z M300.209,408.897L300.209,390.942L343.104,401.009L343.104,418.965z M250.83,417.57L250.83,401.3L295.222,411.718L295.222,428.346z M300.209,429.557L300.209,412.888L343.104,422.956L343.104,439.97z" Height="348.646" Canvas.Left="56.58" Stretch="Fill" Canvas.Top="86.961" Width="199.012">
<Path.Stroke>
<SolidColorBrush Color="Black"/>
</Path.Stroke>
</Path>
<Path Data="F1M362.8828,73.937C362.8828,73.937,362.7278,69.445,358.1038,66.832C359.6468,69.006,359.7208,71.126,359.7208,71.126L360.4988,116.272L138.1188,83.004C138.1638,84.479,138.1928,85.353,138.1928,85.353L363.6608,119.083z" Stroke="Black" Height="52.251" Canvas.Left="45.619" Stretch="Fill" Canvas.Top="55.486" Width="225.542"/>
<Path Data="F1M140.393,48.651C141.171,39.051,152.328,41.126,152.328,41.126C152.328,41.126,344.326,67.591,354.705,68.629C358.353,68.994,360.746,70.192,362.321,71.593C361.387,69.211,358.894,65.78,352.245,65.115C341.867,64.078,149.869,37.613,149.869,37.613C149.869,37.613,138.712,35.537,137.934,45.137C137.155,54.737,138.193,85.353,138.193,85.353L140.554,85.706C140.314,77.645,139.768,56.367,140.393,48.651" Height="48.282" Stretch="Fill" Width="224.677" Canvas.Left="45.144" Canvas.Top="26.077">
<Path.Stroke>
<SolidColorBrush Color="Black"/>
</Path.Stroke>
</Path>
</Canvas>
</Canvas>
</Grid>
</UserControl>

Are you selecting multiple Path elements first? I've loaded the code you posted in Blend and Unite is enabled. You have to select at least two Path elements for the Combine options to become enabled. Personally, I find it easier to select them in the Objects and Timeline panel and right-click to find the Combine menu.
Assuming that you are trying to turn this art into a single Path element, I can only say "good luck". This kind of operation can be very tricky. My bet is that the Path operations will not do what you actually want because overlapping elements combine properties as well as Paths. You'll lose detail of one element or the other if they overlap.
It seems then that Compound Paths would be the answer, but Compound Paths suffer from the same issue. Select all the Paths and use Path > Make Compound Path. On the surface this seems OK until you realize the black button in the center of the art is now white. When you think of it, this makes sense. You are asking a single Path to have multiple Fill properties, which it cannot do.
You can experiment with the other Path operations but they all enforce the same rules because in the end a Path isn't all that complex. The real question I would ask is "what are you really trying to achieve"? The only real reason to convert these all to a single Path is so that they can share the same properties.
If you tell me what problem you are trying to solve maybe we can find a solution. The elements are already grouped together (in Layer_2). If you are looking to make this a reusable graphic on other screens, I would group Layer_2 into a ViewBox and then export the ViewBox to a UserControl (right-click > Make Into User Control). My guess is this is what you are actually after.