Changing a Buttons Background in XAML? - wpf

Question

How do I get the following XAML code to integrate into a buttons background. I've tried so many ways but I'm struggling to get it work. PS I'm new at XAML.
<Viewbox Width="55.247" Height="55.247"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Canvas Width="55.247" Height="55.247">
<Canvas>
<!-- button/circle -->
<Path StrokeThickness="1.0" Stroke="#ff335284" StrokeMiterLimit="1.0" Data="F1 M 54.747,27.624 C 54.747,42.603 42.603,54.747 27.624,54.747 C 12.644,54.747 0.500,42.603 0.500,27.624 C 0.500,12.644 12.644,0.500 27.624,0.500 C 42.603,0.500 54.747,12.644 54.747,27.624 Z">
<Path.Fill>
<RadialGradientBrush MappingMode="Absolute" GradientOrigin="392.717,-251.469" Center="392.717,-251.469" RadiusX="27.123" RadiusY="27.123">
<RadialGradientBrush.GradientStops>
<GradientStop Offset="0.00" Color="#ff00aae4"/>
<GradientStop Offset="1.00" Color="#ff2463a7"/>
</RadialGradientBrush.GradientStops>
<RadialGradientBrush.Transform>
<MatrixTransform Matrix="1.000,0.000,-0.000,-1.000,-365.093,-223.845" />
</RadialGradientBrush.Transform>
</RadialGradientBrush>
</Path.Fill>
</Path>
</Canvas>
</Canvas>
</Viewbox>

Answer 1

The following example replaces the standard Button Template with your design AND adds a content presenter so you can still set the content of the button.
<Button Content="OK" Width="75" Height="75">
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid>
<Path StrokeThickness="1.0" Stroke="#ff335284" StrokeMiterLimit="1.0" Data="F1 M 54.747,27.624 C 54.747,42.603 42.603,54.747 27.624,54.747 C 12.644,54.747 0.500,42.603 0.500,27.624 C 0.500,12.644 12.644,0.500 27.624,0.500 C 42.603,0.500 54.747,12.644 54.747,27.624 Z">
<Path.Fill>
<RadialGradientBrush MappingMode="Absolute" GradientOrigin="392.717,-251.469" Center="392.717,-251.469" RadiusX="27.123" RadiusY="27.123">
<RadialGradientBrush.GradientStops>
<GradientStop Offset="0.00" Color="#ff00aae4"/>
<GradientStop Offset="1.00" Color="#ff2463a7"/>
</RadialGradientBrush.GradientStops>
<RadialGradientBrush.Transform>
<MatrixTransform Matrix="1.000,0.000,-0.000,-1.000,-365.093,-223.845" />
</RadialGradientBrush.Transform>
</RadialGradientBrush>
</Path.Fill>
</Path>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Button.Template>

Answer 2

Well you have multiple options to accomplish this. If you're literally just trying to put your Path in a button you can do it with minimal effort kind of like;
<Button Width="75" Height="75">
<!-- Embed our elements in a grid since Content can be set only once -->
<Grid>
<!-- Your Path -->
<Path StrokeThickness="1.0" Stroke="#ff335284" StrokeMiterLimit="1.0" Data="F1 M 54.747,27.624 C 54.747,42.603 42.603,54.747 27.624,54.747 C 12.644,54.747 0.500,42.603 0.500,27.624 C 0.500,12.644 12.644,0.500 27.624,0.500 C 42.603,0.500 54.747,12.644 54.747,27.624 Z">
<Path.Fill>
<RadialGradientBrush MappingMode="Absolute" GradientOrigin="392.717,-251.469" Center="392.717,-251.469" RadiusX="27.123" RadiusY="27.123">
<RadialGradientBrush.GradientStops>
<GradientStop Offset="0.00" Color="#ff00aae4"/>
<GradientStop Offset="1.00" Color="#ff2463a7"/>
</RadialGradientBrush.GradientStops>
<RadialGradientBrush.Transform>
<MatrixTransform Matrix="1.000,0.000,-0.000,-1.000,-365.093,-223.845" />
</RadialGradientBrush.Transform>
</RadialGradientBrush>
</Path.Fill>
</Path>
<!-- Your Button Text -->
<TextBlock Text="Button" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</Button>
If you needed to get more technical / cleaner about it, you would just place it straight into a control template. Here's documentation on the WPF Button Control Template
Hope this helps, luckily there's also lots of tutorials out on the web for customizing a WPF button. If you want to elaborate on exactly what you'd like, like whether you're shooting for WPF or SL in particular (differences like VisualStateManager or Style Triggers) folks would likely be more useful. :)