Binding and Customizing C1TileControl

Overview

ComponentOne TileControl for WinForms is inspired from the Windows 8 Metro UI look. The main aim in bringing this control into existence was to make it easy to replicate the Windows 8 Modern UI experience on the desktop applications as well. C1TileControl provides the ability to display the tiles in various sizes with various colors and with different forms of displaying data. In this blog, we will be implementing the binding of C1TileControl at run-time. In addition to this, we will discuss displaying images in the Tiles.

Run-Time Binding

To perform the run-time binding with C1Tile control, a DataSource and a TileControl is not enough. We also need to implement some more mapping to bind data with the control. It is the PropertyMapping class which maps the column of a DataTable with the Tile Group or the Text of a Tile. The Property mappings can be created and mapped as visible in the below code snippet.

Dim prop As New PropertyMapping()  
prop.DataField = "ID"  
prop.TileProperty = TileProperty.IntValue  
C1TileControl1.PropertyMappings.Add(prop)  

prop = New PropertyMapping()  
prop.DataField = "Name"  
prop.TileProperty = TileProperty.Text  
C1TileControl1.PropertyMappings.Add(prop)  

prop = New PropertyMapping()  
prop.DataField = "Group"  
prop.TileProperty = TileProperty.Group  
C1TileControl1.PropertyMappings.Add(prop)  

Displaying Images in Tiles

In addition, Images can also be displayed on the Tiles. Displaying an image in a Tile is not that troublesome when dealing with the C1TileControl. Suppose our aim is to display some 20 images on 20 Tiles, so there is no need to assign an image on each tile separately but instead a compound image can be used which can be then linked to the ImageElement of the C1TileControl. Here is the code snippet for the same.

C1TileControl1.CommonImage1.Image = My.Resources.Flags  
C1TileControl1.CommonImage1.ImageRows = 17  

Dim ImageElement1 As C1.Win.C1Tile.ImageElement = New C1.Win.C1Tile.ImageElement()  
ImageElement1.ImageSelector = C1.Win.C1Tile.ImageSelector.CommonImage1  
ImageElement1.Margin = New System.Windows.Forms.Padding(0, 0, 0, 20)  
C1TileControl1.DefaultTemplate.Elements.Add(ImageElement1)  

Apart from setting images on the Tiles, the Tile color can also be set. Below is the code snippet for the same:

c1TileControl1.TileBackColor = Color.FromName(CB_TileColor.SelectedItem.ToString())

Conclusion

With this walk through, Runtime binding can now be implemented in C1TileControl along with displaying Images in a go. This indeed makes it dynamic and perfect to give your desktop application, the look and feel of the Windows 8 Metro UI look. Samples: Download Sample C# Download Sample VB