New to Data binding in Expression Blend

Question

Hi.

I have a WPF application in Expression Blend.

In the application I want to have a listbox on the right side that lists words.

When the user clicks on a word, I want to appear on the left a bigger text of the word, description, and some other text.

I understand that to list all the words in the listbox I need to databind data that contains the words, description and other text.

I'm new to this data binding.

Can someone please help me how to do this in Expression Blend 4?

Thanks!

Answer 1

I built a very basic MVVM example that will show you some of the basic functionality.

I first created a 'Car' object. This is what my listbox will contain.

Car.cs

public class Car
{
    public Car(string make, string model, int year)
    {
        Model = model;
        Make = make;
        Year = year;
    }

    public string Model { get; set; }
    public string Make { get; set; }
    public int Year { get; set; }
}

Next, I created a ViewModel to set as the DataContext of my view. The ViewModel has two properties, 'Cars' and 'SelectedCar'. The view will bind to these two properties. Here's the implementation of the ViewModel.

MainWindow_ViewModel.cs

public class MainWindow_ViewModel : INotifyPropertyChanged
{
    public MainWindow_ViewModel()
    {
        this.Cars = LoadInitialCarList();
        this.SelectedCar = this.Cars.First();
    }

    public List<Car> Cars
    {
        get { return cars; }
        set
        {
            if (cars != value)
            {
                cars = value;
                OnPropertyChanged("Cars");
            }
        }
    }
    private List<Car> cars;

    public Car SelectedCar
    {
        get { return selectedCar; }
        set
        {
            if (selectedCar != value)
            {
                selectedCar = value;
                OnPropertyChanged("SelectedCar");
            }
        }
    }
    private Car selectedCar;

    private List<Car> LoadInitialCarList()
    {
        List<Car> list = new List<Car>();

        list.Add(new Car("Chevrolet", "Camaro", 1968));
        list.Add(new Car("Ford", "Mustang", 1965));
        list.Add(new Car("Pontiac", "GTO", 1970));

        return list;
    }

    #region INotifyPropertyChanged Members

    public event PropertyChangedEventHandler PropertyChanged;

    public void OnPropertyChanged(string propertyName)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }

    #endregion
}

Now, in the view, I was able to create a ListBox (like you suggested) and populate it's ItemSource with my list of Cars. I also bound the SelectedItem of the ListBox to the SelectedCar on the ViewModel. I placed some other text in the View to show more data about the selected Car too.

MainWindow.xaml

<Window x:Class="ListBoxBinding.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"
    xmlns:local="clr-namespace:ListBoxBinding"
    >

<Window.DataContext>
    <local:MainWindow_ViewModel/>
</Window.DataContext>

<StackPanel>
    <ListBox ItemsSource="{Binding Cars}" SelectedItem="{Binding SelectedCar, Mode=TwoWay}"/>

    <StackPanel Orientation="Horizontal">
        <TextBlock Margin="3" Text="{Binding SelectedCar.Year}"/>
        <TextBlock Margin="3" Text="{Binding SelectedCar.Make}"/>
        <TextBlock Margin="3" Text="{Binding SelectedCar.Model}"/>
    </StackPanel>
</StackPanel>

When you select an item in the ListBox, it will update the SelectedItem on the ViewModel, therefore, it updates the TextBlocks that are bound to the properties on the SelectedCar.

I think this is something similar to what you are trying to accomplish. Hope this helps!