Convert XAML path to SVG - xaml

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>

Related

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 get content to fill up entire button in XAML?

I have a UWP application, where I want a path to be the content of a button. So far, this is what I have:
<Style TargetType="Button" x:Key="arrow">
<Setter Property="Content">
<Setter.Value>
<Path Height="10" Width="10" Stretch="Uniform" Fill="Black" Data="F1 M 92.362,56.1133C 93.8282,57.8717 92.9765,60.7721 90.4336,60.7721L 80.461,60.7721L 80.461,103.953C 80.461,105.441 79.22,106.682 77.7318,106.682L 55.6016,106.682C 54.1133,106.682 52.8718,105.441 52.8718,103.953L 52.8718,60.7721L 42.8997,60.7721C 40.3575,60.7721 39.5052,57.8717 40.972,56.1133L 64.7376,27.5612C 65.3184,26.8627 66.0052,26.6081 66.6667,26.6536C 67.3282,26.6081 68.0131,26.8627 68.5964,27.5612L 92.362,56.1133 Z M 66.6667,0C 103.484,0 133.333,29.8476 133.333,66.6667C 133.333,103.486 103.484,133.333 66.6667,133.333C 29.8483,133.333 0,103.486 0,66.6667C 0,29.8476 29.8483,0 66.6667,0 Z M 66.6667,122.667C 97.5938,122.667 122.667,97.5938 122.667,66.6667C 122.667,35.739 97.5938,10.6667 66.6667,10.6667C 35.7389,10.6667 10.6667,35.739 10.6667,66.6667C 10.6667,97.5938 35.7389,122.667 66.6667,122.667 Z "/>
</Setter.Value>
</Setter>
</Style>
And the button:
<Button Height="13" Width="13" Style="{StaticResource arrow}">
However, the path doesn't show. Further investigating reveals that the path gets cut off at smaller sizes and works as content on the larger sizes. I suspect it might have to do with some kind of content padding. How do I make the path fill up the button instead of getting cut off?

You have solved it yourself - it's a padding problem (Button has a default one - just change it to 0). I've tried like this and it should work:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.Resources>
<Style TargetType="Button" x:Key="arrow">
<Setter Property="Padding" Value="0"/>
<Setter Property="Content">
<Setter.Value>
<Path Height="10" Width="10" Stretch="Uniform" Fill="Black" Data="F1 M 92.362,56.1133C 93.8282,57.8717 92.9765,60.7721 90.4336,60.7721L 80.461,60.7721L 80.461,103.953C 80.461,105.441 79.22,106.682 77.7318,106.682L 55.6016,106.682C 54.1133,106.682 52.8718,105.441 52.8718,103.953L 52.8718,60.7721L 42.8997,60.7721C 40.3575,60.7721 39.5052,57.8717 40.972,56.1133L 64.7376,27.5612C 65.3184,26.8627 66.0052,26.6081 66.6667,26.6536C 67.3282,26.6081 68.0131,26.8627 68.5964,27.5612L 92.362,56.1133 Z M 66.6667,0C 103.484,0 133.333,29.8476 133.333,66.6667C 133.333,103.486 103.484,133.333 66.6667,133.333C 29.8483,133.333 0,103.486 0,66.6667C 0,29.8476 29.8483,0 66.6667,0 Z M 66.6667,122.667C 97.5938,122.667 122.667,97.5938 122.667,66.6667C 122.667,35.739 97.5938,10.6667 66.6667,10.6667C 35.7389,10.6667 10.6667,35.739 10.6667,66.6667C 10.6667,97.5938 35.7389,122.667 66.6667,122.667 Z "/>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<Button HorizontalAlignment="Center" Height="14" Width="14" Style="{StaticResource arrow}"/>
</Grid>

How can I center an XML graphic within my XAML?

