Dependency Property ListBox's ItemsSource in UserControl

Question

I develop new desktop app in C# WPF MVVM and I have a problem with data-binding. I create my own UserControl

<UserControl x:Class="Project.View.UserControls.BusListDeviceControl"
             x:Name="BusList"
             ...
             >
    <Grid Grid.Column="0" Grid.Row="0" Margin="7, 5">
        <Grid.RowDefinitions>
            <RowDefinition Height="60"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="50"/>
        </Grid.RowDefinitions>
        <ListBox Grid.Row="1" ItemsSource="{Binding ElementName=BusList, Path=ItemsSource}" Background="{Binding ElementName=BusList, Path=BackgroundColor}" BorderBrush="{x:Null}">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid Margin="0,2">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="25" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <Image Grid.Column="0" Margin="5" Source="{Binding IconPath}"/>
                        <TextBlock Grid.Column="1" Text="{Binding Name}" FontFamily="Century Gothic" VerticalAlignment="Center" HorizontalAlignment="Left" FontSize="16"/>
                    </Grid>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>
</UserControl>

Code-behind

public partial class BusListDeviceControl : UserControl, INotifyPropertyChanged
    {
        ObservableCollection<Device> devices;
        string color;

        public static readonly DependencyProperty DevicesProperty =
            DependencyProperty.Register("Devices", typeof(ObservableCollection<Device>), 
            typeof(BusListDeviceControl), new PropertyMetadata (new ObservableCollection<Device>()));
        public ObservableCollection<Device> Devices
        {
            get { return this.devices; }
            set
            {
                this.devices = value;
                RaisePropertyChanged("Devices");
            }
        }

        public static readonly DependencyProperty BackgroundColorProperty =
        DependencyProperty.Register("BackgroundColor", typeof(string), typeof(BusListDeviceControl));
        public string BackgroundColor
        {
            get { return color; }
            set
            {
                this.color = value;
                RaisePropertyChanged("BackgroundColor");
            }
        }

        public BusListDeviceControl()
        {
            InitializeComponent();
        }

        internal void RaisePropertyChanged(string prop)
        {
            if (PropertyChanged != null) { PropertyChanged(this, new PropertyChangedEventArgs(prop)); }
        }
        public event PropertyChangedEventHandler PropertyChanged;
    }

And I want use this UserControl in my mainView.

<UserControl x:Class="Project.View.UserControls.IdentificationControl"
             ...>
    <UserControl.DataContext>
        <vm:IdentificationControlViewModel/>
    </UserControl.DataContext>
    <Grid Grid.Column="0" Margin="0">
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="70" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <local:BusListDeviceControl Devices="{Binding Buses[0].Devices}" BackgroundColor="White" Grid.Column="0" Grid.Row="0" Margin="7, 5"></local:BusListDeviceControl>
        </Grid>
    </Grid>
</UserControl>

In IdentificationControlViewModel.cs I have public ObservableCollection Buses { get; set; } and every Bus has public ObservableCollection Devices { get; set; }. When I put all UserControl xaml code to mainView, binding work, but when I want use only to have clean code, binding for ItemsSource doesn't work but for BackgroundColor binding work properly.

How to properly binding Buses[0].Devices to ItemsSource in my UserControl?

Efraim Newman Efraim Newman · Accepted Answer · 2019-07-31T13:08:08

The problem is that you are not using DependencyProperty the right way. see here for more information.

Basically, when you use a DependencyProperty then you do not use a field in the class, and the Properties should look like this:

public string BackgroundColor
{
    get { return (string)GetValue(BackgroundColorProperty); }
    set
    {
       SetValue(BackgroundColorProperty,value);
    }
 }

GetValue and SetValue are inherited from DependencyObject.

also, when you use DependencyProperty you do not need to implement INotifyPropertyChanged

your class shuld look like this:

public partial class BusListDeviceControl : UserControl
    {

        public static readonly DependencyProperty DevicesProperty =
            DependencyProperty.Register("Devices", typeof(ObservableCollection<Device>), 
            typeof(BusListDeviceControl), new PropertyMetadata (new ObservableCollection<Device>()));
        public ObservableCollection<Device> Devices
        {
            get { return (ObservableCollection<Device>)GetValue(DevicesProperty ); }
            set
            {
                SetValue(DevicesProperty ,value);
            }
        }

        public static readonly DependencyProperty BackgroundColorProperty =
        DependencyProperty.Register("BackgroundColor", typeof(string), typeof(BusListDeviceControl));
        public string BackgroundColor
        {
            get { return (string)GetValue(BackgroundColorProperty);  }
            set
            {
                SetValue(BackgroundColorProperty,value);
            }
        }

        public BusListDeviceControl()
        {
            InitializeComponent();
        }
    }

Dependency Property ListBox's ItemsSource in UserControl

1 Answers