WPF TextBox实现placeholder

news2024/11/17 19:43:44

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.coloradmin.cn/o/1233907.html

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

相关文章

基于Cortex®-M4F的TM4C123GH6NMRT7R 32位MCU,LM74900QRGERQ1、LM74930QRGERQ1汽车类理想二极管

一、TM4C123GH6NMRT7R IC MCU 32BIT 256KB FLASH 157BGA Tiva™C系列微控制器为设计人员提供了基于ARMCortex™-M的高性能架构&#xff0c;该架构具有广泛的集成功能以及强大的软件和开发工具生态系统。以性能和灵活性为目标&#xff0c;Tiva™C系列架构提供了一个具有FPU的80…

京东商品详情数据接口【京东API接口开发系列】,监控京东价格走势,接口代码示例,可高并发批量获取

京东开放平台提供了API接口来访问京东商品详情。通过这个接口&#xff0c;您可以获取到商品的详细信息&#xff0c;如商品名称、价格、库存量、描述等。 以下是使用京东商品详情API接口的一般步骤&#xff1a; 注册并获取API权限&#xff1a;您需要在京东开放平台上注册并获取…

初级测试工程师必看的功能测试六点要义

前言 根据一份报告&#xff0c;应用程序崩溃导致71&#xff05;的卸载。迫使用户卸载应用程序的其他原因是页面响应时间&#xff0c;混乱的UI&#xff0c;电池消耗等。这表明功能测试和非功能测试对于交付用户友好型应用程序的重要性。 一、测试基础的重要性 作为一名测试新…

js实现全选按钮

目录 html代码 css代码 js代码 完整代码 html代码 先把整体结构样式写出来 <table><thead><tr><th class"allCheck"><input type"checkbox" name"" id"checkAll" /><span class"all"&…

VCP-DCV VMware vSphere,即将开课~想了解点击查看

VCP-DCV VMware vSphere 本周开课~ 想报名的必须提前预约啦 &#x1f447;&#x1f447;&#x1f447; 课程介绍 本课程重点讲授如何安装、配置和管理VMware vSphere 8.0&#xff08;包括VMware ESXi™ 8.0和VMware vCenter Server™ 8.0&#xff09; 本课程将帮助您做好…

「编程学习书籍总结」提升个人能力从读书开始

✍️作者简介&#xff1a;码农小北&#xff08;专注于Java、Android、Web、TCP/IP等技术方向&#xff09; &#x1f433;博客主页&#xff1a; 开源中国、稀土掘金、51cto博客、博客园、知乎、简书、慕课网、CSDN &#x1f514;如果文章对您有一定的帮助请&#x1f449;关注✨、…

音视频开发是不是C++开发中最难的细分方向?

音视频开发是不是C开发中最难的细分方向&#xff1f; 是不是最难不敢说(毕竟数据库、Office、 大型游戏可能更难)&#xff0c;但确实也已经很难 了。至少对我 这种主要搞web前端的人来说&#xff0c;真的有那种力不从心的感觉。最近很多小伙伴找我&#xff0c;说想要一些音视频…

设计模式系列:三、责任链设计模式

一、概述 责任链模式是一种行为设计模式&#xff0c;它允许多个对象处理一个请求&#xff0c;从而避免了请求的发送者和接收者之间的耦合关系。 优点是把任务划分为一个一个的节点&#xff0c;然后按照节点之间的业务要求、顺序&#xff0c;把一个个节点串联起来&#xff0c;…

Vulnhub 解决虚拟机网络问题

前言&#xff1a; 有的时候&#xff0c;我们从vulnhub官网下载ovf文件导入到虚拟机后&#xff0c;使用扫描器扫描存活的时候发现扫不到靶机的IP&#xff0c;这是因为虚拟机的网卡配置有问题。我们需要进安全模式修改一些配置。 1. 在虚拟机开机的时候按一下上下键&#xff0c;让…

全国的科技创新情况数据分享,涵盖2020-2022年三年情况

随着国家对科技创新的重视和大力支持&#xff0c;全国的科技创新情况越来越受到关注。 我们根据中国城市统计年鉴的这方面指标&#xff0c;分析汇总得出全国科技创新情况数据&#xff0c;需要说明的是&#xff0c;由于统计年鉴指标调整&#xff0c;每一年的数据并非字段相同&a…

