WPF TextBox实现placeholder

WPF里TextBox没有placeholder,需要自己实现,本篇博客介绍WPF TextBox实现placeholder,效果如下:

在这里插入图片描述
实现技巧是在 TextBox 控件的 Style 中使用触发器(Triggers)来显示和隐藏placeholder文本。xmal代码如下:

<Window x:Class="WpfApp_TextBox.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"xmlns:local="clr-namespace:WpfApp_TextBox"mc:Ignorable="d"Title="MainWindow" Height="461" Width="837"><Grid><Canvas><!--设置placeholder--><TextBox x:Name="userName" Width="240" Height="36" FontSize="16" Canvas.Left="20" Canvas.Top="20"><TextBox.Style><Style TargetType="TextBox"><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="TextBox"><Grid><TextBox x:Name="textSource" Text="{Binding Text, RelativeSource={RelativeSource TemplatedParent}}" Background="Transparent" Padding="5"/><TextBlock IsHitTestVisible="False" Text="Enter text here..." Foreground="Gray" Padding="5"><TextBlock.Style><Style TargetType="TextBlock"><Setter Property="Visibility" Value="Collapsed"/><Style.Triggers><DataTrigger Binding="{Binding Text, Source={x:Reference textSource}}" Value=""><Setter Property="Visibility" Value="Visible"/></DataTrigger></Style.Triggers></Style></TextBlock.Style></TextBlock></Grid></ControlTemplate></Setter.Value></Setter></Style></TextBox.Style></TextBox><!--WPF 中的 TextBox 控件可以设置为自动换行。你可以通过设置 TextBox 的 TextWrapping 属性为 Wrap 来实现这个功能。当 TextWrapping 属性设置为 Wrap 时, TextWrapping="Wrap", TextBox 会在文本达到边界时自动换行。--><TextBox Width="200" Height="80" Canvas.Left="20" Canvas.Top="100" VerticalScrollBarVisibility="Auto"TextWrapping="WrapWithOverflow"AcceptsReturn="True"ScrollViewer.CanContentScroll="True"/><TextBox x:Name="UsernameTextBox" Width="200" Height="30" FontSize="18" VerticalAlignment="Top" HorizontalAlignment="Left" VerticalContentAlignment="Center" Canvas.Left="20" Canvas.Top="220"><TextBox.Template><ControlTemplate TargetType="TextBox"><Border Background="White" BorderBrush="Gray" BorderThickness="1"><Grid><Grid.ColumnDefinitions><ColumnDefinition Width="Auto" /><ColumnDefinition Width="*" /></Grid.ColumnDefinitions><Image Grid.Column="0" Source="/Assets/Images/user.png" Width="20" Height="20" Margin="5,0,0,0" /><ScrollViewer x:Name="PART_ContentHost" Grid.Column="1" /><!--这里Margin可以调整文字的位置--><TextBlock Grid.Column="1" Text="Enter username..." IsHitTestVisible="False" Foreground="LightGray" Margin="5,2,0,0"><TextBlock.Style><Style TargetType="TextBlock"><Setter Property="Visibility" Value="Collapsed" /><Style.Triggers><DataTrigger Binding="{Binding Text, ElementName=UsernameTextBox}" Value=""><Setter Property="Visibility" Value="Visible" /></DataTrigger></Style.Triggers></Style></TextBlock.Style></TextBlock></Grid></Border></ControlTemplate></TextBox.Template></TextBox><Button Content="Button" HorizontalAlignment="Left" Canvas.Left="20" Canvas.Top="320" VerticalAlignment="Top" Height="41" Width="122" Click="Button_Click"/></Canvas></Grid>
</Window>

需要注意的是,文本的上下边距,如果有蓝湖设计图写起来会很容易,比如上面代码中,使用Margin调整上边距
Font属性

FontSize="18"

TextBlock的Margin属性

