MVVM Application with WPF Bars

This example demonstrates how to use WPF Bars in an MVVM application. Bars are bound to commands that allow you to add and remove items from the data source and edit item properties:

Implementation Details

Add Button

The Add button is the BarButtonItem object bound to the AddIssue View Model command:

<dxb:BarButtonItem x:Name="addItem" 
                   Content="Add" 
                   Command="{Binding AddIssueCommand}" 
                   .../>

[Command]
public void AddIssue() {
    int newId = Issues.Count == 0 ? 0 : Issues.Max(p => p.Id) + 1;
    Issue issue = new Issue() { Id = newId, Subject = "New Issue " + newId, 
                                Completed = false, Priority = Priority.Low };
    Issues.Add(issue);
}

The Issues property is the content control's ItemsSource.

Note

You can also use the DialogService to invoke a dialog when a user clicks the Add button. For example, to allow users to specify the created item properties.

Remove Button

The Remove button is the BarButtonItem object bound to the RemoveIssue View Model command:

<dxb:BarButtonItem x:Name="removeItem" 
                   Content="Remove" 
                   Command="{Binding RemoveIssueCommand}" 
                   .../>

[Command]
public void RemoveIssue() {
    Issues.Remove(SelectedIssue);
}
public bool CanRemoveIssue() {
    return SelectedIssue != null;
}

The SelectedIssue is a View Model property bound to the content control's SelectedItem property (ListBoxEdit.SelectedItem in this example).

Completed Button

The Completed button is the BarCheckItem object that toggles the selected item's Completed property:

<dxb:BarCheckItem x:Name="completed" Content="Completed" 
                  IsChecked="{Binding SelectedIssue.Completed}"
                  IsEnabled="{DXBinding 'SelectedIssue != null'}"
                  .../>

Priority Button

The Priority button is the BarSubItem object that contains BarCheckItems. This button allows you to specify the selected item's Priority property value:

<dxb:BarSubItem x:Name="priority" Content="Priority" 
                IsEnabled="{DXBinding 'SelectedIssue != null'}">
    <dxb:BarCheckItem Content="Low" GroupIndex="0" Background="Green" Foreground="White"
                      Command="{DXCommand Execute='SelectedIssue.Priority = $local:Priority.Low'}"
                      IsChecked="{DXBinding 'SelectedIssue.Priority == $local:Priority.Low', Mode=OneWay}"/>
    <dxb:BarCheckItem Content="Normal" GroupIndex="0" Background="Orange" Foreground="White"
                      Command="{DXCommand Execute='SelectedIssue.Priority = $local:Priority.Normal'}"
                      IsChecked="{DXBinding 'SelectedIssue.Priority == $local:Priority.Normal', Mode=OneWay}"/>
    <dxb:BarCheckItem Content="High" GroupIndex="0"  Background="Red" Foreground="White"
                      Command="{DXCommand Execute='SelectedIssue.Priority = $local:Priority.High'}"
                      IsChecked="{DXBinding 'SelectedIssue.Priority == $local:Priority.High', Mode=OneWay}"/>
</dxb:BarSubItem>

Refer to the following help topics for more information: DXBinding, DXCommand, and Language Specification.

Tags Selector

The Tags selector is the BarEditItem object with the embedded Checked Token Combo Box. This element allows you to assign multiple tags to the selected item:

<dxb:BarEditItem x:Name="tags" Content="Tags: " 
                 EditValue="{Binding SelectedIssue.Tags}" 
                 IsVisible="{DXBinding 'SelectedIssue != null'}">
    <dxb:BarEditItem.EditSettings>
        <dxe:ComboBoxEditSettings ItemsSource="{dxe:EnumItemsSource EnumType={x:Type local:Tag}}">
            <dxe:ComboBoxEditSettings.StyleSettings>
                <dxe:CheckedTokenComboBoxStyleSettings 
                    AllowEditTokens="False" 
                    FilterOutSelectedTokens="False" 
                    NewTokenPosition="None"/>
            </dxe:ComboBoxEditSettings.StyleSettings>
        </dxe:ComboBoxEditSettings>
    </dxb:BarEditItem.EditSettings>
</dxb:BarEditItem>

The BarEditItem.EditValue property is bound to the Tags property of the List<object> type. In this case, the Combo Box with multiple item selection can post selected values to the data source. Refer to the following help topic for more information: Implement multi-select in DevExpress WPF Data Editors.

Item Context Menu

Each item contains the context menu that duplicates the listed actions. To create this menu, add bar item links to the PopupMenu's Items collection and assign this menu to the BarManager.DXContextMenu attached property:

<dxe:ListBoxEdit.ItemTemplate>
    <DataTemplate>
        <StackPanel Orientation="Horizontal">
            <dxe:ComboBoxEdit>
                <!-- ... -->
            </dxe:ComboBoxEdit>
            <TextBlock ... />

            <dxb:BarManager.DXContextMenu>
                <dxb:PopupMenu>
                    <dxb:BarButtonItemLink BarItemName="addItem"/>
                    <dxb:BarButtonItemLink BarItemName="removeItem"/>
                    <dxb:BarItemLinkSeparator/>
                    <dxb:BarCheckItemLink BarItemName="completed"/>
                    <dxb:BarItemLinkSeparator/>
                    <dxb:BarSubItemLink BarItemName="priority"/>
                    <dxb:BarItemLinkSeparator/>
                    <dxb:BarEditItemLink BarItemName="tags"/>
                </dxb:PopupMenu>
            </dxb:BarManager.DXContextMenu>

        </StackPanel>
    </DataTemplate>
</dxe:ListBoxEdit.ItemTemplate>

Files to Review

• Data.cs (VB: Data.vb)
• ViewModel.cs (VB: ViewModel.vb)
• MainWindow.xaml (VB: MainWindow.xaml)

Documentation

• DevExpress MVVM Framework
• List of Bar Items and Links
• Menus

More Examples

• Generate Bar Items from a View Model Collection in an MVVM Application

Does this example address your development requirements/objectives?

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