DevExpress-Examples / wpf-tilenavpane-display-nav-buttons-and-categories

Displays navigation buttons and categories in the WPF TileNavPane control.

WPF TileNavPane - Display Navigation Buttons and Categories

This example builds a navigation panel using the TileNavPane control. This control displays default and custom buttons in a navigation bar and defines a category hierarchy populated with nested items.

Use this example to introduce a clean and touch-friendly navigation experience, similar to modern Windows apps. The TileNavPane allows you to group navigation commands, display glyphs, and create expandable menus that simplify access to nested views or commands.

Implementation Details

Navigation Bar Buttons

The following code example defines four navigation buttons in the TileNavPane.NavButtons collection:

<dxnav:TileNavPane.NavButtons>
    // The "DevExpress CRM" main button
    <dxnav:NavButton Content="DevExpress CRM" 
                     IsMain="True" 
                     Glyph="{dx:DXImageGrayscale Image=Home_32x32.png}" 
                     AllowGlyphTheming="True"/>
    // The "Create..." button with nested items
    <dxnav:NavButton Content="Create..." 
                     HorizontalAlignment="Right" 
                     AllowGlyphTheming="True" 
                     Glyph="{dx:DXImageGrayscale Image=Add_32x32.png}">
        <dxnav:TileNavItem Content="Staff">
            <dxnav:TileNavSubItem Content="Manager"/>
            <dxnav:TileNavSubItem Content="Seller"/>
        </dxnav:TileNavItem>
        <dxnav:TileNavItem Content="Client"/>
    </dxnav:NavButton>
    // The "Settings" button
    <dxnav:NavButton Content="Settings" 
                     GlyphAlignment="Right" 
                     Glyph="{dx:DXImageGrayscale Image=Customization_32x32.png}" AllowGlyphTheming="True" 
                     HorizontalAlignment="Right"/>
    // The button intended to close the panel
    <dxnav:NavButton HorizontalAlignment="Right" 
                     Glyph="{dx:DXImageGrayscale Image=Cancel_32x32.png}" 
                     AllowGlyphTheming="True"/>
</dxnav:TileNavPane.NavButtons>

Navigation Categories and Items

The following code example defines one navigation category in the TileNavPane.Categories collection. The category contains a single item with two sub-items:

<dxnav:TileNavCategory Content="Sales">
    <dxnav:TileNavItem Content="Dashboards"
                       TileGlyph="{dx:DXImageGrayscale Image=Pie_32x32.png}"
                       AllowGlyphTheming="True">
        <dxnav:TileNavSubItem Content="Sales pipeline"/>
        <dxnav:TileNavSubItem Content="Estimated revenue"/>
    </dxnav:TileNavItem>
</dxnav:TileNavCategory>

Files to Review

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

Documentation

• NavButtons
• TileNavPane
• TileNavCategory
• Categories

More Examples

• WPF TileBar – Bind Items to a ViewModel Collection (MVVM)
• WPF Tiles - Create Windows-inspired Tile Layout

Does this example address your development requirements/objectives?

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