WPF - Creating a custom control with dynamic subcontrols

Question

I am attempting to create a menu/navigation control in WPF that will be used across several applications. The control is intended to reside in a custom window, and will provide the maximize, minimize, close, drag, etc functionality. In addition to the standard "window" functions, the control will should also contain the main "menu" of the application - essentially a collection of buttons that each associate with a command and/or viewmodel - these buttons are custom controls as well (derived from radio buttons).

Essentially, my goal is to be able to add this menu control and it's buttons via XAML in a manner like this (this is pseudocode, to be clear):

    <MenuControl Title="ApplicationTitle>
        <MenuControl.MenuButtons>
            <MenuButton Content="Button1" Command="Command1"/>
            <MenuButton Content="Button2" Command="Command2"/>
        </MenuControl.MenuButtons>
    </MenuControl>

I've gotten to the point where I can get this working correctly for only ONE button. Once I add a second button, I get a "Specified argument was out of the range of the valid values" from my XAML.

Here is the code-behind related to the menu on my custom control:

    private static readonly DependencyProperty MenuProperty = DependencyProperty.Register("Menu", typeof(ObservableCollection<NavigationButton>), typeof(CCTNavigationHeader), new FrameworkPropertyMetadata(new ObservableCollection<NavigationButton>()));

    public ObservableCollection<NavigationButton> Menu
    {
        get
        {
            return (ObservableCollection<NavigationButton>)GetValue(MenuProperty);
        }
        set
        {
            SetValue(MenuProperty, value);
        }
    }

And here is the XAML:

    <ItemsControl ItemsSource="{Binding ElementName=ctlCCTNavigationHeader, Path=Menu}"/>

This is the code utilizing the control that works, with only one button:

    <Controls:CCTNavigationHeader Title="Test">
        <Controls:CCTNavigationHeader.Menu>
            <Controls:NavigationButton Content="Test"/>
        </Controls:CCTNavigationHeader.Menu>
    </Controls:CCTNavigationHeader>

And this is the code using the control that chokes, once I add a second button:

    <Controls:CCTNavigationHeader Title="Test">
        <Controls:CCTNavigationHeader.Menu>
            <Controls:NavigationButton Content="Test"/>
            <Controls:NavigationButton Content="Test"/>
        </Controls:CCTNavigationHeader.Menu>
    </Controls:CCTNavigationHeader>

I know I must be doing something incorrectly here, but I haven't been able to find any examples of accomplishing this type of solution anywhere. Can anyone familiar with creating custom user controls in WPF point me in the right direction?

Chris McKenna Chris McKenna · Accepted Answer · 2015-12-29T15:57:01

Figured this one out. I wasn't initializing the Menu collection when creating the control. The following code fixed it:

    public CCTNavigationHeader()
    {
        InitializeComponent();
        Menu = new ObservableCollection<NavigationButton>(); //this line
    }

WPF - Creating a custom control with dynamic subcontrols

1 Answers