【WPF开发】控件介绍-TextBox（文本输入框）

一、基本介绍

1. TextBox 控件作用

TextBox 控件是 WPF 中用于接收和显示用户单行或多行文本输入的基本控件。它通常用于实现用户输入文本的场景，例如登录界面的用户名和密码输入框，搜索框，或者用于显示和编辑文本内容的场景。

2. UI 设计技巧

在设计 UI 时，合理使用 TextBox 控件可以提升用户体验和界面的美观度：

• 布局和位置：根据设计的整体风格和布局，合理放置 TextBox，使其与其他控件和元素协调一致。
• 大小和间距：控制 TextBox 的大小和周围的间距，使其既能够显示足够的内容，又不占用过多的空间。
• 字体和颜色：选择合适的字体样式、大小和颜色，确保文本清晰可读，并与整体 UI 风格一致。
• 提示信息：使用水印文本或者合适的默认值，引导用户正确输入内容，增强交互性。
• 输入反馈：设计良好的输入反馈机制，如即时验证、输入格式化或输入内容的实时反馈，提高用户体验。

3. 样式技巧

通过样式化 TextBox 控件，可以使其与应用程序的整体风格和需求更加契合：

• 自定义样式：使用 WPF 的样式和模板功能，定义 TextBox 的外观、边框样式、背景色等，以及文本框的圆角、边框颜色等属性。

  <Style TargetType="TextBox" x:Key="CustomTextBoxStyle">
      <Setter Property="BorderThickness" Value="1" />
      <Setter Property="BorderBrush" Value="Gray" />
      <Setter Property="Background" Value="LightGray" />
      <Setter Property="Foreground" Value="Black" />
      <Setter Property="Template">
          <Setter.Value>
              <ControlTemplate TargetType="TextBox">
                  <Border Background="{TemplateBinding Background}"
                          BorderBrush="{TemplateBinding BorderBrush}"
                          BorderThickness="{TemplateBinding BorderThickness}"
                          CornerRadius="5">
                      <ScrollViewer x:Name="PART_ContentHost"/>
                  </Border>
              </ControlTemplate>
          </Setter.Value>
      </Setter>
  </Style>

• 动态样式：利用 Triggers 或者 VisualStateManager，根据不同状态（如焦点状态、验证状态）调整 TextBox 的外观和行为，增强交互效果。

  <Style TargetType="TextBox" x:Key="ValidationTextBoxStyle">
      <Style.Triggers>
          <Trigger Property="Validation.HasError" Value="True">
              <Setter Property="BorderBrush" Value="Red" />
          </Trigger>
          <Trigger Property="IsMouseOver" Value="True">
              <Setter Property="Background" Value="LightBlue" />
          </Trigger>
      </Style.Triggers>
  </Style>

• 水印文本：通过自定义控件模板，添加水印文本，当 TextBox 为空时显示提示信息。

  <Style TargetType="TextBox" x:Key="WatermarkTextBoxStyle">
      <Setter Property="Template">
          <Setter.Value>
              <ControlTemplate TargetType="TextBox">
                  <Grid>
                      <Border Background="White"/>
                      <ScrollViewer x:Name="PART_ContentHost" Margin="5,2" />
                      <TextBlock Text="Enter text here..." Foreground="Gray" Visibility="Collapsed"
                                 Margin="5,2" IsHitTestVisible="False"
                                 x:Name="WatermarkText"/>
                  </Grid>
                  <ControlTemplate.Triggers>
                      <MultiTrigger>
                          <MultiTrigger.Conditions>
                              <Condition Property="Text" Value=""/>
                              <Condition Property="IsFocused" Value="False"/>
                          </MultiTrigger.Conditions>
                          <Setter TargetName="WatermarkText" Property="Visibility" Value="Visible"/>
                      </MultiTrigger>
                  </ControlTemplate.Triggers>
              </ControlTemplate>
          </Setter.Value>
      </Setter>
  </Style>

通过合理的设计和样式化，TextBox 控件不仅能够满足基本的输入需求，还可以提升用户界面的整体质量和用户体验。

二、WPF中的TextBox控件的基础

1. 创建TextBox

在 XAML 中创建一个基本的 TextBox 控件：

<TextBox Name="myTextBox" Text="Hello, TextBox!" Width="200" Height="30" />

