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.


Panayot Cankov 164x164
About the Author

Panayot Cankov

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.

Related Posts

Comments

Comments are disabled in preview mode.