I am new to XAML and I am trying to figure out some of the ways you position things. I have a graphic that started off as an Adobe Illustrator image which I then converted to code that renders fine as XAML. However, I can't seem to get it to display centered within the display area. Using horizontalalignment, I can center other things without issue, but for some reason, I can't seem to get this graphic to be centered. I'm hoping that I just missed something.
<Window x:Class="play.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<StackPanel>
<Viewbox xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Height="320">
<Canvas x:Name="Layer_1" Canvas.Left="0" Canvas.Top="0" Width="62" Height="22" HorizontalAlignment="Center" Background="#00AEEF">
<!--Unknown tag: metadata-->
<!--Unknown tag: sodipodi:namedview-->
<Canvas x:Name="g3" HorizontalAlignment="Center">
<Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="path5" Fill="White" Margin="0,0,0,0" HorizontalAlignment="Center">
<Path.Data>
<PathGeometry Figures="M16.733 8.245c-0.027-0.413-0.393-0.726-0.798-0.698c-0.413 0.027-0.726 0.385-0.698 0.798 c0.123 1.855-0.554 3.68-1.855 5.006c-1.199 1.225-2.783 1.899-4.46 1.899c0 0 0 0-0.001 0c-1.553 0-3.007-0.59-4.125-1.656 l1.177-1.177c0.28-0.279 0.081-0.758-0.314-0.758H2.38c-0.245 0-0.444 0.199-0.444 0.444v3.278c0 0.396 0.478 0.594 0.758 0.314 l1.041-1.041c1.401 1.35 3.231 2.096 5.185 2.096c0.001 0 0.001 0 0.002 0c2.082 0 4.047-0.835 5.53-2.349 C16.053 12.771 16.884 10.527 16.733 8.245z" FillRule="NonZero"/>
</Path.Data>
</Path>
<Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="path7" Fill="White" Margin="0,0,0,0">
<Path.Data>
<PathGeometry Figures="M2.075 10.503c0.413-0.031 0.723-0.391 0.692-0.804c-0.14-1.868 0.535-3.709 1.85-5.051 C5.819 3.424 7.403 2.75 9.079 2.75c1.594 0 3.085 0.618 4.213 1.736l-1.152 1.152c-0.28 0.28-0.082 0.759 0.314 0.759h3.278 c0.245 0 0.444-0.199 0.444-0.444V2.674c0-0.396-0.479-0.594-0.758-0.314l-1.066 1.065C12.941 2.024 11.074 1.25 9.079 1.25 c-2.083 0-4.048 0.834-5.533 2.348C1.93 5.248 1.101 7.513 1.272 9.811c0.029 0.395 0.358 0.694 0.747 0.694 C2.037 10.505 2.057 10.504 2.075 10.503z" FillRule="NonZero"/>
</Path.Data>
</Path>
</Canvas>
</Canvas>
</Viewbox>
</StackPanel>

Canvas is only good for static placement of graphics.
You should start using grids and stackpanels.
I have modified your xaml:
<StackPanel>
<Viewbox xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Height="320">
<Grid x:Name="Layer_1" Width="62" Height="22" HorizontalAlignment="Center" Background="#00AEEF">
<!--Unknown tag: metadata-->
<!--Unknown tag: sodipodi:namedview-->
<Grid x:Name="g3" HorizontalAlignment="Center" VerticalAlignment="Center">
<Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="path5" Fill="White" Margin="0,0,0,0" HorizontalAlignment="Center">
<Path.Data>
<PathGeometry Figures="M16.733 8.245c-0.027-0.413-0.393-0.726-0.798-0.698c-0.413 0.027-0.726 0.385-0.698 0.798 c0.123 1.855-0.554 3.68-1.855 5.006c-1.199 1.225-2.783 1.899-4.46 1.899c0 0 0 0-0.001 0c-1.553 0-3.007-0.59-4.125-1.656 l1.177-1.177c0.28-0.279 0.081-0.758-0.314-0.758H2.38c-0.245 0-0.444 0.199-0.444 0.444v3.278c0 0.396 0.478 0.594 0.758 0.314 l1.041-1.041c1.401 1.35 3.231 2.096 5.185 2.096c0.001 0 0.001 0 0.002 0c2.082 0 4.047-0.835 5.53-2.349 C16.053 12.771 16.884 10.527 16.733 8.245z" FillRule="NonZero"/>
</Path.Data>
</Path>
<Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="path7" Fill="White" Margin="0,0,0,0">
<Path.Data>
<PathGeometry Figures="M2.075 10.503c0.413-0.031 0.723-0.391 0.692-0.804c-0.14-1.868 0.535-3.709 1.85-5.051 C5.819 3.424 7.403 2.75 9.079 2.75c1.594 0 3.085 0.618 4.213 1.736l-1.152 1.152c-0.28 0.28-0.082 0.759 0.314 0.759h3.278 c0.245 0 0.444-0.199 0.444-0.444V2.674c0-0.396-0.479-0.594-0.758-0.314l-1.066 1.065C12.941 2.024 11.074 1.25 9.079 1.25 c-2.083 0-4.048 0.834-5.533 2.348C1.93 5.248 1.101 7.513 1.272 9.811c0.029 0.395 0.358 0.694 0.747 0.694 C2.037 10.505 2.057 10.504 2.075 10.503z" FillRule="NonZero"/>
</Path.Data>
</Path>
</Grid>
</Grid>
</Viewbox>
</StackPanel>

maybe you should use a gird (Grid.RowDefinitions and Grid.ColumnDefinitions) to center your canvas instead of the HorizontalAlignment property
best of luck !

Converting polygon to path

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" ... />

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.