Combining canvas with multiple paths to one path - xaml

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.

Related

Is there a way to remove or customize Pivot transitions?

By default, Pivots transition their PivotItems in/out using a horizontal translation with an opacity fade. I'd like a way to remove them (firstly), but also customize if possible.
Things I've tried to remove them (just passing an empty TransititionCollection in):
<Pivot>
<Pivot.Transitions>
<TransitionCollection />
</Pivot.Transitions>
<Pivot.ItemContainerTransitions>
<TransitionCollection />
</Pivot.ItemContainerTransitions>
<PivotItem Header="Red">
<PivotItem.Transitions>
<TransitionCollection />
</PivotItem.Transitions>
<PivotItem.ContentTransitions>
<TransitionCollection />
</PivotItem.ContentTransitions>
<Grid Background="Red" Width="100" Height="200" />
</PivotItem>
<PivotItem Header="Green">
<Grid Background="Green" Width="100" Height="200" />
</PivotItem>
</Pivot>
If you dig into the default Pivot template, you will find the following part for the content:
<ItemsPresenter x:Name="PivotItemPresenter" Grid.ColumnSpan="3" Grid.Row="1">
<ItemsPresenter.RenderTransform>
<TransformGroup>
<TranslateTransform x:Name="ItemsPresenterTranslateTransform"/>
<CompositeTransform x:Name="ItemsPresenterCompositeTransform"/>
</TransformGroup>
</ItemsPresenter.RenderTransform>
</ItemsPresenter>
These two Transforms inside the TransformGroup manage the animation of the items, there is no Transition behind it. This means that setting TransitionCollection empty has unfortunately no effect.
Even more unfortunate is the fact that you cannot easily remove the transition, because trying trying to remove either of the two Transforms from the Pivot style will make the control not render properly. This is likely because both transforms are referenced within the controls code-behind.
As a result, it seems that customizing the animation of the built-in Pivot is unfortunately not possible.

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 use vector XAML files?

I have 93 SVG files which I converted to XAML using XamlTune and following these instructions. The resulting files place the vector information into a Canvas.
I know need to how to use these files in my application. Do I need to put these into a ResourceDictionary, or can I access them directly from the app package?
An example XAML file:
<Canvas Name="Layer_1" Width="20" Height="20" ClipToBounds="True" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"><Canvas><Path Fill="#FF222222"><Path.Data><PathGeometry FillRule="Nonzero" Figures="M4.3,0.025C3.776,0.025,3.35,0.451,3.35,0.975L3.35,4.775C3.35,5.299 3.776,5.725 4.3,5.725 4.824,5.725 5.25,5.299 5.25,4.775L5.25,0.975C5.25,0.451,4.824,0.025,4.3,0.025z" /></Path.Data></Path><Path Fill="#FF222222"><Path.Data><PathGeometry FillRule="Nonzero" Figures="M15.7,0.025C15.176,0.025,14.75,0.451,14.75,0.975L14.75,4.775C14.75,5.299 15.176,5.725 15.7,5.725 16.224,5.725 16.65,5.299 16.65,4.775L16.65,0.975C16.65,0.451,16.224,0.025,15.7,0.025z" /></Path.Data></Path><Path Fill="#FF222222"><Path.Data><PathGeometry FillRule="Nonzero" Figures="M18.55,3.35L17.6,3.35 17.6,4.775C17.6,5.82 16.745,6.675 15.7,6.675 14.655,6.675 13.8,5.82 13.8,4.775L13.8,3.35 6.2,3.35 6.2,4.775C6.2,5.82 5.345,6.675 4.3,6.675 3.255,6.675 2.4,5.82 2.4,4.775L2.4,3.35 1.45,3.35C0.926,3.35,0.5,3.776,0.5,4.3L0.5,7.15 0.5,8.575 1.925,8.575 18.075,8.575 19.5,8.575 19.5,7.15 19.5,4.3C19.5,3.776,19.074,3.35,18.55,3.35z" /></Path.Data></Path><Path Fill="#FF222222"><Path.Data><PathGeometry FillRule="Nonzero" Figures="M0.5,9.525L0.5,19.025C0.5,19.549,0.926,19.975,1.45,19.975L18.55,19.975C19.074,19.975,19.5,19.549,19.5,19.025L19.5,9.525 0.5,9.525z M17.6,18.075L2.4,18.075 2.4,11.425 17.6,11.425 17.6,18.075z" /></Path.Data></Path></Canvas></Canvas>
I suppose I understand what you are asking. Let's start that using them in a ResourceDictionary is perfectly fine, and might be ideal. The second, most obvious use, would be to put them in a UserControl. Both options would allow you to reuse them however you want.
Let's pretend I had a Canvas and I wanted to do just that.
<Canvas Height="100" Width="100" Background="Blue" />
Now, to use a ResourceDictionary, I would do this:
<Grid>
<Grid.Resources>
<DataTemplate x:Name="MyShape">
<Canvas Height="100" Width="100" Background="Red" />
</DataTemplate>
</Grid.Resources>
<ContentPresenter Content="{x:Null}" ContentTemplate="{StaticResource MyShape}" />
</Grid>
Note you can remove this from Resources and move it to a file if you like.
And, if you want a user control which gives you advantage of code-behind, you can do that, too.
Best of luck.

