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的内容才比能竖直居中显示。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

虾皮网同行数据丨虾皮数据工具-知虾:监控竞争对手数据的利器

在如今的电商竞争激烈的市场中&#xff0c;了解竞争对手的销售情况和策略对于制定自己的营销策略至关重要。虾皮网作为一家知名的电商平台&#xff0c;提供了一款强大的同行数据工具-知虾&#xff0c;可以帮助卖家监控竞争对手的数据&#xff0c;为自己的业务发展提供有力支持。…

部署Kubernetes Dashboard

Dashboard简介 Dashboard 是基于网页的 Kubernetes 用户界面。 可以使用 Dashboard 将容器应用部署到 Kubernetes 集群中&#xff0c;也可以对容器应用排错&#xff0c;还能管理集群资源。 Dashboard创建 #创建pods kubectl apply -f https://raw.githubusercontent.com/kub…

动手学深度学习(三)---Softmax回归

文章目录 一、理论知识 softmax回归 一、理论知识 回归估计一个连续值分类预测一个离散类别 回归单连续数值输出自然区间R跟真实值的区别作为损失 分类通常多个输出输出i是预测为第i类的置信度 一般我们使用交叉熵用来衡量两个概率的区别 将它作为损失 其梯度是真实概率和…

重磅解读 | 阿里云 云网络领域关键技术创新

云布道师 10 月 31 日&#xff0c;杭州云栖大会&#xff0c;阿里云技术主论坛带来了一场关于阿里云主力产品与技术创新的深度解读&#xff0c;阿里云网络产品线负责人祝顺民带来《云智创新&#xff0c;网络随行》的主题发言&#xff0c;针对阿里云飞天洛神云网络&#xff08;下…

CMake 判断操作系统类型

上回的CMakeLists.txt里面有一句,if (WIN32)......endif(WIN32); 根据资料,这是判断操作系统是否是Windows; 下面单独看一下; 一个CMakeLists.txt文件如下; if(WIN32)# 如果是 Windowsmessage("当前操作系统为 Windows") elseif(UNIX AND NOT APPLE)# 如果…

【Mysql学习笔记】- 2 多表查询

一、加强查询 where子句&#xff0c;oder by子句 -- 查询加强 -- ■ 使用where子句 -- ?如何查找1992.1.1后入职的员工 -- 老师说明&#xff1a; 在mysql中,日期类型可以直接比较, 需要注意格式 SELECT * FROM empWHERE hiredate > 1992-01-01 -- ■ 如何使用like操作符…

自动化物流运输设备模组要选择哪种类型?

在自动化物流运输设备中&#xff0c;选择合适的模组类型取决于具体的运输需求和应用场景。 1、同步带模组&#xff1a;同步带模组是一种低噪音、低成本的物流运输设备&#xff0c;适用于中短距离、轻型货物的运输。它采用同步带传动的方式&#xff0c;具有传动准确、运行稳定、…

Linux应用开发基础知识——网络通信编程(九)

前言&#xff1a; 通过学习为后续Linux网络编程奠定基础。首先介绍网络编程的概念&#xff0c;即网络协议分层&#xff0c;旨在帮助读者对网络建立初步的、全面立体的认识&#xff0c;其次介绍包括协议、端口、地址等&#xff1b;最后介绍应用非常广泛的传输控制协议&#xff0…

Nature文章|博士后对就业更有信心 但仍是学术界的苦力

《自然》&#xff08;Nature&#xff09;杂志近期发表的全球博士后调查发现&#xff0c;新冠造成的负面影响已经下降&#xff0c;博士后对就业前景更有信心。但是&#xff0c;博士后仍然是学术界的苦力劳动者。鉴于很多博士后申请者关注这些问题&#xff0c;所以知识人网小编全…

C语言-求一个整数储存在内存中的二进制中1的个数

#define _CRT_SECURE_NO_WARNINGS #include<stdio.h>int main() {/*求一个整数储存在内存中的二进制中1的个数*/int number;scanf("%d", &number);int i 0;int count 0;for (i 0; i < 32; i){if (1 ((number >> i) & 1)){count;}}printf(…

