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

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?

https://stackoverflow.com/questions/8825030/how-to-extract-default-control-template-in-visual-studio. first learn how default Template looks like. study it (it is verbose) and then add Ellipse where appropriate (if you need *circle*, see [an example](https://stackoverflow.com/a/42857924/1506454), which I did before) — ASh, Apr 09 '21 at 16:38
Did you not try googling? https://markheath.net/post/circular-wpf-button-template — Andy, Apr 09 '21 at 18:33
Or you can set cornerradius on the border that is in a default button template. Get the right number and that will give you a circle. — Andy, Apr 09 '21 at 18:41

score 2 · Accepted Answer · answered Apr 11 '21 at 19:06

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>

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

1 Answers1