Skip to main content

How to: Specify DataTemplate used to render labels of LayoutItems

The following code shows how to specify a DataTemplate used to render a label in a custom manner. In the example, the DataTemplate displays a colon after the label’s text. The DataTemplate is assigned to the LayoutItem.LabelTemplate property. The template is provided via the LayoutGroup.ItemStyle property of the LayoutControl, so it’s applied to all layout items.

The following image shows the result:

LabelTemplate_Ex

View Example

<Window x:Class="LabelTemplate_Ex.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:lc="http://schemas.devexpress.com/winfx/2008/xaml/layoutcontrol"
        Title="MainWindow" Height="350" Width="525">
    <Grid x:Name="LayoutRoot">
        <lc:LayoutControl Orientation="Vertical">
            <lc:LayoutControl.ItemStyle>
                <Style TargetType="lc:LayoutItem">
                    <Setter Property="LabelTemplate">
                        <Setter.Value>
                            <DataTemplate>
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock Text="{Binding}"/>
                                    <TextBlock Text=":" Margin="1,0,0,0"/>
                                </StackPanel>
                            </DataTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </lc:LayoutControl.ItemStyle>

            <lc:LayoutGroup Orientation="Vertical" View="GroupBox" Header="Group 1">
                <lc:LayoutItem Label="Item 1">
                    <TextBox/>
                </lc:LayoutItem>
                <lc:LayoutItem Label="Item 2">
                    <TextBox/>
                </lc:LayoutItem>
                <lc:LayoutItem Label="Item 3">
                    <TextBox/>
                </lc:LayoutItem>
            </lc:LayoutGroup>
        </lc:LayoutControl>
    </Grid>
</Window>