WPF自定义TextBox(可选：图片, 占位符)

最新推荐文章于 2024-08-27 17:09:50 发布
最新推荐文章于 2024-08-27 17:09:50 发布
阅读量915 收藏
点赞数
分类专栏： WPF
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/oneonce/article/details/75948693
版权

参考改版后的：http://blog.csdn.net/oneonce/article/details/77072894


有点问题：背景设置不生效，目前只能用白色(默认)背景微笑，求指点



public class ImageTextBox : TextBox
    {
        private const double PLACEHOLDER_FONTSIZE_DEF = 10.0;

        private const double NUMERATOR = 1.0;
        private const double DENOMINATOR = 5.0;
        private const double IMAGE_MARGIN_LEFT = 3.0;
        private const double IMAGE_MARGIN_RATE= -NUMERATOR / DENOMINATOR;
        private const double IMAGE_MARGIN_TOP = 3.0;
        private const double IMAGE_MARGIN_BOTTOM = 3.0;
        private const double IMAGE_MARGIN_RIGHT = 3.0;
        private const double IMAGE_MARGIN_TEXT = 2.0;
        private const double CORNER_RADIUS = 0.0;

        private TextBox mInputBox = null;
        private Thickness mInputBoxMargin = new Thickness(0, IMAGE_MARGIN_TOP, 0 , IMAGE_MARGIN_BOTTOM);
        private double mInputBoxWidth = 0.0;
        private Thickness mLeftImageMargin = new Thickness(CORNER_RADIUS * (1 + IMAGE_MARGIN_LEFT), IMAGE_MARGIN_TOP, IMAGE_MARGIN_TEXT, IMAGE_MARGIN_BOTTOM);
        private Size mLeftImageSize = new Size(0, 0);
        private double mPlaceHolderFontSize = PLACEHOLDER_FONTSIZE_DEF;

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

        public ImageTextBox()
        {
        }

        public override void OnApplyTemplate()
        {
            mInputBox = GetTemplateChild("TEXTBOX_PART") as TextBox;

            base.OnApplyTemplate();
        }

        public static readonly DependencyProperty ImageProperty = DependencyProperty.Register(nameof(Image), typeof(ImageSource), typeof(ImageTextBox),
                                                                                                                                                                    new FrameworkPropertyMetadata(null, FrameworkPropertyMetadataOptions.AffectsRender, ImageSourceChanged));
        public ImageSource Image
        {
            get { return (ImageSource)GetValue(ImageProperty); }
            set { SetValue(ImageProperty, value); }
        }

        public static readonly DependencyProperty PlaceHolderProperty = DependencyProperty.Register(nameof(PlaceHolder), typeof(string), typeof(ImageTextBox), new PropertyMetadata(""));
        public string PlaceHolder
        {
            get { return (string)GetValue(PlaceHolderProperty); }
            set { SetValue(PlaceHolderProperty, value); }
        }

        public double PlaceHolderFontSize
        {
            get {
                if (PLACEHOLDER_FONTSIZE_DEF == mPlaceHolderFontSize)
                {
                    mPlaceHolderFontSize = FontSize * 3.0 / 5.0;
                }
                return mPlaceHolderFontSize;
            }
        }

        public static readonly DependencyProperty CornerRadiusProperty = DependencyProperty.Register(nameof(CornerRadius), typeof(string), typeof(ImageTextBox), new PropertyMetadata(CORNER_RADIUS.ToString()));
        public string CornerRadius
        {
            get { return (string)GetValue(CornerRadiusProperty); }
            set { SetValue(CornerRadiusProperty, value); }
        }

        //public static readonly DependencyProperty InputBoxMarginProperty = DependencyProperty.Register(nameof(InputBoxMargin), typeof(Thickness), typeof(ImageTextBox), new PropertyMetadata(new Thickness(0, 0, 0, 0)));

        public Thickness InputBoxMargin
        {
            //get { return (Thickness)GetValue(InputBoxMarginProperty); }
            //set { SetValue(InputBoxMarginProperty, value); }

            get
            {
                double cornerRadius = double.Parse(CornerRadius);
                double lr= cornerRadius * (1 + IMAGE_MARGIN_RATE);

                if (0 == mInputBoxMargin.Left)
                {
                    if (0 == cornerRadius)
                    {
                        mInputBoxMargin.Left = IMAGE_MARGIN_LEFT;
                    }
                    else
                    {
                        mInputBoxMargin.Left = lr;
                    }
                }

                if (0 == mInputBoxMargin.Right)
                {
                    if (0 == cornerRadius)
                    {
                        mInputBoxMargin.Right = IMAGE_MARGIN_RIGHT;
                    }
                    else
                    {
                        mInputBoxMargin.Right = lr;
                    }
                }

                return mInputBoxMargin;
            }
        }

        public double InputBoxWidth
        {
            get
            {
                double cornerRadius = double.Parse(CornerRadius);
                double lr = cornerRadius * (1 + IMAGE_MARGIN_RATE);

                if (double.IsNaN(Width))
                {
                    mInputBoxWidth = 10;
                }
                else
                {
                    if (0 == mInputBoxWidth)
                    {
                        mInputBoxWidth = Width - 2 *lr;
                    }
                }

                return mInputBoxWidth;
            }
        }

        public Thickness LeftImageMargin
        {
            get
            {
                return mLeftImageMargin;
            }
        }

        public Size LeftImageSize
        {
            get
            {
                return mLeftImageSize;
            }
        }

        private static void ImageSourceChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e)
        {
            ImageTextBox thisImageTextBox = null;
            ImageSource imageSource = null;

            if (null != sender)
            {
                thisImageTextBox = sender as ImageTextBox;
                if (null == thisImageTextBox)
                {
                    return;
                }
            }

            if (e.NewValue is ImageSource)
            {
                imageSource = e.NewValue as ImageSource;
                if (null == imageSource)
                {
                    return;
                }
            }

            double cornerRadius = double.Parse((string)thisImageTextBox.GetValue(CornerRadiusProperty));
            if (0 == cornerRadius)
            {
                thisImageTextBox.mLeftImageMargin.Left = IMAGE_MARGIN_LEFT;
            }
            else
            {
                thisImageTextBox.mLeftImageMargin.Left = cornerRadius * (1 + IMAGE_MARGIN_RATE);
                thisImageTextBox.mInputBoxMargin.Right = cornerRadius * (1 + IMAGE_MARGIN_RATE) + IMAGE_MARGIN_TEXT;
            }

            if (0 == thisImageTextBox.mInputBoxMargin.Left)
            {
                thisImageTextBox.mInputBoxMargin.Left = thisImageTextBox.mLeftImageMargin.Left  + imageSource.Width + thisImageTextBox.mLeftImageMargin.Right;
            }
            
            thisImageTextBox.mInputBoxWidth = thisImageTextBox.Width - thisImageTextBox.mInputBoxMargin.Left - thisImageTextBox.mInputBoxMargin.Right ;

            thisImageTextBox.mLeftImageSize.Width = imageSource.Width;
            thisImageTextBox.mLeftImageSize.Height = imageSource.Height;
        }
    }


