Using a XAML image as a button content - wpf

Question

I am a beginner with Visual Studio.
I want to have separately defineable icons in my buttons. I want to achieve this using only XAML in order to keep my GUI stuff as separate as possible.
I'd like to be able to use it like this:
<Button x:Name="CallButton" Height="128px" Width="128px"
Style="{DynamicResource RoundButton}" Content="{StaticResource PhoneIcon}">
I have defined RoundButton and PhoneIcon in their respective Resource Dictionaries.
RoundButton:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style x:Key="RoundButton" TargetType="{x:Type Button}">
<Setter Property="Content" Value="{Binding Grid}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border CornerRadius="100" BorderThickness="2" x:Name="border"
BorderBrush="{TemplateBinding BorderBrush}">
<Grid>
<ContentPresenter VerticalAlignment="Center"
HorizontalAlignment="Center"
x:Name="contentPresenter" Opacity="1" />
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
PhoneIcon:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Canvas x:Key="PhoneIcon">
<Path Stroke="Gray" Data="m 492.438 397.75 -2.375 -7.156 c -5.625 -16.719 -24.063 -34.156 -41 -38.75 l -62.688 -17.125 c -17 -4.625 -41.25 1.594 -53.688 14.031 L 310 371.438 C 227.547 349.157 162.891 284.5 140.641 202.063 l 22.688 -22.688 c 12.438 -12.438 18.656 -36.656 14.031 -53.656 L 160.266 63 C 155.641 46.031 138.172 27.594 121.485 22.031 l -7.156 -2.406 c -16.719 -5.563 -40.563 0.063 -53 12.5 L 27.391 66.094 c -6.063 6.031 -9.938 23.281 -9.938 23.344 -1.187 107.75 41.063 211.562 117.281 287.781 76.031 76.031 179.453 118.219 286.891 117.313 0.563 0 18.313 -3.813 24.375 -9.844 l 33.938 -33.938 c 12.437 -12.437 18.062 -36.281 12.5 -53 z" />
</Canvas>
</ResourceDictionary>
I have merged my Resource Dictionaries in the App.xaml:
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="RoundButton.xaml" />
<ResourceDictionary Source="Icons.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
My problem is that while I get the image displayed, it's disproportionately big. I have tried pretty many solutions so I'm starting to lose track of the tried with my trial-and-error approach.
How to get the image show right in the center of the button with correct size?
NB I have trimmed some of the code I'm posting here - but I have also tested the code I'm posting here and the problem persists.
Thanks in advance!

Answer 1

You may use a Grid instead of a Canvas in your PhoneIcon resource, and set the Path's Stretch property. This would scale the Path to a Size that fits the Button's bounds:
<Grid x:Key="PhoneIcon">
<Path Stretch="Uniform" ... />
</Grid>
You may even set the Grid size explicitly:
<Grid x:Key="PhoneIcon" Width="80">
<Path Stretch="Uniform" ... />
</Grid>
An even simpler solution would be to use the Path without any container:
<Path x:Key="PhoneIcon" Width="80" Stretch="Uniform" ... />