WPF参考做的TextBox圆角，并且水印文字操作

news/2024/10/11 0:10:39/

1.首先进行 转换器操作（获取当前Textbox Text是否为空或者空格）
/

// <summary>/// 非空验证转换器/// </summary>#region String IsNullOrEmptypublic class IsNullOrEmptyConverter : IValueConverter{public object Convert(object value, Type targetType, object parameter, CultureInfo culture){return string.IsNullOrEmpty((string)value);}public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture){return DependencyProperty.UnsetValue;}}#endregion 

2.设置附加属性给Textbox

   public class TextBoxHelper{#region Watermarkpublic static string GetWatermark(DependencyObject obj){return (string)obj.GetValue(WatermarkProperty);}public static void SetWatermark(DependencyObject obj, string value){obj.SetValue(WatermarkProperty, value);}public static readonly DependencyProperty WatermarkProperty =DependencyProperty.RegisterAttached("Watermark", typeof(string), typeof(TextBoxHelper));#endregion}

3,设定样式：

  <Style x:Key="HelperTextWaterCanEdit" TargetType="{x:Type TextBox}"><Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/><Setter Property="BorderBrush" Value="{StaticResource TextBox.Static.Border}"/><Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/><Setter Property="BorderThickness" Value="1"/><Setter Property="KeyboardNavigation.TabNavigation" Value="None"/><Setter Property="HorizontalContentAlignment" Value="Left"/><Setter Property="FocusVisualStyle" Value="{x:Null}"/><Setter Property="AllowDrop" Value="true"/><Setter Property="ScrollViewer.PanningMode" Value="VerticalFirst"/><Setter Property="Stylus.IsFlicksEnabled" Value="False"/> <Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type TextBox}"><Border x:Name="BackBorder" SnapsToDevicePixels="true"          Width="{TemplateBinding Width}" Height="{TemplateBinding Height}"  VerticalAlignment="{TemplateBinding VerticalAlignment}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}"  Background="{TemplateBinding Background}" CornerRadius="5"  BorderThickness="{TemplateBinding BorderThickness}" Tag="{TemplateBinding Tag}" BorderBrush="{TemplateBinding BorderBrush}"><Grid><Grid.ColumnDefinitions><ColumnDefinition Width="*"/><ColumnDefinition Width="35"/></Grid.ColumnDefinitions><ScrollViewer  Grid.Column="0" x:Name="PART_ContentHost" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/><TextBlock  x:Name="tbWatermark"Grid.Column="0"Padding="2,0"Margin="{TemplateBinding Padding}"Foreground="{TemplateBinding Foreground}"FontSize="{TemplateBinding FontSize}"TextWrapping="Wrap"Focusable="False"IsHitTestVisible="False"Visibility="Collapsed"Text="{Binding Path=(local:TextBoxHelper.Watermark),RelativeSource={RelativeSource AncestorType=TextBox}, Mode=OneWay}"VerticalAlignment="Center"HorizontalAlignment="Left"Opacity="0.5" /><TextBlock Name="Danwei" Grid.Column="1" Text="{Binding Tag, RelativeSource={RelativeSource AncestorType=TextBox, Mode=FindAncestor}}" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,0,5,0"/> </Grid></Border><ControlTemplate.Triggers><DataTrigger Binding="{Binding Text,RelativeSource={RelativeSource Self},Converter={StaticResource IsNullOrEmptyConverter }}"  Value="True"><Setter Property="Visibility" TargetName="tbWatermark" Value="Visible" /></DataTrigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style>

其中有个需要设定 附件属性的地方就是（本次我们把操作类放在同一个文件夹所以使用Local 就可以找到对应的属性）：

  Text="{Binding Path=(local:TextBoxHelper.Watermark),RelativeSource={RelativeSource AncestorType=TextBox}, Mode=OneWay}"

但是因为转换类是在其他方法内，所以此地需要引入操作

  <DataTrigger Binding="{Binding Text,RelativeSource={RelativeSource Self},Converter={StaticResource IsNullOrEmptyConverter }}"  Value="True">

引入的写法和xaml标准方法： 引入地址

xmlns:local1="clr-namespace:海王牌位系统.CommonInMy.Converter">

