Nouveauté de la liaison de données dans Expression Blend

Question

J'ai une application WPF dans Expression Blend.

Dans l'application, je veux avoir une liste sur le côté droit qui répertorie les mots. Lorsque l'utilisateur clique sur un mot, je veux afficher à gauche un plus grand texte du mot, une description et un autre texte.

Je comprends que pour lister tous les mots de la liste, j'ai besoin d'une base de données qui contient les mots, la description et tout autre texte.

Je suis nouveau à cette liaison de données.

Quelqu'un peut-il m'aider s'il vous plaît comment faire cela dans Expression Blend 4?

Merci!

Answer 1

J'ai construit un exemple MVVM très basique qui vous montrera certaines des fonctionnalités de base.

J'ai d'abord créé un objet 'Car'. C'est ce que ma listbox contiendra.

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; } 
} 

Ensuite, je créé un ViewModel à définir comme DataContext de mon avis. Le ViewModel possède deux propriétés, 'Cars' et 'SelectedCar'. La vue va se lier à ces deux propriétés. Voici l'implémentation de 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 
} 

Maintenant, dans la vue, j'ai pu créer une zone de liste (comme vous le suggérez) et le remplir est ItemSource avec ma liste des voitures. J'ai également lié le SelectedItem de la ListBox à SelectedCar sur le ViewModel. J'ai placé un autre texte dans la vue pour afficher plus de données sur la voiture sélectionnée aussi.

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> 

Lorsque vous sélectionnez un élément dans la zone de liste, il mettra à jour le SelectedItem sur le ViewModel, par conséquent, il met à jour les TextBlocks qui sont liés aux propriétés sur la SelectedCar. Je pense que c'est quelque chose de similaire à ce que vous essayez d'accomplir. J'espère que cela t'aides!