In my previous blog post, I introduced the enhanced MVVM support for our WPF & Silverlight Data Grid Control to enable binding for column and summary creation. In this post, I’ll introduce new improvements in three of our other Silverlight and WPF components - DXBars, DXRibbon and GalleryControl. These features make it easy to use the controls when building applications following the MVVM pattern.
The main scenario addressed by this new feature is the automatic generation of visual objects in DXBars, DXRibbon and GalleryControl based on data provided by underlying objects (i.e. by View Model classes).
For the BarManager, the ideal MVVM support case would be as follows: The developer provides 1) a collection of objects each of which describes a toolbar and 2) a collection describing bar commands. As a result the BarManager automatically generates bars and populates them with bar items based on the provided data.
As an example, let's see how one could write an application using the BarManager and the MVVM pattern prior to the introduction of the enhanced features. Here is the markup that creates bars from an underlying collection:
- <UserControl.Resources>
- <local:MyBarModelToBarValueConverter x:Key="barValueConverter"/>
- </UserControl.Resources>
- <Grid>
- <dxb:BarManager x:Name="barManager1">
- <Grid>
- <dxb:BarContainerControl ItemsSource="{Binding Path=BarsCollecton, Converter={StaticResource barValueConverter}}"/>
- </Grid>
- </dxb:BarManager>
- </Grid>
In the code, a bar container is populated with bars from a BarsCollection, which is a View Model class. At first glance, this code looks quite simple. However, if you go deeper you will see that it requires additional code to be written:
- A custom ValueConverter that will convert collection elements into bar objects
- Code that initializes a bar's properties via data binding
- Code that synchronizes the bar collection and underlying View Model collection
That’s not all though as the Bar’s own bar items will also need to be populated from another View Model collection. Therefore an additional ValueConverter must be implemented to convert collection elements into bar items. The code complexity increases with increasing the hierarchy level of children in a control. For instance, in DXRibbon, a four level hierarchy will need to be dealt with – requiring more complex code in your project.
So, we looked at these scenarios and made some changes to our controls to make it easier to work with them using the MVVM pattern.
Let’s start with the new properties we’ve added to our DXBars, DXRibbon and GalleryControl controls:
- ItemsSource
- ItemStyle
- ItemTemplate
- ItemTemplateSelector
All controls will follow the same naming convention for these properties.
Using these properties you can easily generate a control's items (including nested items) from collections by writing only XAML code, with one exception - code for TemplateSelectors should be written in code-behind files.
So let’s take a look at a View Model that contains a Bars collection:
- public class BarManagerViewModel : DependencyObject
- {
- public static readonly DependencyProperty BarsProperty =
- DependencyProperty.Register("Bars", typeof(ObservableCollection<BarViewModel>), typeof(BarManagerViewModel), new PropertyMetadata(null));
-
- public ObservableCollection<BarViewModel> Bars
- {
- get { return (ObservableCollection<BarViewModel>)GetValue(BarsProperty); }
- set { SetValue(BarsProperty, value); }
- }
- //...
- }
Then suppose we also have another View Model that provides items for bars:
- public class BarViewModel : BarViewModelBase
- {
- public static readonly DependencyProperty CommandsProperty;
-
- static BarViewModel()
- {
- CommandsProperty = DependencyProperty.Register("Commands", typeof(ObservableCollection<BarCommand>), typeof(BarViewModel), new PropertyMetadata(null));
- }
- public ObservableCollection<BarCommand> Commands
- {
- get { return ((ObservableCollection<BarCommand>)GetValue(CommandsProperty)); }
- set { SetValue(CommandsProperty, value); }
- }
- //...
- }
In the code, we'll set a DataContext for the main window to BarManagerViewModel. This DataContext will be propagated to window's children, including a BarManager component:
- BarManagerViewModel viewModel = new BarManagerViewModel();
- this.DataContext = viewModel;
Once we ensure that the BarManager gets the correct DataContext, we can populate a BarManager from the BarManagerViewModel.Bars collection using data binding:
- <local:BarsDemoModule.Resources>
- <DataTemplate x:Key="barTemplate">
- <ContentControl>
- <dxb:Bar Caption="{Binding Name}"
- ItemLinksSource="{Binding Commands}"/>
- </ContentControl>
- </DataTemplate>
- </local:BarsDemoModule.Resources>
- <dxdb:DemoModuleControl>
- <Grid>
- <dxb:BarManager
- BarsSource="{Binding Bars}"
- BarTemplate="{StaticResource barTemplate}"
- />
- </Grid>
- </dxdb:DemoModuleControl>
In this example, a DataTemplate is used to generate each bar from an underlying View Model (BarViewModel). You’ll notice that BarManagerViewModel.Bars is a collection of BarViewModel objects – this collection's objects are automatically assigned to the DataTemplate's DataContext, allowing us to initialize a bar's settings with properties on BarViewModel.
When defining a DataTemplate for a Bar, the DataTemplate's root element must be ContentControl with a Bar object as the content.
It is also possible to define a style that will be automatically applied to each bar created via a template. For instance, in the markup below, a style defines an item template selector (an object that selects templates for bar items based on your logic).
- <local:BarCommandTemplateSelector x:Key="itemTemplateSelector"/>
-
- <Style x:Key="barStyle" TargetType="dxb:Bar">
- <Setter Property="ItemTemplateSelector" Value="{StaticResource itemTemplateSelector}"/>
- </Style>
- <dxb:BarManager
- BarsSource="{Binding Bars}"
- BarTemplate="{StaticResource barTemplate}"
- BarStyle="{StaticResource barStyle}"
- />
As seen above, all bindings between View Models and View are set up in XAML, without using code-behind files. However, there is one exception: template selectors must be written in code-behind files. The BarCommandTemplateSelector below chooses between two DataTemplates (subItemTemplate or itemTemplate) based on our model:
- public class BarCommandTemplateSelector : DataTemplateSelector
- {
- public override DataTemplate SelectTemplate(object item, DependencyObject container)
- {
- if (item is BarSubMenuCommand) return (DataTemplate)MVVMBar.SharedResources["subItemTemplate"];
- return (DataTemplate)MVVMBar.SharedResources["itemTemplate"];
- }
- }
The complete code of this sample can be found in the "MVVM Bars" demos for WPF and Silverlight shipped with the installation.
The described approach is extremely efficient and can also be applied when writing MVVM applications with the DXRibbon and GalleryControl. These controls provide corresponding properties (ItemsSource, ItemStyle, ItemTemplate and ItemTemplateSelector) that allow the controls to be populated with items from underlying collections.
For implementation details, you may refer to the "MVVM Ribbon" demos for WPF and Silverlight included in the installation. The online demos can be launched from our Demo Center at:
http://demos.devexpress.com/DemoCenter/
Finally, below you will find a list of DevExpress classes and properties in DXBars, DXRibbon and GalleryControl that support the MVVM pattern:
| Class | Properties |
| BarManager | BarsSource BarTemplate BarStyle BarTemplateSelector |
| Bar, BarLinkContainerItem, BarSubItem, PopupMenu, PopupMenuInfo, RibbonPageGroup, ApplicationMenu | ItemLinksSource ItemTemplate ItemStyle ItemTemplateSelector |
| RibbonControl , RibbonStatusBarControl | CategoriesSource CategoryTemplate CategoryStyle CategoryTemplateSelector |
| RibbonPageCategory | PagesSource PageTemplate PageTemplateSelector PageStyle |
| RibbonPage | GroupsSource GroupTemplate GroupStyle GroupTemplateSelector |
| GalleryControl | GroupsSource GroupTemplate GroupStyle GroupTemplateSelector |
| GalleryItemGroup | ItemsSource ItemTemplate ItemStyle ItemTemplateSelector |