Styling listbox items

3 posts, 0 answers
  1. Wesley Witt
    Wesley Witt avatar
    12 posts
    Member since:
    May 2005

    Posted 24 Sep 2013 Link to this post

    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.
  2. Kiril Stanoev
    Admin
    Kiril Stanoev avatar
    1511 posts

    Posted 25 Sep 2013 Link to this post

    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
    Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
  3. DevCraft banner
  4. Wesley Witt
    Wesley Witt avatar
    12 posts
    Member since:
    May 2005

    Posted 25 Sep 2013 Link to this post

    Thanks so much.  This work great.
Back to Top