如何將ListBox控件綁定到WPF中的列表？

Question

我想創建一個列表框和一個.NET列表之間的雙向綁定。

在我的GUI中，我有一個列表框，一個文本框以及添加和刪除按鈕。 列表框顯示汽車，我的目標是在.Net汽車列表和列表框之間創建雙向綁定：當用戶將汽車插入文本框時，它只會在.Net列表中更新，而列表框會自動更新。

當用戶按下圖形用戶界面的「刪除」按鈕時，汽車將從GUI中移除，並且.Net列表會自動更新。

我已經開始寫XAML代碼，但想通，我真的不知道該怎麼辦兩側（C＃和XAML）的結合：

<Window x:Class="WpfApplication1.Window1" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:c="clr-namespace:WpfApplication1" 
    Title="Window1" Height="300" Width="369" Loaded="Window_Loaded"> 
    <Window.Resources> 
     <ObjectDataProvider x:Key="carsData" 
         ObjectType="{x:Type c:Window1}" /> 
    </Window.Resources> 
    <Grid Width="332"> 
     <ListBox Margin="10,62,0,100" Name="myListBox" HorizontalAlignment="Left" Width="120" ItemsSource="{Binding Source={StaticResource CarsData}}"/> 
     <Button Height="23" Margin="66,0,0,65" Name="addBtn" VerticalAlignment="Bottom" Click="addBtn_Click" HorizontalAlignment="Left" Width="64">add</Button> 
     <TextBox Margin="10,0,0,64.48" Name="myTextBox" Height="23" VerticalAlignment="Bottom" HorizontalAlignment="Left" Width="47" /> 
     <Button Height="23" Margin="66,0,0,33" Name="removeButton" VerticalAlignment="Bottom" HorizontalAlignment="Left" Width="64" Click="removeButton_Click">Remove</Button> 
    </Grid> 
</Window> 

有我的C＃代碼：

public partial class Window1 : Window 
{ 
    MyModel listMgr; 
    ObservableCollection<Car> carList; 

    public Window1() 
    { 
     InitializeComponent(); 
     listMgr = new MyModel(); 
    } 

    private void addBtn_Click(object sender, RoutedEventArgs e) 
    { 
     listMgr.add(new Car(0, myTextBox.Text, 2011)); 

    } 

    private void removeButton_Click(object sender, RoutedEventArgs e) 
    { 
     //myListBox.Items.RemoveAt(0); 
    } 

    private void Window_Loaded(object sender, RoutedEventArgs e) 
    { 
     carList = listMgr.getList(); 
     myListBox.DataContext = carList; 
     //secondListBox.DataContext = carList; 
    } 
} 

Answer 1

這是一個快速的版本，你需要添加代碼來檢查汽車選擇等

要查看您的汽車數據，您需要定義一個數據模板。在這個例子中，它只是一個簡單的名字，但您可以更改文本顏色，字體大小，添加更多字段等。

當添加/刪除汽車時，最好在列表上工作，而不是直接在ListBox上。

XAML：

<Window x:Class="cars.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"> 
<Window.Resources> 
    <DataTemplate x:Key="car_template" DataType="Car"> 
     <TextBlock Text="{Binding name}"/> 
    </DataTemplate> 
</Window.Resources> 
<StackPanel> 
    <ListBox x:Name="cars_box" Margin="5" ItemsSource="{Binding}" ItemTemplate="{StaticResource car_template}"/> 
    <TextBox x:Name="new_car_box" Margin="5"/> 
    <Button Content="add" Click="add_car" Margin="5"/> 
    <Button Content="delete" Click="delete_car" Margin="5"/> 
</StackPanel> 

C＃：

using System.Collections.ObjectModel; 
using System.Windows;  
public partial class MainWindow : Window 
{ 
    ObservableCollection<Car> cars = new ObservableCollection<Car>(); 
    public MainWindow() 
    { 
     InitializeComponent();    
     cars.Add(new Car("Volvo")); 
     cars.Add(new Car("Ferrari")); 
     cars_box.DataContext = cars; 
    } 

    private void add_car(object sender, RoutedEventArgs e) 
    { 
     cars.Add(new Car(new_car_box.Text)); 
    } 

    private void delete_car(object sender, RoutedEventArgs e) 
    { 
     cars.Remove((cars_box.SelectedItem as Car)); 
    } 
} 

public class Car 
{ 
    public string name { get; set; } 
    public Car(string _name) 
    { 
     this.name = _name; 
    } 
}