将 ListView 绑定到 ObservableCollection 和两个可视控件

Question

我想将 ListView 绑定到字符串的 ObservableCollection，我想使用来自两个可视控件的数据（例如，这些字符串的前缀和后缀）进行修改。

一个简化的例子：

XAML：

<TextBox Name="tbPrefix"/>
<TextBox Name="tbPostfix"/>

<ListView Name="lvTarget"/>

C#：

public ObservableCollection<string> sources = GetFromSomewhere();

public IEnumerable<string> Items()
{
    foreach (var source in sources) 
    {
        yield return tbPrefix.Text + source + tbPostfix.Text;
    }
}

为了让 ListView 保持更新，我目前只是在 CollectionChanged 事件上重置其 ItemsSource：

void sources_CollectionChanged(...)
{
    lvTarget.ItemsSource = Items();
}

但我还希望 ListView 绑定到其三个来源中的任何中的更改：集合和前缀/后缀控件。我想我想要一个 MultiBinding 或 MultiDataTrigger，但我不能完全理解语法和我能找到的所有示例将控件绑定到其他控件，同时我也有那个 ObservableCollection 作为来源。

附：对不起，如果它简单明了，这只是我使用 WPF 的第三天，我有点不知所措！谢谢！

Answer 1

observable 集合用于在集合中的项目发生更改时通知，例如添加、删除、移动等……如果您更改字符串中的文本，它不会通知。 WPF 中第一个使用 ViewModel 绑定属性而不是隐藏代码的最佳实践规则。您可以通过以下方式解决此问题：
1- 创建一个名为 SomethingViewModel 的新类
2- 添加所有需要绑定到视图的属性：

public class SomethingViewModel : INotifyPropertyChanged
{
    private string _prefix;
    private string _postfix;

    public SomethingViewModel()
    {
        Sources = new ObservableCollection<string>(/*pass initial data of the list*/);
        Sources.CollectionChanged += (sender, args) => OnPropertyChanged("Items");
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged(string propertyName = null)
    {
        var handler = PropertyChanged;
        if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName));
    }

    private ObservableCollection<string> Sources { get; set; }

    public IList<string> Items
    {
        get { return Sources.Select(x => string.Format("{0}{1}{2}", Prefix, x, Postfix)).ToList(); }
    }

    public string Prefix
    {
        get
        {
            return _prefix;
        }
        set
        {
            if (_prefix == value) return;
            _prefix = value;
            OnPropertyChanged("Prefix");
            OnPropertyChanged("Items");
        }
    }

    public string Postfix
    {
        get
        {
            return _postfix;
        }
        set
        {
            if (_postfix == value) return;
            _postfix = value;
            OnPropertyChanged("Postfix");
            OnPropertyChanged("Items"); // we will notify that the items list has changed so the view refresh its items
        }
    }
}

3- 在视图的构造函数中放入以下代码来初始化视图的数据上下文：

public MainWindow()
{
    this.DataContext= new SomethingViewModel();
}

4-最后将视图元素绑定到视图模型属性：

<TextBox Text={Binding Prefix,Mode=TwoWay}/>
<TextBox  Text={Binding Postfix,Mode=TwoWay}/>

<ListView ItemsSource={Binding Items}/>

5-如果要更改源中的项目，请不要初始化新对象，只需使用方法：

Sources.Clear();
Sources.Add();

Answer 2

免责声明：请注意，如果您只需要修改项目的视觉外观，则使用 DataTemplate（如 Clemens 的回答）将是更好的解决方案。如果您想实际将组合字符串作为项目，请使用 ViewModel 方式。以下解决方案不是最佳实践，而是试图演示 MultiBindings 的工作原理。

---

这个问题最好在你的 ViewModel 中解决。转换器（尤其是 MultiConverters）只应在绝对必要时使用。

但由于这是您使用 WPF 的第三天，您不应该为 MVVM 烦恼。

1. 让你的 Window 类成为它自己的 DataContext：

   public MainWindow()
   {
       InitializeComponent();
       this.DataContext = this;
   }
   

   这将让我们使用从 Window 到定义在其上的属性的数据绑定。

2. 我们可以为我们的项目使用默认属性，但是当属性值发生变化时，WPF 不会注意到。我们现在将使用DependencyProperty：

   public static readonly DependencyProperty ItemsProperty
       = DependencyProperty.Register("Items", typeof (IEnumerable<string>), typeof (MainWindow));
   
   public IEnumerable<string> Items
   {
       get { return (IEnumerable<string>) GetValue(ItemsProperty); }
       set { SetValue(ItemsProperty, value); }
   }
   
   public MainWindow()
   {
       InitializeComponent();
       this.DataContext = this;
   
       this.Items = new[] {"sdf", "fdsa", "tgrg"};
   }
   

   每当我们调用此属性的设置器时，WPF 都会注意到它并更新与此属性的所有绑定。我们还更新了构造函数以加载一些初始值。

   我们也可以实现INotifyPropertyChanged - 事实上，ViewModel 使用这种模式 - 和/或使用 ObservableCollection。不幸的是，ObservableCollection 更改不会重新触发 MultiBinding，因此我们只使用 IEnumerable<string> 作为类型。

3. 现在让我们在 XAML 中添加绑定：

   <StackPanel>
       <TextBox Name="prefixTextBox" />
       <TextBox Name="postfixTextBox" />
       <ListBox>
           <ListBox.ItemsSource>
               <MultiBinding>
                   <MultiBinding.Converter>
                       <wpfApplication1:PrefixPostfixConverter />
                   </MultiBinding.Converter>
                   <Binding Path="Items" />
                   <Binding ElementName="prefixTextBox" Path="Text" />
                   <Binding ElementName="postfixTextBox" Path="Text" />
               </MultiBinding>
           </ListBox.ItemsSource>
       </ListBox>
   </StackPanel>
   

   好的，我们使用 MultiBinding 设置 ItemsSource。这基本上是在做您之前在更改处理程序中所做的事情：每当其子绑定之一发生更改时，它都会调用指定的转换器并使用其结果更新 ItemsSource。但这是什么PrefixPostfixConverter？

4. 添加 PrefixPostfixConverter 类：

   public class PrefixPostfixConverter : IMultiValueConverter 
   {
       public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
       {
           if (values == null || values.Length != 3)
               throw new ArgumentException("values");
   
           var items = values[0] as IEnumerable;
           var prefix = values[1] as string;
           var postfix = values[2] as string;
   
           if (items == null || prefix == null || postfix == null)
               return null;
   
           return items.Cast<object>()
                       .Select(i => prefix + i + postfix)
                       .ToArray();
       }
   
       public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
       {
           throw new NotSupportedException();
       }
   }
   

   这会从您的三个绑定中获取输入（作为 values 参数传入）并将组合值创建为数组。

Answer 3

您不需要任何代码。只需为 ListView 项创建适当的 DataTemplate：

<ListView ItemsSource="{Binding Items}">
    <ListView.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding Text, ElementName=tbPrefix}"/>
                <TextBlock Text="{Binding}"/>
                <TextBlock Text="{Binding Text, ElementName=tbPostfix}"/>
            </StackPanel>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

还要注意Items 在这里是公共属性，而不是方法，您应该在视图模型类中声明它。此视图模型类的实例将分配给您的视图的DataContext（例如 MainWindow）。