如何在XAML中实现圆按钮

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

如何在XAML中实现如下圆形按钮，不需要外部图像。中间的黑线是不需要的。

3 个解决方案

#1

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>

#2

 <Button  Width="100" Height="100" Content="Abcd">
        <Button.Template>
            <ControlTemplate TargetType="{x:Type Button}">
                <Grid>
                <Ellipse Fill="Red"/>
                    <ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                </Grid>
            </ControlTemplate>
        </Button.Template>
    </Button>

you must set the height and width of button same for it to be Circle.

你必须将按钮的高度和宽度设置为圆形。

#3

here's a link about building your on control from scratch in blend.

这里有一个关于在blend中从零开始构建on控件的链接。

http://www.codeproject.com/Articles/32257/A-Style-for-Round-Glassy-WPF-Buttons

http://www.codeproject.com/Articles/32257/A-Style-for-Round-Glassy-WPF-Buttons