带有集合绑定的 UserControl 总是返回 Null

Question

问题：尝试将 Observable 集合绑定到我的用户控件时，它总是在运行时间显示为 null。

说明：我有一个如下所述的用户控件。目标是创建一个按钮，以便在每次单击时循环浏览一组图像。但是，当我运行这个时， ImageCollection 总是空的，不管我如何在实现端设置绑定。我不知道为什么会这样。代码如下：

XAML:

<UserControl x:Class="kTrack.ToggleImage"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:kTrack"
             mc:Ignorable="d" 
             d:DesignHeight="{Binding ImageHeight}" d:DesignWidth="{Binding ImageWidth}">
    <Grid x:Name="LayoutRoot">
        <Button Click="ToggleImage_Click" Height="{Binding ImageHeight}" Width="{Binding ImageWidth}">
            <Image Source="{Binding ActiveImage}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ToolTip="{Binding ToolTip}" />
        </Button>
    </Grid>
</UserControl>

代码隐藏（重要位）

public partial class ToggleImage : UserControl, INotifyPropertyChanged
{      
    public static readonly DependencyProperty ImageCollectionProperty = DependencyProperty.Register("ImageCollection", typeof(ObservableCollection<string>), typeof(ToggleImage), new PropertyMetadata(null));

    ...

    public ObservableCollection<String> ImageCollection
    {
        get => (ObservableCollection<String>)GetValue(ImageCollectionProperty);
        set => SetValue(ImageCollectionProperty, value);
    }

    private ImageSource _activeImage;
    public ImageSource ActiveImage
    {
        get => _activeImage;
        set
        {
            _activeImage = value;
            OnPropertyChanged();
        }
    }

    private int _currentImageIndex;
    public int CurrentImageIndex
    {
        get => _currentImageIndex;
        set
        {
            _currentImageIndex = value;
            OnPropertyChanged();
        }
    }

    // Constructor
    public ToggleImage()
    {
        ImageCollection = new ObservableCollection<String>();
        InitializeComponent();
        LayoutRoot.DataContext = this;
        
        CurrentImageIndex = 0;

        if (ImageCollection.Count > 0)
        {
            ActiveImage = SetCurrentImage(CurrentImageIndex);
        }
    }

    ...

    public event PropertyChangedEventHandler PropertyChanged;
    protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

XAML 实施：

<local:ToggleImage ImageHeight="32" ImageWidth="32"
    ImageCollection="{Binding Images, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}" />

实现代码隐藏：

public partial class MainWindow : kWindow
{
    public ObservableCollection<String> Images = new ObservableCollection<String>()
    {
        "pack://application:,,,/Resources/Icons/Close.png",
        "pack://application:,,,/Resources/Icons/Minimize.png",
        "pack://application:,,,/Resources/Icons/WindowOne.png"
    };

    public MainWindow()
    {
        InitializeComponent();
    }
}

Answer 1

首先，您应该在 Window.

中设置 DataContext

两个，绑定使用属性，而不是字段：将 Images 字段更改为属性。

public partial class MainWindow : kWindow
{
    public ObservableCollection<String> Images { get; } = new ObservableCollection<String>()
    {
        "pack://application:,,,/Resources/Icons/Close.png",
        "pack://application:,,,/Resources/Icons/Minimize.png",
        "pack://application:,,,/Resources/Icons/WindowOne.png"
    };

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

带有集合绑定的 UserControl 总是返回 Null

UserControl with Collection Binding always returning Null

c#

wpf

user-controls