【WPF】给TextBox添上Label

引言

    在客户端开发中,要说出现频率大的控件,必定有TextBox的身影.然而在TextBox的旁边通常得有个基友Label,形影不离.为此,我们都要写两个控件,布局两次,这样麻烦且有点浪费时间.不如,我们做狠点,将它们两个绑在一起算了.

简单需求

    我们需要的控件该是怎样的.首先,它应该有TextBox的所有特性,其次,它的上方或者左边应该有个Label.我们可以通过设置属性,显示Label的内容.大体上就是这样.

构建方式的选取

   WPF的控件开发有两种,分为用户控件和自定义控件.在这次的控件开发中,自定义控件又可以细分为三种,如下:

   1.首先是用户控件,通过继承UserControl,直接在xaml上布局设计.这种方式开发上比较方便,适用于多个界面上重用不变的模块.但是专业的控件开发一般不采取这种方式.

   2.自定义控件之一,通过继承Control和模板上采用TextBox和Label的布局构建控件.这种方式功能上的自由度很高,例如可以自定义text属性,但是要构建大量的依赖项属性和路由事件.

   3.自定义控件之二,通过继承TextBox和修改采用msdn上提供TextBox的默认模板,这种方式轻量级些,但是要深入理解默认模板的设计,和需要重定义模板的一些触发器和效果等.

   4.自定义控件之三,上面两种都是比较复杂,我们有折中的做法.通过继承TextBox和模板上采用TextBox和Label的布局构建控件,本文就是介绍一下这种做法.

新建项目

  首先,新建一个WPF用户控件库的项目,VS已经帮我们添加了一些东西,如图:

   

    Themes文件夹下面的特定的Generic.xaml里面就是放我们的模板文件的了,一般我们不直接将模板直接写在里面,而是每个控件模板分别放在一个资源文件中,再合并在Generic里面.而真正的控件是CustomControl1.cs,里面包含着我们熟悉的各种依赖项属性和事件.当然,我们得重命名一下,就叫LabelTextBox吧.

无外观的LabelTextBox

  在静态构造函数中,调用 DefaultStyleKeyProperty.OverrideMetadata,告诉WPF为此控件应用一个新样式,再新建一个LabelProperty和LabelPosition的依赖项属性,如下:

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

        public static readonly DependencyProperty LabelProperty = DependencyProperty.Register("Label", typeof(Object), typeof(LabelTextBox), new PropertyMetadata(string.Empty));

        public static readonly DependencyProperty LabelPositionProperty = DependencyProperty.Register("LabelPosition", typeof(Position), typeof(LabelTextBox), new PropertyMetadata(Position.Top));

        public Object Label
        {
            get { return (Object)GetValue(LabelProperty); }
            set { SetValue(LabelProperty, value); }
        }

        public Position LabelPosition
        {
            get { return (Position)GetValue(LabelPositionProperty); }
            set { SetValue(LabelPositionProperty, value); }
        }

    }

    public enum Position
    {
        Top,
        Left

    }

