wpf Prism 文本框提示文字

2020/6/23     更新一个更简单的方法,用datatrigger触发器,当textbox文本为空字符串时,将上层的textblock的Visibility设置为Visibility(原本是Collapsed),具体代码如下:

 1         <Style x:Key="LoginTextBox" TargetType="TextBox">
 2             <Setter Property="Width" Value="200"/>
 3             <Setter Property="Height" Value="30"/>
 4             <Setter Property="Template">
 5                 <Setter.Value>
 6                     <ControlTemplate TargetType="TextBox">
 7                         <Border BorderBrush="#778899" BorderThickness="1" Background="White" CornerRadius="5">
 8                             <Grid>
 9                                 <Grid.ColumnDefinitions>
10                                     <ColumnDefinition Width="1*"/>
11                                     <ColumnDefinition Width="6*"/>
12                                 </Grid.ColumnDefinitions>
13                                 <Border Grid.Column="0" BorderBrush="#778899" BorderThickness="0,0,1,0" Margin="0,5,5,5"/>
14                                 <TextBox x:Name="InputTextBox" Text="" Grid.Column="1" Margin="2,0" FontSize="10" BorderBrush="{x:Null}"
15                                          VerticalAlignment="Center" BorderThickness="0"/>
16                                 <TextBlock x:Name="TipTextBlock" Text="请输入用户名" Grid.Column="1" Margin="2,0" FontSize="10" Foreground="#DCDCDC"
17                                            Visibility="Collapsed" VerticalAlignment="Center" IsHitTestVisible="False"/>
18                             </Grid>
19                         </Border>
20                         <ControlTemplate.Triggers>
21                             <DataTrigger Binding="{Binding ElementName=InputTextBox,Path=Text}" Value="">
22                                 <Setter TargetName="TipTextBlock" Property="Visibility" Value="Visible"/>
23                             </DataTrigger>
24                         </ControlTemplate.Triggers>
25                     </ControlTemplate>
26                 </Setter.Value>
27             </Setter>
28         </Style>

 

 

 

原文:

比如说用户界面的输入文本框

 

 

主要实现的行为:

1.界面打开的时候有提示文本

2.点击文本框时,提示文字消失

3. 删除输入的文字后,重新显示提示文本

 

由于最近学习的是MVVM框架的内容,所以想着要把前后台的代码耦合度尽量降低,因此逻辑会相对复杂一点点(对我这样的初学者而言)

 

主要实现逻辑要点:

1. TextBlock+TextBox,叠加方式,前者提示文本,后者输入文本

    (偶然发现,两个控件哪个在上面会导致不同的结果,所以如果改变顺序的话,以下的逻辑需要重新设计)

2.用TextBox触发器,实现=>点击文本框时(键盘焦点),提示文本“隐藏”(将TextBox的背景设置为White,这里TextBox默认背景为transparent, 所以实际上是TextBox覆盖了TextBlock)

3.用数据绑定的方式,将TextBlock的文本绑定到一个属性上,然后用通知更改的方式实现文本内容的转换(从“ 提示文本 ” 到 “ 无文本 ” ,从 “ 无文本 ” 到 “ 提示文本 ” )

 

更多细节在下面的整体实现过程中:

 

1.新建Style

 

 

 (1.1)触发器:当获取到键盘焦点为true时,将属性Background更改为White

 (1.2)这里要把TextBox的默认背景设置为Transparent,如果不在Style里面设置,反而在Grid里面建立控件时候在设置的话,触发器无法改变Background

             大佬原话 :  触发器触发时要修改的值若不是控件的默认值,就必须在样式中定义,否则触发没效果。

 

 

 

 这里主要两个点,一个是Foreground,设置成灰色,看起来才像是提示文本,一个是IsHitTestVisible为False,简单说就是只能看不能点,点击的时候无视当前的控件,所以会作用于下方的控件

2.各自引用Style、各自绑定Text

 

 

3.在ViewModel文件中定义与Text绑定的字段

 

顾名思义,上面图片中的字段是账号文本,也就是输入账号的文本框控件的文本属性

当get的时候,先判断该字段是否为空,是的话就将TipTBtext赋值,具体作用是当我们完全删除输入的内容时,让提示文本重新显示,

当set的时候,也就是说完成输入之后,将TipTBtext赋空值,这样在当前文本框失去键盘焦点时,TipTBtext的值不会和输入值重叠,产生干扰

当然,还需要对TipTBtext设置通知更改,才能实现上述get,set的内容

 

 

 

 

 上图的字段是提示文本,在set的时候设置通知更改

 4. ViewModel文件构造函数里面给字段赋值

 

 

 

5.

到这里就完成了,当我们打开该界面的时候,TextBox是透明的,显示了TextBlock,这时候TextBlock上面是初值;

当我们点击输入框的时候,由于TextBlock的IsHitTestVisible属性,我们实际点击到的是TextBox,这时候TextBox获取到键盘焦点,触发器启动,将背景设置为白色,

将TextBlock覆盖了(原因不详);

当我们输入完成后,通过通知更改的功能,将TextBlock上的提示文本,改成空白文本,这样一来,当TextBox不再有键盘焦点的时候,TextBox重新变成透明,也不会发生文本重叠;

当我们完全删除输入的文本后,通过通知更改的功能,将TextBlock上的空白文本重新改成提示文本,重新显示。

 

 

 

大致逻辑就是这样,可能会有一些多余的操作,当然也有更好更方便更快的方法,可以的话指点指点。

这里只是记录学习过程中的一些想法~~~~

posted @ 2022-06-21 15:00  JustWantToStudy  阅读(881)  评论(0编辑  收藏  举报