TileBar Class

A bar with tiles that support the dropdown functionality.

Namespace: DevExpress.Xpf.Navigation

Assembly: DevExpress.Xpf.Controls.v21.2.dll

NuGet Package: DevExpress.Wpf.Controls

Declaration

C#
VB.NET

public class TileBar :
    veSelector,
    IFlyoutProvider,
    ILogicalOwner,
    IInputElement

Public Class TileBar
    Inherits veSelector
    Implements IFlyoutProvider,
               ILogicalOwner,
               IInputElement

Remarks

You can use the TileBar control to implement a tile-based menu for your application. The TileBar consists of tiles (TileBarItem objects) arranged in a single row. Use the TileBarItem.FlyoutContent property to associate any tile with a dropdown control. In this case, this tile displays a dropdown button used to invoke the dropdown control.

You can assign any control to the TileBarItem.FlyoutContent property, including another TileBar control. When you click an item’s dropdown button, another TileBar is displayed in a dropdown window.

DX-TileBar

For a TileBar control displayed in a dropdown, set the TileBar.ItemColorMode property to Inverted to achieve a tile color different from the TileBar’s background.

Tiles in the TileBar can be of different widths. Use the TileBarItem.Size property to specify the item size.

View Example

XAML

<dx:ThemedWindow
        ....
        xmlns:dxb="http://schemas.devexpress.com/winfx/2008/xaml/bars"
        xmlns:dxnav="http://schemas.devexpress.com/winfx/2008/xaml/navigation">
    <Window.Resources>
        <Style x:Key="SecondLevelTileItemStyle" TargetType="{x:Type dxnav:TileBarItem}">
            <Setter Property="Foreground" Value="Black"/>
            <Setter Property="Background" Value="White"/>
            <Setter Property="Height" Value="40"/>
        </Style>
    </Window.Resources>
    <Grid>
        <dxnav:TileBar VerticalAlignment="Top" Background="#FFE8E8E8">
            <dxnav:TileBarItem TileGlyph="Images/Dashboard.png" Content="Dashboard" Background="#FF00879C"/>
            <dxnav:TileBarItem TileGlyph="Images/Tasks.png" Content="Tasks" Background="#FF404040"/>
            <dxnav:TileBarItem TileGlyph="Images/Employees.png" Content="Employees" Background="#FFCC6D00"/>
            <dxnav:TileBarItem TileGlyph="Images/Products.png" Content="Products" Background="#FF0073C4">
                <dxnav:TileBarItem.FlyoutContentTemplate>
                    <DataTemplate>
                        <dxnav:TileBar x:Name="customTileBar" Background="#FF0073C4" ItemContainerStyle="{StaticResource SecondLevelTileItemStyle}">
                            <dxnav:TileBarItem Content="HD Video Player"/>
                            <dxnav:TileBarItem Content="50inch Plasma"/>
                            <dxnav:TileBarItem Content="21inch Monitor"/>
                            <dxnav:TileBarItem Content="Remote Control"/>
                        </dxnav:TileBar>
                    </DataTemplate>
                </dxnav:TileBarItem.FlyoutContentTemplate>
            </dxnav:TileBarItem>
            <dxnav:TileBarItem TileGlyph="Images/Customers.png" Content="Customers" Background="#FF404040"/>
            <dxnav:TileBarItem TileGlyph="Images/Sales.png" Content="Sales" Background="#FF3E7038"/>
            <dxnav:TileBarItem TileGlyph="Images/Opportunities.png" Content="Opportunities" Background="#FF404040"/>
        </dxnav:TileBar>

    </Grid>
</dx:ThemedWindow>

The following code snippet (auto-collected from DevExpress Examples) contains a reference to the TileBar class.

Note

The algorithm used to collect these code examples remains a work in progress. Accordingly, the links and snippets below may produce inaccurate results. If you encounter an issue with code examples below, please use the feedback form on this page to report the issue.

XAML

how-to-bind-tilebar-to-a-collection-of-items-t148752/CS/TBExample/MainWindow.xaml#L24

<DataTemplate>
    <dxnav:TileBar ItemsSource="{Binding}" ItemContainerStyle="{StaticResource TileBarItemStyleBase}" ItemColorMode="Inverted"/>
</DataTemplate>