2. TextBox的常用属性

基本属性：

• Text：用于设置或获取 TextBox 中显示的文本内容。
• Width 和 Height：控制 TextBox 的宽度和高度。
• Name：控件的名称，用于在代码中引用。

选择相关属性：

• SelectionStart 和 SelectionLength：指定文本中当前选择的起始位置和长度。
• SelectedText：获取或设置当前选定的文本。

外观和行为属性：

• MaxLength：设置 TextBox 中可以输入的最大字符数。
• IsReadOnly：指定 TextBox 是否为只读。
• IsEnabled：控制 TextBox 是否可以接收用户输入。

事件相关属性：

• TextChanged：文本内容发生改变时触发的事件。
• PreviewKeyDown 和 KeyDown：键盘按键事件，允许预处理按键事件。
• LostFocus 和 GotFocus：失去焦点和获得焦点时触发的事件。

3. 设置值的示例

private void SetTextBoxValue()
{
    myTextBox.Text = "New Value"; // 设置 TextBox 的文本内容
    myTextBox.IsReadOnly = true; // 设置 TextBox 为只读
    myTextBox.MaxLength = 50; // 设置最大输入字符数
}

三、使用技巧

1. 数据绑定

通过数据绑定可以将 TextBox 的 Text 属性与 ViewModel 中的属性绑定，实现数据的双向绑定：

<TextBox Text="{Binding UserName}" />

2. 自定义TextBox样式

通过样式和模板可以自定义 TextBox 的外观，如修改边框样式、背景色等：

<Style TargetType="TextBox" x:Key="CustomTextBoxStyle">
    <Setter Property="BorderThickness" Value="1" />
    <Setter Property="BorderBrush" Value="Gray" />
    <Setter Property="Background" Value="LightGray" />
    <Setter Property="Foreground" Value="Black" />
</Style>

<TextBox Style="{StaticResource CustomTextBoxStyle}" Width="200" Height="30" />

3. 使用Triggers

使用 Triggers 可以在特定条件下改变 TextBox 的外观或行为，例如根据输入内容的有效性改变边框颜色：

<Style TargetType="TextBox" x:Key="ValidationTextBoxStyle">
    <Style.Triggers>
        <Trigger Property="Validation.HasError" Value="True">
            <Setter Property="BorderBrush" Value="Red" />
        </Trigger>
    </Style.Triggers>
</Style>

<TextBox Style="{StaticResource ValidationTextBoxStyle}" Width="200" Height="30" />

四、高级用法

自定义下拉列表项

使用 ItemTemplate 可以自定义 TextBox 中显示的内容，如显示图标或其他自定义控件：

<TextBox>
    <TextBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <Image Source="{Binding Icon}" Width="16" Height="16" />
                <TextBlock Text="{Binding Name}" Margin="5,0,0,0" />
            </StackPanel>
        </DataTemplate>
    </TextBox.ItemTemplate>
</TextBox>

数据绑定到复杂对象

可以通过 Binding Path 指定复杂对象的属性作为 TextBox 的 Text 属性：

<TextBox Text="{Binding Customer.Address}" />

使用Popup和PopupBase

结合 Popup 控件可以实现自定义的下拉框或弹出框效果：

<TextBox>
    <Popup IsOpen="{Binding IsPopupOpen}">
        <Border Background="White" BorderBrush="Gray" BorderThickness="1">
            <!-- Popup 中的内容 -->
        </Border>
    </Popup>
</TextBox>

实现ICommand绑定

通过 ICommand 接口和 MVVM 模式，可以实现将 TextBox 的事件与 ViewModel 中的命令绑定，实现更好的代码分离和可测试性。

五、使用TextBox的注意事项

• 性能考虑：大量使用 TextBox 可能会影响应用程序的性能，尤其是在处理大量文本输入时应注意优化。
• 输入验证和安全性：始终进行输入验证，避免用户输入恶意内容或导致程序崩溃的特殊字符。
• 文本处理的复杂性：针对复杂的文本处理需求，如格式化文本或特殊字符处理，需谨慎设计。
• 跨平台和响应式设计：考虑到不同设备和屏幕分辨率下的适配问题，确保 TextBox 在各种环境中正常显示和操作。