wpf - 当输入控件(来自另一个用户控件)已设置为 WPF 中的焦点时，如何在 MainWindow 中显示 float 虚拟键盘(用户控件)？

Question

几天来，我一直在使用 MVVM 模式的 WPF 应用程序中进行开发工作。我对 WPF 和 MVVM 模式也很陌生。

在我的场景中，我有一个用户控件 View (名为 EPayView.xaml)，它有一个可以接受电话号码的文本框。该 View 有一个对应的 View 模型(名为 EPayViewModel.cs)。在 MainWindow.xaml 中，我有一个从命名空间控件 WpfKb.Controls 派生的用户控件( float 虚拟键盘)。 MainWindow.xaml 也有一个对应的 View 模型(名为 MainViewModel.cs)

话虽如此，我已经研究了如何使用附加的依赖属性，这导致我找到了这个解决方案。 Set focus on textbox in WPF from view model (C#)我相信这是我可以在 EPayView.xaml 的文本框中绑定(bind) IsFocused 属性的地方。

以下是我已经合并到我的解决方案中的代码。

EpayView.xaml(文本框 xaml 标记)

<TextBox Text="{Binding PhoneNo}" Grid.Row="5" Margin="10,0,10,0" VerticalContentAlignment="Center" FontSize="12" x:Name="Email" behaviors:FocusExtension.IsFocused="{Binding IsFocused, Mode=TwoWay}"/>

MainWindow.xaml(xaml 标记)

<Window x:Class="SmartPole540.View.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="clr-namespace:WpfKb.Controls;assembly=SmartPole.WpfKb"
    xmlns:wpf="clr-namespace:WebEye.Controls.Wpf;assembly=WebEye.Controls.Wpf.WebCameraControl"
    xmlns:utilities="clr-namespace:SoltaLabs.Avalon.Core.Utilities;assembly=SoltaLabs.Avalon.Core"
    xmlns:userControls="clr-namespace:SoltaLabs.Avalon.View.Core.UserControls;assembly=SoltaLabs.Avalon.View.Core"
    xmlns:square="clr-namespace:SmartPole.View.Square;assembly=SmartPole.View"
    xmlns:view="clr-namespace:SmartPole.View;assembly=SmartPole.View"
    Title="CitiPulse" 
    WindowStartupLocation="Manual"
    PreviewMouseLeftButtonDown="Window_PreviewMouseLeftButtonDown"
    Name="mainWindow">

    <userControls:RollPanel.BottomContent>
        <square:SquareView Canvas.Top="1010" DataContext="{Binding DataContext.SquareViewModel, 
            RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type userControls:RollPanel}}}"/>
    </userControls:RollPanel.BottomContent>

    <controls:FloatingTouchScreenKeyboard
            x:Name="floatKb" Width="500" Height="250" PlacementTarget="{Binding ElementName=MainGrid}"
            Placement="Center" AreAnimationsEnabled="False" Visibility="Visible"
            IsOpen="{Binding IsChecked, ElementName=kbButton}"/>
</Window>

在上面的代码中，用户控件 RollPanel.BottomContent 在另一个 View RollPanel.xaml 中托管 EPayView.xaml View

EpayViewModel.cs 包含 IsFocused 附加属性的静态类 FocusExtension(请参阅此解决方案 - Set focus on textbox in WPF from view model (C#))。而且，EPayViewModel.cs 已经实现了 INotifyPropertyChanged，它被包裹在一个接受 T 类型的具体类 ObservableObject 中。这也与 MainViewModel.cs 相同

public class EPayViewModel : ObservableObject<EPayViewModel>, IPaymentViewModel, IActiveViewModel
{ ... }

public class MainViewModel : ObservableObject<MainViewModel>
{ ... }

因此，我的目标是当 EPayView.xaml 中的文本框获得焦点时，将显示 MainWindow.xaml 中的 float 虚拟键盘 (floatKb)。

我被困在如何继续下去(我在想是否在我的 MainViewModel.cs 中调用 EPayViewModel 中的 FocusExtension 静态类就足够了？)，非常感谢任何帮助。

干杯，

Answer 1

正如 AnjumSKhan 已经说过的，要以 MVVM 方式对某些事件使用react，您必须使用 Command .命令可以在 EventTrigger 内调用，您需要添加对 System.Windows.Interactvity 的引用零件。
假设您有一个简单的 View 和 View 模型，并且您需要在 MainWindow 中的 TextBox 获得焦点时显示此 View 。

查看 (NewWindow.xaml)

<Window x:Class="My.NewWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="NewWindow" Height="300" Width="300">
<TextBlock Text="{Binding Message}"/>

查看型号

public class NewWindowViewModel
{
    private string _message;
    public string Message
    {
        get { return _message; }
        set { _message = value; }
    }
}

您还有一个 MainWindow，它是应用程序的主视图，它包含目标 TextBox .您可能会看到在 TextBox 中添加了一个 EventTrigger，它有一个属性 InvokeCommandAction。绑定(bind)到 MainWindowViewModel的命令称为 ShowCommand .

主窗口

<Window x:Class="My.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:Interactivity="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" Title="MainWindow" Height="350" Width="525">
<TextBox Height="40" Text="{Binding Text}">
    <Interactivity:Interaction.Triggers>
        <Interactivity:EventTrigger EventName="GotFocus">
            <Interactivity:InvokeCommandAction Command="{Binding ShowCommand}"/>
        </Interactivity:EventTrigger>
    </Interactivity:Interaction.Triggers>
</TextBox>

在 Show MainWindowViewModel的方法 NewWindow View 已创建并获得新的 NewWindowViewModel实例为 DataContext . RelayCommand 类在 my answer to this question 中提供

MainWindowViewModel

public class MainWindowViewModel
{
    private string _text;
    public string Text
    {
        get { return _text; }
        set { _text = value; }
    }

    private ICommand _increaseCommand;
    public ICommand ShowCommand
    {
        get
        {
            if (_increaseCommand == null)
            {
                _increaseCommand = new RelayCommand(
                p => true,
                Show);
            }
            return _increaseCommand;
        }
    }

    private void Show(object obj)
    {
        var w = new NewWindow();
        var nvm = new NewWindowViewModel();
        nvm.Message = "Test";
        w.DataContext = nvm;
        w.Show();
    }
}

剩下的就是创建一个新的 MainWindowViewModel 并为 MainWindow 设置一个 DataContext。

public MainWindow()
{
    InitializeComponent();
    var mvm = new MainWindowViewModel();
    mvm.Text = "Focus me!";
    DataContext = mvm;
}

希望它会有所帮助。