Getting Started
The following tutorial demonstrates:
-
Using primitives to build a custom panel element.
-
Using the custom panel element to build a custom RadControl.
-
Using dependency properties.
The example control will contain a filled area and a centered text primitive. A timer will update the text to reflect the current date and time.
Create the Element Class
-
In Visual Studio, create a new Windows Controls Library. In this example the library will be named "RadControlLib001".
-
Add references to Telerik.WinControls.UI.dll, TelerikCommon.dll and Telerik.WinControls.dll.
-
Delete "Class1", since we will not need it.
-
In the controls library add a new class "MyPanelElement.cs".
-
Replace the MyPanelElement.cs code with the code below.
Notice in the code below:
- MyPanelElement descends from RadItem so that it can be used in the designer.
- In the CreateChildElements method the Class property of each primitive is assigned. This allows Telerik Presentation Foundation to apply themes to specific parts of the control.
- In the CreateChildElements method the TextPrimitive Text property is bound to the CurrentTimeProperty.
- A standard CLR style property is defined for CurrentTime that wraps the Dependency property. The effect of this configuration of properties is that when the CurrentTime property is changed, either by a timer or elsewhere in the code, the dependency property CurrentTimeProperty value is changed. Then the bound TextPrimitive Text property is assigned the CurrentTimeProperty value and the display updates to show the new time.
Creating MyPanelElement
public class MyPanelElement : RadElement
{
TextPrimitive text;
FillPrimitive background;
Timer updateTime;
protected override void CreateChildElements()
{
base.CreateChildElements();
this.text = new TextPrimitive();
this.text.ZIndex = 2;
this.text.Margin = new Padding(30);
this.text.BindProperty(TextPrimitive.TextProperty, this,
MyPanelElement.CurrentTimeProperty, PropertyBindingOptions.OneWay);
this.background = new FillPrimitive();
this.background.GradientStyle = GradientStyles.OfficeGlass;
this.Children.Add(this.text);
this.Children.Add(this.background);
updateTime = new Timer();
updateTime.Interval = 100;
updateTime.Tick += new EventHandler(updateTime_Tick);
updateTime.Start();
}
bool active = true;
public bool Active
{
get { return active; }
set
{
active = value;
if (!value)
{
this.updateTime.Stop();
}
else
{
this.updateTime.Start();
}
}
}
void updateTime_Tick(object sender, EventArgs e)
{
this.SetValue(CurrentTimeProperty, DateTime.Now.ToString());
}
public static RadProperty CurrentTimeProperty =
RadProperty.Register("CurrentTimeProperty", typeof(string), typeof(MyPanelElement),
new RadElementPropertyMetadata(null, ElementPropertyOptions.AffectsDisplay));
public string CurrentTime
{
get { return (string)this.GetValue(CurrentTimeProperty); }
set { this.SetValue(CurrentTimeProperty, value); }
}
}
Create the Control Class
-
Add a second class to the control library and name it "MyPanel.cs".
-
Replace the MyPanel.cs code with the code below.
Notice in the code below:
- MyPanel descends from RadControl.
- The PanelElement property surfaces the underlying element for general purpose uses. In this example the PanelElement property is used in the theme designer.
- In the CreateChildItems() method, MyPanelElement is created and added to the root element Children collection.
Creating MyPanel control
[ToolboxItem(true)]
public class MyPanel : RadControl
{
private MyPanelElement panelElement;
public MyPanel()
{
this.AutoSize = true;
}
public MyPanelElement PanelElement
{
get
{
return this.panelElement;
}
}
public bool Active
{
get
{
return this.panelElement.Active;
}
set
{
this.panelElement.Active = value;
}
}
protected override Size DefaultSize
{
get
{
return new Size(200, 100);
}
}
protected override void CreateChildItems(RadElement parent)
{
this.panelElement = new MyPanelElement();
this.RootElement.Children.Add(panelElement);
base.CreateChildItems(parent);
}
}
Testing the Control
-
Add a new Windows Forms project to the solution to test the control library.
-
Add a reference to the control library.
-
Drop the MyPanel control from the ToolBox to the form.
-
In the Properties Window set the Active property for MyPanel to True.
The control should now look like this:
