<< Setting up IIS6 for Silverlight on shared hosting via PLESK | Automatic hierarchies using Linq and IValueConverter >>

Customizing a ListBox

by Tom 4. November 2008 09:13

I am quite new to Silverlight (like just about everyone I guess) and I spend a good proportion of each day reading various blogs and finding how to make stuff happen in new and better ways. A well written blog post on a pertinent topic can save me hours or even days of frustration - even if the topic is pretty basic stuff. Sometimes it helps to see the same old demos done slightly differently just to get a feel for how others are approaching the sorts of problems we all deal with on a daily basis. So, having spurned the vast majority of bloggers as self-important know-it-alls and vowing never to engage in the practice, I've decided to start a blog. Whether I continue to keep a blog depends largely on 1) how much of my time it consumes 2) how often I come across little tid-bits worthy of sharing 3) how many people read the posts 4) whether I decide to throw in my unhealthy software career and become a farmer or a fisherman (an idea I entertain each morning at 7am when my alarm goes off).

Now, to get to the code...

A fairly common scenario I encounter is needing to display a UI for objects with one-to-many relationships with other objects, for example a person who has one or more addresses (shipping, billing, etc). The other day I needed to whip up a really quick and dirty view in Silverlight to do this, and it occurred to me that it might be a good place to use the rich control templating features rather than making a whole new control by extending, say, ItemsControl. A key consideration is, of course, to make a reusable component that can be dropped anywhere in my app. The component also needs to support data binding, and fit in with the patterns & practises of the rest of the project (we are using Prism).

Here's a screenshot of what I am creating:

(Click on the screenshot to view a demo)

Overview

The widget depicted in the screenshot above comprises some basic form components and a templated ListBox. Each address is a ListBoxItem: the ListBox is templated in such a way as to make Selected ListBoxItems visible and Unselected ListBoxItems hidden.

The ItemsSource of the ListBox and the ItemsSource of the Addresses ComboBox are data bound to the same collection of Addresses. The SelectedIndex of the ListBox and the SelectedIndex of the Address(es) ComboBox are data bound to an integer Property in the DataContext of the UserControl: when the selection in the ComboBox changes, the corresponding ListBoxItem is made visible in the ListBox below.

Since re-use is a big goal, I want to create new styles and templates for ListBox and ListBoxItem, and store them somewhere accessible like my App.xaml. This way, I can use a ListBox anywhere in my app and use these styles - the ItemTemplate of the ListBoxItem can be customized on each use.

Building a Data Source

For the purposes of this demo, I'll use the following dummy data source:

Person.cs

using System;

using System.Collections.ObjectModel;

  

namespace ListBoxTest

{

    public class Person

    {

        public Person()

        {

            Addresses = new AddressCollection();

        }

        public int PersonId { get; set; }

        public string Title { get; set; }

        public string FirstName { get; set; }

        public string LastName { get; set; }

        public AddressCollection Addresses { get; set; }

    }

  

    public class PersonCollection : ObservableCollection<Person>

    {

        public PersonCollection LoadDefault()

        {

            PersonCollection pc = new PersonCollection();

            Person p;

  

            p = new Person();

            p.PersonId = 1;

            p.FirstName = "George";

            p.LastName = "Costanza";

            p.Addresses = new AddressCollection().LoadByPersonId(1);

            pc.Add(p);

  

            p = new Person();

            p.PersonId = 2;

            p.FirstName = "Elaine";

            p.LastName = "Benis";

            p.Addresses = new AddressCollection().LoadByPersonId(2);

            pc.Add(p);

  

            p = new Person();

            p.PersonId = 3;

            p.FirstName = "Cosmo";

            p.LastName = "Kramer";

            p.Addresses = new AddressCollection().LoadByPersonId(3);

            pc.Add(p);

            return pc;

        }

    }

  

    public class Address

    {

        public string AddressDescription { get; set; }

        public string StreetAddress1 { get; set; }

        public string StreetAddress2 { get; set; }

        public string StreetAddress3 { get; set; }

        public string Suburb { get; set; }

        public string State { get; set; }

        public string Country { get; set; }

        public string PostCode { get; set; }

        public bool IsDefault { get; set; }

    }

  

    public class AddressCollection : ObservableCollection<Address>

