Posted by: Zeeshan Amjad | December 23, 2011

Defining and use style using C# in ListBox


I came across a question that how can we change the background color of items in the list box. This is very straight forward task and can be done easily with style using XAML. Here is a simple XAML code to define the style for ListBoxItem.

Code Snippet
<Style TargetType="{x:Type ListBoxItem}">
    <Setter Property="Background" Value="AliceBlue"/>
    <Setter Property="FontSize" Value="20"/>
    <Setter Property="Margin" Value="2"/>
</Style>

 

But the next question was how can we define and use it using C# code. Here is a simple C# code to define.

Code Snippet
Style myStyle = new Style(typeof(ListBoxItem));

myStyle.Setters.Add(new Setter(ListBoxItem.BackgroundProperty, Brushes.AliceBlue));
myStyle.Setters.Add(new Setter(ListBoxItem.FontSizeProperty, 20.0));
myStyle.Setters.Add(new Setter(ListBoxItem.MarginProperty, new Thickness(2.0)));

 

We shouldn’t assign the object of Style class to ListBox style property, because the style is ListBoxItem type (we define target type of style as ListBoxItem). Instead we used to set this to ItemContainerStyle property.

Here is a complete C# code of the program.

Code Snippet
using System.Collections.ObjectModel;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;

namespace WpfStyle
{
    /// <summary>
    /// Interaction logic for Window1.xaml
    /// </summary>
    public partial class Window1 : Window
    {
        private ObservableCollection<string> states = new ObservableCollection<string>();

        public Window1()
        {
            InitializeComponent();

            states.Add("Maryland");
            states.Add("California");
            states.Add("Virginia");
            states.Add("Washington");

            DataContext = states;

            Style myStyle = new Style(typeof(ListBoxItem));

            myStyle.Setters.Add(new Setter(ListBoxItem.BackgroundProperty, Brushes.AliceBlue));
            myStyle.Setters.Add(new Setter(ListBoxItem.FontSizeProperty, 20.0));
            myStyle.Setters.Add(new Setter(ListBoxItem.MarginProperty, new Thickness(2.0)));

            list.ItemContainerStyle = myStyle;
        }
    }
}

 

And here is our XAML code.

Code Snippet
<Window x:Class="WpfStyle.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml&quot;
    Title="Style" Height="300" Width="300">
    <Grid>
        <ListBox Name="list" Margin="5" ItemsSource="{Binding}"/>
    </Grid>
</Window>

 

Here is an output of the program.

ListBoxItemStyle

If we apply different styles with code and XAML at the same time, then the C# code will get precedence and we will see the style defined in C# code not in XAML.

Advertisements

Responses

  1. Nice example, but I can not set different background color when an item is clicked. Any ideas with that?


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

%d bloggers like this: