c# - materialdesigninxaml - 文本框验证文本与另一个文本框重叠

Question

我正在尝试制作简单的登录表单卡，里面有用户名的文本框和密码的密码框。我已经添加了验证规则(如 materialdesigninxaml 的演示应用程序所示)，但问题是验证消息与 PasswordBox 重叠。

我已经尝试为所有 TextBox 元素添加底部填充，但它没有帮助。我能想到的唯一解决方案是将顶部填充添加到底部元素，但我不喜欢该解决方案，因为它弄乱了我的布局。

用户控制:

        <materialDesign:Card Padding="32" Margin="16" MaxWidth="500">
            <StackPanel>
                <TextBox x:Name="UsernameTextBox" materialDesign:HintAssist.Hint="Username"  MaxLength="20">
                    <TextBox.Text>
                        <Binding Path="Username" UpdateSourceTrigger="PropertyChanged">
                            <Binding.ValidationRules>
                                <rules:NotEmptyValidationRule ValidatesOnTargetUpdated="True" />
                            </Binding.ValidationRules>
                        </Binding>
                    </TextBox.Text>
                </TextBox>
                <PasswordBox x:Name="PasswordBox" materialDesign:HintAssist.Hint="Password" MaxLength="10" />
            </StackPanel>
        </materialDesign:Card>

验证规则:

public class NotEmptyValidationRule : ValidationRule
    {
        public override ValidationResult Validate(object value, CultureInfo cultureInfo)
        {
            return string.IsNullOrWhiteSpace((value ?? "").ToString())
                ? new ValidationResult(false, "Field is required.")
                : ValidationResult.ValidResult;
        }
    }

本质上，我想要的是为这些验证消息保留空间，而不是将它们显示在 TextBox 下面的元素上，只需对代码进行最少的修改(我不想手动向每个元素添加填充/边距)。

Answer 1

您可以在您的 App.xaml 中创建一个全局 Style，您可以在其中为所有 TextBoxes 设置一些底边距:

<Style TargetType="TextBox" BasedOn="{StaticResource MaterialDesignTextBox}">
    <Setter Property="Margin" Value="0,0,0,15" />
</Style>