How do I add this ellipse template to my button border? - wpf

Question

I'm aware there are probably similar questions to this one but I have no idea how to sort this out. I'm rather new to XAML and have written the following:
<Window.Resources>
<ControlTemplate x:Key="ButtonTemplate">
<Ellipse Height="300" StrokeThickness="2" Width="300" >
<Ellipse.Fill>
<SolidColorBrush Color="white" Opacity="0"/>
</Ellipse.Fill>
<Ellipse.Stroke>
<LinearGradientBrush EndPoint="1,1" StartPoint="0,0">
<GradientStop Color="Red" Offset="0.1"/>
<GradientStop Color="Orange" Offset="0.35"/>
<GradientStop Color="SeaGreen" Offset="0.7"/>
<GradientStop Color="DarkBlue" Offset="0.95"/>
</LinearGradientBrush>
</Ellipse.Stroke>
</Ellipse>
</ControlTemplate>
</Window.Resources>
<Grid>
<Button Height="320" Width="320" Margin="200,100,200,100" Background="White" BorderThickness="0">
<Button.Foreground>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="Crimson" Offset="0.1" />
<GradientStop Color="SeaGreen" Offset="0.9" />
</LinearGradientBrush>
</Button.Foreground>
<Button.Content>
<TextBlock FontSize="30">TEST BUTTON</TextBlock>
</Button.Content>
</Button>
</Grid>
Putting the circle in a template seems to be the universally agreed way to start going about getting a circular border on the button, but nothing seems to work from there for me. I've left the template disconnected from the button here because it doesn't work, rather it seems to just overlay a solid circle on top of what is otherwise a working button. Can someone help me out?

Answer 1

You should specify the TargetType and add a ContentPresenter to the ControlTemplate:
<ControlTemplate x:Key="ButtonTemplate" TargetType="Button">
<Grid>
<Ellipse Height="300" StrokeThickness="2" Width="300" >
<Ellipse.Fill>
<SolidColorBrush Color="White" Opacity="0"/>
</Ellipse.Fill>
<Ellipse.Stroke>
<LinearGradientBrush EndPoint="1,1" StartPoint="0,0">
<GradientStop Color="Red" Offset="0.1"/>
<GradientStop Color="Orange" Offset="0.35"/>
<GradientStop Color="SeaGreen" Offset="0.7"/>
<GradientStop Color="DarkBlue" Offset="0.95"/>
</LinearGradientBrush>
</Ellipse.Stroke>
</Ellipse>
<ContentPresenter Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}" RecognizesAccessKey="True"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</ControlTemplate>
And don't forget to apply the custom template by setting the Template property of the Button:
<Button Height="320" Width="320" Background="White" BorderThickness="0"
Template="{StaticResource ButtonTemplate}">
<Button.Foreground>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="Crimson" Offset="0.1" />
<GradientStop Color="SeaGreen" Offset="0.9" />
</LinearGradientBrush>
</Button.Foreground>
<Button.Content>
<TextBlock FontSize="30">TEST BUTTON</TextBlock>
</Button.Content>
</Button>