Edit this page

Getting Started

This tutorial will walk you through the creation of a sample application that contains RadLayoutControl.

The figures in the RadLayoutControl help documentation are showing the control with the Windows8 theme applied. You can see how to set a theme in the Setting a Theme help article.

Assembly References

In order to use the RadLayoutControl component, you will need to add references to the following assemblies:

  • Telerik.Windows.Controls
  • Telerik.Windows.Controls.Navigation

You can find a list with the required assemblies for each control from the UI for WPF suite in the Controls Dependencies help article.

Defining a RadLayoutControl

You can add RadLayoutControl manually in XAML as demonstrated in Example 1.

[XAML] Example 1: Adding RadLayoutControl in XAML

<telerik:RadLayoutControl />

RadLayoutControl doesn't display any content when it is not populated with items or layout groups, so at this point only the border of the control should be displayed on the screen.

Figure 1: Empty RadLayoutControl

Adding Items in the Control

You can add items through the Items collection of RadLayoutControl. The layout component works with LayoutControlGroup controls and UIElements. In other words you can populate it with all visual elements provided by the framework. Example 2 demonstrates this.

[XAML] Example 2: Adding items in the RadLayoutControl.

<telerik:RadLayoutControl>           
    <Button Content="Button"/>
    <Border Background="Bisque"/>
    <telerik:LayoutControlGroup>
        <TextBlock Text="TextBlock" Background="LightGray" TextAlignment="Center"/>
    </telerik:LayoutControlGroup>
</telerik:RadLayoutControl>

Figure 2: RadLayoutControl with few elements added

By default the layout control and its groups are ordering their items with horizontal orientation. You can see how to change this in the Orientation help article.

You can nest LayoutControlGroups into one another which allows you to separate the layout into different groups that can be arranged along with their items.

[XAML] Example 3: Nesting LayoutControlGroups

<telerik:RadLayoutControl>           
    <Button Content="Button"/>
    <Border Background="Bisque"/>
    <telerik:LayoutControlGroup Orientation="Vertical">
        <TextBlock Text="TextBlock" Background="LightGray" TextAlignment="Center" VerticalAlignment="Center"/>
        <telerik:LayoutControlGroup Orientation="Vertical" VerticalAlignment="Center" Margin="2">
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="Text field:" Margin="5 0 5 0" />
                <TextBox MinWidth="100"/>
            </StackPanel>
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="Text field:" Margin="5 0 5 0" />
                <TextBox MinWidth="100"/>
            </StackPanel>
        </telerik:LayoutControlGroup>
    </telerik:LayoutControlGroup>
</telerik:RadLayoutControl>

Figure 3: RadLayoutControl with nested groups

RadLayoutControl doesn't support data binding and setting its ItemsSource property will throw an exception (NotSupportedException).

Layout Groups

There are few layout group controls which can be used with RadLayoutControl. Each group has different appearance. You can read more about this in the Layout Groups section in the documentation. Additionally, the Code Example section of this help article demonstrates the different layout groups.

Enable Edit Mode

The control allows you to rearrange its children at runtime. To enable this the IsInEditMode property of the control should be set to True.

[XAML] Example 4: Enabling the edit mode of the control

<telerik:RadLayoutControl IsInEditMode="True" />

Figure 4: The layout setup from Example 3 with one of the groups selected.

Read more about the edit mode in the Edit the Layout article.

Code Example

This section demonstrates a basic layout set up with nested groups and different group types.

[XAML] Example 5: Complete code example

<telerik:RadLayoutControl IsInEditMode="True">
    <telerik:LayoutControlGroup Orientation="Vertical">
        <telerik:LayoutControlExpanderGroup Margin="2" Header="Layout Control Expander Group">
            <telerik:LayoutControlGroup Orientation="Vertical">
                <telerik:LayoutControlGroup>
                    <RadioButton Content="RadioButton 1" Padding="5" VerticalAlignment="Center" Margin="2" />
                    <RadioButton Content="RadioButton 2" IsChecked="True" Padding="5" VerticalAlignment="Center" Margin="2" />
                    <RadioButton Content="RadioButton 3" Padding="5" VerticalAlignment="Center" Margin="2" />
                </telerik:LayoutControlGroup>

                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>
                    <TextBlock Text="TextBlock:" Foreground="Black" VerticalAlignment="Center" Margin="5 0 5 0"/>
                    <TextBox Grid.Column="1" Foreground="Black" VerticalAlignment="Center" Margin="5 0 5 0"/>
                </Grid>
            </telerik:LayoutControlGroup>

            <ListBox  Padding="8" Margin="2" >
                <ListBoxItem Content="ListBoxItem 1" />
                <ListBoxItem Content="ListBoxItem 2" />
                <ListBoxItem Content="ListBoxItem 3" />
                <ListBoxItem Content="ListBoxItem 4" />
                <ListBoxItem Content="ListBoxItem 5" />
                <ListBoxItem Content="ListBoxItem 6" />
            </ListBox>
        </telerik:LayoutControlExpanderGroup>

        <telerik:LayoutControlTabGroup Margin="2">
            <telerik:LayoutControlTabGroupItem Header="Tab 1">
                <telerik:LayoutControlGroup>
                    <TextBlock Text="TextBlock" Padding="5" Margin="2" Foreground="Black" Background="LightGray" TextAlignment="Center" VerticalAlignment="Stretch" />
                    <TextBlock Text="TextBlock" Padding="5" Margin="2" Foreground="Black" Background="LightGray" TextAlignment="Center" VerticalAlignment="Stretch" />
                </telerik:LayoutControlGroup>
            </telerik:LayoutControlTabGroupItem>
            <telerik:LayoutControlTabGroupItem Header="Tab 2" />
        </telerik:LayoutControlTabGroup>
    </telerik:LayoutControlGroup>

    <telerik:LayoutControlGroup Orientation="Vertical" HorizontalAlignment="Right">
        <Button Content="Button 1" Padding="10 20 10 20" Margin="2" VerticalAlignment="Top" />
        <Button Content="Button 2" Padding="10 20 10 20" Margin="2" VerticalAlignment="Bottom" />
    </telerik:LayoutControlGroup>

    <ToggleButton Content="ToggleButton" Padding="5 0 5 0" HorizontalAlignment="Right" Margin="2" />
</telerik:RadLayoutControl>

Figure 5: RadLayoutPanel example

You can switch between normal and edit mode of the control by setting its IsInEditMode property.

See Also