WPF控件库：文字按钮的封装

需求：封装按钮，按钮上面只显示文字。在鼠标移上去、鼠标点击按钮、以及将按钮设为不可用时按钮的背景色和前景色需要发生变化

实现：继承Button类，封装如下6个属性：

#region 依赖属性

/// <summary>

/// 当鼠标移到按钮上时，按钮的前景色（这是依赖属性）

/// </summary>

public static readonly DependencyProperty MouserOverForegroundProperty =

    DependencyProperty.Register ( "MouserOverForeground", typeof ( Brush ), typeof ( TextButton ), new PropertyMetadata ( Brushes.Black ) );

/// <summary>

/// 鼠标移到按钮上时，按钮的背景色（这是依赖属性）

/// </summary>

public static readonly DependencyProperty MouseOverBackgroundProperty =

    DependencyProperty.Register ( "MouseOverBackground", typeof ( Brush ), typeof ( TextButton ), new PropertyMetadata ( Brushes.White ) );

/// <summary>

/// 当鼠标按下时，按钮的前景色（这是依赖属性）

/// </summary>

public static readonly DependencyProperty MousedownForegroundProperty =

    DependencyProperty.Register ( "MousedownForeground", typeof ( Brush ), typeof ( TextButton ), new PropertyMetadata ( Brushes.Black ) );

/// <summary>

/// 当鼠标按下时，按钮的背景色（这是依赖属性）

/// </summary>

public static readonly DependencyProperty MousedownBackgroundProperty =

    DependencyProperty.Register ( "MousedownBackground", typeof ( Brush ), typeof ( TextButton ), new PropertyMetadata ( Brushes.White ) );

/// <summary>

/// 当按钮不可用时，按钮的前景色（这是依赖属性）

/// </summary>

public static readonly DependencyProperty DisabledForegroundProperty =

    DependencyProperty.Register ( " DisabledForeground", typeof ( Brush ), typeof ( TextButton ), new PropertyMetadata ( Brushes.Black ) );

/// <summary>

/// 当按钮不可用时，按钮的背景色（这是依赖属性）

/// </summary>

public static readonly DependencyProperty DisabledBackgroundProperty =

    DependencyProperty.Register ( "DisabledBackground", typeof ( Brush ), typeof ( TextButton ), new PropertyMetadata ( Brushes.White ) );

#endregion

然后更改按钮的样式，样式封装在资源字典中：

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

                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

                    xmlns:local="clr-namespace:Zmy.Wpf.Controls">

    <Style x:Key="TextButtonStyle" TargetType="{x:Type local:TextButton}">

        <Setter Property="Template">

            <Setter.Value>

                <ControlTemplate TargetType="{x:Type local:TextButton}">

                    <Border x:Name="buttonBorder"

                            Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding Foreground}">

                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>

                    </Border>

                </ControlTemplate>

            </Setter.Value>

        </Setter>

        <Style.Triggers>

            <Trigger Property="IsMouseOver" Value="True">

                <Setter Property="Foreground" Value="{Binding RelativeSource={RelativeSource Self}, Path=MouserOverForeground}"/>

                <Setter Property="Background" Value="{Binding RelativeSource={RelativeSource Self}, Path=MouseOverBackground}"/>

            </Trigger>

            <Trigger Property="IsPressed" Value="True">

                <Setter Property="Foreground" Value="{Binding RelativeSource={RelativeSource Self}, Path=MousedownForeground}"/>

                <Setter Property="Background" Value="{Binding RelativeSource={RelativeSource Self}, Path=MousedownBackground}"/>

            </Trigger>

            <Trigger Property="IsEnabled" Value="False">

                <Setter Property="Foreground" Value="{Binding RelativeSource={RelativeSource Self}, Path=DisabledForeground}"/>

                <Setter Property="Background" Value="{Binding RelativeSource={RelativeSource Self}, Path=DisabledBackground}"/>

            </Trigger>

        </Style.Triggers>

    </Style>

</ResourceDictionary>

然后在TextButton的构造函数中设置按钮的样式：

#region 构造函数

public TextButton() : base()

{

    //获取资源文件信息

    ResourceDictionary rd = new ResourceDictionary();

    rd.Source = new Uri ( "/Zmy.Wpf.Controls;component/Style.xaml", UriKind.Relative );

    this.Resources.MergedDictionaries.Add ( rd );

    //设置样式

    this.Style = this.FindResource ( "TextButtonStyle" ) as Style;

}

#endregion

这样整个文字按钮就封装好了，调用起来非常简单：

        <controls:TextButton Content="测试按钮" Width="300" Height="50"

                             MouserOverForeground="Yellow" MouseOverBackground="Blue" MousedownBackground="Green" MousedownForeground="Blue"/>

        <controls:TextButton Content="测试按钮" Width="300" Height="50" IsEnabled="False"

                             DisabledForeground="Yellow" DisabledBackground="Blue" Margin="0,100,0,0"/>

源代码下载：http://download.csdn.net/detail/lyclovezmy/7356125

不要积分。

对应的图片按钮封装：http://www.cnblogs.com/DoNetCoder/p/3732310.html

巴特西

WPF控件库：文字按钮的封装

最新文章

热门文章