LabelTextBox的控件模板

     上面已经完成了我们的LabelTextBox,但是它还没有样式模板.接下来我们来构建它的控件模板.在Themes文件夹下面新建一个资源字典名为LabelTextBox.xaml,其实模板的TextBox和LabelTextBox没有什么关联,所以我们给控件模板写上各种绑定和设置样式触发器,如下:

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

    <ControlTemplate x:Key="TopLabelTextBoxTemplate" TargetType="{x:Type local:LabelTextBox}">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Label 
                Content="{Binding Label, RelativeSource={RelativeSource TemplatedParent}}" Grid.Row="0"/>
            <TextBox Grid.Row="1"
                Text="{Binding Text, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                HorizontalContentAlignment="{Binding HorizontalContentAlignment,RelativeSource={RelativeSource TemplatedParent}}"
                VerticalContentAlignment="{Binding VerticalContentAlignment,RelativeSource={RelativeSource TemplatedParent}}"
                Background="{Binding Background,RelativeSource={RelativeSource TemplatedParent}}"
                Foreground="{Binding Foreground,RelativeSource={RelativeSource TemplatedParent}}"
                TextWrapping="{Binding TextWrapping,RelativeSource={RelativeSource TemplatedParent}}"
                TextAlignment="{Binding TextAlignment,RelativeSource={RelativeSource TemplatedParent}}" 
                HorizontalScrollBarVisibility="{Binding HorizontalScrollBarVisibility,RelativeSource={RelativeSource TemplatedParent}}"
                VerticalScrollBarVisibility="{Binding VerticalScrollBarVisibility,RelativeSource={RelativeSource TemplatedParent}}"
                                         MaxLength="{Binding MaxLength,RelativeSource={RelativeSource TemplatedParent}}"
                                         IsReadOnly="{Binding IsReadOnly,RelativeSource={RelativeSource TemplatedParent}}"
                                         IsEnabled="{Binding IsEnabled,RelativeSource={RelativeSource TemplatedParent}}"/>
        </Grid>
    </ControlTemplate>

    <ControlTemplate x:Key="LeftLabelTextBoxTemplate" TargetType="{x:Type local:LabelTextBox}">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"></ColumnDefinition>
                <ColumnDefinition Width="*"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Label HorizontalAlignment="Center" VerticalAlignment="Center"
                Content="{Binding Label, RelativeSource={RelativeSource TemplatedParent}}" Grid.Column="0"/>
            <TextBox Grid.Column="1"
                Text="{Binding Text, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                HorizontalContentAlignment="{Binding HorizontalContentAlignment,RelativeSource={RelativeSource TemplatedParent}}"
                VerticalContentAlignment="{Binding VerticalContentAlignment,RelativeSource={RelativeSource TemplatedParent}}"
                Background="{Binding Background,RelativeSource={RelativeSource TemplatedParent}}"
                Foreground="{Binding Foreground,RelativeSource={RelativeSource TemplatedParent}}"
                TextWrapping="{Binding TextWrapping,RelativeSource={RelativeSource TemplatedParent}}"
                TextAlignment="{Binding TextAlignment,RelativeSource={RelativeSource TemplatedParent}}" 
                HorizontalScrollBarVisibility="{Binding HorizontalScrollBarVisibility,RelativeSource={RelativeSource TemplatedParent}}"
                VerticalScrollBarVisibility="{Binding VerticalScrollBarVisibility,RelativeSource={RelativeSource TemplatedParent}}"
                                         MaxLength="{Binding MaxLength,RelativeSource={RelativeSource TemplatedParent}}"
                                         IsReadOnly="{Binding IsReadOnly,RelativeSource={RelativeSource TemplatedParent}}"
                                         IsEnabled="{Binding IsEnabled,RelativeSource={RelativeSource TemplatedParent}}"/>
        </Grid>
    </ControlTemplate>

    <Style TargetType="{x:Type local:LabelTextBox}"  >
        <Setter Property="Template" Value="{StaticResource TopLabelTextBoxTemplate}"/>
        <Style.Triggers>
            <Trigger Property="LabelPosition" Value="Left">
                <Setter Property="Template" Value="{StaticResource ResourceKey=LeftLabelTextBoxTemplate}"></Setter>
            </Trigger>
        </Style.Triggers>
    </Style>

</ResourceDictionary>

      接下来,将资源字典添加到Generic.xaml,如下:

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

    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="/WpfCustomControl;component/themes/LabelTextBox.xaml" ></ResourceDictionary>    
    </ResourceDictionary.MergedDictionaries>

</ResourceDictionary>

   编译通过后就得到我们的控件库WpfCustomControl.dll.

LabelTextBox的使用

   在自己项目引用WpfCustomControl.dll,在xaml文件中添加标记引用,然后就可以直接使用,如下:

<Window x:Class="ControlsTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:control="clr-namespace:WpfCustomControl;assembly=WpfCustomControl"
        Title="MainWindow" Height="350" Width="525">
    <Grid>    
        <control:LabelTextBox Name="txtbox" LabelPosition="Top"  Label="标题" Width="100" TextChanged="LabelTextBox_TextChanged_1" Margin="209,136,209.4,136.4"/>
    </Grid>
</Window>

   可以看到TextChanged等事件能正常触发,但是上面说到TextBox和LabelTextBox没什么关联,要手动绑定属性.然而我们没有为LabelTextBox事件绑定过什么,却依然生效了.那是因为它们公用一个事件路由,实质是TextBox触发了TextChanged事件,冒泡到LabelTextBox,触发了LabelTextBox的TextChanged事件.

小结

    本文简单介绍了如何构建一个自定义控件,其中涉及到依赖项属性,控件模板,资源,事件的知识点.最后,如果您有更好的建议,请不吝指教.