<!--这里Margin可以调整文字的位置-->
<TextBlock Grid.Column="1" Text="Enter username..." IsHitTestVisible="False" Foreground="LightGray" Margin="5,2,0,0">

经过这样调整后placeholder的内容才比能竖直居中显示。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/154016.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Activiti,Apache camel,Netflex conductor对比,业务选型

Activiti,Apache camel,Netflex conductor对比&#xff0c;业务选型 1.activiti是审批流&#xff0c;主要应用于人->系统交互&#xff0c;典型应用场景&#xff1a;请假&#xff0c;离职等审批 详情可见【精选】activti实际使用_activiti通过事件监听器实现的优势_记录点滴…

SpringBoot-集成Kafka详解

SpringBoot集成Kafka 1、构建项目 1.1、引入依赖 <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.2.5.RELEASE</version> </parent> <dependenci…

【JavaEE】Spring核心与设计思想(控制反转式程序演示、IoC、DI)

一、什么是Spring&#xff1f; 通常所说的 Spring 指的是 Spring Framework&#xff08;Spring 框架&#xff09;&#xff0c;它是⼀个开源框架&#xff0c;有着活跃⽽庞⼤的社区&#xff0c;这就是它之所以能⻓久不衰的原因。Spring ⽀持⼴泛的应⽤场景&#xff0c;它可以让 …

陶瓷行业废污水处理使用MES系统的作用

陶瓷行业属于高能耗、高污染行业&#xff0c;生产过程中消耗大量矿产资源和能源&#xff0c;产生的废气、废水、废渣、粉尘等对环境造成严重污染。在近年来&#xff0c;全社会环保意识增强&#xff0c;政府出台了一系列政策、措施加大节能、减排力度&#xff0c;整治行业污染。…

C进阶---动态内存管理

目录 一、为什么存在动态内存分配 1.1静动态内存分配区别&#xff1a; 1.2静态分配的优缺点 1.3动态分配优缺点 二、动态内存函数的介绍 2.1malloc和free 2.2calloc 2.3realloc 三、常见的动态内存错误 3.1对NULL指针的解引用操作 3.2 对动态开辟空间的越界…

「分享学习」SpringCloudAlibaba高并发仿斗鱼直播平台实战完结

[分享学习]SpringCloudAlibaba高并发仿斗鱼直播平台实战完结 第一段&#xff1a;简介 Spring Cloud Alibaba是基于Spring Cloud和阿里巴巴开源技术的微效劳框架&#xff0c;普遍应用于大范围高并发的互联网应用系统。本文将引见如何运用Spring Cloud Alibaba构建一个高并发的仿…

DolphinDB 基于 Glibc 升级的性能优化实战案例

在高并发查询、查询需要涉及很多个分区的情况下&#xff0c;低版本的 glibc&#xff08;低于2.23&#xff09;会严重影响查询性能。需要升级 glibc 解决该问题优化性能。我们撰写了本文&#xff0c;通过 patchelf 工具修改可执行文件和动态库的 rpath&#xff0c;达到无需升级系…

【机器学习】032_多种神经网络层类型

一、密集层 每一层神经元都是上一层神经元的函数&#xff0c;每层每个神经元都从前一层获得所有激活的输入。 整个神经网络前一层与后一层连接在一起&#xff0c;构造的网络密集。 二、卷积层 假设有一张大小为axb像素的图片&#xff0c;上面标着一些手写数字&#xff0c…

【Vue】响应式与数据劫持

目录 前言 响应式 Vue的响应式是如何实现的 数据劫持 Vue中的data属性都具有响应式 Vue后期添加的属性如何使其具有响应式 数组的响应式处理 如何使用数组下标去修改可以具有响应式呢 前言 什么是响应式&#xff1f;数据劫持是什么&#xff1f;Vue响应式是如何实现的&a…

什么是单片机?聊聊它的历史

