Posts tagged: ComboBox

Nov 03 2009

Silverlight ComboBox

Silverlight comboBox is an xaml control. Its Syntax looks like in Xaml

<ComboBox></ComboBox>

Margin, Width and Height properties will adjust the controls width and height.

Margin property will adjust the control location of the parent user control.

X:Name is the property to the comboBox represent the ID of the control

Vertical and Horizontal alignment properties are used to set alignment in horizontal or vertical

IsSelected is used to select current selected item in comboBox.

IsSelected is True/False.

SelectionChanged: Its event is  autopostback property to ComboBox.

<ComboBox Grid.Row=”0″ Grid.Column=”0″ Margin=”10,10,0,13″ Name=”ComboBox1″ HorizontalAlignment=”Left”

VerticalAlignment=”Top” Width=”150″ Height=”30″>

</ComboBox>

Example1: Adding Items To ComboBox using ComboBoxItem

<ComboBox.Items>

<ComboBoxItem Content=”Electronic”  ></ComboBoxItem>

<ComboBoxItem Content=”Books” ></ComboBoxItem>

<ComboBoxItem Content=”Furniture” ></ComboBoxItem>

</ComboBox.Items>

Example: Page.xaml

<ComboBox Grid.Row=”0″ Grid.Column=”0″ Margin=”10,10,0,13″ Name=”ComboBox1″ HorizontalAlignment=”Left”

VerticalAlignment=”Top” Width=”150″ Height=”30″>

<ComboBox.Items>

<ComboBoxItem Content=”Electronic”  ></ComboBoxItem>

<ComboBoxItem Content=”Books” ></ComboBoxItem>

<ComboBoxItem Content=”Furniture” ></ComboBoxItem>

</ComboBox.Items>

</ComboBox>

When you run the application no value will be selected as default in ComboBox. To make default value Books in above example then use IsSelected property of ComboBox

<ComboBoxItem Content=”Books” IsSelected=”True” ></ComboBoxItem>

Example 2: Adding Combox Items at Runtime using Add Method

In Page.xaml.cs file modify below coding

public Page()

{

InitializeComponent();

Combox2.Items.Add(”Movies”);

Combox2.Items.Add(”SportItems”);

Combox2.Items.Add(”Games”);

}

Example3: Getting Data into ComboBox using Item Source

In Page.xaml drag ComboxBox and set properties margin

<ComboBox Margin=”10,10,0,13″ Name=”ComboBox1″ HorizontalAlignment=”Left” VerticalAlignment=”Top” Width=”150″ Height=”30″>    </ComboBox>

In Page.xaml.cs file Create Class file to Books to Get/sets its Fields values

namespace AddingXAML

{

public partial class Page : UserControl

{

public class Books

{

public string Name { get; set; }

public int Price { get; set; }

}

public Page()

{

InitializeComponent();

List<Books> BooksList = new List<Books>();

BooksList.Add(new Books() { Name = “Asp.net”, Price = 1400 });

BooksList.Add(new Books() { Name = “Silverlight”, Price = 1350 });

BooksList.Add(new Books() { Name = “MVP”, Price = 1050 });

ComboBox1.DisplayMemberPath = “Name”;

ComboBox1.ItemsSource = BooksList;

//It selects default value as Silverlight

ComboBox1.SelectedIndex = 1;

}

}

}

Now Run the Application


Getting SelectedValues in Silverlight ComboBox using SelectionChanged Event

Step1: Goto again Page.xaml file add SelectionChanged then type equalto symbol i.e

(SelectionChanged =) then automatically ComboBox1_SelectionChanged and New Event Hander. Choose ComboBox1_SelectionChanged then Page.xaml ComboxBox code look like

<ComboBox Margin=”10,10,0,13″ Name=”ComboBox1″ HorizontalAlignment=”Left” VerticalAlignment=”Top” Width=”150″ Height=”30″ SelectionChanged=”ComboBox1_SelectionChanged

>    </ComboBox>

then right click on ComboBox1_SelectionChanged then choose Navigate to Event Handler click

Then the below code will generate in Page.xaml.cs

void ComboBox1_SelectionChanged(object sender, SelectionChangedEventArgs e)

{

}

Then Add below code inbetween ComboBox1_SelectionChanged event

void ComboBox1_SelectionChanged(object sender, SelectionChangedEventArgs e)

{

Books selectedBooks = (Books)ComboBox1.SelectedItem;

string BooksName = selectedBooks.Name;

int price = selectedBooks.Price;

}

Do Debugging from when you run the application keep Debugging in

void ComboBox1_SelectionChanged by pressing F11 step by step you will observer BookName and Price which you choose item in ComboBox1.

Alibi3col theme by Themocracy