数据绑定不适用于集合中的自定义控件

时间:2019-05-02 18:48:05

标签: wpf xaml data-binding observablecollection dependency-properties

WPF数据绑定不适用于在xaml集合标记内定义的自定义控件。我只想在一个自定义控件中定义一个自定义小部件的集合,并将一些小部件属性与Viewmodel属性绑定在一起。像这样。

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.DataContext>
        <local:MainViewModel/>
    </Window.DataContext>
    <Grid>
        <local:MyCustomControl>
            <local:MyCustomControl.Widgets>
                <local:MyCustomWidget ImportantToggle="{Binding SomeToggle}"/>
            </local:MyCustomControl.Widgets>
        </local:MyCustomControl>
    </Grid>
</Window>

那是我的自定义控件。我对控件使用obseravblecollection,并在构造函数中调用SetValue以便稍后获取属性更改的回调(示例中现在未使用)

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

namespace WpfApp1
{
    public class MyCustomControl : FrameworkElement
    {
        public ObservableCollection<MyCustomWidget> Widgets
        {
            get { return (ObservableCollection<MyCustomWidget>)this.GetValue(WidgetsProperty); }
            set { this.SetValue(WidgetsProperty, value); }
        }
        public static DependencyProperty WidgetsProperty = DependencyProperty.Register("Widgets", typeof(ObservableCollection<MyCustomWidget>), typeof(MyCustomControl), new PropertyMetadata(null, (e, args) => ((MyCustomControl)e).WidgetsChanged(args)));

        public void WidgetsChanged(DependencyPropertyChangedEventArgs e)
        {
            Debug.WriteLine("widgets collection object changed inside my custom control!");
        }

        public MyCustomControl()
        {
            this.SetValue(WidgetsProperty, new ObservableCollection<MyCustomWidget>());
        }
    }
}

这是我的自定义小部件:

namespace WpfApp1
{
    public class MyCustomWidget : FrameworkContentElement
    {
        public bool ImportantToggle
        {
            get { return (bool)this.GetValue(ImportantToggleProperty); }
            set { this.SetValue(ImportantToggleProperty, value); }
        }

        public static DependencyProperty ImportantToggleProperty = DependencyProperty.Register("ImportantToggle", typeof(bool), typeof(MyCustomWidget), new PropertyMetadata(false, (e, args) => ((MyCustomWidget)e).ImportantToggleChanged(args)));

        public void ImportantToggleChanged(DependencyPropertyChangedEventArgs e)
        {
            Debug.WriteLine("my toggle changed inside my custom widget!");
        }
    }
}

最后是我的简单化ViewModel:

using System;
using System.ComponentModel;
using System.Runtime.CompilerServices;

namespace WpfApp1
{
    public class MainViewModel : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        private void NotifyPropertyChanged([CallerMemberName] String propertyName = "")
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }

        private bool _someToggle;
        public bool SomeToggle
        {
            get { return this._someToggle; }
            set
            {
                this._someToggle = value;
                this.NotifyPropertyChanged();
            }
        }

        public MainViewModel()
        {
            this.SomeToggle = !this.SomeToggle;
        }
    }
}

那是我从Debug.Writeline获得的输出:在我的自定义控件中更改了小部件集合对象!

观察:我无法绑定MyCustomWidget的属性。我知道在这种情况下绑定可能会失败,因为observablecollection是在mycustomcontrol的构造函数内部创建的,但是我不知道如何解决它才能使绑定在mycustomwidget中起作用。

1 个答案:

答案 0 :(得分:2)

为使绑定生效,您的local:MyCustomWidget必须具有与主窗口相同的DataContext。 WPF元素继承其逻辑父级的DataContext。 MyCustomWidget不会,因为它不在逻辑树中。它只是坐在那里。您不会将其添加到其父级的任何普通子级集合中,而只是将其添加到框架不知道的随机ObservableCollection中。

下面的代码可能是一个粗糙的hack。我还没有调查WPF的这一角落。我以最大的诚意敦促您找出正确的做法。但是在添加了代码之后,初始化绑定后,我在MyCustomWidget中命中了propertychanged事件。

public MyCustomControl()
{
    this.SetValue(WidgetsProperty, new ObservableCollection<MyCustomWidget>());
    Widgets.CollectionChanged += Widgets_CollectionChanged;
}

private void Widgets_CollectionChanged(object sender, NotifyCollectionChangedEventArgs e)
{
    if (e.NewItems is System.Collections.IEnumerable)
    {
        foreach (MyCustomWidget widget in e.NewItems)
        {
            AddLogicalChild(widget);
        }
    }
}

通过这种方式,您可以省去MainViewModel构造函数中切换切换的麻烦。那早在绑定存在之前就发生了。我改为添加了一个复选框:

<StackPanel>
    <CheckBox IsChecked="{Binding SomeToggle}">Test Toggle</CheckBox>
    <local:MyCustomControl>
        <local:MyCustomControl.Widgets>
            <local:MyCustomWidget 
                ImportantToggle="{Binding SomeToggle}"
                />
        </local:MyCustomControl.Widgets>
    </local:MyCustomControl>
</StackPanel>

更新:

这会完全忽略您的Widgets集合,并且绑定工作无需我们任何努力。子窗口小部件将位于MyCustomControl.Children中。重要的是,我们不再将子类型限制为MyCustomWidget。这是一项重大的设计更改,可能不符合您的要求。您可以仔细检查Panel类,并编写一个工作方式相同的类,但只接受一种类型的子类(这意味着编写UIElementCollection的类比,这将是一大堆乏味的样板。

MyCustomControl.cs

[ContentProperty("Children")]
public class MyCustomControl : Panel
{
}

MyCustomWidget.cs

public class MyCustomWidget : Control
{
    public bool ImportantToggle
    {
        get { return (bool)this.GetValue(ImportantToggleProperty); }
        set { this.SetValue(ImportantToggleProperty, value); }
    }

    public static DependencyProperty ImportantToggleProperty = 
        DependencyProperty.Register("ImportantToggle", typeof(bool), typeof(MyCustomWidget), 
            new PropertyMetadata(false, (e, args) => ((MyCustomWidget)e).ImportantToggleChanged(args)));

    public void ImportantToggleChanged(DependencyPropertyChangedEventArgs e)
    {
        Debug.WriteLine("my toggle changed inside my custom widget!");
    }
}

MainWindow.xaml

<local:MyCustomControl>
    <local:MyCustomWidget 
        ImportantToggle="{Binding SomeToggle}"
        />
</local:MyCustomControl>