如何在WPF中创建/制作圆角按钮？

Question

我需要在WPF中创建一个圆角的光泽按钮.有人可以解释一下我需要采取哪些步骤？

Answer 1

您必须为Button创建自己的ControlTemplate.只是看看样本

创建了一个名为RoundCorner的样式,在里面我更改了创建了我自己的新边框控制模板(CornerRadius = 8),用于圆角和一些背景和其他触发效果.如果您拥有或了解Expression Blend,则可以非常轻松地完成.

<Style x:Key="RoundCorner" TargetType="{x:Type Button}">
    <Setter Property="HorizontalContentAlignment" Value="Center"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="Padding" Value="1"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Grid x:Name="grid">
                    <Border x:Name="border" CornerRadius="8" BorderBrush="Black" BorderThickness="2">
                        <Border.Background>
                            <RadialGradientBrush GradientOrigin="0.496,1.052">
                                <RadialGradientBrush.RelativeTransform>
                                    <TransformGroup>
                                        <ScaleTransform CenterX="0.5" CenterY="0.5" 
                                                        ScaleX="1.5" ScaleY="1.5"/>
                                        <TranslateTransform X="0.02" Y="0.3"/>
                                    </TransformGroup>
                                </RadialGradientBrush.RelativeTransform>
                                <GradientStop Offset="1" Color="#00000000"/>
                                <GradientStop Offset="0.3" Color="#FFFFFFFF"/>
                            </RadialGradientBrush>
                        </Border.Background>
                        <ContentPresenter HorizontalAlignment="Center"
                                          VerticalAlignment="Center"
                                          TextElement.FontWeight="Bold">
                        </ContentPresenter>
                    </Border>

                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsPressed" Value="True">
                        <Setter Property="Background" TargetName="border">
                            <Setter.Value>
                                <RadialGradientBrush GradientOrigin="0.496,1.052">
                                    <RadialGradientBrush.RelativeTransform>
                                        <TransformGroup>
                                            <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="1.5" ScaleY="1.5"/>
                                            <TranslateTransform X="0.02" Y="0.3"/>
                                        </TransformGroup>
                                    </RadialGradientBrush.RelativeTransform>
                                    <GradientStop Color="#00000000" Offset="1"/>
                                    <GradientStop Color="#FF303030" Offset="0.3"/>
                                </RadialGradientBrush>
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="BorderBrush" TargetName="border" Value="#FF33962B"/>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter Property="Opacity" TargetName="grid" Value="0.25"/>
                    </Trigger>

                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

运用

<Button Style="{DynamicResource RoundCorner}" 
        Height="25" 
        VerticalAlignment="Top" 
        Content="Show" 
        Width="100" 
        Margin="5" />

Answer 2

这是一个最小的控件模板,可以获得带圆角的按钮,但是您不会有任何悬停或单击视觉效果.但您可以根据需要将这些添加到控件模板中.我正在使用深色背景,因此是白色背景.

<Style x:Key="RoundedButtonStyle" TargetType="{x:Type Button}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border CornerRadius="15" Background="White" BorderThickness="1" Padding="2">
                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

我使用以下博客文章中的控件模板作为我的起点:http: //shihac-sharp.blogspot.com.au/2012/05/button-with-rounded-corners-in-wpf.html

Answer 3

不改变默认样式的最简单的解决方案是：

<Style TargetType="Button" x:Key="RoundButton">
    <Style.Resources>
        <Style TargetType="Border">
            <Setter Property="CornerRadius" Value="5" />
        </Style>
    </Style.Resources>
</Style>

然后像这样定义你的按钮：

<Button Style="{DynamicResource RoundButton}" />

Answer 4

我知道这篇文章已经过时了，但是我的回答在上面是令人惊讶的缺失，而且比大多数人都简单。

<Button>
    <Button.Resources>
        <Style TargetType="Border">
            <Setter Property="CornerRadius" Value="5"/>
        </Style>
    </Button.Resources>
</Button>

由于Button控件的默认ControlTemplate使用Border元素，因此将Border的样式添加到Button的资源会将该样式应用于该Border。这使您无需添加自己的ControlTemplate且无需任何代码即可添加圆角。它也适用于所有各种Button（例如ToggleButton和RepeatButton）。

Answer 5

你可以尝试这个...........

 <Border BorderBrush="Black" Name="MyBorder"  
            Height="78" 
            Background="Red" 
            Width="74" 
            CornerRadius="3">
        <Button Width="{Binding MyBorder.Width}" 
                Height="{Binding MyBorder.Height}" 
                Content="Hi" Background="Red"/>
    </Border>

Answer 6

最简单的方法是

<Button Content="OK"
            Background="#D73C46"
            Foreground="White"
            BorderThickness="0"
            Margin="10,25,10,5"
            Width="275"
            Height="34"
            FontSize="12"
            Click="CloseWindow"
            HorizontalAlignment="Center">
        <Button.Resources>
            <Style TargetType="{x:Type Border}">
                <Setter Property="CornerRadius" Value="3"/>
            </Style>
        </Button.Resources>
    </Button>

Answer 7

尽管事实已经过去了很多年，但我认为考虑不同的方法来处理它很有趣。

如果您想更改所有内容，但如果您只想更改按钮的角落，这会让初学者士气低落，那么重新创建所有按钮模板的方法是一种极好的方法。的确，您不必更改所有内容，但至少您必须更改事件...

在 button.resources 中修改“边框”设计的方法也很棒，如果你是初学者，但如果你想用更多参数来提升你的设计，改变所有按钮可能会很无聊。

两个阵营都有一个有脚的解决方案：

将此代码放在窗口/页面资源中：

<Style TargetType="Border" x:Key="RoundMe">
    <Setter Property="CornerRadius" Value="4"/>
</Style>

然后对于按钮：

  <Button.Resources>
        <Style TargetType="Border" BasedOn="{StaticResource RoundMe}"/>
    </Button.Resources>