如何从 ViewModel 读取 TextBox 焦点 - MVVM Light

How to read TextBox focus from ViewModel - MVVM Light

我有两个文本框,在我的 ViewModel 中,我希望能够跟踪哪个框当前处于焦点状态。

<TextBox x:Name="textBox1" Text="Text Box 1"/>
<TextBox x:Name="textBox2" Text="Text Box 2"/>

如何read/identify我的 ViewModel 中的当前焦点是哪个文本框?

public static DependencyProperty IsFocusedProperty = DependencyProperty.RegisterAttached(
    "IsFocused",
    typeof(bool),
    typeof(TextBoxProperties),
    new UIPropertyMetadata(false,OnIsFocusedChanged)
);

public static bool GetIsFocused(DependencyObject dependencyObject) {
    return (bool)dependencyObject.GetValue(IsFocusedProperty);
}

public static void SetIsFocused(DependencyObject dependencyObject, bool value) {
    dependencyObject.SetValue(IsFocusedProperty, value);
}

你可以用这个属性

这不能通过服务器端的 ViewModel 完成,解决方法如下所示:

查看代码:(js & html)

function updateFocus(textboxNr) {
  
  $.ajax({
    type: "POST",
    url: '@Url.Action("Index", "Controller")',
    data: {
      Focus: textboxNr
    },
    contentType: "application/json; charset=utf-8",
    dataType: "json",
  });
  
}
<textarea id="1" name="1" onfocus="updateFocus(1)">Text Box 1</textarea>
<textarea id="2" name="2" onfocus="updateFocus(2)">Text Box 2</textarea>

有几种方法可以实现这一点,其中一些是:

1)使用行为:

  • 你需要System.Windows.Interactivity.dll
  • 行为(设置IsFocused 属性不会使元素聚焦,您需要稍微扩展行为才能实现此目的)

    public class FocusChangedBehavior : Behavior<UIElement>
    {
        public static readonly DependencyProperty IsFocusedProperty = 
           DependencyProperty.Register(
           nameof(IsFocused),
           typeof(bool),
           typeof(FocusChangedBehavior),
           new FrameworkPropertyMetadata(default(bool), 
                FrameworkPropertyMetadataOptions.BindsTwoWayByDefault));
    
        public bool IsFocused
        {
            get { return (bool)this.GetValue(IsFocusedProperty); }
            set { this.SetValue(IsFocusedProperty, value); }
        }
    
        /// <inheritdoc />
        protected override void OnAttached()
        {
            this.AssociatedObject.GotFocus += this.AssociatedObjectFocused;
            this.AssociatedObject.LostFocus += this.AssociatedObjectUnfocused;
        }
    
        /// <inheritdoc />
        protected override void OnDetaching()
        {
            this.AssociatedObject.GotFocus -= this.AssociatedObjectFocused;
            this.AssociatedObject.LostFocus -= this.AssociatedObjectUnfocused;
        }
    
        private void AssociatedObjectFocused(object sender, RoutedEventArgs e)
        {
            this.IsFocused = true;
        }
    
        private void AssociatedObjectUnfocused(object sender, RoutedEventArgs e)
        {
            this.IsFocused = false;
        }
    }
    
  • 在 XAML 中,您将 IsFocused 绑定到 ViewModel 中的 属性。

    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"

    <TextBox x:Name="textBox1" Text="Text Box 1">
        <i:Interaction.Behaviors>
            <local:FocusChangedBehavior IsFocused="{Binding IsFocusedTxt1}" />
        </i:Interaction.Behaviors>
    </TextBox>
    
    <TextBox x:Name="textBox2" Text="Text Box 2">
        <i:Interaction.Behaviors>
            <local:FocusChangedBehavior IsFocused="{Binding IsFocusedTxt2}" />
        </i:Interaction.Behaviors>
    </TextBox>
    
  • 最后在视图模型中创建属性

    public bool IsFocusedTxt1 { get; set; }
    
    public bool IsFocusedTxt2 { get; set; }
    



2) 或者你可以在 XAML

中使用 EventTrigger
  • 您需要 System.Windows.Interactivity.dllMicrosoftExpressionInteractions(对于 ActionCommand)
  • 事件触发器:

    <TextBox x:Name="textBox1" Text="Text Box 1">
        <i:Interaction.Triggers>
            <i:EventTrigger  EventName="GotFocus">
                <i:InvokeCommandAction Command="{Binding NotifyFocusedReceivedTxt1Command}" />
            </i:EventTrigger>
        </i:Interaction.Triggers>
    </TextBox>
    
  • 在 ViewModel 中创建命令 NotifyFocusedReceivedTxt1Command

    public ICommand NotifyFocusedReceivedTxt1Command { get; }
    
    // in constructor
    this.NotifyFocusedReceivedTxt1Command = new ActionCommand(this.FocusedReceivedTxt1);
    
    // and method
    private void FocusedReceivedTxt1()
    {
        // Your logic
    }
    
  • 此外,如果您不想引入很多 command/properties,您可以使用相同的命令并通过设置 CommandParameter 来传递不同的文本框(稍微破坏 MVVM,但并不严重)

    <TextBox x:Name="textBox1" Text="Text Box 1">
        <i:Interaction.Triggers>
            <i:EventTrigger  EventName="GotFocus">
                <i:InvokeCommandAction Command="{Binding NotifyFocusedReceivedCommand}" 
                                       CommandParameter="{Binding ., ElementName=textBox1}" />
            </i:EventTrigger>
        </i:Interaction.Triggers>
    </TextBox>
    
    <TextBox x:Name="textBox2" Text="Text Box 2">
        <i:Interaction.Triggers>
            <i:EventTrigger  EventName="GotFocus">
                <i:InvokeCommandAction Command="{Binding NotifyFocusedReceivedCommand}" 
                                       CommandParameter="{Binding ., ElementName=textBox2}" />
            </i:EventTrigger>
        </i:Interaction.Triggers>
    </TextBox>
    

    public ICommand NotifyFocusedReceivedCommand { get; }
    
    // in constructor
    this.NotifyFocusedReceivedCommand = new ActionCommand(this.FocusedReceived);
    
    // and method
    private void FocusedReceived(object control)
    {
        var txt = (TextBox)control;
        bool isFocused = txt.IsFocused;
        string name = txt.Name;
    }