Styles and Templates

RadTaskBoard allows you to easily modify its appearance by providing some useful properties.

ItemTemplate and ItemTemplateSelector

You can configure the visualization of the data and the appearance of the card items via the ItemTemplate and the ItemTemplateSelectior properties.

Example 1: Define a custom ItemTemplate

XAML

   <telerik:RadTaskBoard.ItemTemplate>  
        <DataTemplate>  
            <StackPanel>  
                <TextBlock Text={Binding State}/>  
                <TextBlock Text={Binding Assignee}/>  
                <TextBlock Text={Binding Header}/>  
                <TextBlock Text={Binding Description}/>  
            </StackPanel>  
        </DataTemplate>  
    </telerik:RadTaskBoard.ItemTemplate>

If you wish to return different templates for the card items, you can use the ItemTemplateSelectior property and pass a custom DataTemplateSelector to it.

ColumnHeaderTemplate

To further customize the headers of all columns, you can create your own DataTemplate and apply it to the ColumnHeaderTemplate property of the RadTaskBoard.

Example 5: Set ColumnHeaderTemplate

XAML

   <telerik:RadTaskBoard x:Name="taskBoard" GroupMemberPath="State" ItemsSource="{Binding Data}"> 
        <telerik:RadTaskBoard.ColumnHeaderTemplate> 
            <DataTemplate> 
                <TextBlock Text="{Binding }" FontSize="25" Foreground="Red"/> 
            </DataTemplate> 
        </telerik:RadTaskBoard.ColumnHeaderTemplate> 
    </telerik:RadTaskBoard>

ItemContainerStyle and ItemContainerStyleSelectior

The task inside the RadTaskBoard control are represented by a RadTaskBoardItem elements. You can use the ItemContainerStyle property to style these individual elements.

Example 2: Specify ItemContainerStyle

XAML

    <telerik:RadTaskBoard.ItemContainerStyle> 
        <Style TargetType="telerik:RadTaskBoardItem"> 
            <Setter Property="Background" Value="Bisque"/> 
            <Setter Property="FontWeight" Value="Bold" /> 
            <Setter Property="FontSize" Value="50" /> 
        </Style> 
    </telerik:RadTaskBoard.ItemContainerStyle>

If you wish to return different styles for the card items, you can use the ItemContainerStyleSelectior property and pass a custom StyleSelector to it.