Tile Bar
- 9 minutes to read
The TileBar control allows you to implement a tile-based UI for your application. For example:
- a row/column of static or clickable tiles
- a simple or hierarchical tile-based menu
- tiles with dropdown functionality (you can display any control in a tile’s dropdown), etc.
By default, tiles act as regular buttons, but also support the pressed state and the checking functionality.
In this topic:
- Create Tiles and Tile Groups
- Display One Text Region and Image
- Display Multiple Text Regions and Images
- Orientation, Scrolling and Element Layout
- Set Item Size
- Actions on Tile Clicking
- Selection
- Checked Tiles
- Drop-Down Functionality
- Appearance Customization
- Context Buttons
Create Tiles and Tile Groups
The Tile Bar control consists of tile groups (TileBarGroup objects), which in turn consist of tiles (TileBarItem objects). Before you add tiles, first a tile group(s) needs to be created.
You can add and customize tiles and tile groups at design time in several ways: context-dependent popup menus, Smart Tags, Visual Studio Properties window and dedicated designer, which allows adding multiple image and text regions to tiles.
Start by adding at least one tile group.
Then, you can create tiles using, for example, the context menu.
TileBarGroup group1 = new TileBarGroup();
tileBar1.Groups.Add(group1);
group1.Text = "OPERATIONS";
TileBarItem item1 = new TileBarItem();
item1.ItemSize = TileBarItemSize.Medium;
TileBarItem item2 = new TileBarItem();
item2.ItemSize = TileBarItemSize.Wide;
group1.Items.Add(item1);
group1.Items.Add(item2);
tileBar1.ItemSize = 70;
tileBar1.WideTileWidth = 150;
The TileBar, TileBarGroup and TileBarItem objects are descendants of the TileControl, TileGroup and TileItem classes, respectively. Most of the API the TileControl, TileGroup and TileItem classes expose are in effect for the TileBar control, its groups and items.
Display One Text Region and Image
If you need to display one text region and/or one image within a tile, use the properties the Tile (TileBarItem object) exposes.
You have quick access to these settings from the tile’s Smart Tag.
TileBarItem item1, item2;
//...
item1.Text = "Sales";
item1.Image = global::MyApplication.Properties.Resources.shoppingcart_32x32;
item1.ImageAlignment = DevExpress.XtraEditors.TileItemContentAlignment.TopLeft;
item2.Text = "Export";
item2.Image = global::MyApplication.Properties.Resources.exportfile_32x32;
item2.ImageAlignment = DevExpress.XtraEditors.TileItemContentAlignment.TopLeft;
Using the TileControl.ItemTextShowMode property, you can show text in tiles only when tiles are hovered over.
Note
Related API * TileItem.Text
Display Multiple Text Regions and Images
You can add multiple text and image regions to tiles, by creating tile elements, each of which can display an image and text. Tile elements provide options to control text and image positions and image scaling mode. A tile element can be aligned relative to another element.
At design time, use the Tile Element Designer to edit the tile element collection.
In code, you can add tile item elements using the TileItem.Elements property. See the Tile Item Structure to learn more.
Example
tileBar1.AppearanceItem.Normal.BackColor = Color.FromArgb(65, 168, 207);
tileBar1.AppearanceItem.Normal.ForeColor = Color.White;
TileBarGroup group1 = new TileBarGroup();
tileBar1.Groups.Add(group1);
TileBarItem tile1 = new TileBarItem();
tile1.ItemSize = DevExpress.XtraBars.Navigation.TileBarItemSize.Wide;
TileItemElement tileItemElement1 = new TileItemElement();
TileItemElement tileItemElement2 = new TileItemElement();
TileItemElement tileItemElement3 = new TileItemElement();
TileItemElement tileItemElement4 = new TileItemElement();
TileItemElement tileItemElement5 = new TileItemElement();
tile1.Elements.Add(tileItemElement1);
tile1.Elements.Add(tileItemElement2);
tile1.Elements.Add(tileItemElement3);
tile1.Elements.Add(tileItemElement4);
tile1.Elements.Add(tileItemElement5);
group1.Items.Add(tile1);
tileItemElement1.Image = Properties.Resources.exportfile_32x32;
tileItemElement1.ImageAlignment = TileItemContentAlignment.TopRight;
tileItemElement1.Text = "";
tileItemElement2.Image = Properties.Resources.sendxlsx_16x16;
tileItemElement2.ImageAlignment = TileItemContentAlignment.BottomRight;
tileItemElement2.Text = "";
tileItemElement3.AnchorAlignment = DevExpress.Utils.AnchorAlignment.Left;
tileItemElement3.AnchorElement = tileItemElement2;
tileItemElement3.Image = Properties.Resources.sendxls_16x16;
tileItemElement3.Text = "";
tileItemElement4.AnchorAlignment = DevExpress.Utils.AnchorAlignment.Left;
tileItemElement4.AnchorElement = tileItemElement3;
tileItemElement4.Image = Properties.Resources.sendpdf_16x16;
tileItemElement4.Text = "";
tileItemElement5.Text = "<size=+4>Export and Mail";
tileItemElement5.TextAlignment = DevExpress.XtraEditors.TileItemContentAlignment.TopLeft;
Orientation, Scrolling and Tile Layout
By default, tiles are arranged horizontally. You can also orient them vertically with the TileControl.Orientation property.
If the Tile Bar size exceeds the available bounds, scroll buttons appear. With the TileControl.ScrollMode setting you can choose how to present scroll handles. For instance, you can enable a scroll bar or disable the scroll handles at all.
The Tile Bar provides settings to align tiles within the control’s bounds, hide group captions, and specify the distance between items and groups.
Note
Related API * TileControl.Orientation
Set Item Size
Tiles in the Tile Bar can be of two sizes: Medium and Wide.
A medium tile is a square one, whose width and height are specified by the TileBar.ItemSize integer setting.
A wide tile is a rectangular item. The TileBar.ItemSize and TileBar.WideTileWidth properties specify the item’s height and width, respectively.
After a tile is created, you can specify the tile’s size format with the TileBarItem.ItemSize property.
tileBar1.ItemSize = 80;
tileBar1.WideTileWidth = 160;
item1.ItemSize = TileBarItemSize.Medium;
item2.ItemSize = TileBarItemSize.Wide;
Actions on Tile Clicking
By default, tiles act as buttons and raise the following events on mouse clicking.
- TileControl.ItemClick - Allows you to respond to clicking any tile.
- TileItem.ItemClick - Allows you to respond to clicking a specific tile.
TileBarItem item1, item2;
//...
item1.Tag = 111;
item2.Tag = 112;
private void tileBar1_ItemClick(object sender, DevExpress.XtraEditors.TileItemEventArgs e) {
int itemTag = Convert.ToInt32(e.Item.Tag);
switch (itemTag) {
case 111:
//...
break;
case 112:
//...
break;
default:
XtraMessageBox.Show(e.Item.Text + " clicked");
break;
}
}
The Tile Bar also provides events to respond to other mouse actions (double-clicking, right button clicking, etc.). See the Related API list below.
Note
Related API * TileControl.ItemClick, TileItem.ItemClick
Selection
The TileControl.AllowSelectedItem property enables the tile selection mode, in which tiles act as radio-buttons. A click on a tile switches it to the pressed state.
An end-user also select tiles by navigating between them using the keyboard Arrow keys.
Handle the TileControl.SelectedItemChanged event to respond to selection changes.
tileBar1.AllowSelectedItem = true;
tileBar1.SelectedItem = item2;
tileBar1.SelectedItemChanged += tileBar1_SelectedItemChanged;
tileBar1.SelectionBorderWidth = 4;
tileBar1.SelectionColorMode = SelectionColorMode.UseItemBackColor;
void tileBar1_SelectedItemChanged(object sender, TileItemEventArgs e) {
//...
}
Note
Related API * TileControl.AllowSelectedItem
Checked Tiles
The Tile Bar control supports the item checking functionality, with which a single or multiple tiles can be checked - by right mouse clicking (on non-touch aware screens) or dragging tiles down (on touch-input devices).
Use the TileControl.ItemCheckMode property to enable single or multiple item check mode.
tileBar1.ItemCheckMode = TileItemCheckMode.Multiple;
tileBar1.ItemCheckedChanged += tileBar1_ItemCheckedChanged;
item2.Checked = true;
void tileBar1_ItemCheckedChanged(object sender, TileItemEventArgs e) {
//...
}
Note
Related API * TileControl.ItemCheckMode
Drop-Down Functionality
Each tile can be associated with a drop-down control using the TileBarItem.DropDownControl property. Drop a TileBarDropDownContainer control from the Toolbox to the form. Add custom controls to the created TileBarDropDownContainer, and then assign the container to the TileBarItem.DropDownControl property. Tiles with associated drop-down controls automatically display drop-down buttons.
You can add any control to a TileBarDropDownContainer, including another TileBar control.
The Tile Bar allows you to associate drop-down containers with tiles dynamically, by handling the TileBar.DropDownShowing event.
Example
The following code demonstrates how to create a TileBar control with one tile and associate a dropdown control with this tile.
In this example, a TileBar control is created. Then, a TileBarGroup with one TileBarItem is added to this control. To associate a dropdown control with a tile, a TileBarDropDownContainer is created and assigned to the TileBarItem.DropDownControl property. Two controls (RichEditControl and SimpleButton) are placed into the container.
The following image demonstrates the result of this code.
using DevExpress.XtraBars.Navigation;
using DevExpress.XtraEditors;
using DevExpress.XtraRichEdit;
private TileBar tileBar;
private void Form1_Load(object sender, EventArgs e) {
tileBar = new TileBar();
this.Controls.Add(tileBar);
tileBar.Dock = DockStyle.Top;
tileBar.Height = 100;
tileBar.BackColor = Color.LightGray;
TileBarGroup tileBarGroup = new TileBarGroup();
tileBar.Groups.Add(tileBarGroup);
TileBarItem item = new TileBarItem();
item.Text = "Notes";
item.Image = global::WindowsFormsApplication1.Properties.Resources.textbox_32x32;
item.DropDownOptions.BackColorMode = BackColorMode.UseTileBackColor;
item.DropDownOptions.Height = 185;
tileBarGroup.Items.Add(item);
TileBarDropDownContainer ddContainer = new TileBarDropDownContainer();
ddContainer.Size = new System.Drawing.Size(595, 185);
SimpleButton button = new SimpleButton();
button.Anchor = ((System.Windows.Forms.AnchorStyles)((System.Windows.Forms.AnchorStyles.Bottom | System.Windows.Forms.AnchorStyles.Right)));
button.Location = new System.Drawing.Point(510, 152);
button.Size = new System.Drawing.Size(75, 22);
button.Text = "Close";
button.Click += button_Click;
RichEditControl richEditControl = new RichEditControl();
richEditControl.Dock = System.Windows.Forms.DockStyle.Top;
richEditControl.Text = "";
richEditControl.Height = 142;
richEditControl.ActiveViewType = RichEditViewType.Draft;
richEditControl.Options.HorizontalScrollbar.Visibility = RichEditScrollbarVisibility.Hidden;
ddContainer.Controls.Add(button);
ddContainer.Controls.Add(richEditControl);
item.DropDownControl = ddContainer;
}
void button_Click(object sender, EventArgs e) {
tileBar.HideDropDownWindow();
}
Note
Related API * TileBarItem.DropDownControl
Appearance Customization
Use the Tile Bar’s TileControl.AppearanceItem property to customize tiles’ default appearance settings in the normal, hovered, pressed and selected states. You can override these settings for individual tiles using their TileItem.AppearanceItem properties. The image below demonstrates using these two properties simultaneously.
tileBar1.AppearanceItem.Normal.Font = new Font("Tahoma", 10.5f);
tileBar1.AppearanceItem.Normal.ForeColor = Color.LemonChiffon;
tileBar1.AllowGlyphSkinning = true;
tileBar1.Groups[0].Items[0].AppearanceItem.Normal.BackColor = Color.FromArgb(0, 135, 156); //green
tileBar1.Groups[0].Items[1].AppearanceItem.Normal.BackColor = Color.FromArgb(64, 64, 64); //dark gray
tileBar1.Groups[0].Items[2].AppearanceItem.Normal.BackColor = Color.FromArgb(204, 109, 0); //orange
tileBar1.Groups[1].Items[0].AppearanceItem.Normal.BackColor = Color.FromArgb(0, 115, 196); //blue
Note
Related API * TileControl.AppearanceItem, TileItem.AppearanceItem
- TileBar.BackColor, TileBar.BackgroundImage, TileBar.BackgroundImageLayout
- TileControl.AppearanceGroupText
- TileControl.AppearanceText
- TileControl.ItemBorderVisibility, TileItem.BorderVisibility
Background Images and Shadows
Tiles can display background images and shadows. You can use corresponding settings to change the background image’s alignment and scaling mode.
Note
Related API * TileItem.BackgroundImage
Glyph Skinning
If tiles display gray-scale images, you can enable the glyph skinning feature, which paints tile images using the tile’s foreground color.
HTML Text Formatting
The Tile Bar allows you to provide contents for tile items in a simplified HTML format. When specifying the tile’s Text property you can specify font size, style and color for the entire text or its part, and insert line breaks.
tileBarItem1.Text = "<b><Size=+3><COLOR=DodgerBlue>Dev</COLOR><Color=DeepSkyBlue>Express<br></COLOR></size></b><COLOR=White><SIZE=+6>Visual Studio<br>Controls</SIZE><COLOR>";
Context Buttons
Context buttons allow you to implement additional functionality for tiles. For instance, you can use a regular context button (it can display text and image) that fires a certain action on a click. A check context button allows you to implement custom tile checking logic. A rating context button displays a rating control in each tile.
