微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

XAML MaterialDesign TextBox样式的问题:启用背景和helpertext

如何解决XAML MaterialDesign TextBox样式的问题:启用背景和helpertext

我正在XAML中使用Material Design库。我需要重新设置某些组件的样式,因为我使用的是带有可单击图标的特定文本框。

<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"
           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时我的背景设置吗?)

注意:如果我不修改模板而仅设置背景,则会发生文本框为焦点时背景不是我想要的但HelperText可见的情况

解决方法

您不能“合并” ControlTemplates。您必须整体定义模板。

这意味着您应该在MaterialDesignFilledTextFieldTextBox中复制包含帮助者文本的默认模板,然后根据需要进行修改,即通过向其添加IsFocused触发器。

恐怕您不能将一个模板基于另一个模板,也不能将触发器添加到在其他位置定义的模板。

,

它不起作用,因为您覆盖了TextBox的控制模板,并忽略了它正常工作所需的大部分。控件模板定义控件的外观,以及它们之间的状态和转换。您不能像使用样式一样将控制模板基于另一个模板。创建自定义控件模板意味着:

  • 使用所有必需的状态和零件从头开始创建它,或者
  • 复制基本样式/默认样式并对其进行调整。

对于标准WPF控件,您可以在文档中找到所需的零件和状态,例如TextBox here。省略任何必需的组件将导致意外的行为或损坏的视觉状态。对于Material Design,要使控件正常工作,还需要做更多的事情,但是没有像MSDN上那样记录在文档中,因此您必须创建默认样式的副本并进行调整。

您可以找到TextBox here on Github的默认样式。在较新的版本中,由于此issue,样式被重命名为MaterialDesignFilledTextBox。派生的样式层次结构如下:

  • MaterialDesignTextBoxBase
    • MaterialDesignFloatingHintTextBox
      • MaterialDesignFloatingHintTextBox
        • MaterialDesignFilledTextFieldTextBox

控件模板在MaterialDesignTextBoxBase中定义,它是所有其他样式的基本样式。现在,您要做的就是复制MaterialDesignTextBoxBase样式,为其命名,并根据提供的代码修改状态。您可以将上述三种派生样式的设置器合并到您的自定义样式中。然后,您将获得一个自定义样式,其中包含了所有必要的状态和将按预期工作的部分。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。