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

時間 2020-05-19

標籤學習筆記 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樣式爲ide

<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>

View Code

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));



    }