XAML MaterialDesign 文本框样式的问题:启用时的背景和帮助文本
Issues with XAML MaterialDesign TextBox style: background when enabled and helpertext
我在 XAML 中使用 Material 设计库。我需要重新设置一些组件的样式,因为我正在使用一个特定的文本框,其中有一个可点击的图标。
<StackPanel Orientation="Horizontal" Width="328" Grid.Column="0" Background="#3B3A3A">
<TextBox Style="{StaticResource Style}" materialDesign:HintAssist.Hint="Text" Width="300"
TextWrapping="Wrap" materialDesign:HintAssist.HelperText="Text1"/>
<Button Opacity="1" Padding="2,0,0,0"
Height="53.2"
Background="Transparent"
BorderBrush="Transparent"
Command="{x:Static materialDesign:DialogHost.OpenDialogCommand}"
CommandTarget="{Binding ElementName=DialogSelection}">
<materialDesign:PackIcon Kind="ArrowExpand"/>
</Button>
首先我需要在文本框获得焦点时删除背景,所以在样式中我做了这样的事情:
<Style x:Key="Style" TargetType="TextBox" BasedOn="{StaticResource MaterialDesignFilledTextFieldTextBox}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Border x:Name="border"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
Width="328"
materialDesign:BottomDashedLineAdorner.Thickness="{TemplateBinding Margin}">
<TextBox x:Name="text" TextWrapping="WrapWithOverflow" FontSize="16" FontWeight="Regular" Foreground="White"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="True">
<Setter Property="BorderBrush" TargetName="border" Value="#656565"/>
<Setter Property="Background" Value="#3b3a3a"/>
</Trigger>
<Trigger Property="IsFocused" Value="True">
<Setter Property="BorderBrush" TargetName="border" Value="#00B5CE"/>
<Setter Property="Background" Value="#656565"/>
<Setter Property="BorderThickness" Value="2"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
问题是将此代码用于样式(使用控件模板)我没有可用的帮助文本。我怎样才能把这两件事结合起来? (我的意思是当文本框处于焦点状态且 HelperText 可用时我对背景的设置?)
注意:如果我不修改模板而只是设置背景,当文本框 isFocused 时,背景可能不是我想要的,但 HelperText 是可见的
你不能“结合”ControlTemplates
。您必须将模板定义为一个整体。
这意味着您应该复制 MaterialDesignFilledTextFieldTextBox
中包含帮助文本的默认模板,然后根据您的要求对其进行修改,即向其添加 IsFocused
触发器。
恐怕您无法将模板基于另一个模板或将触发器添加到在别处定义的模板。
它不起作用,因为您覆盖了 TextBox
的控件模板并省略了它正常工作所需的大部分内容。控件模板定义控件的视觉外观,以及它们之间的状态和转换。您不能像使用样式那样基于另一个控件模板。创建自定义控件模板意味着:
- 使用所有必需的状态和部分从头开始创建它或
- 正在复制 base/default 样式并进行调整。
对于标准 WPF 控件,您可以在文档中找到所需的部分和状态,例如对于 TextBox
here。省略任何必需的组件将导致意外行为或损坏的视觉状态。在 Material 设计的情况下,要使控件正常工作还需要更多的东西,但它们没有像 MSDN 上那样的文档,因此您必须创建默认样式的副本并进行调整。
您可以找到 TextBox
here on Github. In newer versions, the styles are renamed to MaterialDesignFilledTextBox
because of this issue 的默认样式。派生样式层级如下:
MaterialDesignTextBoxBase
MaterialDesignFloatingHintTextBox
MaterialDesignFloatingHintTextBox
MaterialDesignFilledTextFieldTextBox
控件模板在 MaterialDesignTextBoxBase
中定义,它是所有其他样式的基础样式。您现在要做的是复制 MaterialDesignTextBoxBase
样式,为其命名并按照您提供的代码调整状态。您可以将上述三种派生样式的setter合并到您的自定义样式中。然后您将拥有一个自定义样式,其中包含所有必要的状态和将按您期望的方式工作的部分。
我在 XAML 中使用 Material 设计库。我需要重新设置一些组件的样式,因为我正在使用一个特定的文本框,其中有一个可点击的图标。
<StackPanel Orientation="Horizontal" Width="328" Grid.Column="0" Background="#3B3A3A">
<TextBox Style="{StaticResource Style}" materialDesign:HintAssist.Hint="Text" Width="300"
TextWrapping="Wrap" materialDesign:HintAssist.HelperText="Text1"/>
<Button Opacity="1" Padding="2,0,0,0"
Height="53.2"
Background="Transparent"
BorderBrush="Transparent"
Command="{x:Static materialDesign:DialogHost.OpenDialogCommand}"
CommandTarget="{Binding ElementName=DialogSelection}">
<materialDesign:PackIcon Kind="ArrowExpand"/>
</Button>
首先我需要在文本框获得焦点时删除背景,所以在样式中我做了这样的事情:
<Style x:Key="Style" TargetType="TextBox" BasedOn="{StaticResource MaterialDesignFilledTextFieldTextBox}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Border x:Name="border"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
Width="328"
materialDesign:BottomDashedLineAdorner.Thickness="{TemplateBinding Margin}">
<TextBox x:Name="text" TextWrapping="WrapWithOverflow" FontSize="16" FontWeight="Regular" Foreground="White"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="True">
<Setter Property="BorderBrush" TargetName="border" Value="#656565"/>
<Setter Property="Background" Value="#3b3a3a"/>
</Trigger>
<Trigger Property="IsFocused" Value="True">
<Setter Property="BorderBrush" TargetName="border" Value="#00B5CE"/>
<Setter Property="Background" Value="#656565"/>
<Setter Property="BorderThickness" Value="2"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
问题是将此代码用于样式(使用控件模板)我没有可用的帮助文本。我怎样才能把这两件事结合起来? (我的意思是当文本框处于焦点状态且 HelperText 可用时我对背景的设置?)
注意:如果我不修改模板而只是设置背景,当文本框 isFocused 时,背景可能不是我想要的,但 HelperText 是可见的
你不能“结合”ControlTemplates
。您必须将模板定义为一个整体。
这意味着您应该复制 MaterialDesignFilledTextFieldTextBox
中包含帮助文本的默认模板,然后根据您的要求对其进行修改,即向其添加 IsFocused
触发器。
恐怕您无法将模板基于另一个模板或将触发器添加到在别处定义的模板。
它不起作用,因为您覆盖了 TextBox
的控件模板并省略了它正常工作所需的大部分内容。控件模板定义控件的视觉外观,以及它们之间的状态和转换。您不能像使用样式那样基于另一个控件模板。创建自定义控件模板意味着:
- 使用所有必需的状态和部分从头开始创建它或
- 正在复制 base/default 样式并进行调整。
对于标准 WPF 控件,您可以在文档中找到所需的部分和状态,例如对于 TextBox
here。省略任何必需的组件将导致意外行为或损坏的视觉状态。在 Material 设计的情况下,要使控件正常工作还需要更多的东西,但它们没有像 MSDN 上那样的文档,因此您必须创建默认样式的副本并进行调整。
您可以找到 TextBox
here on Github. In newer versions, the styles are renamed to MaterialDesignFilledTextBox
because of this issue 的默认样式。派生样式层级如下:
MaterialDesignTextBoxBase
MaterialDesignFloatingHintTextBox
MaterialDesignFloatingHintTextBox
MaterialDesignFilledTextFieldTextBox
控件模板在 MaterialDesignTextBoxBase
中定义,它是所有其他样式的基础样式。您现在要做的是复制 MaterialDesignTextBoxBase
样式,为其命名并按照您提供的代码调整状态。您可以将上述三种派生样式的setter合并到您的自定义样式中。然后您将拥有一个自定义样式,其中包含所有必要的状态和将按您期望的方式工作的部分。