ComboBox Default Selection In Silverlight 3


Introduction

In this article we will see how we can use default item in ComboBox in Silverlight 3.

Problem

Suppose you have a ComboBox, but Silverlight 3 doesn’t give you support for using default selection. Consider you have many items in the ComboBox and you need to deselect to make the ComboBox to reset.

Creating Silverlight Project

Fire up Visual Studio 2008 and create a new Silverlight 3 Project. Name it as ComboBoxDefaultSample.

Add some controls along with a ComboBox.

I have designed in Expression blend which will look similar as follows:

As you see from the above image, we have a ComboBox a Button and a TextBlock which would say which item is selected from the ComboBox.

Here is the requirement: you should list all Business Units from the List and based on the Selection user can search.

We would write a class called BusinessUnit.cs where we would define the properties.

public
class
BusinessUnit : INotifyPropertyChanged

{


private
long businessId;


public
long Id

{


get { return businessId; }


set { businessId = value; }

}

 


private
string businessUnitName;


public
string Name

{


get { return businessUnitName; }


set

{

businessUnitName = Normalize(value);


if (string.IsNullOrEmpty(value))

{


throw
new
Exception(“Business Unit is required”);

}

OnPropertyChanged(“Name”);

}

}

 


private
string businessUnitDescription;


public
string Description

{


get { return businessUnitDescription; }


set

{

businessUnitDescription = Normalize(value);


if (string.IsNullOrEmpty(value))

{


throw
new
Exception(“Business Unit Description is required”);

}

OnPropertyChanged(“Description”);

}

}

 


private
DateTime created;


public
DateTime Created

{


get { return created; }


set { created = value; }

}

 


private
string creator;


public
string Creator

{


get { return creator; }


set { creator = value; }

}

 


private
DateTime updated;


public
DateTime Updated

{


get { return updated; }


set { updated = value; }

}

 


private
string updater;


public
string Updater

{


get { return updater; }


set { updater = value; }

}

 


private
static
readonly
char[] whitespaces = new
char[] { ‘ ‘, ‘\n’, ‘\t’, ‘\r’, ‘\f’, ‘\v’ };


private
static
string Normalize(string source)

{


return
String.Join(” “, source.Split(whitespaces, StringSplitOptions.RemoveEmptyEntries));

}

 

#region INotifyPropertyChanged Members


public
event
PropertyChangedEventHandler PropertyChanged;

 


private
void OnPropertyChanged(string propertyName)

{


if (this.PropertyChanged != null)

{


this.PropertyChanged(this, new
PropertyChangedEventArgs(propertyName));

}

}

#endregion

}

 

Now we will change the Binding in ComboBox.

The following XAML will help you.

<ComboBox x:Name=”cmbBusinessUnits” HorizontalAlignment=”Left” VerticalAlignment=”Top” Width=”175″ Margin=”64,106,0,0″ Height=”25″>


<ComboBoxItem Content=”All”/>


<ComboBox.ItemTemplate>


<DataTemplate>


<TextBlock Text=”{Binding Name}”/>


</DataTemplate>


</ComboBox.ItemTemplate>


</ComboBox>

 

As you see from the above XAML code, we have added a CombBoxItem as “All” and then we defined our ComboBox ItemTemplate with Binding.

Now we will create sample data and set the ItemSource.

List<BusinessUnit> myList;


public MainPage()

{

InitializeComponent();

myList = new
List<BusinessUnit>()

{


new
BusinessUnit{ Id=1, Name=“BU 1”, Description=“Desc 1”, Creator=“User 1”, Created=DateTime.Now, Updater=“User 1”, Updated=DateTime.Now},


new
BusinessUnit{ Id=2, Name=“BU 2”, Description=“Desc 2”, Creator=“User 2”, Created=DateTime.Now, Updater=“User 2”, Updated=DateTime.Now},


new
BusinessUnit{ Id=3, Name=“BU 3”, Description=“Desc 3”, Creator=“User 3”, Created=DateTime.Now, Updater=“User 3”, Updated=DateTime.Now},


new
BusinessUnit{ Id=4, Name=“BU 4”, Description=“Desc 4”, Creator=“User 4”, Created=DateTime.Now, Updater=“User 4”, Updated=DateTime.Now},


new
BusinessUnit{ Id=5, Name=“BU 5”, Description=“Desc 5”, Creator=“User 5”, Created=DateTime.Now, Updater=“User 5”, Updated=DateTime.Now},


new
BusinessUnit{ Id=6, Name=“BU 6”, Description=“Desc 6”, Creator=“User 6”, Created=DateTime.Now, Updater=“User 6”, Updated=DateTime.Now},


new
BusinessUnit{ Id=7, Name=“BU 7”, Description=“Desc 7”, Creator=“User 7”, Created=DateTime.Now, Updater=“User 7”, Updated=DateTime.Now},


new
BusinessUnit{ Id=8, Name=“BU 8”, Description=“Desc 8”, Creator=“User 8”, Created=DateTime.Now, Updater=“User 8”, Updated=DateTime.Now},


new
BusinessUnit{ Id=9, Name=“BU 9”, Description=“Desc 9”, Creator=“User 9”, Created=DateTime.Now, Updater=“User 9”, Updated=DateTime.Now},

};

 


foreach (object item in myList)

{

cmbBusinessUnits.Items.Add(item);

}

 

cmbBusinessUnits.SelectedIndex = 0;

}

 

Now here comes the Button Click event handler which will differentiate between Default Selection and Other items.

private
void btnSearch_Click(object sender, RoutedEventArgs e)

{


if (this.cmbBusinessUnits.SelectedItem != null && !cmbBusinessUnits.SelectionBoxItem.Equals(“All”))

{

txtSelected.Text = ((BusinessUnit)this.cmbBusinessUnits.SelectedItem).Name;

}


else

{

txtSelected.Text = string.Empty;

}

}

 

Now go ahead and run the application.

When you select other items the TextBlock would say which item you have choosen.

That’s it. You can use this concept in as per your requirement.

Hope this article helps. J