wpf自定义控件库（二）——伪3D按钮

1、以学习wpf为目的，同时也为了增加控件代码的复用性，开始建立自己的自定义控件库；

2、目前主要是根据项目需求去增加，完善控件库。希望之后能一步步扩展更多更丰富的控件；

3、目前新增的控件主要是继承自基础控件，再做一些额外的扩展。

 

先上效果图：

 

 原理比较简单，在Button原来的Border下面还有一个Border，它负责在点击的时候，做一个平移变换，从右下角转到左上角。

直接上代码：

<Style TargetType="c:MyButton" BasedOn="{StaticResource {x:Type Button}}">
        <Setter Property="Background" Value="#FFC0C0C0"/>
        <Setter Property="BorderBrush" Value="#FF808080"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="c:MyButton">
                    <Grid>
                        <Border Name="rect" Background="#8000" Opacity="1" CornerRadius="{TemplateBinding BorderCornerRadius}">
                            <Border.RenderTransform>
                                <TranslateTransform X="2" Y="2"/>
                            </Border.RenderTransform>
                        </Border>
                        <Border x:Name="border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" SnapsToDevicePixels="true" CornerRadius="{TemplateBinding BorderCornerRadius}">
                            <ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                                <ContentPresenter.RenderTransform>
                                    <TranslateTransform X="2" Y="2"/>
                                </ContentPresenter.RenderTransform>
                            </ContentPresenter>
                        </Border>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsDefaulted" Value="true">
                            <Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="true">
                            <Setter TargetName="border" Property="RenderTransform">
                                <Setter.Value>
                                    <TranslateTransform X="1" Y="1"/>
                                </Setter.Value>
                            </Setter>
                            <Setter TargetName="rect" Property="RenderTransform">
                                <Setter.Value>
                                    <TranslateTransform X="0" Y="0"/>
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Opacity" Value="0.8" TargetName="border"/>
                            <Setter Property="Opacity" Value="0.5" TargetName="rect"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

一些需要注意的点：

1、样式是直接继承Button的；

BasedOn="{StaticResource {x:Type Button}}"

2、作为阴影部分的Border，需写在原Border上方，防止遮挡。同时它的background：#8000是一个半透明的颜色，感觉挺有用的；

3、也可以用DropShadowEffect这个东西作为阴影；

 

 

后台代码：MyButton类（主要就是开发一些依赖属性方便实际使用时编辑，这里面的5个依赖属性其实只用到了1个，那就是圆角，剩下4个主要是用在了MyButton的另一个Style--2D普通样式）

using System.Windows.Controls;
using System.Windows.Media;
using System.Windows;

namespace ControlsLibrary.Controls
{
    public class MyButton : Button
    {
        static MyButton()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(MyButton), new FrameworkPropertyMetadata(typeof(MyButton)));
        }
        /// <summary>
        /// 鼠标在控件上时-背景色
        /// </summary>
        public Brush MouseOverBackground
        {
            get { return (Brush)GetValue(MouseOverBackgroundProperty); }
            set
            {
                SetValue(MouseOverBackgroundProperty, value);
            }
        }
        public static readonly DependencyProperty MouseOverBackgroundProperty =
            DependencyProperty.Register("MouseOverBackground", typeof(Brush), typeof(MyButton));
        /// <summary>
        /// 鼠标在控件上时-边框颜色
        /// </summary>
        public Brush MouseOverBorderBrush
        {
            get { return (Brush)GetValue(MouseOverBorderBrushProperty); }
            set { SetValue(MouseOverBorderBrushProperty, value); }
        }
        public static readonly DependencyProperty MouseOverBorderBrushProperty =
            DependencyProperty.Register("MouseOverBorderBrush", typeof(Brush), typeof(MyButton));
        /// <summary>
        /// 鼠标按下时-背景色
        /// </summary>
        public Brush MousePressBackground
        {
            get { return (Brush)GetValue(MousePressBackgroundProperty); }
            set { SetValue(MousePressBackgroundProperty, value); }
        }
        public static readonly DependencyProperty MousePressBackgroundProperty =
            DependencyProperty.Register("MousePressBackground", typeof(Brush), typeof(MyButton));
        /// <summary>
        /// 鼠标按下时-边框颜色
        /// </summary>
        public Brush MousePressBorderBrush
        {
            get { return (Brush)GetValue(MousePressBorderBrushProperty); }
            set { SetValue(MousePressBorderBrushProperty, value); }
        }
        public static readonly DependencyProperty MousePressBorderBrushProperty =
            DependencyProperty.Register("MousePressBorderBrush", typeof(Brush), typeof(MyButton));


        /// <summary>
        /// Button圆度
        /// </summary>
        public CornerRadius BorderCornerRadius
        {
            get { return (CornerRadius)GetValue(BorderCornerRadiusProperty); }
            set { SetValue(BorderCornerRadiusProperty, value); }
        }
        public static readonly DependencyProperty BorderCornerRadiusProperty =
            DependencyProperty.Register("BorderCornerRadius", typeof(CornerRadius), typeof(MyButton), new PropertyMetadata(new CornerRadius(5)));


    }
}