自动聚焦新行中的控件

Question

我有一个带有DataGrid（来自 WPF 工具包）控件的 WPF 应用程序。 ItemsSouce 属性绑定到我的 ViewModel 中的 ObservableCollection。

数据网格有一列，其中包含TextBox：

<dg:DataGrid.Columns>
    <dg:DataGridTemplateColumn Header="Name">
         <dg:DataGridTemplateColumn.CellTemplate>
               <DataTemplate>
                   <TextBox Text="{Binding UserName}" Width="300"/>
                </DataTemplate>
         </dg:DataGridTemplateColumn.CellTemplate>
    </dg:DataGridTemplateColumn>
...

我还有一个“添加”按钮来创建新用户。当我单击它时，会创建一个新行。但是，我希望上面的文本框能够获得输入焦点（当然是在新行上）。我看过：

WPF MVVM Focus Field on Load

WPF-MVVM: Setting UI control focus from ViewModel

How to set focus to textbox using MVVM?

Set focus on textbox in WPF from view model (C#)

但它们似乎都依赖于“ElementName”绑定的相同变体，并且看起来它们都不会在ItemsControl 中工作。 获得此行为的正确方法是什么？

Answer 1

我相信您可以做到这一点的一种方法是在处理已加载的文本框上设置一个触发器并设置焦点。像这样的

<dg:DataGridTemplateColumn Header="Name">
    <dg:DataGridTemplateColumn.CellTemplate>
       <DataTemplate>
           <TextBox xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" Text="{Binding UserName}" Width="300">
            <i:Interaction.Triggers>
                        <i:EventTrigger EventName="Loaded">
                            <local:SetFocusTrigger/>
                        </i:EventTrigger>
                </i:Interaction.Triggers>
           </TextBox>
        </DataTemplate>
    </dg:DataGridTemplateColumn.CellTemplate>
</dg:DataGridTemplateColumn>

SetFocusTrigger 类是：-

    public class SetFocusTrigger : TargetedTriggerAction<Control>
    {
        protected override void Invoke(object parameter)
        {
            if (Target == null) return;

            Target.Focus(); 
        }
    }

请注意，我还没有尝试过。

Answer 2

我尝试在纯 XAML 中做

<DataGrid CanUserAddRows="True"
          ItemsSource="{Binding List}"
          AutoGenerateColumns="False">
    <DataGrid.Columns>
        <DataGridTemplateColumn Header="Name">
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Name}"
                               Width="300" />
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
            <DataGridTemplateColumn.CellEditingTemplate>
                <DataTemplate>
                    <TextBox Text="{Binding Name}"
                             FocusManager.FocusedElement="{Binding RelativeSource={RelativeSource Self}}"
                             Width="300" />
                </DataTemplate>
            </DataGridTemplateColumn.CellEditingTemplate>
        </DataGridTemplateColumn>
    </DataGrid.Columns>
</DataGrid>

我添加了两个模板 1 用于正常模式和其他用于编辑模式。所以一旦单元格进入编辑模式，它将聚焦文本框。

如果您总是希望文本框可见，那么它将具有不同的行为，因为新行绑定到占位符并且值为文本框将持续存在并移至除实际行之外的每个新行。

ListView 解决方案 (MVVM)

示例 XAML

<StackPanel>
    <Button Command="{Binding AddItem}"
            Content="Add Item"/>
    <ListView ItemsSource="{Binding List}"
              Grid.IsSharedSizeScope="True">
        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition SharedSizeGroup="name" />
                        <!--other columns-->
                        <ColumnDefinition  />
                    </Grid.ColumnDefinitions>
                    <TextBox Text="{Binding Name}"
                             FocusManager.FocusedElement="{Binding RelativeSource={RelativeSource Self}}" />
                    <TextBox Text="other column" Grid.Column="1"/>
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</StackPanel>

示例虚拟机

    public ViewModel()
    {
        AddItem = new SimpleCommand(i => List.Add(new Person()));
        List = new ObservableCollection<object>(new[] { new Person() { Name = "a person"} });
    }

    public ObservableCollection<object> List { get; set; }

    class Person
    {
        public string Name { get; set; }
    }

    public ICommand AddItem { get; set; }

因此，在添加新项目时，将通过向列表中添加新人员来创建新行，并将焦点显示在文本框上。

运行上面的示例并查看行为，不涉及任何代码。