<Style TargetType="{x:Type ctrls:ImageTextBox}">
        <Setter Property="Foreground" Value="Black"/>
        <Setter Property="Background" Value="White"/>
        <Setter Property="BorderBrush" Value="#ff2D2D30"/>
        <Setter Property="BorderThickness" Value="2"/>
        <Setter Property="FontSize" Value="14"/>
        <Setter Property="CaretBrush" Value="Black"/>
        <Setter Property="Opacity" Value="1"/>
        <Setter Property="CornerRadius" Value="0"/>
        <Setter Property="FontSize" Value="18"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ctrls:ImageTextBox}">
                    <Grid x:Name="ROOT_PART" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                        <Border x:Name="mask"
                                Opacity="{TemplateBinding Opacity}"
                                Background="White"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                CornerRadius="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}}" />
                        <Border/>
                        <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                            <Image Panel.ZIndex="2"
                                   Margin="{Binding LeftImageMargin, RelativeSource={RelativeSource TemplatedParent}}"
                                   Width="{Binding LeftImageSize.Width, RelativeSource={RelativeSource TemplatedParent}}"
                                   Height="{Binding LeftImageSize.Height, RelativeSource={RelativeSource TemplatedParent}}"
                                   Source="{Binding Image, RelativeSource={RelativeSource TemplatedParent}}"
                                   HorizontalAlignment="Left" VerticalAlignment="Center"/>
                            <TextBox x:Name="TEXTBOX_PART" Panel.ZIndex="1"
                                     Foreground="{TemplateBinding Foreground}"
                                     RenderOptions.ClearTypeHint="Enabled" 
                                     SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
                                     HorizontalAlignment="Left" VerticalAlignment="Stretch"
                                     Width="{Binding InputBoxWidth, RelativeSource={RelativeSource TemplatedParent}}"
                                     Margin="{Binding InputBoxMargin, RelativeSource={RelativeSource TemplatedParent}}"
                                     FontSize="{TemplateBinding FontSize}" 
                                     BorderThickness="0"
                                     VerticalContentAlignment="Center"
                                     TextAlignment="{TemplateBinding TextAlignment}"
                                     CaretBrush="{Binding CaretBrush, RelativeSource={RelativeSource  AncestorType={x:Type ctrls:ImageTextBox}}}"
                                     ToolTip="{TemplateBinding ToolTip}"
                                     Text="{Binding Path=Text, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">

                                <TextBox.Resources>
                                    <VisualBrush x:Key="PLACEHOLDER_PART" TileMode="None" Opacity="1" Stretch="None" AlignmentX="Left">
                                        <VisualBrush.Visual>
                                            <TextBox Opacity="1"  Foreground="LightGray"
                                                Text="{Binding Path=PlaceHolder, RelativeSource={RelativeSource  AncestorType={x:Type ctrls:ImageTextBox}}}"
                                                     Background="{Binding Background, RelativeSource={RelativeSource TemplatedParent}}"
                                                    FontSize="{Binding PlaceHolderFontSize, RelativeSource={RelativeSource  AncestorType={x:Type ctrls:ImageTextBox}}}"
                                                     Margin="{Binding InputBoxMargin, RelativeSource={RelativeSource TemplatedParent}}"
                                                     BorderThickness="0" BorderBrush="Transparent"
                                                     Width="{Binding Width, ElementName=TEXTBOX_PART}"/>
                                        </VisualBrush.Visual>
                                    </VisualBrush>
                                </TextBox.Resources>

                                <TextBox.Style>
                                    <Style TargetType="TextBox">
                                        <Style.Triggers>
                                            <Trigger Property="Text" Value="{x:Null}">
                                                <Setter Property="Background" Value="{StaticResource PLACEHOLDER_PART}"/>
                                            </Trigger>
                                            <Trigger Property="Text" Value="">
                                                <Setter Property="Background" Value="{StaticResource PLACEHOLDER_PART}"/>
                                            </Trigger>
                                            <!--<DataTrigger Binding="{Binding Path=Text,RelativeSource={RelativeSource AncestorType={x:Type TextBox}},Converter={StaticResource isNullConverter},Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" Value="False">
                                                    <Setter Property="Background" Value="Transparent"/>
                                                </DataTrigger>-->

                                            <!--<Trigger Property="IsFocused" Value="False">
                                                <Setter Property="Background" Value="Transparent" />
                                            </Trigger>-->

                                            <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=Self}, Path=Text.Length}" Value="0">
                                                <Setter Property="Background" Value="{StaticResource PLACEHOLDER_PART}"/>
                                            </DataTrigger>
                                            <!--<MultiDataTrigger>
                                                <MultiDataTrigger.Conditions>
                                                    <Condition Binding="{Binding RelativeSource={RelativeSource Mode=Self},Path=Text.Length}" Value="0"/>
                                                    <Condition Binding="{Binding RelativeSource={RelativeSource Mode=Self},Path=IsFocused}" Value="False"/>
                                                </MultiDataTrigger.Conditions>
                                                <MultiDataTrigger.Setters>
                                                    <Setter Property="Background" Value="{StaticResource PLACEHOLDER_PART}"/>
                                                </MultiDataTrigger.Setters>
                                            </MultiDataTrigger>-->

                                            <!--<Trigger Property="IsKeyboardFocused" Value="true">
                                                <Setter Property="Background" Value="Transparent" />
                                            </Trigger>-->
                                        </Style.Triggers>
                                    </Style>
                                </TextBox.Style>
                            </TextBox>
                        </Grid>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>