前言 1946年2月15日&#xff0c;第一台电子数字计算机 ENIAC问世&#xff0c;这标志着计算机时代的到来。 ENIAC 是电子管计算机&#xff0c;时钟频率虽然仅有 100 kHz&#xff0c;但能在1s 的时间内完成 5000 次加法运算。与现代的计算机相比&#xff0c;ENIAC有许多不足&am…

【Dynamic-datasource】Springboot多数据源整合

引入依赖&#xff1a; <dependency><groupId>com.baomidou</groupId><artifactId>dynamic-datasource-spring-boot-starter</artifactId><version>3.5.0</version> </dependency> 整体pom文件&#xff1a; <?xml versi…

激发创新,助力研究:CogVLM,强大且开源的视觉语言模型亮相

项目设计集合&#xff08;人工智能方向&#xff09;&#xff1a;助力新人快速实战掌握技能、自主完成项目设计升级&#xff0c;提升自身的硬实力&#xff08;不仅限NLP、知识图谱、计算机视觉等领域&#xff09;&#xff1a;汇总有意义的项目设计集合&#xff0c;助力新人快速实…

4.3 Windows驱动开发:监控进程与线程对象操作

在内核中&#xff0c;可以使用ObRegisterCallbacks这个内核回调函数来实现监控进程和线程对象操作。通过注册一个OB_CALLBACK_REGISTRATION回调结构体&#xff0c;可以指定所需的回调函数和回调的监控类型。这个回调结构体包含了回调函数和监控的对象类型&#xff0c;还有一个A…

鸿蒙APP外包开发上线流程

鸿蒙系统的上线流程可能会根据具体的版本和平台要求而略有不同。在进行上线之前&#xff0c;开发人员应该详细了解并遵循鸿蒙生态系统的相关规定和要求。鸿蒙&#xff08;HarmonyOS&#xff09;应用的上线流程通常包括以下步骤&#xff0c;希望对大家有所帮助。北京木奇移动技术…

OpenCV入门6——图像基本变换

文章目录 图像的放大与缩小缩放算法题目放大 图像的翻转图像的旋转仿射变换之图像平移仿射变换之获取变换矩阵仿射变换之变换矩阵之二OpenCV透视变换 图像的放大与缩小 缩放算法 # -*- coding: utf-8 -*- import cv2 import numpy as npimg cv2.imread(E://pic//4.jpg) # (600…

瞬态抑制二极管(TVS管)特性及电路应用?|深圳比创达电子EMC

瞬态抑制二极管简称TVS管(Transient Voltage Suppressor) 一、TVS管特性 瞬态抑制二极管是在稳压二极管的工艺上发展起来的,一种用途广泛的高效能保护器件。当TVS二极管的两极受到反向瞬态高能量冲击时&#xff0c;它能以皮秒量级的速度&#xff0c;将其两极间的高阻抗变为低…

qt和window抓包程序

1.思路 使用原始套接字&#xff0c;将网卡设置为混杂模式&#xff0c;监听该网卡的数据。 2. 了解协议封包和协议层 下图是tcp封包详细过程 数据包传输情况 在TCP/IP协议栈中的每一层为了能够正确解析出上层的数据包&#xff0c;从而使用一些“协议类型”来标记&#xff0c;详…

高压放大器使用方法介绍

高压放大器是一种用于放大高压信号的电子设备&#xff0c;常用于科学研究、工业应用和医疗设备等领域。它可以将低电压信号放大到较高的电压水平&#xff0c;以满足特定应用的需求。 使用高压放大器需要注意以下几个方面&#xff1a; 1.了解设备规格&#xff1a;在使用高压放大…

《视觉SLAM十四讲》-- 建图

11 建图 11.1 概述 &#xff08;1&#xff09;地图的几类用处&#xff1a; 定位&#xff1a;导航&#xff1a;机器人在地图中进行路径规划&#xff1b;避障重建交互&#xff1a;人与地图之间的互动 &#xff08;2&#xff09;几类地图 稀疏地图稠密地图语义地图 11.2 单目…