How to create WPF UserControl having a Canvas as the "main panel"?

I want to create a UserControl having a Canvas inside it. Then I can use it like this in XAML:
<Window ...>
<Grid>
<local:MyCanvasLikeControl>
<Path .../>
<Path .../>
<Polygon.../>
</local:MyCanvasLikeControl>
</Grid>
</Window>
I have tried some things, but always get this error: "Property Content can only be set once". I know of ControlTemplates and such, but could not find my way by reading the docs by myself.
My goal is to have an equivalent to this:
<Window ...>
<Grid ...>
<Border ....>
<Canvas ...>
<Path ...>
<Path ...>
<Polygon ...>
</Canvas>
</Border>
</Grid>
</Window>
But moving the "Border / Canvas" to a UserControl named "MyCanvasLikeControl"
It's the same type of scenario as if you to stuff a bunch of elements of any other type into a control that would produce the same error like for example;
<UserControl>
<Grid/>
<StackPanel/>
<Canvas/>
<!-- you get the idea -->
</UserControl>
It's just telling you that you need to specify a parent capable of holding your content to act as the single content of its parent, which in this case would be your control. So to fix this, it's luckily simple;
<local:MyCanvasLikeControl>
<Grid>
<Path .../>
<Path .../>
<Polygon.../>
</Grid>
</local:MyCanvasLikeControl>
Or switch Grid with Canvas or whatever you want so long as it can host children elements. Hope this helps.
EDIT:
Ok, so I think the definition of requirement may have been a bit over-complicated in its explanation. If I'm understanding you correctly then here's why you're breaking.
You have your first layer of elements that contain your UserControl, but the way you're trying to insert content into it isn't the way that works, you'll need to provide that ability by specifying how you wish to allow it to be added to your control via a ContentPresenter or ContentControl etc. So instead it would be more like this inside your external UserControl;
<Border ....>
<Canvas ...>
<ContentPresenter/> or <ContentControl/> etc.
</Canvas>
</Border>
So then you can inject that stuff in there the way you want.
<Window ...>
<Grid>
<local:MyCanvasLikeControl>
<local:MyCanvasLikeControl.Content>
<Path .../>
<Path .../>
<Polygon.../>
</local:MyCanvasLikeControl.Content>
</local:MyCanvasLikeControl>
</Grid>
</Window>
Make sense?

Application Level Resources XAML

How do I create an application level resources in XAML? I'm developing a Windows Phone 8 app btw.
Below I have a rectangle, I want to create a resources that can be used to change the colour of the rectangle when tapped:
<Rectangle Fill="#FFF4F4F5"
HorizontalAlignment="Left"
Height="100"
Stroke="Black"
VerticalAlignment="Top"
Width="100"
x:Name="pad1"
Tap="pad1_tap"
/>
I have read some similar posts that say to use:
<Application.Resources>
<!-- Resources Here !-->
</Application.Resources>
... but there is no object under the name 'Application' within my application. When trying to use 'Application.Resources' I get an error stating: The member Resources is not recognized or accesssible.
The Application object is in your app.xaml file. But it's useful only if you want your resource to be shared by the whole application. If you need it only in one page, you can declare your resource in the PhoneApplicationPage element:
<phone:PhoneApplicationPage.Resources>
<!-- your resource -->
</phone:PhoneApplicationPage.Resources>
You'd need to import a mscorlib library and then refer to your resources using StaticResource keyword, like so:
<Application
x:Class="AppClass"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone">
<Application.Resources>
<sys:Int32 x:Key="Test">80</sys:Int32>
</Application.Resources>
</Application>
Usage:
<Rectangle Fill="#FFF4F4F5"
HorizontalAlignment="Left"
Height="100"
Stroke="Black"
VerticalAlignment="Top"
Width="{StaticResource Test}"
x:Name="pad1"
Tap="pad1_tap"
/>