使用1:

<ctrls:ImageTextBox x:Name="tbUserName" Width="300" Height="50"
        PlaceHolder="请输入用户名"
        TextChanged="tbUserName_TextChanged"/>


使用2:

<ctrls:ImageTextBox x:Name="tbUserName" Width="300" Height="50"
        CornerRadius="20"
        PlaceHolder="请输入用户名"
        TextChanged="tbUserName_TextChanged"/>

使用3:

<ctrls:ImageTextBox x:Name="tbUserName" Width="300" Height="50"
        PlaceHolder="请输入用户名"
        Image="Resources/Images/logo.jpg"
        TextChanged="tbUserName_TextChanged"/>


使用4:

<ctrls:ImageTextBox x:Name="tbUserName" Width="300" Height="50"
        CornerRadius="20"
        PlaceHolder="请输入用户名"
        Image="Resources/Images/logo.jpg"
        TextChanged="tbUserName_TextChanged"/>



OneOnce
关注
专栏目录
WPF控件之自定义TextBox控件
weixin_44548814的博客
06-25 7589
首先我们要知道用户控件与自定义用户控件的确保 用户控件 1将多个现有的控件组合成一个可重用的“组”。 2不能使用样式和模板。 3继承自UserControl类。 自定义控件 1在现有的控件上进行扩展，增加一些新的属性方法等。 2包括一个代码文件和一个默认的主题文件。 3可以使用样式和模板。 4构建控件库的好方法。 说白了一个就是把现有自带的控件进行一定的封装变成一个新的控件另一个是 修改稿原有的底...
wpf TextBox 自定义菜单
05-28
右键菜单 ContextMenu cont = new ContextMenu(); cont.Items.Add(new MenuItem() { Header="删除"}); cont.Items.Add(new MenuItem() { Header = "添加" }); textBox1.ContextMenu = cont; for (int i = 0; i < cont.Items.Count; i++) { MenuItem item = (MenuItem)cont.Items[i]; item.Click += delegate(object sender,RoutedEventArgs e) { MessageBox.Show(item.Header.ToString()); }; }
WPF之TextBox的自定义template
m0_59871062的博客
08-27 229
在自定义textbox的template时，内容不是contenPresenter，而是scrollerViewer，且名字必须为PART_ContentHost。
WPF 自定义TextBox
weixin_30950237的博客
09-07 215
1.TextBox前加图标。 效果： <TextBox Width="300" Height="30" Style="{StaticResource TXTSTYLE}"> <TextBox.Background> <ImageBrush ImageSource="uri" /> </TextBox.Backgro...
【写笔记】WPF 自定义简单的TextBox控件
hisxiwu的博客
08-27 403
来自语雀笔记
WPF 自定义TextBox，提示文字
weixin_30896825的博客
09-11 145
WPF 自定义TextBox，提示文字 效果图： 用于提示用户的输入 代码：Code posted on 2012-09-11 11:21dai...
WPF 自定义TextBox，可控制键盘输入内容
weixin_34122604的博客
06-15 426
非原创，整理之前的代码的时候找出来的，可用，与大家分享一下！ 1 public class NumbericBoxWithZero : NumericBox 2 { 3 public NumbericBoxWithZero() 4 : base() 5 { 6 7 ...
C# WPF中TextBox输入框添加占位符
豫
05-13 1848
然后我们在指定的样式文件中加入如下代码 <!--占位符--> <Style x:Key="placeHolder" TargetType="{x:Type TextBox}" BasedOn="{StaticResource {x:Type TextBox}}"> <Setter Property="Template"> <Setter.Value> <ControlT.
WPF控件开发(1) TextBox占位符
神棍工作室——南琦的博客
06-03 3654
在twitter-bootstrap中有这么一个功能： 我们如何在WPF也实现类似这种写法： 首先熟悉一点WPF的人都知道，placeholder在这里是一个附加属性，而这个附加属性的类型是String。 第一种实现方式 首先我们想到的可能是这样： public static string GetPlaceholder1
WPF 搜索 TextBox
01-28
这段代码定义了一个名为`searchTextBox`的TextBox，并设置了占位符文本“请输入搜索关键词”。`TextChanged`事件将在用户输入时触发，这是实现搜索功能的关键。 接下来，我们需要处理`TextChanged`事件。在后台代码...
【愚公系列】2023年10月 WPF控件专题 Label、TextBox、PasswordBox控件介绍
热门推荐
时光隧道
08-08 5万+
WPF控件是Windows Presentation Foundation（WPF）中的基本用户界面元素。它们是可视化对象，可以用来创建各种用户界面。WPF控件可以分为两类：原生控件和自定义控件。原生控件是由Microsoft提供的内置控件，如Button、TextBox、Label、ComboBox等。这些控件都是WPF中常见的标准用户界面元素。自定义控件则允许开发人员使用XAML和C#等编程语言来创建个性化的用户界面元素。自定义控件可以根据需求提供更多的功能和自定义化选项，以及更好的用户体验。
WPF自定义控件Textbox带水印以及错误信息显示
10-31
一个自定义编写的WPF的Textbox文本框,带水印功能,错误信息显示,是否必填项。将常用的textbox需要的功能都包含了,一个控件解决texbox的问题.简单易用。如果有问题，可留言,我看见了尽量改正。
WPF实现添加图片文本
02-25
用户控件，可以实现添加所选择的图标，图片，以及有格式的文本。
WPF中显示图片并将路径显示
09-12
WPF中利用image控件显示绝对路径下的图片，将绝对路径在textbox显示出来
WPF textbox空间无PlaceholderText属性
最新发布
09-12
但是，你可以通过以下几种方法来实现类似占位符的效果： 1. 使用Watermark附加属性：可以通过定义一个附加属性，使它能够在TextBox失去焦点并且内容为空时显示占位文本，而当用户开始输入时消失。这种方式可以通过...
WPF自定义TextBox和Button控件
weixin_44548405的博客
08-07 1889
开发工具与关键技术：自定义TextBox和Button控件 作者：邓崇富 撰写时间：2019 年 8 月 7 日 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 自定义控件有两种写法，一种是快速定义法，另一种是手动写法。快速定义法就是在页面的设计器里选中你要自定义的...
WPF简单自定义控件模板之TextBox
lishuangquan1987的博客
12-13 4449
WPF中自带的TextBox的外观如下： 现在要把它变成有水印提示的TextBox，并且主题可以改变： 白色主题： 黑色主题： 以下是自定义控件需要考虑的： 1.需要为TextBox增加一个水印属性，并且这个水印属性可以自定义设置 2.黑白风格的颜色样式 水印属性 采用附加属性来给TextBox增加水印属性： public class TextBoxHelper: DependencyObject { public static string GetWaterMark(De
WPF 自定义TextBox(WPF带图片，占位符，清除按钮的TextBox)改造版
小小的熊的博客
12-17 3102
原文：https://blog.csdn.net/oneonce/article/details/77072894 效果： Style: &lt;ResourceDictionary     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"     xmlns:x="http://schemas.micro...
WPF自定义控件开发指南：构建高级用户体验
该书针对当前国内WPF自定义控件领域的稀缺资源，深入讲解了如何利用WPF技术创建高级用户界面体验。书中内容涵盖了WPF控件的开发基础到高级特性的构建，旨在帮助读者掌握构建自定义控件的关键技能。 全书共探讨了WPF...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

OneOnce

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值