WPF 实现带标题的TextBox

简介: 原文:WPF 实现带标题的TextBox这篇博客将分享在WPF中如何创建一个带Title的TextBox。首先请看一下最终的效果, 实现思路:使用TextBlock+TextBox来实现,TextBlock用来显示Title。
原文: 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等都可以参考上面的实现思路。

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

目录
相关文章
|
C#
WPF 界面实现多语言支持 中英文切换 动态加载资源字典
原文:WPF 界面实现多语言支持 中英文切换 动态加载资源字典 1、使用资源字典,首先新建两个字典文件en-us.xaml、zh-cn.xaml。定义中英文的字符串在这里面【注意:添加xmlns:s="clr-namespace:System;assembly=mscorlib】 zh-cn.
3190 0
|
数据可视化 数据处理 C#
WPF技术之TextBox控件
WPF ProgressBar控件用于显示操作的进度。它提供了一个可视化的进度条,用于表示任务的完成程度
116 0
|
C# 数据安全/隐私保护 Windows
WPF技术之TextBox控件
WPF(Windows Presentation Foundation)的TextBox控件是用于用户输入和编辑文本的常见控件
958 0
WPF中给TextBox/TextBlock设置提示文本
WPF中给TextBox/TextBlock设置提示文本
WPF中给TextBox/TextBlock设置提示文本
WPF 点击 Datagrid 中的TextBox 控件获取其所在行的数据
WPF 点击 Datagrid 中的TextBox 控件获取其所在行的数据
|
IDE C# 开发工具
WPF钟表效果实现
中WPF中的RotateTransform实现UI元素的旋转,并模拟钟表的秒针、分针和时针。
1197 0
WPF钟表效果实现
|
IDE 编译器 C#
WPF实现强大的动态公式计算
数据库可以定义表不同列之间的计算公式,进行自动公式计算,但如何实现行上的动态公式计算呢?行由于可以动态扩展,在某些应用场景下将能很好的解决实际问题。本文就探讨一下如何在WPF中实现一种基于行字段的动态公式计算。
1067 0
WPF实现强大的动态公式计算
|
C#
wpf 开发 -TextBox背景自定义-Decorator
首先在app.xaml文件的下面添加以下样式
1690 0
|
网络协议 C# 移动开发
C# WPF上位机实现和下位机TCP通讯
C# WPF上位机实现和下位机TCP通讯下位机使用北京大华程控电源DH1766-1,上位机使用WPF。实现了电压电流实时采集,曲线显示。上午在公司调试成功,手头没有程控电源,使用TCP服务端模拟。昨天写的TCP服务端正好排上用场。
2403 0
|
C#
正则表达式——WPF输入控件TextBox 限定输入特定字符
原文:正则表达式——WPF输入控件TextBox 限定输入特定字符 概念: 正则表达式是对字符串操作的一种逻辑公式, 就是用事先定义好的一些特定字符、及这些特定字符的组合,组成一个“规则字符串”, 这个“规则字符串”用来表达对字符串的一种过滤逻辑。
2180 0