I'm working on a WPF application using C#. So far, I have added a custom font using a ResourceDictionary on my application. When I run the app I can see the font works fine, but on the Design tab of my XAML it always shows the default font. Could I be missing something to set my designer correctly?
App.xaml
<Application x:Class="Bali.Chat.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:Bali.Chat"
StartupUri="MainWindow.xaml">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Styles/Fonts.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>
Fonts.xaml
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<FontFamily x:Key="LatoRegular">pack://application;,,,/Fonts/#Lato Regular</FontFamily>
<FontFamily x:Key="LatoThin">pack://application;,,,/Fonts/#Lato Thin</FontFamily>
</ResourceDictionary>
MainWindow.xaml
<Window x:Class="Bali.Chat.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:Bali.Chat"
mc:Ignorable="d"
Icon="Images/Logo/logo-small.png"
WindowStyle="None"
AllowsTransparency="True"
Title="Bali Chat"
Height="250" Width="400">
<StackPanel>
<TextBlock Text="Default Font!" FontSize="40" />
<TextBlock Text="Thin Font" FontSize="40" FontFamily="{StaticResource LatoThin}" />
<TextBlock Text="Regular Font" FontSize="40" FontFamily="{StaticResource LatoRegular}" />
</StackPanel>
</Window>
This is what I get on my designer
And this is what I get if I run the application
I really would like to preview what I'm trying to render without having to start the application or check it on the live preview. The tutorial I am following does show the presenter seeing the proper font in the designer, so I know there are some issues. Thanks in advance.
I want to create a new UserControl and reroute the Background property to use it elsewhere than in the UserControl.Background property (like it is done on the checkbox for example).
Here is a simple custom usercontrol:
<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:Controls"
xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing"
x:Class="Controls.HexagonalTile"
mc:Ignorable="d" d:DesignWidth="300" d:DesignHeight="300">
<Grid>
<ed:RegularPolygon Fill="{Binding ElementName=LayoutRoot, Path=Background}" StrokeThickness="5" Stroke="Black"/>
</Grid>
And I want to use it like this:
<Controls:HexagonalTile HorizontalAlignment="Left" Height="100" Width="100" Background="Aqua" />
But when I do this, the corner of my user control, outside of the hexagone, take the background color too. I want them to stay transparent.
Thank's for your help.
The reason why this is happening is because the default ControlTemplate for a UserControl has a Border with a TemplateBinding to the Background property.
However, you can re-template the control like this to achieve your goal:
<UserControl x:Class="WpfApp4.HexagonalTile"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing">
<UserControl.Template>
<ControlTemplate TargetType="{x:Type UserControl}">
<Grid>
<ContentPresenter />
</Grid>
</ControlTemplate>
</UserControl.Template>
<Grid>
<ed:RegularPolygon
Fill="{Binding Background, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}"
Stroke="Black"
StrokeThickness="5" />
</Grid>
</UserControl>
I hope this helps!
I have a resource dictionary in a Resources.xaml file containing multiple vector icons (XAML format, Canvas in a Viewbox):
<ResourceDictionary>
<Viewbox x:Key="Icon1" x:Shared="False">
...
</Viewbox>
<Viewbox x:Key="Icon2" x:Shared="False">
...
</Viewbox>
</ResourceDictionary>
These icons can be displayed in a WPF window multiple times because I have used the x:Shared="False setting. For example, ...
<ContentControl Content="{StaticResource Icon1}" />
<ContentControl Content="{StaticResource Icon1}" />
... displays the Icon1 icon twice as expected.
Now I'd like to convert an enum to the icon object so that an icon can be displayed based on an enum value (for nodes in a tree view). You would usually declare an EnumToObjectConverter in the Resources.xaml:
<local:EnumToObjectConverter x:Key="TreeIcons">
<ResourceDictionary>
<Viewbox x:Key="Icon1" x:Shared="False">
...
</Viewbox>
<Viewbox x:Key="Icon2" x:Shared="False">
...
</Viewbox>
<ResourceDictionary>
</local:EnumToObjectConverter>
But since this is an embedded resource dictionary the x:Shared setting does not have any effect (https://learn.microsoft.com/en-us/dotnet/framework/xaml-services/x-shared-attribute) and referencing the image through the converter results in the icon being displayed only once in the Window or tree view, even when referenced in multiple places (the other places remain blank).
How can I do a mapping from an enum to the vector icon object so that icons are still properly displayed in multiple places?
Update: This example demonstrates the effect of the x:Shared setting (this is a NET Core 3.0 WPF application in case it makes any difference).
MainWindow.xaml
<Window x:Class="XamlIconTest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:XamlIconTest"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Resources.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
<Grid>
<StackPanel>
<Label Content="Icon1 (1st)" />
<ContentControl Content="{StaticResource Icon1}" Margin="8"/>
<Separator />
<Label Content="Icon1 (2nd)" />
<ContentControl Content="{StaticResource Icon1}" Margin="8"/>
<Separator />
<Label Content="Icon2 (1st)" />
<ContentControl Content="{StaticResource Icon2}" Margin="8"/>
<Separator />
<Label Content="Icon2 (2nd)" />
<ContentControl Content="{StaticResource Icon2}" Margin="8"/>
</StackPanel>
</Grid>
</Window>
MainWindow.xaml.cs
using System.Windows;
namespace XamlIconTest
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
}
}
Resources.xaml
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:XamlIconTest">
<!-- Icon1 without x:Shared -->
<Path x:Key="Icon1"
Width="37.9858" Height="46.6386" Canvas.Left="19.186" Canvas.Top="14.2229" Stretch="Fill" Fill="#FF000000" Data="F1 M 38.1789,60.8614L 19.186,37.7428L 38.1686,14.2229L 57.1718,37.7531L 38.1789,60.8614 Z "/>
<!-- Icon2 with x:Shared -->
<Path x:Key="Icon2" x:Shared="False"
Width="37.9858" Height="46.6386" Canvas.Left="19.186" Canvas.Top="14.2229" Stretch="Fill" Fill="#FF000000" Data="F1 M 38.1789,60.8614L 19.186,37.7428L 38.1686,14.2229L 57.1718,37.7531L 38.1789,60.8614 Z "/>
</ResourceDictionary>
Displayed main window (note the missing Icon1 in the first row):
Your question seems to boil down to two separate topics:
The primary one, which is how to share vector graphics in a context where x:Shared has no effect (i.e. in a resource dictionary that's defined as a child of your converter).
An implied secondary one, which is how to property select a specific vector graphic given an input value (e.g. an enum value).
First I will note: as a general rule it is my preference to use templates instead of x:Shared=false with explicit resources. It winds up doing basically the same thing — instantiating new visual objects for each value displayed — but IMHO is more idiomatic for WPF, which is designed entirely around the concept of templating and binding.
As far as addressing your issues goes…
Your MCVE does not involve code that uses a converter, but the basic principle would be the same, so I will provide an example based on the MCVE, not using a converter. The approach involves doing as I suggested in the comments, which is to declare a resource containing the path's data (i.e. the geometry), and then reuse that resource as needed. The data itself isn't a visual, and so can be shared arbitrarily.
First, the resource:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:TestSO58533019ShareVectorData"
xmlns:s="clr-namespace:System;assembly=mscorlib">
<PathGeometry x:Key="IconGeometry1">F1 M 38.1789,60.8614L 19.186,37.7428L 38.1686,14.2229L 57.1718,37.7531L 38.1789,60.8614 Z</PathGeometry>
</ResourceDictionary>
Then to use that, you can just define a DataTemplate that maps a Geometry object to the visual you want (in this case, a Path object):
<Window x:Class="TestSO58533019ShareVectorData.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:TestSO58533019ShareVectorData"
xmlns:s="clr-namespace:System;assembly=mscorlib"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Resources.xaml" />
<ResourceDictionary>
<DataTemplate DataType="{x:Type Geometry}">
<Path Width="37.9858" Height="46.6386" Canvas.Left="19.186" Canvas.Top="14.2229"
Stretch="Fill" Fill="#FF000000"
Data="{Binding}"/>
</DataTemplate>
</ResourceDictionary>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
<Grid>
<StackPanel>
<Label Content="IconGeometry1 (1st)" />
<ContentControl Content="{StaticResource IconGeometry1}" Margin="8"/>
<Separator />
<Label Content="IconGeometry1 (2nd)" />
<ContentControl Content="{StaticResource IconGeometry1}" Margin="8"/>
</StackPanel>
</Grid>
</Window>
This results in the display of the icon twice:
Now, the above approach could still be used with your converter technique. Your converter could return different Geometry objects depending on the enum value, which in turn could be bound to the Data property of a Path object as above. With some contortions, you could even have a Path resource item that does this, using x:Shared=false to reuse that resource item.
But IMHO that would be harder than necessary and not the right way to go. To me, conceptually what is going on is that you have an enum value, and you want to represent that very value with some graphic, depending on the value. That's exactly what WPF's templating features are for! They map one data type to another (i.e. your enum type to a Path object), and with styles you can conditionally configure the templated object as needed.
For the sake of simplicity I will use int rather than an actual enum value. But the basic idea is exactly the same. Note that a key benefit of doing it this way is to minimize the amount of code-behind. You declare for WPF what it is you want to happen, instead of having to write procedural code to do something yourself that WPF could instead do for you.
First, let's define a couple of different icons:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:TestSO58533019ShareVectorData"
xmlns:s="clr-namespace:System;assembly=mscorlib">
<PathGeometry x:Key="IconGeometry1">F1 M 38.1789,60.8614L 19.186,37.7428L 38.1686,14.2229L 57.1718,37.7531L 38.1789,60.8614 Z</PathGeometry>
<PathGeometry x:Key="IconGeometry2">F1 M 38.1789,60.8614L 19.186,37.7428L 57.1718,37.7531L 38.1789,60.8614 Z</PathGeometry>
</ResourceDictionary>
Now, let's define a template for int, where that template uses style triggers to use the appropriate geometry data, and the bound value is simply that int value:
<Window x:Class="TestSO58533019ShareVectorData.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:p="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:TestSO58533019ShareVectorData"
xmlns:s="clr-namespace:System;assembly=mscorlib"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Resources.xaml" />
<ResourceDictionary>
<DataTemplate DataType="{x:Type s:Int32}">
<Path Width="37.9858" Height="46.6386" Canvas.Left="19.186" Canvas.Top="14.2229"
Stretch="Fill" Fill="#FF000000">
<Path.Style>
<p:Style TargetType="Path">
<p:Style.Triggers>
<DataTrigger Binding="{Binding}" Value="1">
<DataTrigger.Setters>
<Setter Property="Data" Value="{StaticResource IconGeometry1}"/>
</DataTrigger.Setters>
</DataTrigger>
<DataTrigger Binding="{Binding}" Value="2">
<DataTrigger.Setters>
<Setter Property="Data" Value="{StaticResource IconGeometry2}"/>
</DataTrigger.Setters>
</DataTrigger>
</p:Style.Triggers>
</p:Style>
</Path.Style>
</Path>
</DataTemplate>
</ResourceDictionary>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
<Grid>
<StackPanel>
<Label Content="1st int" />
<ContentControl Margin="8">
<ContentControl.Content>
<s:Int32>1</s:Int32>
</ContentControl.Content>
</ContentControl>
<Separator />
<Label Content="2nd int" />
<ContentControl Margin="8">
<ContentControl.Content>
<s:Int32>2</s:Int32>
</ContentControl.Content>
</ContentControl>
</StackPanel>
</Grid>
</Window>
With that code, you'll get this:
Goal: Creating an XAML template which I can reuse and load into my main view. Is this possible? If so how? Ive read about the ResourceDictionary and came up with something but im not sure where to continue from there.
This is the XAML with my resource (kept very dumb and simple):
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<StackPanel x:Key="myUnneccesaryButtonList">
<Button Content="1"></Button>
<Button Content="2"></Button>
<Button Content="3"></Button>
</StackPanel>
</ResourceDictionary>
Here my MainWindow XAML where I want to use the above template and load it:
<Window x:Class="Sample.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Title="Sample" WindowState="Maximized">
<StackPanel x:Name="wrapper" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
</StackPanel>
</Window>
Edit: Here is my MainWindow but the Window.Resource declaration doesnt work:
<Window x:Class="Sample.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Title="Sample" WindowState="Maximized">
<Window.Resources>
<ResourceDictionary Source="MyDictionary.xaml" >
</Window.Resources>
<StackPanel x:Name="wrapper" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
</StackPanel>
</Window>
myUnneccesaryButtonList is not a template but an actual StackPanel instance.
If you set its x:Shared attribute to false in the ResourceDictionary:
<StackPanel x:Key="myUnneccesaryButtonList" x:Shared="False">
<Button Content="1"></Button>
<Button Content="2"></Button>
<Button Content="3"></Button>
</StackPanel>
..you could use a ContentControl to display it in the window:
<ContentControl Content="{StaticResource myUnneccesaryButtonList}" />
What you probably want to do is to create a custom StackPanel class that always adds the Buttons though:
public class CustomStackPanel : System.Windows.Controls.StackPanel
{
public CustomStackPanel()
{
Children.Add(new Button() { Content = "1" });
Children.Add(new Button() { Content = "2" });
Children.Add(new Button() { Content = "3" });
}
}
Usage:
<local:CustomStackPanel x:Name="wrapper" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
if you want a XML Template then you should create a template
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<DataTemplate x:Key="myUnneccesaryButtonList">
<StackPanel >
<Button Content="1"></Button>
<Button Content="2"></Button>
<Button Content="3"></Button>
</StackPanel>
</DataTemplate>
</ResourceDictionary>
then you could define a control to host it
<ContentControl ContentTemplate="{StaticResource myUnneccesaryButtonList}" />
or
<ItemsControl ItemTemplate="{StaticResource myUnneccesaryButtonList}" />
Remember add the dictionary into the Resources
<Window.Resources>
<ResourceDictionary Source="YourDictionary.xaml" />
</Window.Resources>
or to merge it in
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="YourDictionary.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
In my windows 10 app I want to set button content from a resource file. In the designer the vector image from the resource file is visible. But in runtime the following exception occurs:
An exception of type 'Windows.UI.Xaml.Markup.XamlParseException' occurred in Demo.UI.W10.exe but was not handled in user code
WinRT information: Failed to assign to property 'Windows.UI.Xaml.Controls.ContentControl.Content'. [Line: 15 Position: 17]
Additional information: The text associated with this error code could not be found.
This is my resourche dictionary Icons.xaml wich holds the vector image in the Viewbox control with the key WiFi:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Viewbox x:Key="Wifi">
<Grid Width="48" Height="48" Visibility="Visible">
<Path Data="M16.104004,15.776998C17.199005,15.776998 18.086014,16.664998 18.086014,17.759999 18.086014,18.855977 17.199005,19.742999 16.104004,19.742999 15.009003,19.742999 14.12001,18.855977 14.12001,17.759999 14.12001,16.664998 15.009003,15.776998 16.104004,15.776998z M16.104004,10.558985C19.327011,10.558985,22.057007,12.679008,22.975006,15.601004L21.118011,16.756978C20.652008,14.412986 18.584015,12.646995 16.104004,12.646995 13.580002,12.646995 11.486008,14.474997 11.067001,16.87798L9.1930084,15.730001C10.070007,12.741997,12.831009,10.558985,16.104004,10.558985z M16.028015,5.2879915C21.153015,5.2879915,25.555008,8.378993,27.476013,12.796989L25.771011,13.859C24.221008,9.9980106 20.443008,7.2719988 16.028015,7.2719988 11.586014,7.2719988 7.7890015,10.031 6.2570038,13.929984L4.5440063,12.879997C6.4450073,8.4169874,10.871002,5.2879915,16.028015,5.2879915z M16.028015,0C23.047012,5.5224518E-08,29.114014,4.0700049,32,9.9789981L30.128006,11.144982C27.639008,5.8550076 22.262009,2.1920154 16.028015,2.1920151 9.7550049,2.1920154 4.3480072,5.9020047 1.881012,11.24801L0,10.094995C2.8630066,4.1239905,8.9640045,5.5224518E-08,16.028015,0z" Stretch="Uniform" Fill="#FF000000" Width="48" Height="48" Margin="0,0,0,0" RenderTransformOrigin="0.5,0.5">
</Path>
</Grid>
</Viewbox>
This is my App.xaml where I add the Icons.xaml resource file in the MergedDictionaries:
<Application
x:Class="Demo.UI.W10.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Demo.UI.W10"
RequestedTheme="Light">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Assets/Icons.xaml"/>
<ResourceDictionary Source="Assets/Styles.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
In my mvvmcross page I use the vector image WiFi from the resource file to set the button content.
<views:MvxWindowsPage
x:Class="Demo.UI.W10.Views.ConnectionView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Demo.UI.W10.Views"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:vm="using:Demo.Core.ViewModels"
xmlns:views="using:Cirrious.MvvmCross.WindowsUWP.Views"
mc:Ignorable="d">
<Page.Resources>
<vm:ConnectionViewModel x:Key="ViewModel"/>
</Page.Resources>
<Grid>
<Button Content="{StaticResource Wifi}" Command="{Binding DemoCommand, Source={StaticResource ViewModel}}" Style="{StaticResource BtnMenuStyle}"/>
</Grid>
How can I use the vector image from the resource dictionary as button content?
You can do placing the resources inside a DataTemplate:
<DataTemplate x:Key="Wifi">
<Viewbox >
<Grid Width="48" Height="48" Visibility="Visible">
<Path Data="M16.104004,15.776998C17.199005,15.776998 18.086014,16.664998 18.086014,17.759999 18.086014,18.855977 17.199005,19.742999 16.104004,19.742999 15.009003,19.742999 14.12001,18.855977 14.12001,17.759999 14.12001,16.664998 15.009003,15.776998 16.104004,15.776998z M16.104004,10.558985C19.327011,10.558985,22.057007,12.679008,22.975006,15.601004L21.118011,16.756978C20.652008,14.412986 18.584015,12.646995 16.104004,12.646995 13.580002,12.646995 11.486008,14.474997 11.067001,16.87798L9.1930084,15.730001C10.070007,12.741997,12.831009,10.558985,16.104004,10.558985z M16.028015,5.2879915C21.153015,5.2879915,25.555008,8.378993,27.476013,12.796989L25.771011,13.859C24.221008,9.9980106 20.443008,7.2719988 16.028015,7.2719988 11.586014,7.2719988 7.7890015,10.031 6.2570038,13.929984L4.5440063,12.879997C6.4450073,8.4169874,10.871002,5.2879915,16.028015,5.2879915z M16.028015,0C23.047012,5.5224518E-08,29.114014,4.0700049,32,9.9789981L30.128006,11.144982C27.639008,5.8550076 22.262009,2.1920154 16.028015,2.1920151 9.7550049,2.1920154 4.3480072,5.9020047 1.881012,11.24801L0,10.094995C2.8630066,4.1239905,8.9640045,5.5224518E-08,16.028015,0z" Stretch="Uniform" Fill="#FF000000" Width="48" Height="48" Margin="0,0,0,0" RenderTransformOrigin="0.5,0.5">
</Path>
</Grid>
</Viewbox>
</DataTemplate>
And now simply
<Button ContentTemplate="{StaticResource Wifi}"/>
You can use it as many times you need.