WPF 自定义简单的Button 按钮

前言：想实现自己项目中的Button 按钮UI，后续根据需求再添加附加属性或带Icon的按钮

因为之前有做Web项目所以前后端都得搞搞，现在搞到WPF感觉界面不能太单调了

设计前可参考element-ui 一些成熟的UI 框架

 

目前仅实现比较简单的样式：

1、创建cs文件继承Button 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace YOI.Controls
{

public class UButton : Button
{

static UButton()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(UButton), new FrameworkPropertyMetadata(typeof(UButton)));
}


}
}

2、创建xaml 资源样式文件

<ResourceDictionary
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="clr-namespace:YOI.Controls">

  <Style TargetType="{x:Type local:UButton}">
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type local:UButton}">
          <!--  定义视觉树  -->
          <Border
            x:Name="btnBorder"
            Width="{TemplateBinding Width}"
            Height="{TemplateBinding Height}"
            Background="{TemplateBinding Background}"
            BorderBrush="{TemplateBinding BorderBrush}"
            BorderThickness="{TemplateBinding BorderThickness}"
            CornerRadius="0"
            SnapsToDevicePixels="True">
            <TextBlock
              x:Name="contentPresenter"
              Padding="{TemplateBinding Padding}"
              HorizontalAlignment="Center"
              VerticalAlignment="Center"
              FocusVisualStyle="{x:Null}"
              FontFamily="{TemplateBinding FontFamily}"
              Text="{TemplateBinding Content}" />
          </Border>

          <!--  定义视觉树  -->
          <ControlTemplate.Triggers>

            <MultiTrigger>
              <MultiTrigger.Conditions>
                <Condition Property="IsMouseOver" Value="True" />
                <Condition Property="IsPressed" Value="false" />
              </MultiTrigger.Conditions>
              <MultiTrigger.Setters>
                <!--<Setter Property="Effect">
                <Setter.Value>
                <DropShadowEffect
                BlurRadius="3"
                ShadowDepth="1"
                Color="#DDDDDD" />
              </Setter.Value>
              </Setter>-->
                <Setter TargetName="btnBorder" Property="Background" Value="{DynamicResource PrimaryBlueColor}" />
                <Setter TargetName="btnBorder" Property="BorderThickness" Value="0" />
                <Setter TargetName="btnBorder" Property="Opacity" Value="0.75" />
                <Setter TargetName="contentPresenter" Property="Foreground" Value="{DynamicResource PrimaryGreen}" />
              </MultiTrigger.Setters>

            </MultiTrigger>


            <Trigger Property="IsPressed" Value="True">
              <Setter TargetName="btnBorder" Property="Background" Value="{DynamicResource PrimaryBlueColor}" />
              <Setter TargetName="btnBorder" Property="BorderThickness" Value="0" />
              <Setter TargetName="contentPresenter" Property="FontWeight" Value="Bold" />
              <Setter TargetName="contentPresenter" Property="Foreground" Value="{DynamicResource PrimaryGreen}" />
            </Trigger>

            </ControlTemplate.Triggers>

            </ControlTemplate>

            </Setter.Value>
            </Setter>
            </Style>

            </ResourceDictionary>

3、 Generic.xaml 引用

 

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">


    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="/MotionControls;Component/Themes/Button/UButton.xaml" />
        <ResourceDictionary Source="/MotionControls;Component/Themes/GroupBox/UGroupBox.xaml" />

        <ResourceDictionary Source="/MotionControls;Component/Themes/SwitchButton/USwitchButton.xaml" />

        <ResourceDictionary Source="/MotionControls;Component/Themes/TextBox/UTextBox.xaml" />

        <ResourceDictionary Source="/MotionControls;Component/Themes/TabControl/UTabControl.xaml" />
        <ResourceDictionary Source="/MotionControls;Component/Themes/TabItem/UTabItem.xaml" />

        <ResourceDictionary Source="/MotionControls;Component/Themes/Colors.xaml" />

    </ResourceDictionary.MergedDictionaries>

</ResourceDictionary>

4、调用

<YOI:UButton
  Width="70"
  Height="30"
  Margin="10"
  Background="{DynamicResource TextWhiteColor}"
  BorderBrush="{DynamicResource PrimaryBlueColor}"
  BorderThickness="1"
  Content="{Binding Content}"
  Cursor="Hand"
  Foreground="{DynamicResource Tex
  </YOI:UButton>

总结：整体就就实现了自定义控件简单Button 按钮