WPF UI开发自定义圆形按钮样式

有技巧搬砖

已于 2022-05-04 11:09:09 修改

阅读量3k

点赞数 2

于 2021-08-06 11:34:16 首次发布

本文链接：https://blog.csdn.net/liaohaiyin/article/details/119451065

版权

UI设计同时被 3 个专栏收录

92 篇文章

订阅专栏

MVVM

92 篇文章

订阅专栏

c# WPF

92 篇文章

订阅专栏

这篇教程介绍了在WPF中创建圆形按钮的三种方法：通过Ellipse、Border的CornerRadius和Path矢量图。每种方法都提供了样式代码，并展示了效果。此外，推荐了一个名为Newbeecoder.UI的WPF MVVM框架开源项目，提供了Demo下载链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在程序开发中，经常用到Button，而且经常用到各种形状Button，这次教程就讲个比较简单圆形按钮。

圆形按钮有很多种实现方式，例如第一种方式在样式中用Ellipse画一个圆形，宽度和高度一致。第二种方式用Border设置Width,Height,CornerRadius一致也可以画圆。第三种方式用Path用矢量图画圆。

三种方式的按钮我都已经实现，看一下效果：

以下第一种方式在样式中用Ellipse画一个圆形实现方式。

<Style TargetType="{x:Type Button}">
                    <Setter Property="Background" Value="{StaticResource {x:Static SystemColors.ActiveCaptionBrushKey}}"/>
                    <Setter Property="BorderBrush" Value="#3099C5"/>
                    <Setter Property="IsHitTestVisible" Value="True"/>
                    <Setter Property="Width" Value="64"/>
                    <Setter Property="Height" Value="64"/>
                    <Setter Property="BorderThickness" Value="1"/>
                    <Setter Property="HorizontalContentAlignment" Value="Center"/>
                    <Setter Property="VerticalContentAlignment" Value="Center"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type ButtonBase}">
                                <Grid SnapsToDevicePixels="True">
                                    <Ellipse Width="{TemplateBinding Width}" Height="{TemplateBinding Width}" 
                                             Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="{TemplateBinding BorderThickness}"  />
                                    <ContentControl Content="{TemplateBinding Content}" Focusable="False" 
                                             HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                                </Grid>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>

以下第二种方式用Border设置Width,Height,CornerRadius一致画圆。

 <Style TargetType="{x:Type Button}">
                    <Setter Property="Background" Value="{StaticResource {x:Static SystemColors.ActiveCaptionBrushKey}}"/>
                    <Setter Property="BorderBrush" Value="#3099C5"/>
                    <Setter Property="IsHitTestVisible" Value="True"/>
                    <Setter Property="Width" Value="64"/>
                    <Setter Property="Height" Value="64"/>
                    <Setter Property="BorderThickness" Value="1"/>
                    <Setter Property="HorizontalContentAlignment" Value="Center"/>
                    <Setter Property="VerticalContentAlignment" Value="Center"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type ButtonBase}">
                                <Border Background="{TemplateBinding Background}" Width="{TemplateBinding Width}" 
                                        CornerRadius="{Binding ActualHeight, RelativeSource={RelativeSource Self}}" Height="{TemplateBinding Height}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                                    <ContentControl Content="{TemplateBinding Content}" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                                </Border>                                
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>

第三种方式用Path用矢量图画圆。

还有其它方式就不举例了，大家也可以用其它方式实现。

<Style TargetType="{x:Type Button}">
                    <Setter Property="Background" Value="{StaticResource {x:Static SystemColors.ActiveCaptionBrushKey}}"/>
                    <Setter Property="BorderBrush" Value="#3099C5"/>
                    <Setter Property="IsHitTestVisible" Value="True"/>
                    <Setter Property="Width" Value="64"/>
                    <Setter Property="Height" Value="64"/>
                    <Setter Property="BorderThickness" Value="1"/>
                    <Setter Property="HorizontalContentAlignment" Value="Center"/>
                    <Setter Property="VerticalContentAlignment" Value="Center"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type ButtonBase}">
                                <Grid>
                                    <Viewbox Stretch="Uniform">
                                        <Grid>
                                            <Path Fill="{Binding BorderBrush, RelativeSource={RelativeSource TemplatedParent}}" Data="M510.537016 1014.078844c-67.964659 0-133.907178-13.315997-195.994961-39.576884-59.959897-25.361049-113.805489-61.663802-160.04137-107.897688-46.234883-46.23588-82.536638-100.081472-107.897687-160.041369C20.342111 644.474122 7.026114 578.532601 7.026114 510.567942s13.315997-133.907178 39.576884-195.994962c25.361049-59.959897 61.663802-113.805489 107.897687-160.041369 46.23588-46.234883 100.080475-82.536638 160.04137-107.897687C376.629838 20.373037 442.572357 7.05704 510.537016 7.05704S644.444194 20.373037 706.531977 46.633924c59.959897 25.361049 113.805489 61.663802 160.04137 107.897687 46.234883 46.23588 82.536638 100.080475 107.897687 160.041369 26.260887 62.087783 39.576884 128.030302 39.576884 195.994962s-13.315997 133.907178-39.576884 195.994961c-25.361049 59.959897-61.663802 113.805489-107.897687 160.041369-46.23588 46.234883-100.080475 82.536638-160.04137 107.897688-62.088781 26.260887-128.030302 39.576884-195.994961 39.576884z m0-967.117707c-255.633631 0-463.606804 207.973174-463.606804 463.606805s207.973174 463.606804 463.606804 463.606804 463.606804-207.973174 463.606804-463.606804S766.170647 46.961137 510.537016 46.961137z"/>
                                            <Path Fill="{TemplateBinding Background}"  Data="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z"/>
                                        </Grid>
                                    </Viewbox>
                                    <ContentControl Content="{Binding Content, RelativeSource={RelativeSource TemplatedParent}}" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                                </Grid>                                                                                          
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>

推荐一款WPF MVVM框架开源项目：Newbeecoder.UI

Newbeecoder.UI开源项目

Demo下载：

Newbeecoder.UI开源项目https://share.weiyun.com/py6W1dcK