Customizable Toolbar in WPF

Question

I'd like to have customizable toolbars in my application, like those offered by Visual Studio 2008 (right click on toolbar, customize). I need a WPF solution, and I haven't been able to find any (neither on SO, or Google). I did find this Visual Studio 2010 blog entry, which implies that even Microsoft had some trouble doing it. So anyway, to keep it simple, the question is, is there any open source/free framework that provides this functionality (it doesn't have to be exact replica of VS2008's solution).

Answer 1

I just played around for a bit and I think it should be relatively easy to implement the desired behavior with WPF alone (no additional library or framework required). I included example code to add a Button to a ToolBar which in turn allows to add more buttons to the toolbar.

To get your desired behavior I'd have a collection of buttons for the toolbar and another collection with available buttons. The toolbars ItemsSource would be bound to the first collection. After clicking the "customize" button in the context menu I'd just show another form with two ListViews (each bound to one of the collections) and buttons to add/remove the buttons in the complete collection to/from the toolbars collection. HTH.

Code:

public ObservableCollection<Button> Buttons { get; set; }

public MainWindow()
{
    InitializeComponent();

    Buttons = new ObservableCollection<Button>();
    AddButton();

    DataContext = this;
}

private void ButtonAddButton_Click(object sender, RoutedEventArgs e)
{
    AddButton();
}

private void AddButton()
{
    var button = new Button();
    button.Content = "Add Button (" + Buttons.Count + ")";
    button.Click += ButtonAddButton_Click;
    Buttons.Add(button);
}

XAML:

<Grid>
    <ToolBarTray>
        <ToolBar ItemsSource="{Binding Buttons}">
            <ToolBar.ContextMenu>
                <ContextMenu>
                    <MenuItem Header="Customize" />
                </ContextMenu>
            </ToolBar.ContextMenu>
        </ToolBar>
    </ToolBarTray>
</Grid>

Answer 2

Since a ToolBar is an ItemsControl, you can try to use drag and drop frameworks to achieve what you want.

http://bea.stollnitz.com/blog/?p=53

This is a great solution for handling data-bound items. You'll need to customize the code a bit if you're not using data binding to show your ToolBar items (although I suggest you do use data binding' it will make saving the customizations much simpler).

When you hit "customize" in your app you can open a ListBox with available items (it must be in the same window for the above solution to work) and enable drag-and-drop from/to the ToolBars and ListBox using the attached property.