How to set a value for a combo box item in WPF?

Question

I started studying wpf and I tried to work with combo boxes but so far I'm having troubles. What I wanted is to set the combo box's value to be based on the primary id of my item table and show the combo box's text based on my table's item name column.

I have a background in php so I tried coding it there so you guys could better understand what I'm trying to do:

<?php

$con = mysqli_connect("localhost","root","","inventory");

echo "<form method='POST'>";
echo "<select name='value'>";
echo "<option>Select An Item</option>";

$item_query = mysqli_query($con,"SELECT * FROM item") or mysqli_error();
while($got = mysqli_fetch_assoc($item_query))
{
$item_id = $got['item_id'];
$item_name = $got['item_name'];
echo "<option value='$item_id'>$item_name</option>";    
}

echo "</select>";
echo "<input type='submit' name='submit'/>";
echo "</form>";

if(isset($_POST['submit']))
{
    echo $_POST['value'];
}

?>

What I have done so far on wpf:

InitializeComponent();
        comboBox.Items.Add("One");
        comboBox.Items.Add("Two");
        comboBox.Items.Add("Three");

That's about the only thing I have unfortunately done so far. I haven't even connected it to my database as I first wanted to determine how would I be able to apply the values then only after that I would apply my database.

Answer 1

Assuming you dont have experience in MVVM pattern yet, Use DataBinding in XAML and codebehind files.

1. Implement INotifyPropertyChanged interface on your Window class. INotify... is the crucial interface that notifies the UI element whenever data that the UI Element holds is changed in code behind.

You can find code to implement INotifyPropertyChanged in below link: http://www.codeproject.com/Articles/41817/Implementing-INotifyPropertyChanged

2. Create a custom class Item that corresponds according to your database table structure for your combobox. Also make your class implement INotifyPropertyChanged interface. Mandatory Call the OnPropertyChanged method from setter of the property. Sample code as below:

    public class Item:InotifyPropertyChanged { private int id: public int Id { get{return id;} set { id=value; OnPropertyChanged(new PropertyChangedEventArgs("Id")); } } private string text; public string Text { get { return text; } set { text = value; OnPropertyChanged(new PropertyChangedEventArgs("Id")); } } 

   3. Create a container property of type ObservableCollection to hold ComboBox items for your class Window as below:

    private ObservableCollection<Item> _items; public ObservableCollection<Item> Items { get { return _items; } set { _items = value; OnPropertyChanged(new PropertyChangedEventArgs("Items")); } } 

   Create a method that populates the Items container and call the method from Window constructor in code behind.

3. Finally, Change your XAML ComboBox definition as below:

     <ComboBox ItemsSource="{Binding Items}" DisplayMemberPath="Text" SelectedValuePath="Id"/>