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.

GroupBox and Label

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:

GroupBox

ToolTip

 

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.

ToolTipDefault

 

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:

ToolTipTheme

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.


About the Author

Panayot Cankov

 is Senior Software Developer in Telerik XAML Team

Related Posts

Comments

Comments are disabled in preview mode.