设定本地读取key

<local1:IsNullOrEmptyConverter x:Key="IsNullOrEmptyConverter"/>

4 应用在界面的xaml下的操作：引入Key

 <Window.Resources><ResourceDictionary><ResourceDictionary.MergedDictionaries><ResourceDictionary Source="../CommonInMy/Styles/TextBoxStyle.xaml"></ResourceDictionary></ResourceDictionary.MergedDictionaries></ResourceDictionary></Window.Resources>

当然也要引用附加属性所在地址：

xmlns:Local1="clr-namespace:海王牌位系统.CommonInMy.Styles"

使用在textbox下的操作：

  <TextBox Name="GetText" Width="200" Tag="Kg" Height="30" Style="{DynamicResource  HelperTextWaterCanEdit}" Local1:TextBoxHelper.Watermark="你觉得好吗" ></TextBox>

其中水印 就是附加属性 设定的text ，Tag则单位的显示数据。
效果如下：使用text 读出来的实际就是textbox里的值
在这里插入图片描述

使用附加属性操作水印建议推荐先拜读这篇文章
https://blog.csdn.net/qq_39488878/article/details/126251868

使用圆角以及水印加入单位推荐拜读这个
https://cloud.tencent.com/developer/article/1513535
其中原来的样式是粘贴下直接可以使用，确定就是水印不能自己随意修改：

 <SolidColorBrush x:Key="TextBox.Static.Border" Color="#FFABAdB3"/><SolidColorBrush x:Key="TextBox.MouseOver.Border" Color="#FF7EB4EA"/><SolidColorBrush x:Key="TextBox.Focus.Border" Color="#FF569DE5"/><VisualBrush x:Key="HintText" TileMode="None" Opacity="0.5" Stretch="None" AlignmentX="Left"><VisualBrush.Visual><TextBlock FontStyle="Italic" Text="请输入数据"/></VisualBrush.Visual></VisualBrush><Style x:Key="TBoxLightWatermarkWithUnit" TargetType="{x:Type TextBox}"><Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/><Setter Property="BorderBrush" Value="{StaticResource TextBox.Static.Border}"/><Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/><Setter Property="BorderThickness" Value="1"/><Setter Property="KeyboardNavigation.TabNavigation" Value="None"/><Setter Property="HorizontalContentAlignment" Value="Left"/><Setter Property="FocusVisualStyle" Value="{x:Null}"/><Setter Property="AllowDrop" Value="true"/><Setter Property="ScrollViewer.PanningMode" Value="VerticalFirst"/><Setter Property="Stylus.IsFlicksEnabled" Value="False"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type TextBox}"><Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True"CornerRadius="2"><Grid><Grid.ColumnDefinitions><ColumnDefinition Width="*"/><ColumnDefinition Width="35"/></Grid.ColumnDefinitions><ScrollViewer Grid.Column="0" x:Name="PART_ContentHost" Focusable="false" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"/><TextBlock Grid.Column="1" Text="mm" VerticalAlignment="Center" Margin="0,0,5,0"/></Grid></Border><ControlTemplate.Triggers><Trigger Property="IsEnabled" Value="false"><Setter Property="Opacity" TargetName="border" Value="0.56"/></Trigger><Trigger Property="IsMouseOver" Value="true"><Setter Property="BorderBrush" TargetName="border" Value="{StaticResource TextBox.MouseOver.Border}"/></Trigger><Trigger Property="IsKeyboardFocused" Value="true"><Setter Property="BorderBrush" TargetName="border" Value="{StaticResource TextBox.Focus.Border}"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter><Style.Triggers><MultiTrigger><MultiTrigger.Conditions><Condition Property="IsInactiveSelectionHighlightEnabled" Value="true"/><Condition Property="IsSelectionActive" Value="false"/></MultiTrigger.Conditions><Setter Property="SelectionBrush" Value="{DynamicResource {x:Static SystemColors.InactiveSelectionHighlightBrushKey}}"/></MultiTrigger><Trigger Property="Text" Value="{x:Null}"><Setter Property="Background" Value="{StaticResource HintText}"/></Trigger><Trigger Property="Text" Value=""><Setter Property="Background" Value="{StaticResource HintText}"/></Trigger></Style.Triggers></Style>

