WPF TileBar – Bind Items to a ViewModel Collection (MVVM)

The TileBar control allows you to create a Windows 10-inspired navigation UI.

Use the TileBar control with MVVM when you need to:

• Define a dynamic navigation UI based on data rather than hard-coded items.
• Bind a TileBar to a flat or hierarchical data structure.
• Apply styles, group headers, commands, and flyout content from your data model.

Implementation Details

Data Structure

The ViewModel exposes an ObservableCollection<Item> as the Items property. Each Item defines the following:

• A Name property that defines the tile's label.
• An optional Group string to group tiles visually.
• A collection of Children (if present) to populate the flyout.
• A Command that runs when the item is clicked.

public class Item : BindableBase {
    public string Name { get; set; }
    public string Group { get; set; }
    public ObservableCollection<Item> Children { get; set; }
    public bool IsHasChildren => Children != null && Children.Count > 0;
    public DelegateCommand Command { get; }
}

Item Styling and Grouping

The following code example uses the ItemContainerStyle property to configure tile appearance and behavior:

<Style TargetType="{x:Type dxnav:TileBarItem}" x:Key="TileBarItemStyleBase">
    <Setter Property="Content" Value="{Binding Name}" />
    <Setter Property="Command" Value="{Binding Command}" />
</Style>

<Style TargetType="{x:Type dxnav:TileBarItem}" BasedOn="{StaticResource TileBarItemStyleBase}" x:Key="TileBarItemStyleExtended">
    <Setter Property="dxnav:TileBar.GroupHeader" Value="{Binding Group}" />
    <Style.Triggers>
        <DataTrigger Binding="{Binding IsHasChildren}" Value="true">
            <Setter Property="FlyoutContent" Value="{Binding Children}" />
            <Setter Property="FlyoutContentTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <dxnav:TileBar
                            ItemsSource="{Binding}"
                            ItemContainerStyle="{StaticResource TileBarItemStyleBase}"
                            ItemColorMode="Inverted" />
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </DataTrigger>
    </Style.Triggers>
</Style>

TileBar Configuration

The TileBar control is bound to the Items collection and uses the extended style:

<dxnav:TileBar
    ItemsSource="{Binding Items}"
    ItemContainerStyle="{StaticResource TileBarItemStyleExtended}" />

Files to Review

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

Documentation

• TileBar
• TileBarItem
• TileBarItem.FlyoutContentTemplate

More Examples

• WPF TileNavPane – Display Navigation Buttons and Categories
• WPF Tiles – Create Windows-Inspired Tile Layout
• WPF MVVM Behaviors – Display Theme Selectors Based on BarItems
• WPF Dock Layout Manager – Merge Bars in Controls That Support Automatic Merging

Does this example address your development requirements/objectives?

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