    {

        public AddressCollection LoadByPersonId(int personid)

        {

            AddressCollection ac = new AddressCollection();

            Address a;

            if (personid.Equals(1))

            {

                a = new Address();

                a.AddressDescription = "Shipping";

                a.StreetAddress1 = "Unit XYZ";

                a.StreetAddress2 = "World Towers";

                a.StreetAddress3 = "100-104 Something St";

                a.Suburb = "Melbourne";

                a.State = "Victoria";

                a.PostCode = "3000";

                a.Country = "Australia";

                a.IsDefault = true;

                ac.Add(a);

  

                a = new Address();

                a.AddressDescription = "Billing";

                a.StreetAddress1 = "PO Box xyz123";

                a.StreetAddress2 = "SomePostOffice";

                a.StreetAddress3 = "";

                a.Suburb = "Melbourne";

                a.State = "Victoria";

                a.PostCode = "3000";

                a.Country = "Australia";

                a.IsDefault = false;

                ac.Add(a);

            }

            else if (personid.Equals(2))

            {

                a = new Address();

                a.AddressDescription = "Shipping";

                a.StreetAddress1 = "Apartment 4";

                a.StreetAddress2 = "Empire Gardens";

                a.StreetAddress3 = "150 Another St";

                a.Suburb = "Sydney";

                a.State = "New South Wales";

                a.PostCode = "2000";

                a.Country = "Australia";

                a.IsDefault = true;

                ac.Add(a);

  

                a = new Address();

                a.AddressDescription = "Home";

                a.StreetAddress1 = "15 MyStreet Rd";

                a.StreetAddress2 = "";

                a.StreetAddress3 = "";

                a.Suburb = "SomeSuburb";

                a.State = "New South Wales";

                a.PostCode = "2123";

                a.Country = "Australia";

                a.IsDefault = false;

                ac.Add(a);

  

                a = new Address();

                a.AddressDescription = "Billing";

                a.StreetAddress1 = "Apartment 4";

                a.StreetAddress2 = "Empire Gardens";

                a.StreetAddress3 = "150 Another St";

                a.Suburb = "Sydney";

                a.State = "New South Wales";

                a.PostCode = "2000";

                a.Country = "Australia";

                a.IsDefault = false;

                ac.Add(a);

            }

            else if (personid.Equals(3))

            {

                a = new Address();

                a.AddressDescription = "Billing";

                a.StreetAddress1 = "5 Grand Avenue";

                a.StreetAddress2 = "";

                a.StreetAddress3 = "";

                a.Suburb = "SomeTown";

                a.State = "New South Wales";

                a.PostCode = "2033";

                a.Country = "Australia";

                a.IsDefault = true;

                ac.Add(a);

            }

            return ac;

        }

    }

}

This gives me a Person object which (among other properties) carries a collection of Address objects.

Customizing the ListBox

In my experience, when customizing an existing control, it is best to start by looking at that control's default styles and templates. The source of all Silverlight's controls can be obtained from Codeplex, but I also find the documentation on MSDN to be pretty good. I found a particularly helpful article here: ListBox Styles and Templates that gave me a great start.

The two controls I'll need to customize are ListBox and ListBoxItem. Here are the default styles and templates for ListBox in XAML:

<Style TargetType="ListBox">

  <Setter Property="Padding" Value="1"/>

  <Setter Property="Background" Value="#FFFFFFFF" />

  <Setter Property="Foreground" Value="#FF333333" />

  <Setter Property="HorizontalContentAlignment" Value="Left" />

  <Setter Property="VerticalContentAlignment" Value="Top" />

  <Setter Property="IsTabStop" Value="False" />

  <Setter Property="BorderThickness" Value="1" />

  <Setter Property="TabNavigation" Value="Once" />

  <Setter Property="BorderBrush">

    <Setter.Value>

      <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

        <GradientStop Color="#FFA3AEB9" Offset="0"/>

        <GradientStop Color="#FF8399A9" Offset="0.375"/>

        <GradientStop Color="#FF718597" Offset="0.375"/>

        <GradientStop Color="#FF617584" Offset="1"/>

      </LinearGradientBrush>

    </Setter.Value>

  </Setter>

  <Setter Property="Template">

    <Setter.Value>

      <ControlTemplate TargetType="ListBox">

        <Border CornerRadius="2" 

                    BorderBrush="{TemplateBinding BorderBrush}"

                  BorderThickness="{TemplateBinding BorderThickness}">

          <ScrollViewer x:Name="ScrollViewer" Padding="{TemplateBinding Padding}" 

                        Background="{TemplateBinding Background}" 

                        BorderBrush="Transparent" BorderThickness="0">

            <ItemsPresenter />

          </ScrollViewer>

        </Border>

      </ControlTemplate>

    </Setter.Value>

  </Setter>

