MaterialDesignInXAML 文本框下划线显示问题解析

问题背景

在使用 MaterialDesignInXAML 工具包时，开发者可能会遇到文本框下划线显示不一致的问题。具体表现为：当设置 TextFieldAssist.DecorationVisibility="Collapsed" 属性来隐藏动画下划线时，在文本框禁用状态下(IsEnabled="False")，下划线仍然会显示。

技术原理

MaterialDesignInXAML 中的文本框实际上包含两种不同类型的下划线：

1. 静态下划线：这是文本框的默认边框，通过 TextBox.BorderThickness 和 TextBox.BorderBrush 属性控制
2. 动画下划线：这是 Material Design 特有的交互效果，在获取/失去焦点时会有动画效果，通过 TextFieldAssist.DecorationVisibility 属性控制

问题根源

开发者常见的误解在于认为 TextFieldAssist.DecorationVisibility 属性控制的是所有下划线显示。实际上：

• TextFieldAssist.DecorationVisibility 仅控制动画下划线的显示/隐藏
• 静态下划线始终存在，除非显式设置 BorderThickness=0 或 BorderBrush=Transparent

当文本框被禁用时：

• 动画下划线功能自动失效（因为禁用状态下不响应焦点变化）
• 静态下划线仍然保持显示

解决方案

如果需要完全隐藏下划线（包括禁用状态），有以下几种方法：

方法一：直接修改边框属性

<TextBox BorderThickness="0" ... />

方法二：通过样式触发器动态控制

<Style x:Key="CustomTextBoxStyle" TargetType="TextBox" 
       BasedOn="{StaticResource MaterialDesignFilledTextBox}">
    <Style.Triggers>
        <Trigger Property="IsEnabled" Value="False">
            <Setter Property="BorderBrush" Value="Transparent" />
        </Trigger>
    </Style.Triggers>
</Style>

方法三：使用轮廓样式

<TextBox materialDesign:TextFieldAssist.HasOutlinedTextField="True" ... />

设计规范说明

Material Design 规范中：

• 文本框底部直角是设计规范要求
• 圆角仅应用于顶部两个角
• 禁用状态下保持视觉反馈是规范的一部分

最佳实践建议

1. 如果需要完全自定义下划线行为，建议创建自定义样式
2. 考虑用户体验一致性，不建议完全移除禁用状态下的视觉反馈
3. 对于复杂需求，可以组合使用多种属性实现精确控制

通过理解这些原理和解决方案，开发者可以更好地控制 MaterialDesignInXAML 中文本框的视觉表现，实现既符合设计规范又能满足特定需求的效果。