WinUI3-MVVM：从ViewModel设置UI控件焦点的问题及解决方案

一、MVVM中设置UI焦点的最佳实践 #

• 采用附加行为（Attached Behavior）：这是MVVM模式下处理UI交互的标准方案，既保持ViewModel与UI的解耦，又能实现UI控件的焦点控制。
• 确保控件完成加载：焦点操作必须在控件渲染完成后执行，未加载的控件调用Focus()不会生效。
• 匹配合适的FocusState：根据触发场景选择状态，代码触发用FocusState.Programmatic，用户点击触发用FocusState.Pointer，避免因状态不匹配导致焦点失效。
• 支持双向状态同步：让行为能将控件的实际焦点状态同步回ViewModel，避免ViewModel的状态与UI实际状态不一致。

二、你的FocusBehavior失效原因及修正方案 #

你当前的FocusBehavior存在几个关键问题，导致焦点设置失效：

1. 未判断控件是否已加载，若ViewModel触发焦点时控件还未渲染完成，Focus()调用无效。
2. 仅实现了从ViewModel到UI的单向设置，未同步UI的焦点状态回ViewModel，可能导致状态不一致。
3. FocusState.Pointer的选择可能不符合场景，代码触发的焦点应该用Programmatic状态。

修正后的FocusBehavior代码 #

public class FocusBehavior
{
    public static bool GetIsFocused(UIElement element)
    {
        return (bool)element.GetValue(IsFocusedProperty);
    }

    public static void SetIsFocused(UIElement element, bool value)
    {
        element.SetValue(IsFocusedProperty, value);
    }

    public static readonly DependencyProperty IsFocusedProperty =
        DependencyProperty.RegisterAttached(
            "IsFocused",
            typeof(bool),
            typeof(FocusBehavior),
            new FrameworkPropertyMetadata(false, FrameworkPropertyMetadataOptions.BindsTwoWayByDefault, OnIsFocusedChanged)
        );

    private static void OnIsFocusedChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        var element = d as UIElement;
        if (element == null) return;

        // 移除旧的事件监听
        element.GotFocus -= Element_GotFocus;
        element.LostFocus -= Element_LostFocus;
        element.Loaded -= Element_Loaded;

        if ((bool)e.NewValue)
        {
            // 添加事件监听，同步焦点状态
            element.GotFocus += Element_GotFocus;
            element.LostFocus += Element_LostFocus;

            // 检查控件是否已加载，未加载则待加载后再设置焦点
            if (element.IsLoaded)
            {
                SetFocus(element);
            }
            else
            {
                element.Loaded += Element_Loaded;
            }
        }
    }

    private static void Element_Loaded(object sender, RoutedEventArgs e)
    {
        var element = sender as UIElement;
        element.Loaded -= Element_Loaded;
        SetFocus(element);
    }

    private static void Element_GotFocus(object sender, RoutedEventArgs e)
    {
        var element = sender as UIElement;
        SetIsFocused(element, true);
    }

    private static void Element_LostFocus(object sender, RoutedEventArgs e)
    {
        var element = sender as UIElement;
        SetIsFocused(element, false);
    }

    private static void SetFocus(UIElement element)
    {
        // 代码触发焦点，使用Programmatic状态
        element.Focus(FocusState.Programmatic);
    }
}

关键修正点说明 #

• 启用双向绑定：通过FrameworkPropertyMetadataOptions.BindsTwoWayByDefault让属性默认支持双向绑定，同步UI焦点状态到ViewModel。
• 控件加载判断：添加Loaded事件监听，确保控件渲染完成后再执行焦点设置。
• 焦点状态同步：监听GotFocus和LostFocus事件，将UI的焦点状态同步回ViewModel的绑定属性。
• 修正FocusState：改用FocusState.Programmatic，符合代码触发焦点的场景，避免状态不匹配导致的失效。

内容的提问来源于stack exchange，提问作者laohan