《學習筆記》Layui-WPF按鈕美化

一睹為快：

 

 

要點回顧：接着我們上一期的自定義窗體美化用到自定義屬性DependencyProperty，快速生成自定義屬性快捷鍵Propdp+雙擊Tab鍵，調用自定義屬性如：窗體頭部高度：Height="{Binding Path=HearderHieght, RelativeSource={RelativeSource Mode=TemplatedParent}}" Background="{TemplateBinding Background}"，接下來我們美化按鈕

1.創建文件夾ButtonStyle文件夾並且自定義控件取名為LayButton

 

 

 2.雙擊LayButton讓當前類文件繼承Button

 

 3.由於按鈕由文字內容以及帶邊框的容器組成，那么我們聯想到Border+ContentPresenter組成，Style樣式為

<Style TargetType="{x:Type local:LayButton}">
        <Setter Property="Background" Value="#009688"/>
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="BorderRadius" Value="2"/>
        <Setter Property="Cursor" Value="Hand"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:LayButton}">
                    <Grid>
                        <Border x:Name="bg" Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{Binding Path=BorderRadius,RelativeSource={RelativeSource Mode=TemplatedParent}}">
                        </Border>
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Opacity" TargetName="bg" Value=".8"/>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter Property="Opacity" TargetName="bg" Value="1"/>
                        </Trigger>
                        <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=Self},Path=IsEnabled}" Value="False">
                            <Setter Property="Background" TargetName="bg" Value="#FBFBFB"/>
                            <Setter Property="BorderBrush" TargetName="bg" Value="#ccc"/>
                            <Setter Property="BorderThickness" TargetName="bg" Value="1"/>
                            <Setter Property="Foreground" Value="#ccc"/>
                        </DataTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="LayPrimaryButton"  TargetType="{x:Type local:LayButton}">
        <Setter Property="Background" Value="White"/>
        <Setter Property="BorderBrush" Value="#ccc"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Foreground" Value="Black"/>
        <Setter Property="BorderRadius" Value="2"/>
        <Setter Property="HoverBorderBrush" Value="#009688"/>
        <Setter Property="Cursor" Value="Hand"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:LayButton}">
                    <Grid>
                        <Border x:Name="bg" Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{Binding Path=BorderRadius,RelativeSource={RelativeSource Mode=TemplatedParent}}">
                        </Border>
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="BorderBrush" TargetName="bg" Value="{Binding Path=HoverBorderBrush,RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
                        </Trigger>
                        <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=Self},Path=IsEnabled}" Value="False">
                            <Setter Property="Background" TargetName="bg" Value="#FBFBFB"/>
                            <Setter Property="BorderBrush" TargetName="bg" Value="#ccc"/>
                            <Setter Property="BorderThickness" TargetName="bg" Value="1"/>
                            <Setter Property="Foreground" Value="#ccc"/>
                        </DataTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

 

 4.組合完成圖，Style樣式已完成返回LayButtonm.CS文件實現功能

 public class LayButton : Button
    {
        static LayButton()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(LayButton), new FrameworkPropertyMetadata(typeof(LayButton)));
        }


        public CornerRadius BorderRadius
        {
            get { return (CornerRadius)GetValue(BorderRadiusProperty); }
            set { SetValue(BorderRadiusProperty, value); }
        }

        // Using a DependencyProperty as the backing store for BorderRadius.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty BorderRadiusProperty =
            DependencyProperty.Register("BorderRadius", typeof(CornerRadius), typeof(LayButton));


        public Brush HoverBorderBrush
        {
            get { return (Brush)GetValue(HoverBorderBrushProperty); }
            set { SetValue(HoverBorderBrushProperty, value); }
        }

        // Using a DependencyProperty as the backing store for HoverBorderBrush.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty HoverBorderBrushProperty =
            DependencyProperty.Register("HoverBorderBrush", typeof(Brush), typeof(LayButton));



    }

5，此時我們的所有樣式以及業務代碼已完成，返回WPF項目中調用我們的LayButton按鈕

 

 6.運行WPF程序看效果圖，該按鈕有適當的反饋效果運行點擊即可看到