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;
        }
    }

基本上我想要的是为这些验证消息保留 space，而不是将它们显示在 TextBox 下面的元素上，只需对代码进行最少的修改（我不想手动添加 padding/margins 到每一个元素）。

Answer 1

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

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

Answer 2

选择弹出选项时，可以更改验证消息的位置。

<Style TargetType="TextBox" BasedOn="{StaticResource MaterialDesignTextBox}">
    <Setter Property="materialDesign:ValidationAssist.UsePopup" Value="True" />
    <Setter Property="materialDesign:ValidationAssist.PopupPlacement" Value="Center" />
</Style>

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

materialdesigninxaml - TextBox validation text overlapping with another textbox

c#

wpf

xaml

material-design-in-xaml