[[381159]]

本人想設(shè)置Button為圓角，奈何搜索百度，找到的全是坑爹答案，現(xiàn)總結(jié)如下：

1. 需要添加button 的template.

2. 設(shè)置border的時候，必須要設(shè)置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="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
        xmlns:mc="http://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> 

本文轉(zhuǎn)載自微信公眾號「CSharp編程大全」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系CSharp編程大全公眾號。

【編輯推薦】