ObservableCollection<string> 中的项目在绑定到 WPF 列表框时不会更新

Question

我想通过将strings 中的ObservableCollection 绑定到ListBox 的ItemsSource 属性并将项目模板设置为TextBox 来操作它。

我的问题是，当我在 ListBox 包含的 TextBox 项目中编辑 ObservableCollection 中的项目时，它们没有得到更新。我做错了什么？

最小工作示例的 XAML 是

    <Window x:Class="ListBoxUpdate.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="ListBoxUpdate" Height="300" Width="300"
>
<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Grid Grid.Column="0">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Button Grid.Row="0" Content="Show items" Click="HandleButtonClick"/>
        <TextBlock Grid.Row="1" x:Name="textBlock" />
    </Grid>
    <ListBox
        Grid.Column="1"
        ItemsSource="{Binding Strings, Mode=TwoWay}">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <TextBox Text="{Binding ., Mode=TwoWay}" />
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
</Grid>

而相应的代码隐藏是

    using System;
    using System.Collections.ObjectModel;
    using System.Windows;

    namespace ListBoxUpdate
    {
        public partial class Window1 : Window
        {
            public ObservableCollection<string> Strings { get; set; }

            public Window1()
            {
                InitializeComponent();

                Strings = new ObservableCollection<string>(new string[] { "one", "two", "three" });
                this.DataContext = this;
            }

            void HandleButtonClick(object sender, RoutedEventArgs e)
            {
                string text = "";

                for (int i = 0; i < Strings.Count; i++) {
                    text += Strings[i] + Environment.NewLine;
                }

                textBlock.Text = text;
            }
        }
    }

非常感谢您的建议。

Answer 1

正如@BrandonKramer 和@Peter Duniho 的cmets 所示，解决方案是数据绑定不能更改它所绑定的对象本身，只能更改该对象的属性。

因此，我必须创建一个包装类，其属性将成为我要操作的字符串。现在是代码隐藏

using System;
using System.Collections.ObjectModel;
using System.Windows;

namespace ListBoxUpdate
{
    public partial class Window1 : Window
    {
        public ObservableCollection<StringWrapper> Strings { get; set; }

        public class StringWrapper 
        {
            public string Content { get; set; }

            public StringWrapper(string content)
            {
                this.Content = content;
            }

            public static implicit operator StringWrapper(string content)
            {
                return new Window1.StringWrapper(content);
            }
        }

        public Window1()
        {
            InitializeComponent();

            this.Strings = new ObservableCollection<StringWrapper>(new StringWrapper[] { "one", "two", "three" });
            this.DataContext = this;
        }

        void HandleButtonClick(object sender, RoutedEventArgs e)
        {
            string text = "";

            for (int i = 0; i < Strings.Count; i++) {
                text += Strings[i].Content + Environment.NewLine;
            }

            textBlock.Text = text;
        }
    }
}

XAML 只需要修改一次

<ListBox
    Grid.Column="1"
    ItemsSource="{Binding Strings, Mode=TwoWay}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <TextBox Text="{Binding Content, Mode=TwoWay}" />
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

谢谢@BrandonKramer 和@Peter Duniho。

更新：我对仅仅为了操作对象而定义一个包装器感到不舒服，在我看来，在列表中编辑对象本身而不是它的一个属性的问题似乎是普遍的，所以我试图找到另一种解决方案。我宁愿决定在ItemTemplate 中挂钩TextBox 的LostFocus 事件。

在这种情况下，问题在于从模板化的TextBox 中找到刚刚失去焦点的ListBox 中的索引。我不能使用ListBox 的SelectedIndex 属性，因为在触发LostFocus 时，它已经设置为不同的ListBoxItem。

我搜索了很多，并在这里找到了 Dennis Troller 的答案：WPF ListBoxItems with DataTemplates - How do I reference the CLR Object bound to ListBoxItem from within the DataTemplate? 诀窍是让TextBox 的DataContext 失去焦点并使用ListBox 的ItemContainerGenerator 来首先识别容器（带有ItemContainerGenerator.ContainerFromItem）然后获取列表中的索引（带有ItemContainerGenerator.IndexFromContainer）。

现在是代码隐藏

using System;
using System.Collections.ObjectModel;
using System.Windows;
using System.Windows.Controls;

namespace ListBoxUpdate
{

    public partial class Window1 : Window
    {
        public ObservableCollection<string> Strings { get; set; }

        public Window1()
        {

            InitializeComponent();

            this.Strings = new ObservableCollection<string>(new string[] { "one", "two", "three" });
            this.DataContext = this;
        }

        void HandleButtonClick(object sender, RoutedEventArgs e)
        {
            string text = "";

            for (int i = 0; i < Strings.Count; i++) {
                text += Strings[i] + Environment.NewLine;
            }

            textBlock.Text = text;
        }

        void HandleTextBoxLostFocus(object sender, RoutedEventArgs e)
        {
            // https://stackoverflow.com/questions/765984/wpf-listboxitems-with-datatemplates-how-do-i-reference-the-clr-object-bound-to?rq=1, @Dennis Troller's answer.
            int index;
            object item;
            DependencyObject container;
            TextBox textBox = sender as TextBox;

            if (textBox == null) return;

            item = textBox.DataContext;
            container = listBox.ItemContainerGenerator.ContainerFromItem(item);

            if (container != null) {
                index = listBox.ItemContainerGenerator.IndexFromContainer(container);
                if (textBox.Text != Strings[index]) {
                    Strings[index] = textBox.Text;
                }
            }
        }
    }
}

完整的 XAML 如下（我单向绑定到文本）：

<Window x:Class="ListBoxUpdate.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="ListBoxUpdate" Height="300" Width="300"
    >
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid Grid.Column="0">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <Button Grid.Row="0" Content="Show items" Click="HandleButtonClick"/>
            <TextBlock Grid.Row="1" x:Name="textBlock" />
        </Grid>
        <ListBox
            x:Name="listBox"
            Grid.Column="1"
            ItemsSource="{Binding Strings}">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <TextBox 
                        Text="{Binding ., Mode=OneWay}"
                    LostFocus="HandleTextBoxLostFocus"/>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>
</Window>