TileBar Class

A bar with tiles that support the dropdown functionality.

Namespace: DevExpress.Xpf.Navigation

Assembly: DevExpress.Xpf.Controls.v20.1.dll

Declaration

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.

<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>

Inheritance

Object
DispatcherObject
DependencyObject
Visual
UIElement
FrameworkElement
Control
ItemsControl
Selector
DevExpress.Xpf.WindowsUI.Base.veSelectorBase
DevExpress.Xpf.WindowsUI.Base.veSelector
TileBar
See Also