Content within a tab item

[ChrisWalker]

A am building a 'proof of concept' demo of an web application that we have in silverlight and have a basic question. In your Live demo, first look, you have a single image in each tabitem. I need to place several controls such as a textblock, textbox, slider etc in the tabitem. In the asp.net world, I used contenttemplates to place the controls in. Do I need to do something similar in a silverlight tabitem?

A simple online demo showing the XAML of this (multiple controls in a tab)would be great.

[Miroslav]

Hello Chris,

The TabItem is a HeaderedContent control, a Content Control with a header (that can contain any content as well).

I am not sure how aware you are of the Content/ContentTemplate/ContentTemplateSelector model in Silverlight WPF but I can try to sum it up in couple of words.

ContentControls are one of the 3 major types (along with Controls and ItemsControls), you can set to their Content property anything you wish (it is an object). What you normally do if you want to put more than one thing is you use a panel (it can have many children) that arranges them depending on the panel you have chosen. In xaml, if you place an object between the opening and closing tags of a ContentControl, the object is set as its content property.

Here is how you can do this in xaml:

<UserControl x:Class="SilverlightApplication9.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:panels="clr-namespace:Telerik.Windows.Controls.Primitives;assembly=Telerik.Windows.Controls"
    xmlns:tekerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation"
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="White">
        <tekerik:RadTabControl>
            <tekerik:RadTabItem Header="Select Name">
                <panels:RadUniformGrid Columns="2"
                                        Margin="15"
                                       Rows="3">

                    <TextBlock Text="Name:" />
                    <TextBox />

                    <TextBlock Text="Age:" />
                    <TextBox />

                    <TextBlock Text="Day of Birth:" />
                    <TextBox />
                </panels:RadUniformGrid>
            </tekerik:RadTabItem>
            <tekerik:RadTabItem Header="Other Item" >

                <!--Put content in a panel here-->

            </tekerik:RadTabItem>
        </tekerik:RadTabControl>
    </Grid>
</UserControl>

If you set a non-visual object, such as a business object for example as the content you can use the ContentTemplate (and HeaderTemplate in that case) to set a visual representation of the object that can be bound to the date object.

Yes, the QSF examples are short and basic examples that present just the control. In the coming few days we will upload a demo application that uses all the controls + web services.

Regards,
Miroslav
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.