WPF如何使列表框項可編輯？

Question

我需要將“編輯所選項目”功能添加到我的列表框中。 基本上我需要兩個中的任何一個：

• 按Ctrl +單擊列表項，它神奇地成為可編輯的文本框或其他內容，並在編輯時更新數據庫中的數據。

• 按下ListBox下的“編輯”按鈕，打開新的編輯窗口，在那里編輯數據，更新數據庫並在關閉編輯窗口時更新ListBox。

我遇到的問題：

• 我想擁有解決方案的第一個變體，但我真的不知道如何實現它。

• 實現第二個變體我沒有得到如何在新窗口中編輯所選項后更新ListBox。

這是我的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;

綁定到listBox的“查詢”是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 ，你可能想要閱讀一下它們的用法。 這是一篇關於此的文章 。

這是完整的列表框代碼（至少相關位）：

   <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會更容易。 不要忘記將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），您可以為其設置所選實例。 然后，您可以使用以下內容綁定TextBoxes（在窗口中）： Text="{Binding SelectedQuery.Name, Mode="TwoWay"}" 。 如果您已正確實現INotifyPropertyChanged ，則在窗口中更改文本應立即在ListView更改它。