TextBox 样式和模板TextBox Styles and Templates

本主题介绍 TextBox 控件的样式和模板。This topic describes the styles and templates for the TextBox control. 您可以修改默认 ControlTemplate 以使控件具有独特的外观。You can modify the default ControlTemplate to give the control a unique appearance. 有关详细信息,请参阅通过创建 ControlTemplate 自定义现有控件的外观For more information, see Customizing the Appearance of an Existing Control by Creating a ControlTemplate.

TextBox 部分TextBox Parts

下表列出了 TextBox 控件的已命名部分。The following table lists the named parts for the TextBox control.

部件Part 键入Type 描述Description
PART_ContentHostPART_ContentHost FrameworkElement 可包含 FrameworkElement的可视元素。A visual element that can contain a FrameworkElement. TextBox 的文本显示在此元素中。The text of the TextBox is displayed in this element.

TextBox 状态TextBox States

下表列出了 TextBox 控件的可视状态。The following table lists the visual states for the TextBox control.

VisualState 名称VisualState Name VisualStateGroup 名称VisualStateGroup Name 描述Description
普通Normal CommonStatesCommonStates 默认状态。The default state.
MouseOverMouseOver CommonStatesCommonStates 鼠标指针悬停在控件上。The mouse pointer is positioned over the control.
DisabledDisabled CommonStatesCommonStates 已禁用控件。The control is disabled.
ReadOnlyReadOnly CommonStatesCommonStates 用户无法更改 TextBox中的文本。The user cannot change the text in the TextBox.
已设定焦点Focused FocusStatesFocusStates 控件有焦点。The control has focus.
失去焦点Unfocused FocusStatesFocusStates 控件没有焦点。The control does not have focus.
有效Valid ValidationStatesValidationStates 控件使用 Validation 类,并且 HasError 附加属性是 falseThe control uses the Validation class and the HasError attached property is false.
InvalidFocusedInvalidFocused ValidationStatesValidationStates HasError 附加属性是控件具有焦点 trueThe HasError attached property is true has the control has focus.
InvalidUnfocusedInvalidUnfocused ValidationStatesValidationStates HasError 附加属性是 true 控件没有焦点。The HasError attached property is true has the control does not have focus.

TextBox System.windows.controls.controltemplate> 示例TextBox ControlTemplate Example

下面的示例演示如何为 TextBox 控件定义 ControlTemplateThe following example shows how to define a ControlTemplate for the TextBox control.

<Style TargetType="{x:Type TextBox}">
  <Setter Property="SnapsToDevicePixels"
          Value="True" />
  <Setter Property="OverridesDefaultStyle"
          Value="True" />
  <Setter Property="KeyboardNavigation.TabNavigation"
          Value="None" />
  <Setter Property="FocusVisualStyle"
          Value="{x:Null}" />
  <Setter Property="MinWidth"
          Value="120" />
  <Setter Property="MinHeight"
          Value="20" />
  <Setter Property="AllowDrop"
          Value="true" />
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type TextBoxBase}">
        <Border Name="Border"
                CornerRadius="2"
                Padding="2"
                BorderThickness="1">
          <Border.Background>
            <SolidColorBrush Color="{DynamicResource ControlLightColor}" />
          </Border.Background>
          <Border.BorderBrush>
            <SolidColorBrush Color="{DynamicResource BorderMediumColor}" />
          </Border.BorderBrush>
          <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
              <VisualState x:Name="Normal" />
              <VisualState x:Name="Disabled">
                <Storyboard>
                  <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                                Storyboard.TargetProperty="(Panel.Background).
                    (SolidColorBrush.Color)">
                    <EasingColorKeyFrame KeyTime="0"
                                         Value="{StaticResource DisabledControlLightColor}" />
                  </ColorAnimationUsingKeyFrames>
                </Storyboard>
              </VisualState>
              <VisualState x:Name="ReadOnly">
                <Storyboard>
                  <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                                Storyboard.TargetProperty="(Panel.Background).
                    (SolidColorBrush.Color)">
                    <EasingColorKeyFrame KeyTime="0"
                                         Value="{StaticResource DisabledControlDarkColor}" />
                  </ColorAnimationUsingKeyFrames>
                </Storyboard>
              </VisualState>
              <VisualState x:Name="MouseOver" />
            </VisualStateGroup>
          </VisualStateManager.VisualStateGroups>
          <ScrollViewer Margin="0"
                        x:Name="PART_ContentHost" />
        </Border>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

