WPF 实现带标题的TextBox

这篇博客将分享在WPF中如何创建一个带Title的TextBox。首先请看一下最终的效果,

实现思路:使用TextBlock+TextBox来实现,TextBlock用来显示Title。

实现代码,

TitleTextBox

    [TemplatePart(Name = TitleTextBlockKey, Type = typeof(TextBlock))]
    public class TitleTextBox : TextBox
    {
        private const string TitleTextBlockKey = "PART_TitleTextBlock";

        private TextBlock _tbkTitle;

        public static readonly DependencyProperty TitleProperty;

        public string Title
        {
            get { return (string)GetValue(TitleProperty); }
            set { SetValue(TitleProperty, value); }
        }

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

            TitleProperty = DependencyProperty.Register("Title", typeof(string), typeof(TitleTextBox), new UIPropertyMetadata(new PropertyChangedCallback(TitlePropertyChangedCallback)));
        }

        private static void TitlePropertyChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            TitleTextBox ttb = d as TitleTextBox;

            if (ttb._tbkTitle != null)
            {
                ttb._tbkTitle.Text = (string)e.NewValue;
            }
        }

        public override void OnApplyTemplate()
        {
            base.OnApplyTemplate();

            _tbkTitle = Template.FindName(TitleTextBlockKey, this) as TextBlock;
            _tbkTitle.Text = Title;
        }
    }

定义TitleTextBox样式,

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:WPFTitleTextBox.Resources.Styles"
                    xmlns:uc="clr-namespace:WPFTitleTextBox">
    <Style TargetType="{x:Type uc:TitleTextBox}">
        <Setter Property="SnapsToDevicePixels" Value="True"/>
        <Setter Property="FontSize" Value="12"/>
        <Setter Property="Height" Value="28"/>
        <Setter Property="UndoLimit" Value="0"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type uc:TitleTextBox}">
                    <Border x:Name="OuterBorder" BorderBrush="#8b99bc" BorderThickness="1" CornerRadius="1" Background="#f7f7f7">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>

                            <TextBlock x:Name="PART_TitleTextBlock" Text="{Binding Title}" Foreground="#a7abb0" VerticalAlignment="Center" Margin="5,0"/>
                            <Line Grid.Column="1" Stroke="#ccd1d7" StrokeDashArray="2,2" StrokeThickness="1.5" X1="0" Y1="0"
                                  X2="0" Y2="{TemplateBinding Height}" Margin="0,4"/>

                            <Border Grid.Column="2" Background="White">
                                <ScrollViewer x:Name="PART_ContentHost" Margin="5,0" VerticalAlignment="Center" FontSize="14"/>
                            </Border>
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

在XAML中需要引用TitleTextBox。

    <Grid>
        <StackPanel>
            <local:TitleTextBox Title="姓名" Width="270" Margin="5,10"/>
            <local:TitleTextBox Title="班级" Width="270"/>
            <local:TitleTextBox Title="专业" Width="270" Margin="5,10"/>
        </StackPanel>
    </Grid>

使用时设置一下Title即可。使用方式和普通TextBox一样。

以后如果遇到带Title的ComboBox,CheckBox等都可以参考上面的实现思路。

感谢您的阅读,代码点击这里下载。

时间: 2024-10-14 00:53:00

WPF 实现带标题的TextBox的相关文章

基于jQuery带标题的图片3D切换焦点图

今天给大家分享一款基于jQuery带标题的图片3D切换焦点图.这款焦点图适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 在线预览   源码下载 实现的代码. html代码: <div id="wowslider-container"> <div class="ws_images"> <ul> <li><a href="#"> &

WPF自定义控件与样式(3)-TextBox &amp; RichTextBox &amp; PasswordBox样式、水印、Label标签、功能扩展

原文:WPF自定义控件与样式(3)-TextBox & RichTextBox & PasswordBox样式.水印.Label标签.功能扩展 一.前言.预览 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要是对文本输入控件进行样式开发,及相关扩展功能开发,主要内容包括: 基本文本框TextBox控件样式及扩展功能,实现了样式.水印.Label标签.功能扩展: 富

WPF 自带Datagrid编辑后无法更新数据源的问题

最近项目中遇到的问题,datagrid编辑后无法立刻与后台同步,只有失去焦点时才更新,在网上找了找,这个方法可以用用: 转自:http://blog.csdn.net/lianchangshuai/article/details/7787344 解决办法: 在列的绑定属性里加上UpdateSourceTrigger,示例XAML如下 <DataGrid Grid.Row="1" Height="274" HorizontalAlignment="Le

【实用代码】选项卡切换——带标题底纹样式

一.代码内容: 选项卡切换——带标题底纹样式 二.效果如图: 三.代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head&g

StickyListHeaders-master带标题的listview

StickyListHeaders-master带标题的listview 实现能够固定在屏幕顶部的ListView Section Header. 当前section的header固定在屏幕顶部,当滑动到其他section时,其他section的header会代替之前的section的header,固定到屏幕顶部. 下载地址:http://www.devstore.cn/code/info/887.html 运行截图:

Android一个简单的警告框,带标题、图标、按钮的代码

工作之余,将内容过程比较常用的内容做个珍藏,下面内容是关于Android一个简单的警告框,带标题.图标.按钮的内容,应该是对大伙有些用. AlertDialog alertDialog = new AlertDialog.Builder(this).create();alertDialog.setTitle("Title");alertDialog.setMessage("Message");alertDialog.setButton("OK",

WPF自定义控件(二)——TextBox

和之前一样,先来看看效果: 这个TextBox可设置水印,可设置必填和正则表达式验证. 验证?没错,就是验证! 就是在输入完成后,控件一旦失去焦点就会自动验证!会根据我开放出来的“是否可以为空”属性进行验证,一旦为空,则控件变为警告样式. 但这还不是最特别的,为了各种手机号啊,邮箱啊的验证,我还开放了一个正则表达式的属性,在这个属性中填上正则表达式,同上, 一旦失去焦点就会自动验证输入的内容能否匹配正则表达式,如果不能匹配,则控件变为警告样式. 之后,代码还可以通过我开放的另一个属性来判断当前输

WPF中Popup上的textbox无法切换到中文输入法

As Marco Zhou has said in the msdn forum (http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/b2428b85-adc9-4a1e-a588-8dbb3b9aac06/):Windows will only send WM_IME_SETCONTEXT message to the active window, Popup by default is designed to be shown

[WPF系列]-高级部分 Shadowed TextBox

Download Solution ShadowedTextBoxExample.zip (70.3 KB) Usage <local:ShadowedTextBox Label="First Name" Text="{Binding FirstName}" /> Styles <Style x:Key="shadowedLabelStyle"> <Setter Property="TextBlock.Fo