How can I center an XML graphic within my XAML? - 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 !

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>

Xamarin Forms SVG Image (FFImageLoading) goes missing after adding LayoutOptions

In my Xamarin Forms Project I have several SVG Images that should be displayed.
Therefore I use the Xamarin.Forms.FFImageLoading.Svg.Forms NuGet Package.
The XAML looks like this:
<Grid
Margin="0"
ColumnSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="90*"/>
<ColumnDefinition Width="10*"/>
</Grid.ColumnDefinitions>
<local:LetterSpacingLabel
FontSize="14"
TextColor="#1F1F1F"
FontFamily="{StaticResource Bliss2-Regular}"
LetterSpacing="0.1"
VerticalTextAlignment="Center"
Grid.Column="0"
Text="{Binding Name}"/>
<ffimageloadingsvg:SvgCachedImage
Grid.Column="1"
Source="{Binding StateIconPath}"/>
</Grid>
And the Image is displayed as it should.
However I want it to be smaller, so I add LayoutOptions like this:
After that, the Image it not displayed anymore.
Any solutions to this problem?
Thanks in advance.
[EDIT]
Here is a .svg-File that i am using:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.0" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve">
<style type="text/css">
.st0{fill:#CE2D46;}
</style>
<path id="Pfad_73" class="st0" d="M11,0C4.9,0,0,4.9,0,11s4.9,11,11,11c6.1,0,11-4.9,11-11c0,0,0,0,0,0C22,4.9,17.1,0,11,0z
M12.4,18.6c0,0.7-0.6,1.3-1.3,1.3h-0.2c-0.7,0-1.3-0.6-1.3-1.3v-0.2c0-0.7,0.6-1.3,1.3-1.3h0.2c0.7,0,1.3,0.6,1.3,1.3V18.6z
M12.4,14.2c0,0.8-0.7,1.3-1.4,1.3c-0.7,0-1.2-0.6-1.3-1.3V4.9c0-0.8,0.7-1.3,1.4-1.3c0.7,0,1.2,0.6,1.3,1.3V14.2z"/>
</svg>
for your columns width set 9* and 1*
for the image add height and width :
#RobertHaslinger
In this case you can add a padding or margin so the size of your image will be reduced and still responsive
<ffimageloadingsvg:SvgCachedImage Margin ="8" .....>

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>

XAML images as StaticResources throw an error in Windows Universal app

I have some vector icons I want to use throughout my windows universal application. I've added them to a resource dictionary, added the dictionary to a merged dictionary in app.xml, and tried using the resources in a page. The images actually show up in the editor preview window, but throw an error when I attempt to debug the application.
ManaSymbols.xaml
<?xml version="1.0" encoding="UTF-8"?>
<xaml:ResourceDictionary
xmlns:xaml="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Viewbox x:Key="BlueManaSymbol" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Stretch="Uniform">
<Canvas Width="100" Height="100">
<Canvas.RenderTransform>
<TranslateTransform X="0" Y="0"/>
</Canvas.RenderTransform>
<Canvas>
<Canvas>
<Ellipse Width="100" Height="100" Fill="#FFC1D7E9"/>
</Canvas>
<Path Fill="#FF0D0F0F">
<Path.Data>
M 68.91657 83.71021 C 58.968869 94.408441 39.101769 93.367284 30.985174 80.955583 23.700186 70.338629 25.060135 55.965661 30.782622 44.970201 37.43962 31.696018 47.119757 19.99635 58.53257 10.53421 c -1.779599 7.330526 -2.971221 15.369494 0.5678 22.406733 4.282692 9.098857 12.226705 16.065144 15.7407 25.557642 2.950311 8.612064 0.582748 18.823437 -5.9245 25.211625 z m -0.129 -27.362 c -0.82319 -2.47714 -5.460323 -8.506164 -4.125006 -2.813916 -0.362035 4.191263 -1.937779 8.124558 -3.178994 12.106916 -0.269255 7.254198 11.007675 4.685165 9.226 -1.795 -0.01849 -2.611632 -0.877381 -5.133602 -1.922 -7.498 z
</Path.Data>
</Path>
</Canvas>
</Canvas>
</Viewbox>
</xaml:ResourceDictionary>
App.xaml
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Assets/ManaSymbols.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
Page.xaml
<ContentControl Content="{StaticResource BlueManaSymbol}" Grid.Row="0" Margin="70,0,0,0" Width="30" Height="30" />
Error throw when debugging:
A first chance exception of type 'Windows.UI.Xaml.Markup.XamlParseException' occurred in MagicStats.Windows.exe
WinRT information: Failed to assign to property 'Windows.UI.Xaml.Controls.ContentControl.Content'. [Line: 79 Position: 25]
The error message seems to indicate that the binding failed, but it actually works in the design window. Any thoughts are appreciated.

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.