WPF 如何修改button圓角(經典)

本人想設置Button為圓角，奈何搜索百度，找到的全是坑爹答案，現總結如下：

1. 需要添加button 的template. 

2. 設置border的時候，必須要設置background, 否則會提示content 被多次使用。

            <Button Grid.Row="3" Grid.Column="2" Content="取消" Margin="30,40,200,40" >
                <Button.Template >
                    <ControlTemplate TargetType="{x:Type Button}" >
                        <Border BorderBrush="{TemplateBinding Control.BorderBrush}" BorderThickness="1" CornerRadius="7,7,7,7">
                            <Border.Background>#FFDDDDDD</Border.Background>
                            <ContentPresenter Content="{TemplateBinding ContentControl.Content}" HorizontalAlignment="Center" VerticalAlignment="Center" ></ContentPresenter>
                        </Border>
                    </ControlTemplate>
                </Button.Template>
            </Button>

　　我們只需要在XAML中給他添加幾行程式碼就可以做成圓角形狀。

<Button x:Name="button" Content="按鈕" FontSize="40" BorderThickness="0" HorizontalAlignment="Left" Margin="25,58,0,0" VerticalAlignment="Top" Width="472" Height="200" Foreground="White">
      <Button.Template>
           <ControlTemplate TargetType="{x:Type Button}">
               <Border BorderThickness="1" BorderBrush="Black" CornerRadius="30" Background="{TemplateBinding Background}">
                   <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"/>
               </Border>
           </ControlTemplate>
       </Button.Template>
</Button>

屬性解析：
BorderThickness：邊框的大小
BorderBrush：邊框的顏色
CornerRadius：圓角的大小
Background：背景顏色"{TemplateBinding Background}"：這個就是使用上面<Button>的Background屬性值作為他的值
<ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"/>：文字垂直居中對齊

加個漸變色

<Button x:Name="button" Content="按鈕" FontSize="40" BorderThickness="0" HorizontalAlignment="Left" Margin="25,58,0,0" VerticalAlignment="Top" Width="472" Height="200" Foreground="White">
            <Button.Background>
                <LinearGradientBrush EndPoint="1,1" StartPoint="0,0">
                    <GradientStop Color="#FFC564B8" Offset="0"/>
                    <GradientStop Color="#FFF57A7A" Offset="1"/>
                </LinearGradientBrush>
            </Button.Background>
            <Button.Template>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Border BorderThickness="1" CornerRadius="30" Background="{TemplateBinding Background}">
                        <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"/>
                    </Border>
                </ControlTemplate>
            </Button.Template>
        </Button>

　　

 

 

 

項目實例：

把樣式和空間模板放到資源中，然後去引用

<Window x:Class="WpfApp18.MainWindow"
        xmlns="//schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="//schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="//schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="//schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp18"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.Resources >
        <ResourceDictionary >
            <Style x:Key="dgButton" TargetType="Button" >
                <Setter Property="FontSize" Value="40"/>
                <Setter Property="Content" Value="按鈕"/>
                <Setter Property="Foreground" Value="White"/>
                <Setter Property="Background">
                    <Setter.Value>
                        <!--<RadialGradientBrush>
                        <GradientStop Color="#FFC564B8" Offset="0"/>
                        <GradientStop Color="#FFF57A7A" Offset="1"/>
                    </RadialGradientBrush>-->
                        <LinearGradientBrush EndPoint="1,1" StartPoint="0,0">
                            <GradientStop Color="#FFC564B8" Offset="0"/>
                            <GradientStop Color="#FFF57A7A" Offset="1"/>
                        </LinearGradientBrush>
                    </Setter.Value>
                </Setter>
            </Style >
            <ControlTemplate x:Key="buttonTemplate" TargetType="Button" >
                <Border BorderThickness="1" CornerRadius="30" Background="{TemplateBinding Background}">
                    <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"/>
                </Border>
                <!--<Grid >
                    <Ellipse Name="faceEllipse" Height="50" Width="100" Fill="{TemplateBinding Button.Background}"/>
                    <TextBlock Name="txtBlock"  />
                </Grid >-->
                <ControlTemplate.Triggers >
                    <Trigger Property="Button.IsMouseOver" Value="True">
                        <Setter Property="Button.Background" Value="blue"/>
                    </Trigger >
                </ControlTemplate.Triggers >
            </ControlTemplate >
        </ResourceDictionary >
    </Window.Resources >
    <Grid>
        <Button Height="200" HorizontalAlignment="Center" Name="button1" VerticalAlignment="Center" Width="400" Style ="{StaticResource dgButton}" Template="{StaticResource  buttonTemplate}"/>
    </Grid>
</Window>

　　滑鼠放到按鈕上以後按鈕呈現藍色

 

Tags:

VirMach 便宜 VPS

QNews

QNews