我的 TextBox 控件模板有问题

Question

我正在开发一个简单的文本框模板，它只有两个边框，一个带有渐变背景。现在，我的具体问题是我希望能够将文本框的前景色设置为我想要的任何颜色并使其正常工作。但是，我似乎无法让禁用的前景色和启用的前景色一起工作。例如，如果我将前景设置为红色，则当我禁用文本框时，前景不会更改为我禁用的颜色。我尝试在 IsEnabled="true" 触发器中绑定前景，但这似乎不起作用。无论文本框是否启用，前景始终保持红色。

您能看一下下面的模板并告诉我我做错了什么吗？另外，由于我是创建模板的新手，请向我指出我可能犯的任何其他错误。

多谢。

  <SolidColorBrush x:Key="DisabledForegroundBrush" Color="#888" />
  <SolidColorBrush x:Key="DisabledBackgroundBrush" Color="#EEE" />
  <SolidColorBrush x:Key="WindowBackgroundBrush" Color="#FFF" />
  <SolidColorBrush x:Key="SelectedBackgroundBrush" Color="#DDD" />


<Style x:Key="TextBoxControlTemplate1" TargetType="{x:Type TextBox}">
  <Setter Property="KeyboardNavigation.TabNavigation" Value="None"/>
  <Setter Property="AllowDrop" Value="true"/>
  <Setter Property="Background" Value="#00000000"/>
  <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
  <Setter Property="VerticalContentAlignment" Value="Stretch"/>
  <Setter Property="FontFamily" Value="Segoe UI"/>
  <Setter Property="FontSize" Value="12"/>
  <Setter Property="Padding" Value="8,5,3,3"/>
  <Setter Property="BorderThickness" Value="0"/>
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type TextBox}">
        <Grid>
          <Border BorderBrush="#FF000000" BorderThickness="2,2,2,2" CornerRadius="5,5,5,5" Padding="0,0,0,0" Width="Auto" Height="Auto" Background="#FF000000"/>
          <Border x:Name="Border" BorderBrush="#FFFFFFFF" BorderThickness="1,1,1,1" CornerRadius="5,5,5,5" Padding="0,0,0,0" Width="Auto" Height="Auto" Margin="2,2,2,2">
            <Border.Background>
              <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FF000000" Offset="0"/>
                <GradientStop Color="#FF4D4D4D" Offset="1"/>
              </LinearGradientBrush>
            </Border.Background>
          </Border>
          <ScrollViewer Margin="0" x:Name="PART_ContentHost"/>
        </Grid>
        <ControlTemplate.Triggers>
          <Trigger Property="IsEnabled" Value="False">
            <Setter Property="Background" Value="{DynamicResource DisabledBackgroundBrush}" TargetName="Border"/>
            <Setter Property="BorderBrush" Value="{DynamicResource DisabledBackgroundBrush}" TargetName="Border"/>
            <Setter Property="Foreground" Value="{DynamicResource DisabledForegroundBrush}"/>
          </Trigger>
          <Trigger Property="IsEnabled" Value="True">
            <Setter Property="Foreground" Value="{Binding Path=Foreground, RelativeSource={RelativeSource AncestorType={x:Type TextBox}}}"/>
          </Trigger>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>


<TextBox Text="TEST" TextWrapping="Wrap" Canvas.Top="293.761" Canvas.Left="112" Style="{DynamicResource TextBoxControlTemplate1}" Height="28.724" Width="232.25" IsTabStop="False" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" HorizontalContentAlignment="Right" VerticalContentAlignment="Center" IsEnabled="True" Foreground="#FFFF0000"/>

Answer 1

这里有一些不同的问题都对你不利。第一个是您在控件实例上设置特定的 Foreground 值，该值的优先级高于 Style 中为控件属性设置的 Trigger 值本身。这与ControlTemplate内部元素上设置的属性不同，例如“Border”。您使用Trigger 设置Border 属性的方式就说明了这一点。通常，您还需要使用 TemplateBinding 来引入在控件实例上设置的默认值，例如 Background，这些值当前被忽略。

