Home/ Questions/Q 8539427
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T11:21:47+00:00

How to implement a circle button like below one in XAML, no external image

  • 0

How to implement a circle button like below one in XAML, no external image required.
The black line in the middle is not needed.

enter image description here

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This is a very quick way to do it. It can be changed into a style and it could be made more flexible by creating a TemplatedControl allowing the designer to easily change the colors and other properties.

    <Button Width="100"
        Height="100">
    <Button.Template>
        <ControlTemplate TargetType="Button">
            <Grid>
                <Ellipse Stroke="Black"
                         StrokeThickness="2">
                    <Ellipse.Fill>
                        <RadialGradientBrush>
                            <GradientStop Offset="0"
                                          Color="Lime" />
                            <GradientStop Offset="1"
                                          Color="Lime" />
                            <GradientStop Offset="1"
                                          Color="Gold" />
                            <RadialGradientBrush.Transform>
                                <TransformGroup>
                                    <ScaleTransform ScaleY="0.65" />
                                </TransformGroup>
                            </RadialGradientBrush.Transform>
                        </RadialGradientBrush>
                    </Ellipse.Fill>
                </Ellipse>
                <ContentPresenter HorizontalAlignment="Center"
                                  VerticalAlignment="Center"/>
            </Grid>
        </ControlTemplate>
    </Button.Template>
</Button>
    • 0