WPF Bars - Generate Bar Items from a View Model Collection in an MVVM Application

This example demonstrates how to generate bars (main menu and status bar) and bar items (BarButtonItem, BarSubItem, BarItemSeparator, and BarStaticItem) from a View Model collection:

Each bar container has *Source, *Template, and *TemplateSelector properties. The *Source property specifies a View Model collection that contains objects used to generate child bar items. *Template and *TemplateSelector properties specify a data template that generates items from the specified collection. Refer to the following help topic for a complete list of properties: WPF Ribbon, Bars, and Menu: MVVM Support.

Implementation Details

This project contains View Models used to generate different bar items:

• BarViewModel - describes a bar (main menu and status bar) that stores bar items.
• BarItemViewModelBase - describes a BarItemSeparator.
• StaticBarItemViewModel - describes a BarStaticItem.
• BarItemViewModel - describes a BarButtonItem.
• GroupBarItemViewModel - describes a BarSubItem.

public class BarItemViewModel : StaticBarItemViewModel {

    Action<string> action;

    public BarItemViewModel(Action<string> action, string caption = null, Uri glyph = null) {
        this.Caption = caption;
        this.action = action;
        this.Glyph = glyph;
    }

    [Command]
    public void ExecuteAction(string parameter) {
        if (action != null) {
            action(parameter);
        }
    }

    public Uri Glyph {
        get { return this.GetValue<Uri>(); ; }
        set { this.SetValue(value); }
    }

}

The MainViewModel class includes the Bars collection that consists of View Model class objects:

public class MainViewModel : ViewModelBase {
    public ObservableCollection<BarViewModel> Bars { get; set; }
    // ...
}

The MainWindow class contains implicit data templates associated with View Model classes. These templates are applied to each generated object of the specified type:

<DataTemplate DataType="{x:Type ViewModels:BarItemViewModel}">
    <ContentControl>
        <dxb:BarButtonItem 
            Content="{Binding Caption}"
            Glyph="{Binding Glyph}"
            GlyphAlignment="Top"
            BarItemDisplayMode="ContentAndGlyph"
            Command="{Binding ExecuteActionCommand}"
            CommandParameter="{Binding Caption}"/>
    </ContentControl>
</DataTemplate>

The BarManager.BarsSource property is bound to the Bars View Model collection.

Files to Review

• MainViewModel.cs (VB: MainViewModel.vb)
• MainWindow.xaml (VB: MainWindow.xaml)
• BarTemplateSelector.cs (VB: BarTemplateSelector.vb)

Documentation

• WPF Ribbon, Bars and Menu: MVVM Support
• The List of Bar Items and Links

More Examples

• MVVM Application with WPF Bars
• WPF Bars - Use ToolBarControl, MainMenuControl, and StatusBarControl Containers

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)