[WPF] 在 ViewModel 中讓資料驗證出錯（Validation.HasError）的控制元件獲得焦點
阿新 • • 發佈：2020-12-23
## 1. 需求
在 MVVM 中 ViewModel 和 View 之間的互動通常都是靠 Icommand 和 INotifyPropertyChanged，不過有時候還會需要從 MVVM 中控制 View 中的某個元素，讓它獲得焦點，例如這樣：
上面的 gif 是我在另一篇文章 《[自定義一個“傳統”的 Validation.ErrorTemplate](https://www.cnblogs.com/dino623/p/Validation_ErrorTemplate.html)》 中的一個示例，在這個示例中我修改了 `Validation.ErrorTemplate`，這樣在資料驗證出錯後，相關的控制元件會顯示一個紅色的框，獲得焦點後用 Popup 彈出具體的錯誤資訊。可是這個過程稍微不夠流暢，我希望點選 Sign In 按鈕後，資料驗證錯誤的控制元件自動獲得焦點，像下面這個 gif 那樣：
這個需求在使用 CodeBehind 的場景很容易實現，但 MVVM 模式就有點難，因為 ViewModel 應該不能直接呼叫 View 上的任何元素的函式。 如果可以的話，最好通過 ViewModel 上的屬性控制 UI 元素，讓這個 UI 元素獲得焦點。
這篇文章介紹了兩種方式實現這個需求。
## 2. 環境
首先介紹這個例子使用到的 ViewModel 和 View。
首先在 Nuget 上安裝 Prism.Core，然後實現一個簡單的 ViewModel，這個 ViewModel 只有一個 Name 屬性和一個 SubmitCommand：
``` CS
public class ViewModel : ModelBase
{
public string Name { get; set; }
public ICommand SubmitCommand { get; }
public ViewModel()
{
SubmitCommand = new DelegateCommand(Submit);
}
private void Submit()
{
ErrorsContainer.ClearErrors();
if (string.IsNullOrEmpty(Name))
ErrorsContainer.SetErrors(nameof(Name), new List { "請輸入名稱" });
}
}
public abstract class ModelBase : BindableBase, INotifyDataErrorInfo
{
private ErrorsContainer _errorsContainer;
public bool HasErrors => ErrorsContainer.HasErrors;
public ErrorsContainer ErrorsContainer
{
get
{
if (_errorsContainer == null)
{
_errorsContainer =
new ErrorsContainer(pn => RaiseErrorsChanged(pn));
}
return _errorsContainer;
}
}
public event EventHandler ErrorsChanged;
public IEnumerable GetErrors(string propertyName)
{
return ErrorsContainer.GetErrors(propertyName);
}
protected void RaiseErrorsChanged(string propertyName)
{
ErrorsChanged?.Invoke(this, new DataErrorsChangedEventArgs(propertyName));
}
}
```
View 上自定義一個 `ErrorTemplate`，還有一個繫結到 Name 的 TextBox，一個繫結到 SubmitCommand 的 Button：
``` XML
```
## 5. 自動獲得焦點
上面的做法實現了我的需求，而且使用這種方案可以讓 ViewModel 對 View 有更多的控制權，可以指定哪個 UI 元素在任何時間獲得焦點，但壞處就是要寫很多程式碼，而且屬性越多耦合越多。
另一種做法是讓 Validation.HasError 為 true 的控制元件自動獲得焦點，可以在 View 上新增這個樣式：
``` XML
```
ViewModel 中可以不負責處理焦點，只負責驗證資料：
``` CS
private void Submit()
{
ErrorsContainer.ClearErrors();
if (string.IsNullOrEmpty(Name))
ErrorsContainer.SetErrors(nameof(Name), new List { "請輸入名稱" });
}
```
這個全域性 Style 讓所有 TextBox 都新增一個繫結到 Validation.HasError 的 DataTrigger，當 Validation.HasError 為 True 時 TextBox 獲得焦點。這種做法可以寫少很多程式碼，但對具體業務來說可能不是很好用。
## 6. 最後
這篇文章只介紹了簡單的解決方案，最後還是需要根據自己的業務需求進行修改或封裝。View 和 ViewModel 互動可以是一個很龐大的話題，下次有機會再深入探討。
## 7. 參考
[FocusManager.FocusedElement 附加屬性](https://docs.microsoft.com/zh-cn/dotnet/api/system.windows.input.focusmanager.focusedelement?view=net-5.0&WT.mc_id=WD-MVP-5003763)