http://www.ppmy.cn/news/1506800.html

相关文章

【Linux基础】Linux基本指令(二)

【Linux基础】Linux基本指令(二)

目录 &#x1f680;前言一&#xff0c;mv指令二&#xff0c;more & less指令2.1 more 指令2.1 less指令 三&#xff0c;重定向技术(重要)3.1 echo指令3.2 输出重定向 >3.3 追加重定向 >>3.4 输入重定向 < 四&#xff0c;head & tail指令4.1 head 指令4.2 t…
阅读更多...
excel中有些以文本格式存储的数值如何批量转换为数字

excel中有些以文本格式存储的数值如何批量转换为数字

一、背景 1.1 文本格式存储的数值特点 在平时工作中有时候会从别地方导出来表格&#xff0c;表格中有些数值是以文本格式存储的&#xff08;特点&#xff1a;单元格的左上角有个绿色的小标&#xff09;。 1.2 文本格式存储的数值在排序时不符合预期 当我们需要进行排序的时候…
阅读更多...
# 利刃出鞘_Tomcat 核心原理解析（三）

# 利刃出鞘_Tomcat 核心原理解析（三）

利刃出鞘_Tomcat 核心原理解析&#xff08;三&#xff09; 一、 Tomcat专题 - Tomcat架构 - 启动流程 1、Tomcat 启动流程 2、Tomcat 启动 步骤 : 1&#xff09; 启动tomcat &#xff0c; 需要调用 bin/startup.bat (在linux 目录下 , 需要调用 bin/startup.sh) &#xff0c…
阅读更多...
【每日一题 | 组成原理】指令流水线

【每日一题 | 组成原理】指令流水线

知识点与总结 指令流水线的本质是提高指令执行的并行性与效率&#xff0c;对比单周期处理器一起学习。掌握下图的并行逻辑理解基础上记忆此公式&#xff1a;T &#xff08;mn-1&#xff09;* t&#xff0c;其中m为流水段个数&#xff0c;n为指令条数&#xff0c;t为分割时间。…
阅读更多...
微信小程序教程012：全局配置：tabBar

微信小程序教程012：全局配置：tabBar

文章目录 2、tabBar2.1 什么是tabBar2.2 tabBar 的 6 个组成部分2.3 tabBar的节点配置项2.4 每个 tab 项的配置选项2、tabBar 2.1 什么是tabBar tabBar 是移动端应用常见的页面效果，用于实现多页面 的快速切换。小程序中通常将其分为： 底部 tabBar顶部 tabBar注意 tabBar中…
阅读更多...
【Git】git 从入门到实战系列（三）—— 创建版本库

【Git】git 从入门到实战系列（三）—— 创建版本库

文章目录 一、前言二、创建仓库1、创建文件夹2、进入文件夹3、初始化 Git4、添加文件5、将文件添加到仓库6、提交更改7、查看提交记录 三、注意点四、总结 一、前言 版本库又名仓库&#xff08;Repository&#xff09;&#xff0c;可以简单理解成一个文件夹&#xff0c;这个文…
阅读更多...
使用ubuntu串口数据收和发不一致问题

使用ubuntu串口数据收和发不一致问题

串口配置 使用virtual Serial Port Driver Pro模拟串口两个串口&#xff0c;com2和com3&#xff0c;使用默认配置&#xff1b;通过virtual box 串口映射功能&#xff0c;在Ubuntu里使用CuteCom打开com2接受和发送数据&#xff0c;在windows里使用com3发送和接收数据。 遇到问…
阅读更多...
SpringCloud 微服务nacos和eureka

SpringCloud 微服务nacos和eureka

Spring是微服务架构&#xff0c;是一种经过良好架构设计的分布式架构方案。 微服务架构有如下特性 单一&#xff1a;微服务拆分粒度小&#xff0c;每一个服务都对应唯一的业务能力&#xff0c;做到单一职责&#xff0c;避免重复业务开发 面向服务&#xff1a;微服务对外暴漏…
阅读更多...
最新文章

Copyright @ 2022~2023