windowsforms-10986-controls-and-libraries-navigation-controls-tile-control-groups-and-items-tile-item-structure.md
Tile items are able to display multiple text labels and images. Additionally, you can provide a background image or customize a background color(s). Text can be formatted using HTML tags. In addition, tiles support animation. Combined together, all these features create unmatched capabilities for customizing your tiles.
In this section:
Each tile provides a collection of elements (the TileItemElement class objects) accessed with the TileItem.Elements property. An element is the simplest block from which tile content is built. Each element can display a text string (the TileItemElement.Text property) and an image (the TileItemElement.Image property). However, it is recommended that each element stores only one type of content (either an image or a text string). Such elements are easier to arrange across their parent tiles (see the Arranging Elements section below).
If you need to display a single text label and/or image within the tile, use the TileItem.Text and/or TileItem.Image properties respectively. In this case the control will automatically create a tile item element and specify this element’s text and image properties. In fact, all tile properties that affect this item’s content (alignment, orientation, appearance settings etc.) are the exposed properties of the very first element that belongs to this tile. This feature allows you to quickly customize simple tiles without the necessity to create and tweak individual elements.
To have more than one content block for a tile, modify the TileItem.Elements collection. To add, modify or remove elements at design time, invoke the target tile’s smart-tag and click the ‘Edit TileItem Elements’ link. This will open the Elements Collection Editor, as the following figure illustrates. Buttons on this dialog’s top allow you to add, remove and re-arrange elements. The list on the left shows all currently existing elements. Clicking an element allows the property grid on the dialog’s right display the selected element’s properties. The central dialog area is a live preview that demonstrates the way your tile looks.
Each element provides its own TileItemElement.Appearance property group. Settings stored within this group have the highest priority and override both tile and tile control appearance settings (the TileItem.AppearanceItem and TileControl.AppearanceItem properties respectively).
There are various properties related to element alignment within a parent tile item. You are free to choose any approach depending on the complexity of your tile design.
TileItemElement.TextAlignment and TileItemElement.ImageAlignment properties.
TileItemElement.TextLocation and TileItemElement.ImageLocation properties.
The TileItemElement.ImageToTextAlignment and TileItemElement.ImageToTextIndent properties.
Anchor properties.
HTML text formatting
Image borders
Stretching bounds
You can either colorize tile background colors, or assign a specific background image for your tiles. In case both are set, the background image will overlap the background color.
AppearanceObject, accessed through the TileItem.AppearanceItem property (the TileItemFrame.Appearance property for animation frames).Other DevExpress .NET Windows Forms controls support Appearances as well. Refer to this help article for more information: Application Appearance and Skin Colors.
The Tile Template Gallery is a set of predefined tile templates, which allow you to instantly get a desired tile layout. Instead of creating elements and manually arranging them across the tile, choose a tile template and apply it. The Gallery contains ready-to-use templates for both static and animated tile types. See the Design-Time Customization topic to learn more.
The following code illustrates how to populate a Tile Item with elements.
TileItemElement tileItemElement1 = new TileItemElement();
TileItemElement tileItemElement2 = new TileItemElement();
TileItemElement tileItemElement3 = new TileItemElement();
TileItemElement tileItemElement4 = new TileItemElement();
TileItemElement tileItemElement5 = new TileItemElement();
TileItemElement tileItemElement6 = new TileItemElement();
TileItemElement tileItemElement7 = new TileItemElement();
tileItem2.Elements.Clear();
tileItemElement1.Text = "TopLeftElement";
tileItemElement1.TextAlignment = TileItemContentAlignment.TopLeft;
tileItemElement2.Text = "TopRightElement";
tileItemElement2.TextAlignment = TileItemContentAlignment.TopRight;
tileItemElement3.Text = "BottomCenterElement";
tileItemElement3.TextAlignment = TileItemContentAlignment.BottomCenter;
tileItemElement4.AnchorElementIndex = 0;
tileItemElement4.AnchorIndent = 0;
tileItemElement4.AnchorOffset = new Point(50, 0);
tileItemElement4.Text = "AnchoredElement1";
tileItemElement5.AnchorElementIndex = 1;
tileItemElement5.AnchorIndent = 0;
tileItemElement5.AnchorOffset = new Point(-50, 0);
tileItemElement5.Text = "AnchoredElement2";
tileItemElement6.ImageOptions.ImageAlignment = TileItemContentAlignment.MiddleCenter;
tileItemElement6.ImageOptions.ImageToTextAlignment = TileControlImageToTextAlignment.Bottom;
tileItemElement6.ImageOptions.SvgImage = global::WindowsFormsApp1.Properties.Resources.bo_attention;
tileItemElement6.Text = "ElementWithImage";
tileItemElement7.Appearance.Normal.BackColor = Color.SaddleBrown;
tileItemElement7.Appearance.Normal.Options.UseBackColor = true;
tileItemElement7.Height = 40;
tileItemElement7.StretchHorizontal = true;
tileItemElement7.Text = "Stretched Element with Custom Position";
tileItemElement7.TextAlignment = TileItemContentAlignment.Manual;
tileItemElement7.TextLocation = new Point(220, 280);
tileItem2.Elements.Add(tileItemElement1);
tileItem2.Elements.Add(tileItemElement2);
tileItem2.Elements.Add(tileItemElement3);
tileItem2.Elements.Add(tileItemElement4);
tileItem2.Elements.Add(tileItemElement5);
tileItem2.Elements.Add(tileItemElement6);
tileItem2.Elements.Add(tileItemElement7);
Dim tileItemElement1 As New TileItemElement()
Dim tileItemElement2 As New TileItemElement()
Dim tileItemElement3 As New TileItemElement()
Dim tileItemElement4 As New TileItemElement()
Dim tileItemElement5 As New TileItemElement()
Dim tileItemElement6 As New TileItemElement()
Dim tileItemElement7 As New TileItemElement()
tileItem2.Elements.Clear()
tileItemElement1.Text = "TopLeftElement"
tileItemElement1.TextAlignment = TileItemContentAlignment.TopLeft
tileItemElement2.Text = "TopRightElement"
tileItemElement2.TextAlignment = TileItemContentAlignment.TopRight
tileItemElement3.Text = "BottomCenterElement"
tileItemElement3.TextAlignment = TileItemContentAlignment.BottomCenter
tileItemElement4.AnchorElementIndex = 0
tileItemElement4.AnchorIndent = 0
tileItemElement4.AnchorOffset = New Point(50, 0)
tileItemElement4.Text = "AnchoredElement1"
tileItemElement5.AnchorElementIndex = 1
tileItemElement5.AnchorIndent = 0
tileItemElement5.AnchorOffset = New Point(-50, 0)
tileItemElement5.Text = "AnchoredElement2"
tileItemElement6.ImageOptions.ImageAlignment = TileItemContentAlignment.MiddleCenter
tileItemElement6.ImageOptions.ImageToTextAlignment = TileControlImageToTextAlignment.Bottom
tileItemElement6.ImageOptions.SvgImage = Global.WindowsFormsApp1.Properties.Resources.bo_attention
tileItemElement6.Text = "ElementWithImage"
tileItemElement7.Appearance.Normal.BackColor = Color.SaddleBrown
tileItemElement7.Appearance.Normal.Options.UseBackColor = True
tileItemElement7.Height = 40
tileItemElement7.StretchHorizontal = True
tileItemElement7.Text = "Stretched Element with Custom Position"
tileItemElement7.TextAlignment = TileItemContentAlignment.Manual
tileItemElement7.TextLocation = New Point(220, 280)
tileItem2.Elements.Add(tileItemElement1)
tileItem2.Elements.Add(tileItemElement2)
tileItem2.Elements.Add(tileItemElement3)
tileItem2.Elements.Add(tileItemElement4)
tileItem2.Elements.Add(tileItemElement5)
tileItem2.Elements.Add(tileItemElement6)
tileItem2.Elements.Add(tileItemElement7)