上一示例使用了一个或多个以下资源。The preceding example uses one or more of the following resources.

<!--Control colors.-->
<Color x:Key="WindowColor">#FFE8EDF9</Color>
<Color x:Key="ContentAreaColorLight">#FFC5CBF9</Color>
<Color x:Key="ContentAreaColorDark">#FF7381F9</Color>

<Color x:Key="DisabledControlLightColor">#FFE8EDF9</Color>
<Color x:Key="DisabledControlDarkColor">#FFC5CBF9</Color>
<Color x:Key="DisabledForegroundColor">#FF888888</Color>

<Color x:Key="SelectedBackgroundColor">#FFC5CBF9</Color>
<Color x:Key="SelectedUnfocusedColor">#FFDDDDDD</Color>

<Color x:Key="ControlLightColor">White</Color>
<Color x:Key="ControlMediumColor">#FF7381F9</Color>
<Color x:Key="ControlDarkColor">#FF211AA9</Color>

<Color x:Key="ControlMouseOverColor">#FF3843C4</Color>
<Color x:Key="ControlPressedColor">#FF211AA9</Color>


<Color x:Key="GlyphColor">#FF444444</Color>
<Color x:Key="GlyphMouseOver">sc#1, 0.004391443, 0.002428215, 0.242281124</Color>

<!--Border colors-->
<Color x:Key="BorderLightColor">#FFCCCCCC</Color>
<Color x:Key="BorderMediumColor">#FF888888</Color>
<Color x:Key="BorderDarkColor">#FF444444</Color>

<Color x:Key="PressedBorderLightColor">#FF888888</Color>
<Color x:Key="PressedBorderDarkColor">#FF444444</Color>

<Color x:Key="DisabledBorderLightColor">#FFAAAAAA</Color>
<Color x:Key="DisabledBorderDarkColor">#FF888888</Color>

<Color x:Key="DefaultBorderBrushDarkColor">Black</Color>

<!--Control-specific resources.-->
<Color x:Key="HeaderTopColor">#FFC5CBF9</Color>
<Color x:Key="DatagridCurrentCellBorderColor">Black</Color>
<Color x:Key="SliderTrackDarkColor">#FFC5CBF9</Color>

<Color x:Key="NavButtonFrameColor">#FF3843C4</Color>

<LinearGradientBrush x:Key="MenuPopupBrush"
                     EndPoint="0.5,1"
                     StartPoint="0.5,0">
  <GradientStop Color="{DynamicResource ControlLightColor}"
                Offset="0" />
  <GradientStop Color="{DynamicResource ControlMediumColor}"
                Offset="0.5" />
  <GradientStop Color="{DynamicResource ControlLightColor}"
                Offset="1" />
</LinearGradientBrush>

<LinearGradientBrush x:Key="ProgressBarIndicatorAnimatedFill"
                     StartPoint="0,0"
                     EndPoint="1,0">
  <LinearGradientBrush.GradientStops>
    <GradientStopCollection>
      <GradientStop Color="#000000FF"
                    Offset="0" />
      <GradientStop Color="#600000FF"
                    Offset="0.4" />
      <GradientStop Color="#600000FF"
                    Offset="0.6" />
      <GradientStop Color="#000000FF"
                    Offset="1" />
    </GradientStopCollection>
  </LinearGradientBrush.GradientStops>
</LinearGradientBrush>

有关完整示例,请参阅使用 ControlTemplates 设置样式示例For the complete sample, see Styling with ControlTemplates Sample.

请参阅See also