Custom Tiles
This article demonstrates how you can create custom tiles. The bellow sample code adds four elements to the tile. The result is shown in following screenshot.
Figure 1: Custom Title
The code snippet bellow illustrates how the layout is achieved. There is a GridLayout which is taking care of the items arrangement. Four LightVisualElements are added to the grid layout. The first is used for the subject, the second and third for the start/end dates and the forth is used for the icon. The back color is changed in the class constructor.
Custom Tile Class
class CustomTileElement : RadTileElement
{
LightVisualElement subject;
LightVisualElement startTime;
LightVisualElement endTime;
LightVisualElement alarmIcon;
GridLayout layoutPanel;
protected override void CreateChildElements()
{
base.CreateChildElements();
layoutPanel = new GridLayout();
layoutPanel.Columns.Clear();
layoutPanel.Rows.Clear();
layoutPanel.StretchHorizontally = false;
layoutPanel.StretchVertically = false;
//add columns
layoutPanel.Columns.Add(new GridLayoutColumn()
{
SizingType = GridLayoutSizingType.Proportional,
ProportionalWidthWeight = 50
});
layoutPanel.Columns.Add(new GridLayoutColumn()
{
SizingType = GridLayoutSizingType.Proportional,
ProportionalWidthWeight = 50
});
//add rows
layoutPanel.Rows.Add(new GridLayoutRow()
{
SizingType = GridLayoutSizingType.Proportional,
ProportionalHeightWeight = 33
});
layoutPanel.Rows.Add(new GridLayoutRow()
{
SizingType = GridLayoutSizingType.Proportional,
ProportionalHeightWeight = 33
});
layoutPanel.Rows.Add(new GridLayoutRow()
{
SizingType = GridLayoutSizingType.Proportional,
ProportionalHeightWeight = 34
});
subject = new LightVisualElement();
subject.Text = "WinForms Conference";
subject.Font = new System.Drawing.Font("Consolas", 18, FontStyle.Underline);
subject.BackColor = Color.Aqua;
subject.TextAlignment = ContentAlignment.MiddleLeft;
subject.Padding = new System.Windows.Forms.Padding(20, 0, 0, 0);
subject.SetValue(GridLayout.RowIndexProperty, 0);
subject.SetValue(GridLayout.ColumnIndexProperty, 0);
subject.SetValue(GridLayout.ColSpanProperty, 2);
startTime = new LightVisualElement();
startTime.Text = "Start: " + DateTime.Now.ToShortDateString();
startTime.SetValue(GridLayout.RowIndexProperty, 1);
startTime.SetValue(GridLayout.ColumnIndexProperty, 0);
endTime = new LightVisualElement();
endTime.Text = "End: " + DateTime.Now.AddDays(3).ToShortDateString();
endTime.SetValue(GridLayout.RowIndexProperty, 1);
endTime.SetValue(GridLayout.ColumnIndexProperty, 1);
alarmIcon = new LightVisualElement();
alarmIcon.Image = Image.FromFile(@"../../bell.png").GetThumbnailImage(35, 35, null, IntPtr.Zero);
alarmIcon.ImageLayout = System.Windows.Forms.ImageLayout.None;
alarmIcon.Padding = new System.Windows.Forms.Padding(0, 0, 10, 0);
alarmIcon.ImageAlignment = ContentAlignment.MiddleRight;
alarmIcon.SetValue(GridLayout.RowIndexProperty, 2);
alarmIcon.SetValue(GridLayout.ColumnIndexProperty, 1);
this.layoutPanel.Children.Add(subject);
this.layoutPanel.Children.Add(startTime);
this.layoutPanel.Children.Add(endTime);
this.layoutPanel.Children.Add(alarmIcon);
this.Children.Add(layoutPanel);
}
public CustomTileElement()
{
this.BackColor = ColorTranslator.FromHtml("#008de7");
}
protected override Type ThemeEffectiveType
{
get
{
return typeof(RadTileElement);
}
}
}
Friend Class CustomTileElement
Inherits RadTileElement
Private subject As LightVisualElement
Private startTime As LightVisualElement
Private endTime As LightVisualElement
Private alarmIcon As LightVisualElement
Private layoutPanel As GridLayout
Protected Overrides Sub CreateChildElements()
MyBase.CreateChildElements()
layoutPanel = New GridLayout()
layoutPanel.Columns.Clear()
layoutPanel.Rows.Clear()
layoutPanel.StretchHorizontally = False
layoutPanel.StretchVertically = False
'add columns
layoutPanel.Columns.Add(New GridLayoutColumn() With {.SizingType = GridLayoutSizingType.Proportional, .ProportionalWidthWeight = 50})
layoutPanel.Columns.Add(New GridLayoutColumn() With {.SizingType = GridLayoutSizingType.Proportional, .ProportionalWidthWeight = 50})
'add rows
layoutPanel.Rows.Add(New GridLayoutRow() With {.SizingType = GridLayoutSizingType.Proportional, .ProportionalHeightWeight = 33})
layoutPanel.Rows.Add(New GridLayoutRow() With {.SizingType = GridLayoutSizingType.Proportional, .ProportionalHeightWeight = 33})
layoutPanel.Rows.Add(New GridLayoutRow() With {.SizingType = GridLayoutSizingType.Proportional, .ProportionalHeightWeight = 34})
subject = New LightVisualElement()
subject.Text = "WinForms Conference"
subject.Font = New System.Drawing.Font("Consolas", 18, FontStyle.Underline)
subject.BackColor = Color.Aqua
subject.TextAlignment = ContentAlignment.MiddleLeft
subject.Padding = New System.Windows.Forms.Padding(20, 0, 0, 0)
subject.SetValue(GridLayout.RowIndexProperty, 0)
subject.SetValue(GridLayout.ColumnIndexProperty, 0)
subject.SetValue(GridLayout.ColSpanProperty, 2)
startTime = New LightVisualElement()
startTime.Text = "Start: " & Date.Now.ToShortDateString()
startTime.SetValue(GridLayout.RowIndexProperty, 1)
startTime.SetValue(GridLayout.ColumnIndexProperty, 0)
endTime = New LightVisualElement()
endTime.Text = "End: " & Date.Now.AddDays(3).ToShortDateString()
endTime.SetValue(GridLayout.RowIndexProperty, 1)
endTime.SetValue(GridLayout.ColumnIndexProperty, 1)
alarmIcon = New LightVisualElement()
alarmIcon.Image = Image.FromFile("../../bell.png").GetThumbnailImage(35, 35, Nothing, IntPtr.Zero)
alarmIcon.ImageLayout = System.Windows.Forms.ImageLayout.None
alarmIcon.Padding = New System.Windows.Forms.Padding(0, 0, 10, 0)
alarmIcon.ImageAlignment = ContentAlignment.MiddleRight
alarmIcon.SetValue(GridLayout.RowIndexProperty, 2)
alarmIcon.SetValue(GridLayout.ColumnIndexProperty, 1)
Me.layoutPanel.Children.Add(subject)
Me.layoutPanel.Children.Add(startTime)
Me.layoutPanel.Children.Add(endTime)
Me.layoutPanel.Children.Add(alarmIcon)
Me.Children.Add(layoutPanel)
End Sub
Public Sub New()
Me.BackColor = ColorTranslator.FromHtml("#008de7")
End Sub
Protected Overrides ReadOnly Property ThemeEffectiveType() As Type
Get
Return GetType(RadTileElement)
End Get
End Property
End Class
You can use the new tile with the following code:
Add the new tile to RadPanorama
CustomTileElement tile = new CustomTileElement();
tile.RowSpan = 2;
tile.ColSpan = 4;
radPanorama1.Items.Add(tile);
Dim tile As New CustomTileElement()
tile.RowSpan = 2
tile.ColSpan = 4
RadPanorama1.Items.Add(tile)