要在样式化控件上的属性的两个值之间切换（就像您想要对 Foreground 所做的那样），您可以使用 Setter 和 Trigger在您的 Style 中提供默认值和备用值。这仍然可能被实例上设置的值覆盖。如果您想禁止实例覆盖 Trigger，请将其设置为“Border”Trigger，您可以在 ControlTemplate 内的元素上设置值。

我建议的最后一个更改是将您拉入 Style 的画笔切换到 StaticResource。在这种情况下，它可能不会产生任何影响，但在某些情况下，默认样式可以被拉入一个上下文，该上下文没有对其声明的文件中的周围资源有任何引用。使用静态将保证它将包括这些资源，无论其在何处使用。您可能不会遇到这种情况，但在设置这样的样式/模板时这是一个好习惯。

以下是经过这些改进的代码：

<SolidColorBrush x:Key="DisabledForegroundBrush" Color="#888" />
<SolidColorBrush x:Key="DisabledBackgroundBrush" Color="#EEE" />

<Style x:Key="TextBoxControlTemplate1" TargetType="{x:Type TextBox}">
    <Setter Property="KeyboardNavigation.TabNavigation" Value="None"/>
    <Setter Property="AllowDrop" Value="true"/>
    <Setter Property="Background">
        <Setter.Value>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FF000000" Offset="0"/>
                <GradientStop Color="#FF4D4D4D" Offset="1"/>
            </LinearGradientBrush>
        </Setter.Value>
    </Setter>
    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    <Setter Property="VerticalContentAlignment" Value="Stretch"/>
    <Setter Property="FontFamily" Value="Segoe UI"/>
    <Setter Property="FontSize" Value="12"/>
    <Setter Property="Padding" Value="8,5,3,3"/>
    <Setter Property="BorderThickness" Value="2"/>
    <Setter Property="BorderBrush" Value="#FF000000"/>
    <Setter Property="Foreground" Value="Red" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TextBox}">
                <Grid>
                    <!--Take advantage of containment when possible to let the layout engine help you!-->
                    <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="5" Padding="0" Background="#FF000000"/>
                    <Border x:Name="Border" BorderBrush="#FFFFFFFF" BorderThickness="1" CornerRadius="5" Padding="0" Margin="{TemplateBinding BorderThickness}"
                            Background="{TemplateBinding Background}"/>
                    <ScrollViewer Margin="0" x:Name="PART_ContentHost"/>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter Property="Background" Value="{StaticResource DisabledBackgroundBrush}" TargetName="Border"/>
                        <Setter Property="BorderBrush" Value="{StaticResource DisabledBackgroundBrush}" TargetName="Border"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="IsEnabled" Value="False">
            <Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}"/>
        </Trigger>
    </Style.Triggers>
</Style>

以及仅使用 Style 设置的 TextBox：

<TextBox Text="TEST" TextWrapping="Wrap" Canvas.Top="293.761" Canvas.Left="112" Style="{DynamicResource TextBoxControlTemplate1}" 
         Height="28.724" Width="232.25" IsTabStop="False" HorizontalContentAlignment="Right" VerticalContentAlignment="Center" />

Answer 2

可以尝试的几个想法：

1. 摆脱其中一个触发因素。有两个相反的触发因素可能不是一个好主意。我将直接在 Border 声明上设置默认的 Background、BorderBrush 和 Foreground，并删除 >Enabled="True" 触发器。然后，调试只需正确设置 Enabled="False" 触发器即可。

2. 将 TargetName 属性添加到 Enabled="False" 触发器的设置器。

3. 这是一个不太可能的方案，但请使用 UIElement.IsEnabled 而不仅仅是 IsEnabled，如下所示：.

希望我在这里所说的有帮助！

Answer 3

可能的原因是您的 DisabledBackgroundBrush 在您使用样式时不可见。请尝试将样式添加到 ControlTemplate 的资源中：

<ControlTemplate TargetType="{x:Type TextBox}">
    <ControlTemplate.Resources>
        <SolidColorBrush x:Key="DisabledBackgroundBrush" Color="#EEE" />
        ...
    </ControlTemplate.Resources>
    ...

顺便说一句，您的控件模板不支持您的属性值。
例如，您也许应该

<ScrollViewer Margin="{TemplateBinding Padding}" x:Name="PART_ContentHost"/>

在控件模板中使用类似的内容。