坑惨啦!!!——符号冲突案例分析

背景 前段时间在北汽项目中&#xff0c;遇到了一个奇怪现象&#xff1a;程序启动之后&#xff0c;偶现运行一段时间后&#xff0c;crash&#xff0c;复现频率较高。困扰了大家较长时间。最终在和同事的不懈努力下&#xff0c;找到的根因&#xff0c;并找到了解决方法。过程中也…

Java语言的特点||运算符

Java语言的特点||运算符 1&#xff1a;2&#xff1a;JDK, JRE&#xff0c;JVM知识&#xff1a;3&#xff1a;注释4&#xff1a;标识符5&#xff1a; Java编译过程&#xff1a;6&#xff1a;赋值7&#xff1a;switch8:布尔表达式9&#xff1a;判定素数10&#xff1a;打印 1 - 10…

代码随想录二刷 | 链表 | 翻转链表

代码随想录二刷 &#xff5c; 链表 &#xff5c; 翻转链表 题目描述解题思路 & 代码实现双指针法递归法 206.翻转链表 题目描述 给你单链表的头节点 head &#xff0c;请你反转链表&#xff0c;并返回反转后的链表。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4…

VR全景打造亮眼吸睛创意内容:三维模型、实景建模

随着VR技术在不同行业之间应用落地&#xff0c;市场规模也在快速扩大&#xff0c;VR全景这种全新的视觉体验为我们生活中的许多方面都带来了无限的可能。更加完整的呈现出一个场景或是物体的所有细节&#xff0c;让浏览者感受到自己仿佛置身于现场一般&#xff1b;其次&#xf…

uni-app:实现request请求的递归(设置request请求的访问次数),并且调用自定义方法给出返回值

一、效果展示 失败效果 成功效果 二、写入后端请求部分 分析 ①自定义一个模块common.js主要用于封装所有的请求函数 ②核心代码 function requestWithRetry(cmd, username, password, retryCount) {return new Promise((resolve, reject) > {uni.request({url: ip sys…

如何修改百科内容?百度百科内容怎么修改?

百科词条创建上去是相当不易的&#xff0c;同时修改也是如此&#xff0c;一般情况下&#xff0c;百科词条是不需要修改的&#xff0c;但是很多时候企业或是人物在近期收获了更多成就或是有更多的变动&#xff0c;这个时候就需要补充维护词条了&#xff0c;如何修改百科内容&…

视频剪辑技巧:如何高效地将多个视频合并成一个新视频

在视频制作过程中&#xff0c;将多个视频合并成一个新视频是一个常见的操作。这涉及到将多个片段组合在一起&#xff0c;或者将不同的视频素材进行混剪。无论是制作一部完整的影片&#xff0c;还是为社交媒体提供短视频&#xff0c;都要掌握如何高效地将多个视频合并。现在一起…

ssm青少年航天知识科普网站-计算机毕设 附源码59487

青少年航天知识科普网站 摘 要 科技进步的飞速发展引起人们日常生活的巨大变化&#xff0c;电子信息技术的飞速发展使得电子信息技术的各个领域的应用水平得到普及和应用。信息时代的到来已成为不可阻挡的时尚潮流&#xff0c;人类发展的历史正进入一个新时代。在现实运用中&am…

静态文件鉴权

​ 静态文件鉴权的解决方案 背景介绍 XX业务系统作为BXX业务系统的孪生姐妹系统&#xff0c;是对BXX受理业务的强力补充系统&#xff0c;他允许操作员拿着IPAD&#xff0c;和客户约定地点上门受理业务。 因一些业务的受理&#xff0c;按照最新的业务规章制度&#xff0c;需…

[Mac软件]Downie 4.6.34视频下载工具

以下是关于Downie软件的介绍&#xff1a; Downie是一款非常实用的视频下载软件&#xff0c;专门为Mac用户设计。这款软件的使用方法非常简单&#xff0c;只需要将想要下载的视频链接复制到Downie的界面&#xff0c;它就能够自动下载。 Downie最大的特点就是支持的网站非常多&a…