WPF 如何使列表框项目可编辑？

Question

我需要将“编辑所选项目”功能添加到我的列表框中。基本上我需要两个中的任何一个：

• Ctrl+单击列表项，它会神奇地变成一个可编辑的文本框或其他东西，并在编辑时更新数据库中的数据。

• 按下我的列表框下的“编辑”按钮，打开新的编辑窗口，在那里编辑数据，更新数据库并在编辑窗口关闭时更新列表框。

我遇到的问题：

• 我想要解决方案的第一个变体，但我真的不知道如何实现。

• 实现第二个变体我不知道在新窗口中编辑所选项目后如何更新列表框。

这是我的 ListBox 的 XAML：

<Grid>
    <ListBox x:Name="LstQueries" HorizontalAlignment="Left" Height="228" VerticalAlignment="Top" Width="482" FontFamily="HelveticaNeueCyr" FontSize="16" ItemsSource="{Binding Queries}" MouseDoubleClick="LstQueries_MouseDoubleClick">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <StackPanel>
                    <Label Content="{Binding Name}" FontWeight="Medium" FontSize="18" FontFamily="Helvetica"/>
                    <TextBlock Text="{Binding Text}" FontSize="16" FontFamily="Helvetica"/>
                </StackPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
    <Button x:Name="BtnEdit" Content="Edit" HorizontalAlignment="Left" Margin="0,228,0,0" VerticalAlignment="Top" Width="482" Height="43" Click="BtnEdit_Click"/>
</Grid>

这就是我的编辑窗口 XAML 的样子：

<Grid>
    <TextBox x:Name="TxtName" HorizontalAlignment="Left" Height="23" Margin="99,13,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="183" FontFamily="HelveticaNeueCyr" FontSize="16"/>
    <Label Content="Name:" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" FontFamily="HelveticaNeueCyr" FontSize="16"/>
    <TextBox x:Name="TxtText" HorizontalAlignment="Left" Height="116" Margin="65,45,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="217" FontFamily="HelveticaNeueCyr" FontSize="16"/>
    <Label Content="Text:" HorizontalAlignment="Left" Margin="10,86,0,0" VerticalAlignment="Top" FontFamily="HelveticaNeueCyr" FontSize="16" Height="27" Width="50"/>
    <Button x:Name="BtnSave" Content="Save" HorizontalAlignment="Left" Margin="10,166,0,0" VerticalAlignment="Top" Width="132" Height="33"/>
    <Button x:Name="BtnCancel" Content="Cancel" HorizontalAlignment="Left" Margin="150,166,0,0" VerticalAlignment="Top" Width="132" Height="33" Click="BtnCancel_Click"/>
</Grid>

下面是我如何访问 ListBox 中的 SelectedItem：

if (LstQueries.SelectedIndex < 0) return;
dynamic item = LstQueries.SelectedItem as dynamic;
string name = item.Name;
string text = item.Text;

绑定到列表框的“查询”是ObservableCollection<Query>，其中Query 如下所示：

public class Query
{
    public string Id { get; set; }
    public string Name { get; set; }
    public string Text { get; set; }
    public string Autoschool { get; set; }
}

那么，您能帮我实施这两种解决方案吗？

Answer 1

你可以用不同的方式解决这个问题。 在我曾经写过的一个项目中，我想双击一个项目打开该项目的编辑窗口。 我选择使用 i.Interaction.Triggers 。具体代码如下：

<i:Interaction.Triggers>
    <i:EventTrigger EventName="MouseDoubleClick">
        <Command:EventToCommand Command="{Binding EditExercise_Command}" 
                  CommandParameter="{Binding ElementName=LastExercises_ListView
                                            ,Path=SelectedItem}" />
    </i:EventTrigger>
</i:Interaction.Triggers>

现在，每当我双击一个项目时，它都会打开窗口进行编辑。 这是使用 MVVM，所以我不想在我的代码中包含代码。

您必须引用此 dll：system.windows.interactivity.dll，并且您可能想了解一下它们的用法。这里是an article about that。

这是完整的列表框代码（至少是相关位）：

   <ListBox x:Name="..."  
              ItemsSource="{Binding FilteredCollection}"
              SelectedItem="{Binding SelectedExercise, UpdateSourceTrigger=PropertyChanged}"
              ...
              >
        <ListBox.ContextMenu>
            <ContextMenu>
                <MenuItem Header ="Edit Exercise"   
                          Command="{Binding EditExercise_Command}" 
                          CommandParameter="{Binding SelectedExercise}"
                />
                <MenuItem Header ="Delete Exercise" 
                          Command="{Binding DeleteExercise_Command}" 
                          CommandParameter="{Binding SelectedExercise}"
                />
            </ContextMenu>
        </ListBox.ContextMenu>

        <i:Interaction.Triggers>
            <i:EventTrigger EventName="MouseDoubleClick">
                <Command:EventToCommand Command="{Binding EditExercise_Command}" 
                                        CommandParameter="{Binding ElementName=LastExercises_ListView
                                                                 , Path=SelectedItem}" 
                />
            </i:EventTrigger>
        </i:Interaction.Triggers>

    </ListBox>

如果您不想双击，或者如果您想删除该项目（使用不同的命令），您还可以获得额外的右键菜单选项

Answer 2

为什么要使用动态？您可以毫无问题地将SelectedItem 转换为Query。拥有它后，您需要做的就是将属性加载到您的编辑窗口并在此处处理编辑。

您的查询需要实现INotifyPropertyChanged。否则你不会看到ListBox 的变化（因为控件不知道它们）。 https://msdn.microsoft.com/en-us/library/vstudio/ms229614(v=vs.100).aspx

另外，使用Binding 会更容易。不要忘记将绑定模式设置为TwoWay，这样您的属性就会在您更改它们后得到更新。 http://blog.scottlogic.com/2012/04/20/everything-you-wanted-to-know-about-databinding-in-wpf-silverlight-and-wp7-part-two.html

为您的窗户。准备一个 Query 属性（例如名为 SelectedQuery），您将选择的实例设置为该属性。然后，您可以使用以下内容绑定您的文本框（在窗口中）：Text="{Binding SelectedQuery.Name, Mode="TwoWay"}"。如果您正确地实现了INotifyPropertyChanged 更改窗口中的文本，则应立即在您的ListView 中更改它。