Styling listbox items

[Wesley Witt]

I'm looking for some help with a RadDataBoundListBox.  I want to change the style of the font for certain items that are in the listbox.  Ideally I would do this thru binding based on a property of the items in the list.  I have searched high and low to find a solution to this and cannot find anything useful so any help is appreciated.

[Kiril Stanoev]

Hi Wesley,

For this particular scenario you could be using a DataTemplateSelector. Imagine you want to display a different background based on a property in your item's model. Let's say you have the following item:

public class MyDataItem
{
    /// <summary>
    /// Gets or sets whether the item has a blue background.
    /// </summary>
    public BackgroundType BackgroundType { get; set; }

    /// <summary>
    /// Gets or sets the name of the item.
    /// </summary>
    public string Name { get; set; }
}

public enum BackgroundType
{
    Blue,
    Red
}

...and you populate the DataBoundListBox in the following manner:

this.listBox.ItemsSource = Enumerable.Range(0, 10).Select(i => new MyDataItem()
{
    BackgroundType = i % 2 == 0 ? BackgroundType.Blue : BackgroundType.Red,
    Name = string.Format("Item {0}", i)
});

The line above will create 10 items. Every even item (i % 2 ==0) will have a blue background and every odd item will have a red.

In the XAML of your app, you should setup the DataBoundListBox in the following manner:

<phone:PhoneApplicationPage.Resources>
    <DataTemplate x:Key="BlueTemplate">
        <Grid Background="Blue">
            <TextBlock Text="{Binding Name}" Foreground="White" />
        </Grid>
    </DataTemplate>
    <DataTemplate x:Key="RedTemplate">
        <Grid Background="Red">
            <TextBlock Text="{Binding Name}" Foreground="White" />
        </Grid>
    </DataTemplate>
    <local:DataTemplateSelector x:Key="MyDataTemplateSelector" BlueTemplate="{StaticResource BlueTemplate}"
            RedTemplate="{StaticResource RedTemplate}" />
</phone:PhoneApplicationPage.Resources>
<Grid x:Name="LayoutRoot" Background="Transparent">
    <telerikPrimitives:RadDataBoundListBox x:Name="listBox"
            ItemTemplateSelector="{StaticResource MyDataTemplateSelector}"></telerikPrimitives:RadDataBoundListBox>
</Grid>

As you can see, the ItemTemplateSelector property of DataBoundListBox is set to an instance of DataTemplateSelector. MyDataTemplateSelector has 2 properties - BlueTemplate and RedTemplate. 

public class DataTemplateSelector : Telerik.Windows.Controls.DataTemplateSelector
{
    public DataTemplate RedTemplate { get; set; }

    public DataTemplate BlueTemplate { get; set; }

    public override System.Windows.DataTemplate SelectTemplate(object item, System.Windows.DependencyObject container)
    {
        var myItem = (MyDataItem)item;
        return myItem.BackgroundType == BackgroundType.Blue ? this.BlueTemplate : this.RedTemplate;
    }
}

The result from all the code above should be similar to:



Give it a try and let us know how it goes.
Regards,
Kiril Stanoev
Telerik

[Wesley Witt]

Thanks so much.  This work great.