Question

I’m seeing a weird behaviour in WPF with multiple instances of a UserControl. I’m trying to setup a collection of ComboBoxItems and bind it to its instance of the UserControl. But instead it binds all of them to it like below. Does anyone know how I’d change my code so that the items appear in the expected boxes?

Many thanks in advance!

Window Xaml

<Window x:Class="WpfUserControlSample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfUserControlSample"
        Title="MainWindow" Height="350" Width="525">
    <StackPanel Orientation="Horizontal" Height="30">
        <local:ToolbarButtonCombo x:Name="one" Text="Combo 1...">
            <local:ToolbarButtonCombo.MenuItems>
                <ComboBoxItem>Item 1</ComboBoxItem>
                <ComboBoxItem>Item 2</ComboBoxItem>
            </local:ToolbarButtonCombo.MenuItems>
        </local:ToolbarButtonCombo>
        <local:ToolbarButtonCombo x:Name="two" Text="Combo 2...">
            <local:ToolbarButtonCombo.MenuItems>
                <ComboBoxItem>Item 3</ComboBoxItem>
                <ComboBoxItem>Item 4</ComboBoxItem>
            </local:ToolbarButtonCombo.MenuItems>
        </local:ToolbarButtonCombo>
        <local:ToolbarButtonCombo x:Name="three" Text="Combo 3..."></local:ToolbarButtonCombo>
    </StackPanel>
</Window>

UserControl Xaml

<UserControl x:Class="WpfUserControlSample.ToolbarButtonCombo"
             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" 
             mc:Ignorable="d" 
             d:DesignHeight="30"
             Name="Control">
        <StackPanel Orientation="Horizontal">
                <Button Name="btn" Command="{Binding Path=ButtonCommand,ElementName=Control}">
                    <TextBlock Text="{Binding Path=Text, ElementName=Control, FallbackValue=Label}"></TextBlock>
                </Button>
                <ComboBox x:Name="cmb" Margin="0,0,0,0"
                          ItemsSource="{Binding Path=MenuItems,ElementName=Control}">

                </ComboBox>
        </StackPanel>
</UserControl>

UserControl Codebehind

namespace WpfUserControlSample
{
    /// <summary>
    /// Interaction logic for ToolbarButtonCombo.xaml
    /// </summary>
    public partial class ToolbarButtonCombo : UserControl
    {
        public ToolbarButtonCombo()
        {
            InitializeComponent();
        }

        public static readonly DependencyProperty ButtonCommandProperty =
            DependencyProperty.Register("ButtonCommand", typeof(ICommand), typeof(ToolbarButtonCombo));
        public ICommand ButtonCommand 
        {
            get { return (ICommand)GetValue(ButtonCommandProperty); }
            set { SetValue(ButtonCommandProperty,value);}
        }

        public static readonly DependencyProperty MenuItemsProperty =
            DependencyProperty.Register("MenuItems", typeof(ObservableCollection<ComboBoxItem>), 
            typeof(ToolbarButtonCombo), new FrameworkPropertyMetadata(new ObservableCollection<ComboBoxItem>()));
        public ObservableCollection<ComboBoxItem> MenuItems
        {
            get { return (ObservableCollection<ComboBoxItem>)GetValue(MenuItemsProperty); }
            set { SetValue(MenuItemsProperty, value); }
        }

        public static readonly DependencyProperty TextProperty =
            DependencyProperty.Register("Text", typeof(string), typeof(ToolbarButtonCombo));
        public string Text
        {
            get { return (string) GetValue(TextProperty);}
            set { SetValue(TextProperty, value); }
        }
    }
}

Answer 1

Your MenuItems property is wrong.

Collection properties in WPF should be read-only dependency properties, and you need to create a new collection for each class instance (in the constructor).

You’re using the same ObservableCollection<ComboBoxItem> instance (the default value) for all instances of the control, so they all share the same items.