How to: Create and Customize the TileNavPane Control in Code
- 8 minutes to read
This topic shows how to create the TileNavPane control in code, populate it with navigation elements, and customize its appearance and behavior.
Create and Customize Buttons in the Nav Bar
In this example, we add the following navigation elements to the nav bar:
Main Menu button - a NavButton object. If you create the TileNavPane control in code, you should also create the main button. Set the button’s IsMain property to
true.Home and Help buttons that are aligned at the left and right in the nav bar.
Create category - a TileNavCategory object.
New customer and New manager category items - TileNavItem objects.
Use the TileNavPane.Buttons collection to add navigation elements to the nav bar.
Populate the Main Menu with Tiles
In this example, we create the following navigation elements in the main menu:
- Service and Help categories. Use the TileNavPane.Categories collection to add categories to the main menu. Categories are divided into My Work and Clients groups using the TileNavElement.GroupName property.
- In Service, we create Dashboards, Activities and Accounts category items. Use the category’s Items collection to add items to a category.
- In Dashboards, we create Sales pipeline and Estimated revenue sub-items - TileNavSubItem objects. Use the item’s SubItems collection to add sub-items to a category item.
To specify a navigation element’s caption and image, use the following properties:
- The NavElement.Caption and NavElement.ImageOptions properties - specify the caption and glyph when the navigation element is displayed as a button in the nav bar.
- The TileNavElement.TileText and TileNavElement.TileImage properties - specify the text and image when the navigation element is displayed as a tile in a drop-down bar.
Note
The TileNavElement.Tile property provides access to the tile that renders the navigation element in the drop-down bars. To display multiple text blocks and images in a tile, use the TileItem.Elements collection. See Tile Item Structure for more information.
Implementation
The code below implements the described Tile Navigation Pane.
Note
The following libraries should be added the project references:
- DevExpress.XtraBars.v24.1.dll
- DevExpress.XtraEditors.v24.1.dll
- DevExpress.Utils.v24.1.dll
- DevExpress.Data.v24.1.dll
It is also assumed that the project resources contain the required images.
using DevExpress.XtraBars.Navigation;
namespace MyTileNavPane {
public partial class Form1 : Form {
TileNavPane tileNavPane1;
public Form1() {
InitializeComponent();
InitializeTileNavPane();
this.Controls.Add(tileNavPane1);
}
void InitializeTileNavPane() {
// Create the TileNavPane control and
// specify the settings.
tileNavPane1 = new TileNavPane();
tileNavPane1.Dock = System.Windows.Forms.DockStyle.Top;
tileNavPane1.AllowGlyphSkinning = true;
tileNavPane1.OptionsPrimaryDropDown.ShowItemShadow = DevExpress.Utils.DefaultBoolean.True;
tileNavPane1.ElementClick += tileNavPane1_ElementClick;
// Create a button and set the IsMain property to true.
// When the TileNavPane control is created in code,
// the main button should also be created manually.
NavButton mainButton = new NavButton() {
Caption = "Main Menu",
IsMain = true
};
// Create a button.
NavButton home = new NavButton() {
Name = "Home",
Glyph = MyTileNavPane.Properties.Resources.home_32x32
};
// Assign a tooltip.
home.SuperTip = new DevExpress.Utils.SuperToolTip();
home.SuperTip.Items.Add("Home");
// Create a category.
TileNavCategory navBarCategory = new TileNavCategory() {
// Align the category at the nav bar right side.
Alignment = NavButtonAlignment.Right,
Caption = "Create",
Glyph = MyTileNavPane.Properties.Resources.add_32x32,
GlyphAlignment = NavButtonAlignment.Right
};
// Create category items.
TileNavItem navBarCategoryItem1 = new TileNavItem() { TileText = "New customer" };
TileNavItem navBarCategoryItem2 = new TileNavItem() { TileText = "New manager" };
// Add the items to the category.
navBarCategory.Items.AddRange(new TileNavItem[] { navBarCategoryItem1, navBarCategoryItem2 });
// Create a button without a caption.
NavButton help = new NavButton() { Glyph = MyTileNavPane.Properties.Resources.index_32x32 };
// Add the created category and buttons to the nav bar.
// Buttons are displayed in the order
// they are added to the collection
// with respect to their alignment.
tileNavPane1.Buttons.Add(home);
tileNavPane1.Buttons.Add(mainButton);
tileNavPane1.Buttons.Add(navBarCategory);
tileNavPane1.Buttons.Add(help);
// Create root-level categories.
TileNavCategory cat1 = new TileNavCategory() {
Caption = "SERVICE",
TileText = "Service",
TileImage = MyTileNavPane.Properties.Resources.newwizard_32x32,
Glyph = MyTileNavPane.Properties.Resources.newwizard_16x16
};
TileNavCategory cat2 = new TileNavCategory() {
Caption = "HELP",
TileText = "Help",
TileImage = MyTileNavPane.Properties.Resources.index_32x32,
Glyph = MyTileNavPane.Properties.Resources.index_16x16,
};
// Specify colors for the Service and Help category tiles.
cat1.Tile.AppearanceItem.Normal.BackColor = Color.Red;
cat1.Tile.AppearanceItem.Hovered.BackColor = Color.Green;
cat2.Tile.AppearanceItem.Normal.BackColor = Color.Blue;
// Specify the category tile size.
cat2.Tile.ItemSize = TileBarItemSize.Medium;
// Customize tile colors in different states.
cat1.OptionsDropDown.AppearanceItem.Normal.BackColor = Color.Coral;
cat1.OptionsDropDown.AppearanceItem.Hovered.BackColor = Color.LightCoral;
// Customize the group caption color.
cat1.OptionsDropDown.AppearanceGroupText.ForeColor = Color.Purple;
// Add the created categories to the main menu.
tileNavPane1.Categories.AddRange(new TileNavCategory[] { cat1, cat2 });
// Create category items.
TileNavItem item1 = new TileNavItem() {
Caption = "DASHBOARDS",
TileText = "Dashboards",
GroupName = "My Work",
TileImage = MyTileNavPane.Properties.Resources.pie_32x32,
Glyph = MyTileNavPane.Properties.Resources.pie_16x16
};
TileNavItem item2 = new TileNavItem() {
Caption = "ACTIVITIES",
TileText = "Activities",
GroupName = "My Work"
};
TileNavItem item3 = new TileNavItem() {
Caption = "ACCOUNTS",
TileText = "Accounts",
GroupName = "Clients",
Enabled = false
};
// Add the created items to Service category.
cat1.Items.AddRange(new TileNavItem[] { item1, item2, item3 });
// Create sub-items.
TileNavSubItem subItem1 = new TileNavSubItem() {
Caption = "Sales pipeline",
TileText = "Sales pipeline"
};
TileNavSubItem subItem2 = new TileNavSubItem() {
Caption = "Estimated revenue",
TileText = "Estimated revenue"
};
// Add the created sub-items to Dashboards item.
item1.SubItems.AddRange(new TileNavSubItem[] { subItem1, subItem2 });
}
void tileNavPane1_ElementClick(object sender, NavElementEventArgs e) {
// Use the e.Element property to determine the clicked navigation element.
// The e.IsTile property gets whether the clicked navigation element
// is rendered as a tile in a drop-down bar or as a button in the nav bar.
// In this example, Home button
// discards the selected navigation element.
if (e.Element.Name == "Home") tileNavPane1.SelectedElement = null;
}
}
}
See Also