These are controls that exist in one form or another in most of the other suites so we had some client requests to add them in our Silverlight / WPF suite too. In WPF you have GroupBox, Label and ToolTip in the presentation framework however we had no themes for them. In Silverlight there is only ToolTip.
We have created GroupBox and Label in Telerik.Windows.Controls assembly. In WPF they extend the existing GroupBox and Label controls and only add themes. In Silverlight they extend HeaderedContentControl and ContentControl. How you can use them:
<
Grid
x:Name
=
"LayoutRoot"
Background
=
"#FF222222"
>
<
telerik:GroupBox
Header
=
"Personal Information"
Width
=
"300"
HorizontalAlignment
=
"Center"
VerticalAlignment
=
"Center"
>
<
Grid
>
<
Grid.ColumnDefinitions
>
<
ColumnDefinition
Width
=
"Auto"
MinWidth
=
"80"
/>
<
ColumnDefinition
Width
=
"*"
/>
</
Grid.ColumnDefinitions
>
<
Grid.RowDefinitions
>
<
RowDefinition
Height
=
"30"
/>
<
RowDefinition
Height
=
"30"
/>
<
RowDefinition
Height
=
"30"
/>
<
RowDefinition
Height
=
"30"
/>
</
Grid.RowDefinitions
>
<
telerik:Label
Grid.Row
=
"0"
Grid.Column
=
"0"
Content
=
"Full Name:"
HorizontalAlignment
=
"Right"
/>
<
TextBox
Grid.Row
=
"0"
Grid.Column
=
"1"
VerticalAlignment
=
"Center"
telerik:StyleManager.Theme
=
"Expression_Dark"
/>
<
telerik:Label
Grid.Row
=
"1"
Grid.Column
=
"0"
Content
=
"Address:"
HorizontalAlignment
=
"Right"
/>
<
TextBox
Grid.Row
=
"1"
Grid.Column
=
"1"
VerticalAlignment
=
"Center"
telerik:StyleManager.Theme
=
"Expression_Dark"
/>
<
telerik:Label
Grid.Row
=
"2"
Grid.Column
=
"0"
Content
=
"State:"
HorizontalAlignment
=
"Right"
/>
<
telerik:RadComboBox
Grid.Row
=
"2"
Grid.Column
=
"1"
SelectedIndex
=
"0"
HorizontalAlignment
=
"Left"
Width
=
"50"
VerticalAlignment
=
"Center"
>
<
telerik:RadComboBoxItem
Content
=
"NE"
/>
</
telerik:RadComboBox
>
<
telerik:Label
Grid.Row
=
"3"
Grid.Column
=
"0"
Content
=
"Zip code:"
HorizontalAlignment
=
"Right"
/>
<
telerik:RadNumericUpDown
Grid.Row
=
"3"
Grid.Column
=
"1"
Value
=
"15887"
Width
=
"100"
IsInteger
=
"True"
HorizontalAlignment
=
"Left"
HorizontalContentAlignment
=
"Left"
VerticalAlignment
=
"Center"
/>
</
Grid
>
</
telerik:GroupBox
>
</
Grid
>
Include the Telerik.Windows.Controls, Telerik.Windows.Controls.Input and apply the Telerik.Windows.Themes.Expression_Dark and the XAML will result into:
We have created themes for the ToolTip control and you can apply it the way you do on TextBoxes, ScrollViewers, ListBox, CheckButton and RadioButtons. If you are using tooltips like:
<
Border
ToolTipService.ToolTip
=
"Hello World"
Width
=
"100"
Height
=
"50"
Background
=
"Gray"
CornerRadius
=
"5"
/>
Your “Hello World” text will actually be wrapped in a ToolTip control.
So if you want to set a theme on it you can define the ToolTip control:
<
Border
Width
=
"100"
Height
=
"50"
Background
=
"Gray"
CornerRadius
=
"5"
>
<
ToolTipService.ToolTip
>
<
ToolTip
Content
=
"Hello World!"
telerik:StyleManager.Theme
=
"Expression_Dark"
/>
</
ToolTipService.ToolTip
>
</
Border
>
And the theme will be applied:
We are looking forward to your comments about the usability of these controls and requests for other features that can improve our WPF and Silverlight suites.
Panayot Cankov has 15 years of experience focused on UI. He has spent 9 years at Progress working on the XAML stack and the NativeScript framework. Today he is pushing forward AR/VR technologies as he is a big believer in them, along with AI/ML for being the foundation of the next generation line of business application experiences.