Ubuntu Server download

前言 Ubuntu——公共云、数据中心和边缘上最受欢迎的 Linux 发行版。自成立以来&#xff0c;Ubuntu 一直在获得市场份额&#xff0c;截至今天已接近 50%。 Ubuntu Server download VersionUbuntu Server 其它主机型号版本Ubuntu AMD历史版下载百度云Ubuntu Server all Ubuntu…

onnx模型转换opset版本和固定动态输入尺寸

背景&#xff1a;之前我想把onnx模型从opset12变成opset12&#xff0c;太慌乱就没找着&#xff0c;最近找到了官网上有示例的&#xff0c;大爱onnx官网&#xff0c;分享给有需求没找着的小伙伴们。 1. onnx模型转换opset版本 官网示例&#xff1a; import onnx from onnx im…

python3函数

1、定义函数 函数代码块以def关键词开头&#xff0c;后接函数标识符名称和圆括号任何传入参数和自变量必须放在圆括号中间&#xff0c;圆括号之间可以用于定义参数函数内容以冒号&#xff1a;起始&#xff0c;并且缩进return【表达式】结束函数&#xff0c;选择性返回一个值调…

【数据结构(三)】双向链表(2)

文章目录 1. 基本概念2. 管理双向链表的思路3. 代码实现 1. 基本概念 管理单向链表的缺点分析: ①单向链表&#xff0c;查找的方向只能是一个方向&#xff0c;而双向链表可以向前或者向后查找。     ②单向链表不能自我删除&#xff0c;需要靠辅助节点 &#xff0c;而双向…

Ubuntu18.04安装LeGO-LOAM保姆级教程

系统环境&#xff1a;Ubuntu18.04.6 LTS 1.LeGO-LOAM的安装前要求&#xff1a; 1.1 ROS安装&#xff1a;参考我的另一篇博客Ubuntu18.04安装ROS-melodic保姆级教程_灬杨三岁灬的博客-CSDN博客文章浏览阅读168次。Ubuntu18.04安装ROS-melodic保姆级教程https://blog.csdn.net/…

拓扑排序-

有向无环图是拓扑排序 拓扑排序将图中所有的顶点排成一个线性序列&#xff0c;使得所有的有向边均从序列的前面指向后面。 拓扑排序使用深度优先搜索来实现&#xff0c;图中有环则无法进行拓扑排序 一个有向图&#xff0c;如果图中有入度为0的点&#xff0c;就把这个点删掉…

最全面的SHEIN开店流程,手把手教你从零起步,轻松开店!

SHEIN作为一家全球性的时尚电商平台&#xff0c;为年轻人提供了更多时尚选择和机会&#xff0c;同时也吸引了众多跨境电商卖家的关注。在5月份&#xff0c;SHEIN推出了第三方卖家平台&#xff0c;为卖家提供了全新的商机和发展赛道。毕竟目前SHEIN平台的流量是非常大的&#xf…

机器学习第11天:降维

文章目录 机器学习专栏 主要思想 主流方法 投影 二维投射到一维 三维投射到二维 流形学习 PCA主成分分析 介绍 代码 内核PCA 具体代码 LLE 结语 机器学习专栏 机器学习_Nowl的博客-CSDN博客 主要思想 介绍&#xff1a;当一个任务有很多特征时&#xff0c;我们…

【ISP】噪声--sensor(2)

1.热噪声 也叫KT/C噪声&#xff0c;或者叫暗电流噪声。电子的热运动的导致&#xff0c;温度上升&#xff0c;噪声增大。 2.FPN固定模式噪声 由于每个像素点的元器件制造的会有偏差&#xff0c;也就是这些器件的工作参数相对理论值的漂移就构成一种固定模式噪声。 3.光子散粒噪…

CHINTERGEO2023中国测绘地理信息技术装备展览会,大势智慧在3010展台期待您的莅临!

11月27日-11月29日 CHINTERGEO2023中国测绘地理信息技术装备展览会 二层-HALL3展厅-3010 大势智慧携符合信创要求的实景三维软硬件全流程解决方案 为您带来一场全国产、真安全的实景三维新型智能测绘装备盛宴 期待您的莅临&#xff01;