Sturm
Sturm

Reputation: 4125

Combobox WPF list

I'm doing this little program just to learn how to bind some data from a list of objects to a combobox. What I want to do is to show in a textblock the translation of some words that are in the combobox. In the combobox I want the english word, and in the textblock spanish for example.

For that I created a combobox in xaml called cmbBox1 and a textblock called tb1.

Then I created the class "word":

public class word
    {
        public string english { get; set; }
        public string spanish { get; set; }

    }

And the lists with three words:

 private void Window_Loaded_1(object sender, RoutedEventArgs e)
    {
        // Creation of a list of objects of class "word"
        List<word> mydictionary = new List<word>();

        word word1 = new word();
        word1.english = "Hello";
        word1.spanish = "Hola";

        word word2 = new word();
        word2.english = "Goodbye";
        word2.spanish = "Adios";

        word word3 = new word();
        word3.english = "How are you?";
        word3.spanish = "¿Qué tal?";

        mydictionary.Add(word1);
        mydictionary.Add(word2);
        mydictionary.Add(word3);

        //Adding the objects of the list mydictionary to combobox <---
        foreach (word myword in mydictionary)
        {
            cmbBox1.Items.Add(myword);
        }



    }

And int XAML i have this for my combobox:

  <ComboBox x:Name="cmbBox1" HorizontalAlignment="Left" Margin="133,122,0,0" VerticalAlignment="Top" Width="120" 
                  ItemsSource="{Binding Path=word}" 
                  DisplayMemberPath="english" 
                  SelectedValuePath="english" 
                 SelectedValue="{Binding Path=word}" />

I would like to have the property "english" displayed in the combobox and the property "spanish" in the textblock. It would be nice too if when the user click on a word in the combobox a different method is executed, for example MessageBox.Show("You selected the word" + word1.english).

The purpose of all this is to learn how to do something more complex: I will be loading a text files with some channels of data, each channel will have a bunch of propreties and I want to be able to select the channel for then plotting it. Thank you very much.

Upvotes: 0

Views: 732

Answers (1)

Cellcon
Cellcon

Reputation: 1295

I think you should start learning C# and WPF step by step. Trying to bind to a class instead of binding to an instance or collection is not a Problem of understanding WPF.

But I know there are several people having big Problems understanding databinding in WPF, so I will pick up your post to describe this simple example.

1) Do not add the items manually (cmbBox1.Items.Add(myword);) - that's what databinding is for.

2) You cannot bind to a type (like Binding Path=word). You have to bind to an objet/collection. The object/collection has to be a property, not a local collection like your implementation of mydictionary.

public List<Word> MyDictionary {get; set;}
public Word SelectedWord {get; set;}

ItemsSource="{Binding Path=MyDictionary}"
SelectedItem="{Binding SelectedWord}"

3) You have to set the object containing the data collections as DataContext, in your case:

DataContext = this;

4) To react to a selection change, handle the SelectionChanged Event:

 <ComboBox [...] SelectionChanged="cmbBox1_SelectionChanged" />

Full WPF:

<Window x:Class="WpfApplication1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525" Loaded="Window_Loaded">
<Grid>
    <ComboBox x:Name="cmbBox1" HorizontalAlignment="Left" Margin="133,122,0,0" 
              VerticalAlignment="Top" Width="120" 
              ItemsSource="{Binding MyDictionary}" 
              DisplayMemberPath="english" 
              SelectedValuePath="english" 
              SelectedItem="{Binding SelectedWord}"
              SelectionChanged="cmbBox1_SelectionChanged" />
</Grid>
</Window>

Full C#:

public class Word
{
    public string english { get; set; }
    public string spanish { get; set; }
}

public partial class MainWindow : Window
{
    public List<Word> MyDictionary {get; set;}

    public Word SelectedWord {get; set;}

    public MainWindow()
    {
        InitializeComponent();
    }

    private void Window_Loaded(object sender, RoutedEventArgs e)
    {
        MyDictionary = new List<Word>();

        Word word1 = new Word();
        word1.english = "Hello";
        word1.spanish = "Hola";

        Word word2 = new Word();
        word2.english = "Goodbye";
        word2.spanish = "Adios";

        Word word3 = new Word();
        word3.english = "How are you?";
        word3.spanish = "¿Qué tal?";

        MyDictionary.Add(word1);
        MyDictionary.Add(word2);
        MyDictionary.Add(word3);

        DataContext = this;
    }

    private void cmbBox1_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        MessageBox.Show("You have selected the word \"" + SelectedWord.spanish + "\"");
    }
}

Upvotes: 2

Related Questions