WPF progressbar 文字显示 wpf文本框提示文字

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上的空白文本重新改成提示文本，重新显示。

 

 

 

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

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