如何使用MVVM检查UWP中的文本框是否为空，并为用户提供UI验证

Question

我正在使用MVVM在UWP中制作一个简单的登录页面，并希望检查每个文本框是否为空。 在每个文本框旁边，有一个带有字体家族“ Wingdings 2”的文本块。

如果该字段为空，则我希望文本块显示一个红色叉号（“＆＃x4F;”），如果文本框包含文本，则该文本块应更新为显示一个绿色的选中标记（“＆＃x50;”）。

（注意：图标文字中没有空格，但是我必须在其中放置空格，以防止StackOverFlow格式化文本）。

默认情况下（在导航到页面时），所有文本块均显示一个红叉。

这是我想要的示例图片：

这是我在ViewModel中的代码：

public string FirstName {
    get{
        return _firstName;
    }
    set{
        if (_firstName == null){
            _firstName = value;
            RaisePropertyChanged(nameof(FirstName));
        }
    }
}

public string LastName{
    get{
        return _lastName;
    }
    set{
        if (_lastName == null){
            _lastName = value;
            RaisePropertyChanged(nameof(LastName));
        }
    }
}

当用户开始在每个字段中输入内容时，如何绑定文本框以更新它们旁边的文本块中的图标？

Answer 1

事实证明，我曾经为stackoverflow本身上的某个人从事过诸如form validator类的项目。

我已经在Git与FormValidatorDemoStack上载了相同的示例项目。 正是您所需要的。

关于该项目：

它包含两种方法，一种不使用MVVM称为QuickAndDirty ，另一种使用MVVM和UserControls称为“ Recommended 。 您可以从右侧的splitview看到它。

---

参考文献：

到旧问题的链接是这个 ，而将验证扩展到单个字段中多个输入的后续问题是这个 。

如果您有任何疑问，请随时使用评论部分，希望对您有所帮助。

Answer 2

我认为实现此目标的最佳方法是使用UWP Community Toolkit中的 TextBoxRegex XAML属性。