</Style>

Looking at ListBox, the major area of interest is the ControlTemplate; the rest is just very basic style stuff. The ControlTemplate lays out the various bits and pieces that go together to make a ListBox - and most notably it includes an ItemsPresenter which marks the place where the ListBoxItems will be positioned. For my purposes, I''ll need to strip out some of the style info and remove the ScrollViewer (which isn't needed in this case).

And here are the default styles and templates for ListBoxItem in XAML:

<Style TargetType="ListBoxItem">

  <Setter Property="Padding" Value="3" />

  <Setter Property="HorizontalContentAlignment" Value="Left" />

  <Setter Property="VerticalContentAlignment" Value="Top" />

  <Setter Property="Background" Value="Transparent" />

  <Setter Property="BorderThickness" Value="1"/>

  <Setter Property="TabNavigation" Value="Local" />

  <Setter Property="Template">

    <Setter.Value>

      <ControlTemplate TargetType="ListBoxItem">

        <Grid Background="{TemplateBinding Background}">

          <vsm:VisualStateManager.VisualStateGroups>

            <vsm:VisualStateGroup x:Name="CommonStates">

              <vsm:VisualState x:Name="Normal" />

              <vsm:VisualState x:Name="MouseOver">

                <Storyboard>

                  <DoubleAnimation Storyboard.TargetName="fillColor" Storyboard.TargetProperty="Opacity" Duration="0" To=".35"/>

                </Storyboard>

              </vsm:VisualState>

            </vsm:VisualStateGroup>

            <vsm:VisualStateGroup x:Name="SelectionStates">

              <vsm:VisualState x:Name="Unselected" />

              <vsm:VisualState x:Name="Selected">

                <Storyboard>

                  <DoubleAnimation Storyboard.TargetName="fillColor2" Storyboard.TargetProperty="Opacity" Duration="0" To=".75"/>

                </Storyboard>

              </vsm:VisualState>

            </vsm:VisualStateGroup>

            <vsm:VisualStateGroup x:Name="FocusStates">

              <vsm:VisualState x:Name="Focused">

                <Storyboard>

                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Visibility" Duration="0">

                    <DiscreteObjectKeyFrame KeyTime="0">

                      <DiscreteObjectKeyFrame.Value>

                        <Visibility>Visible</Visibility>

                      </DiscreteObjectKeyFrame.Value>

                    </DiscreteObjectKeyFrame>

                  </ObjectAnimationUsingKeyFrames>

                </Storyboard>

              </vsm:VisualState>

              <vsm:VisualState x:Name="Unfocused"/>

            </vsm:VisualStateGroup>

          </vsm:VisualStateManager.VisualStateGroups>

          <Rectangle x:Name="fillColor" Opacity="0" Fill="#FFBADDE9" IsHitTestVisible="False" RadiusX="1" RadiusY="1"/>

          <Rectangle x:Name="fillColor2" Opacity="0" Fill="#FFBADDE9" IsHitTestVisible="False" RadiusX="1" RadiusY="1"/>

          <ContentPresenter

            x:Name="contentPresenter"

            Content="{TemplateBinding Content}"

            ContentTemplate="{TemplateBinding ContentTemplate}"

            HorizontalAlignment="Left"

            Margin="{TemplateBinding Padding}"/>

          <Rectangle x:Name="FocusVisualElement" Stroke="#FF45D6FA" StrokeThickness="1" Visibility="Collapsed" RadiusX="1" RadiusY="1" />

        </Grid>

      </ControlTemplate>

    </Setter.Value>

  </Setter>

</Style>

Things get a lot more interesting looking at the ListBoxItem styles and templates. The Template makes use of the VisualStateManager, which defines a different look-and-feel for each of the various states (or combination of states) the ListBoxItem might be in. The VisualStateManager can also describe transitions between states, but this functionality is not used by ListBoxItem by default.

States are divided into VisualStateGroups. At any moment, the control may be in no more than one state from each VisualStateGroup. The internal logic of the control instructs the VisualStateManager when a state needs to be activated (e.g. MouseOver state is activated when a use moves their mouse over the ListBoxItem).

The states used by ListBoxItem are:

Common States
- Normal
- MouseOver
Selection States
- Unselected
- Selected
Focus States
- Focused
- Unfocused

For my purposes, I want to simplify this a bit. I am only interested in two states: Selected (i.e. visible) and Unselected (i.e. invisible). I do not want any changes to occur on Normal, MouseOver, Focused or Unfocused, so I will remove the extra information in these VisualStates and remove the three Rectangles which these states manipulate. In the Selected VisualState, I am going use an ObjectAnimationUsingKeyFrames to change the Visibility property to Visible. Likewise, in the Unselected VisualState, I am going to use an ObjectAnimationUsingKeyFrames to to change the Visibility property to collapsed.

Here's the resultant styles and templates I came up with for ListBox and ListBoxItem:

<Style x:Key="ListBoxStyle" TargetType="ListBox">

    <Setter Property="HorizontalContentAlignment" Value="Left" />

    <Setter Property="VerticalContentAlignment" Value="Top" />

    <Setter Property="IsTabStop" Value="False" />

    <Setter Property="TabNavigation" Value="Once" />

    <Setter Property="Template">

        <Setter.Value>

            <ControlTemplate TargetType="ListBox">

                <ItemsPresenter />

            </ControlTemplate>

        </Setter.Value>

    </Setter>

</Style>

<Style x:Key="ListBoxItemStyle" TargetType="ListBoxItem">

    <Setter Property="HorizontalContentAlignment" Value="Left" />

    <Setter Property="VerticalContentAlignment" Value="Top" />

    <Setter Property="TabNavigation" Value="Local" />

    <Setter Property="Template">

        <Setter.Value>

            <ControlTemplate TargetType="ListBoxItem">

                <Grid Background="{TemplateBinding Background}">

                    <vsm:VisualStateManager.VisualStateGroups>

                        <vsm:VisualStateGroup x:Name="CommonStates">

                            <vsm:VisualState x:Name="Normal" />

                            <vsm:VisualState x:Name="MouseOver" />

                        </vsm:VisualStateGroup>

                        <vsm:VisualStateGroup x:Name="SelectionStates">

                            <vsm:VisualState x:Name="Unselected">

                                <Storyboard>

                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="Visibility" Duration="0">

                                        <DiscreteObjectKeyFrame KeyTime="0">

                                            <DiscreteObjectKeyFrame.Value>

                                                <Visibility>Collapsed</Visibility>

                                            </DiscreteObjectKeyFrame.Value>

                                        </DiscreteObjectKeyFrame>

                                    </ObjectAnimationUsingKeyFrames>

                                </Storyboard>

                            </vsm:VisualState>

                            <vsm:VisualState x:Name="Selected">

                                <Storyboard>

                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="Visibility" Duration="0">

                                        <DiscreteObjectKeyFrame KeyTime="0">

                                            <DiscreteObjectKeyFrame.Value>

                                                <Visibility>Visible</Visibility>

                                            </DiscreteObjectKeyFrame.Value>

                                        </DiscreteObjectKeyFrame>

                                    </ObjectAnimationUsingKeyFrames>

                                </Storyboard>

                            </vsm:VisualState>

                        </vsm:VisualStateGroup>

                        <vsm:VisualStateGroup x:Name="FocusStates">

                            <vsm:VisualState x:Name="Focused"/>

                            <vsm:VisualState x:Name="Unfocused"/>

                        </vsm:VisualStateGroup>

                    </vsm:VisualStateManager.VisualStateGroups>

                    <ContentPresenter

                        x:Name="contentPresenter"

                        Content="{TemplateBinding Content}"

                        ContentTemplate="{TemplateBinding ContentTemplate}"/>

                </Grid>

            </ControlTemplate>

        </Setter.Value>

    </Setter>

</Style>

Wrap Up

That's about it. I'll quickly include a listing of the various source files, and the whole project can be downloaded at the end of this post.

MyDataContext.cs

using System;

using System.ComponentModel;

using System.Windows.Controls;

  

namespace ListBoxTest

{

    public class MyDataContext : INotifyPropertyChanged

    {

        public event PropertyChangedEventHandler PropertyChanged;

  

        public MyDataContext(UserControl view)

        {

            View = view;

            PersonList = new PersonCollection().LoadDefault();

            if (PersonList.Count > 0)

            {

                PersonComboBoxSelectedIdx = 0;

            }

        }

  

        private UserControl view;

        public UserControl View

        {

            get { return view; }

            set { view = value; }

        }

  

        private PersonCollection personList;

        public PersonCollection PersonList

        {

            get { return personList; }

            set { personList = value; NotifyChange("PersonList"); }

        }

  

        private int personComboBoxSelectedIdx;

        public int PersonComboBoxSelectedIdx

        {

            get { return personComboBoxSelectedIdx; }

            set 

            { 

                personComboBoxSelectedIdx = value; 

                NotifyChange("PersonComboBoxSelectedIdx");

                if (value.Equals(-1)) return;

  

                SelectedPerson = PersonList[value];

  

                AddressesComboBoxSelectedIdx = -1;

                ComboBox cb = (ComboBox)View.FindName("comboboxAddresses");

                cb.UpdateLayout();

                AddressesComboBoxSelectedIdx = 0;

            }

        }

  

        private int addressesComboBoxSelectedIdx;

        public int AddressesComboBoxSelectedIdx

        {

            get { return addressesComboBoxSelectedIdx; }

            set { addressesComboBoxSelectedIdx = value; NotifyChange("AddressesComboBoxSelectedIdx"); }

        }

  

        private Person selectedPerson;

        public Person SelectedPerson

        {

            get { return selectedPerson; }

            set { selectedPerson = value; NotifyChange("SelectedPerson"); }

        }

  

        private void NotifyChange(string name)

        {

            if (PropertyChanged != null)

            {

                PropertyChanged(this, new PropertyChangedEventArgs(name));

            }

        }

    }

}

Page.xaml

<UserControl 

    x:Class="ListBoxTest.Page"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Grid x:Name="LayoutRoot" Background="White" Width="400" Height="470">

        <Border Style="{StaticResource MainBorder}">

            <Grid>

                <Grid.ColumnDefinitions>

                    <ColumnDefinition Width="140"/>

                    <ColumnDefinition Width="*"/>

                </Grid.ColumnDefinitions>

                <Grid.RowDefinitions>

                    <RowDefinition Height="auto" />

                    <RowDefinition Height="auto" />

                    <RowDefinition Height="auto" />

                    <RowDefinition Height="auto" />

                    <RowDefinition Height="auto" />

                    <RowDefinition Height="auto" />

                </Grid.RowDefinitions>

  

                <Border Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0" Style="{StaticResource InnerBorder}">

                    <StackPanel Orientation="Horizontal">

                        <TextBlock Text="Person Details" Width="200" />

                        <ComboBox Width="150"

                                  ItemsSource="{Binding PersonList}"

                                  SelectedIndex="{Binding PersonComboBoxSelectedIdx, Mode=TwoWay}">

                            <ComboBox.ItemTemplate>

                                <DataTemplate>

                                    <StackPanel Orientation="Horizontal">

                                        <TextBlock Text="{Binding LastName}"/>

                                        <TextBlock Text=", "/>

                                        <TextBlock Text="{Binding FirstName}"/>

                                    </StackPanel>

                                </DataTemplate>

                            </ComboBox.ItemTemplate>

                        </ComboBox>

                    </StackPanel>

                </Border>

  

                <TextBlock Grid.Column="0" Grid.Row="1" Text="Person ID" Style="{StaticResource TextBlockStyle}" />

                <TextBlock Grid.Column="0" Grid.Row="2" Text="First Name" Style="{StaticResource TextBlockStyle}" />

                <TextBlock Grid.Column="0" Grid.Row="3" Text="Last Name" Style="{StaticResource TextBlockStyle}" />

                

                <TextBox Grid.Column="1" Grid.Row="1" Text="{Binding SelectedPerson.PersonId}" Style="{StaticResource TextBoxStyle}" />

                <TextBox Grid.Column="1" Grid.Row="2" Text="{Binding SelectedPerson.FirstName}" Style="{StaticResource TextBoxStyle}" />

                <TextBox Grid.Column="1" Grid.Row="3" Text="{Binding SelectedPerson.LastName}" Style="{StaticResource TextBoxStyle}" />

                

                <Border Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="4" Style="{StaticResource InnerBorder}">

                    <StackPanel Orientation="Horizontal">

                        <TextBlock Text="Address(es)" Width="200" />

                        <ComboBox x:Name="comboboxAddresses" 

                                  Width="150"

                                  ItemsSource="{Binding SelectedPerson.Addresses}"

                                  SelectedIndex="{Binding AddressesComboBoxSelectedIdx, Mode=TwoWay}">

                            <ComboBox.ItemTemplate>

                                <DataTemplate>

                                    <StackPanel Orientation="Horizontal">

                                        <TextBlock Text="{Binding AddressDescription}" />

                                    </StackPanel>

                                </DataTemplate>

                            </ComboBox.ItemTemplate>

                        </ComboBox>

                    </StackPanel>

                </Border>

                

                <ListBox Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="5"

                         ItemsSource="{Binding SelectedPerson.Addresses}"

                         SelectedIndex="{Binding AddressesComboBoxSelectedIdx, Mode=TwoWay}"

                         Style="{StaticResource ListBoxStyle}"

                         ItemContainerStyle="{StaticResource ListBoxItemStyle}">

  

                    <ListBox.ItemTemplate>

                        <DataTemplate>

                            <Grid>

                                <Grid.ColumnDefinitions>

                                    <ColumnDefinition Width="140"/>

                                    <ColumnDefinition Width="*"/>

                                </Grid.ColumnDefinitions>

                                <Grid.RowDefinitions>

                                    <RowDefinition Height="auto"/>

                                    <RowDefinition Height="auto"/>

                                    <RowDefinition Height="auto"/>

                                    <RowDefinition Height="auto"/>

                                    <RowDefinition Height="auto"/>

                                    <RowDefinition Height="auto"/>

                                    <RowDefinition Height="auto"/>

                                </Grid.RowDefinitions>

                                

                                <TextBlock Grid.Column="0" Grid.Row="0" Text="Street Address 1" Style="{StaticResource TextBlockStyle}" />

                                <TextBlock Grid.Column="0" Grid.Row="1" Text="Street Address 2" Style="{StaticResource TextBlockStyle}" />

                                <TextBlock Grid.Column="0" Grid.Row="2" Text="Street Address 3" Style="{StaticResource TextBlockStyle}" />

                                <TextBlock Grid.Column="0" Grid.Row="3" Text="Suburb" Style="{StaticResource TextBlockStyle}" />

                                <TextBlock Grid.Column="0" Grid.Row="4" Text="State" Style="{StaticResource TextBlockStyle}" />

                                <TextBlock Grid.Column="0" Grid.Row="5" Text="Post Code" Style="{StaticResource TextBlockStyle}" />

                                <TextBlock Grid.Column="0" Grid.Row="6" Text="Country" Style="{StaticResource TextBlockStyle}" />

  

                                <TextBox Grid.Column="1" Grid.Row="0" Text="{Binding StreetAddress1}" Style="{StaticResource TextBoxStyle}" />

                                <TextBox Grid.Column="1" Grid.Row="1" Text="{Binding StreetAddress2}" Style="{StaticResource TextBoxStyle}" />

                                <TextBox Grid.Column="1" Grid.Row="2" Text="{Binding StreetAddress3}" Style="{StaticResource TextBoxStyle}" />

                                <TextBox Grid.Column="1" Grid.Row="3" Text="{Binding Suburb}" Style="{StaticResource TextBoxStyle}" />

                                <TextBox Grid.Column="1" Grid.Row="4" Text="{Binding State}" Style="{StaticResource TextBoxStyle}" />

                                <TextBox Grid.Column="1" Grid.Row="5" Text="{Binding PostCode}" Style="{StaticResource TextBoxStyle}" />

                                <TextBox Grid.Column="1" Grid.Row="6" Text="{Binding Country}" Style="{StaticResource TextBoxStyle}" />

                            </Grid>

                        </DataTemplate>

                    </ListBox.ItemTemplate>

                </ListBox>

            </Grid>

        </Border>

    </Grid>

</UserControl>

Page.xaml.cs

using System;

using System.Windows.Controls;

  

namespace ListBoxTest

{

    public partial class Page : UserControl

    {

        public Page()

        {

            InitializeComponent();

            this.DataContext = new MyDataContext(this);

        }

    }

}

App.xaml

<Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 

             x:Class="ListBoxTest.App"

             xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"

             >

    <Application.Resources>

        <Style x:Key="TextBoxStyle" TargetType="TextBox">

            <Setter Property="Margin" Value="5"/>

            <Setter Property="Width" Value="180"/>

        </Style>

        <Style x:Key="TextBlockStyle" TargetType="TextBlock">

            <Setter Property="Margin" Value="5"/>

            <Setter Property="Width" Value="100"/>

        </Style>

        <Style x:Key="MainBorder" TargetType="Border">

            <Setter Property="Background" Value="WhiteSmoke" />

            <Setter Property="BorderThickness" Value="1" />

            <Setter Property="CornerRadius" Value="8" />

            <Setter Property="BorderBrush" Value="LightGray" />

            <Setter Property="Padding" Value="12" />

        </Style>

        <Style x:Key="InnerBorder" TargetType="Border">

            <Setter Property="Margin" Value="0,5,0,5" />

            <Setter Property="Background" Value="LightGray" />

            <Setter Property="CornerRadius" Value="5" />

            <Setter Property="Padding" Value="8" />

        </Style>

        <Style x:Key="ListBoxStyle" TargetType="ListBox">

            <Setter Property="HorizontalContentAlignment" Value="Left" />

            <Setter Property="VerticalContentAlignment" Value="Top" />

            <Setter Property="IsTabStop" Value="False" />

            <Setter Property="TabNavigation" Value="Once" />

            <Setter Property="Template">

                <Setter.Value>

                    <ControlTemplate TargetType="ListBox">

                        <ItemsPresenter />

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

        </Style>

        <Style x:Key="ListBoxItemStyle" TargetType="ListBoxItem">

            <Setter Property="HorizontalContentAlignment" Value="Left" />

            <Setter Property="VerticalContentAlignment" Value="Top" />

            <Setter Property="TabNavigation" Value="Local" />

            <Setter Property="Template">

                <Setter.Value>

                    <ControlTemplate TargetType="ListBoxItem">

                        <Grid Background="{TemplateBinding Background}">

                            <vsm:VisualStateManager.VisualStateGroups>

                                <vsm:VisualStateGroup x:Name="CommonStates">

                                    <vsm:VisualState x:Name="Normal" />

                                    <vsm:VisualState x:Name="MouseOver" />

                                </vsm:VisualStateGroup>

                                <vsm:VisualStateGroup x:Name="SelectionStates">

                                    <vsm:VisualState x:Name="Unselected">

                                        <Storyboard>

                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="Visibility" Duration="0">

                                                <DiscreteObjectKeyFrame KeyTime="0">

                                                    <DiscreteObjectKeyFrame.Value>

                                                        <Visibility>Collapsed</Visibility>

                                                    </DiscreteObjectKeyFrame.Value>

                                                </DiscreteObjectKeyFrame>

                                            </ObjectAnimationUsingKeyFrames>

                                        </Storyboard>

                                    </vsm:VisualState>

                                    <vsm:VisualState x:Name="Selected">

                                        <Storyboard>

                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="Visibility" Duration="0">

                                                <DiscreteObjectKeyFrame KeyTime="0">

                                                    <DiscreteObjectKeyFrame.Value>

                                                        <Visibility>Visible</Visibility>

                                                    </DiscreteObjectKeyFrame.Value>

                                                </DiscreteObjectKeyFrame>

                                            </ObjectAnimationUsingKeyFrames>

                                        </Storyboard>

                                    </vsm:VisualState>

                                </vsm:VisualStateGroup>

                                <vsm:VisualStateGroup x:Name="FocusStates">

                                    <vsm:VisualState x:Name="Focused"/>

                                    <vsm:VisualState x:Name="Unfocused"/>

                                </vsm:VisualStateGroup>

                            </vsm:VisualStateManager.VisualStateGroups>

                            <ContentPresenter

                                    x:Name="contentPresenter"

                                    Content="{TemplateBinding Content}"

                                    ContentTemplate="{TemplateBinding ContentTemplate}"/>

                        </Grid>

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

        </Style>

    </Application.Resources>

</Application>

And Person.cs is displayed above.

Notes

In Line 49 of MyDataContext.cs, don't forget to call ComboBox.UpdateLayout() when changing the data binding of a ComboBox. Otherwise you'll encounter the insidious "Error: Sys.InvalidOperationException: ManagedRuntimeError error #4004 in control 'Xaml1': System.ArgumentException: Value does not fall within the expected range." error during runtime.
Don't forget to add a namespace for the VisualStateManager in App.xaml (xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows")

Source

Source is here.

3bb8510f-0e48-447d-84f4-8e9b2e694474|0|.0

Tags: silverlight

Categories: Work

E-mail | Kick it! | DZone it! | del.icio.us

Permalink | Comments (2) | Post RSS RSS comment feed

Comments

p90x

on 2/9/2010 9:06:30 AM

I can see that you are putting a lot of time and effort into your blog and detailed articles! I am deeply in love with every single piece of information you post here. Reading this post reminds me of my old room mate! He always kept talking about this. I will forward this article to him. Pretty sure he will have a good read. Thanks for sharing!

jobs uk on 3/2/2010 4:00:27 PM

Thanks mate!I was looking for that solution nearly all day!There are few more questions that I want to ask you.Should I post them as comments?By the way -I love your blog,it is awesome and if you are looking for link exchange with quality job borad in UK,please drop an email-I will be glad to exchange link with your blog
Regards,
Chris

Add comment

Name*
E-mail* (Will show your Gravatar icon)
Website
Country Country flag

b i u quote

Comment
Preview

Notify me when new comments are added

Tom on Twitter

March 6. 21:30
tahs just made it. luckily the ref was playing on their team. lousy game. lousy rugby. sharks deserved the win. sad day for nsw #rugby

March 6. 14:57
wow this hail is pretty full on

March 5. 23:10
it wasn't especially easy but i've now got a working leopard VM running with network / iphone sdk and attached iphone. all on win7!

March 5. 21:10
maybe kearns & martin should stop bagging the lions and acknowledge that the brumbies are barely less shit #rugby

March 5. 19:31
great win for the reds over the chiefs, with 2 of australia's best outside backs on the sideline. well done! #rugby

March 1. 09:51
just realized that two of the family pcs are about to drop dead when the Windows 7 beta expires tomorrow. not sure i want to buy 2 licenses

February 27. 21:15
this #reds #blues game is bloody entertaining... reds looking very dangerous this year #rugby

February 25. 13:54
http://twitpic.com/156k7v - i love going home for lunch!

February 20. 18:23
watching winter olympics at half time of force v hurricanes #rugby. all online. TV networks are dead. couldn't pay me to watch channel 9

February 19. 22:00
the #reds are unstoppable tonight

February 19. 21:09
peter hynes has to be about the best player in australian rugby right now #reds

February 19. 17:54
found some Gosser at Dan Murphy's in willoughby.. going on a trip back to vienna

February 19. 17:50
loving the 'full replay' feature on nbcolympics.com - just got my snow fix. now to see how blues are going doing against the hlanders #rugby

February 14. 19:03
the air is thick with evaporated tabasco ..... cough

Follow me on Twitter

tom beeby

silverlight, asp.net and other stuff

Customizing a ListBox

Overview

Building a Data Source

Customizing the ListBox

Wrap Up

Notes

Source

About the author

Tom on Twitter

Month List

Recently Written

Author List

Find It

Admin

Credits

tom beeby

silverlight, asp.net and other stuff

Customizing a ListBox

Overview

Building a Data Source

Customizing the ListBox

Wrap Up

Notes

Source

About the author

Tag cloud

Tom on Twitter

Month List

Recently Written

Author List

Find It

Admin

Credits