How can I bind a ListBox control to a List in WPF?
I want to create a 2 way bind between a listbox and a .NET list.
In my GUI, I have a listbox, a textbox and add and remove buttons. The listbox displays cars, and my goal is to create a two-way bind between the .Net car list and the listbox: when the user enters a car into the textbox, it gets updated only in the .Net list, and the listbox is updated automatically.
When the user press th开发者_如何学JAVAe GUI "remove" button, a car gets removed from the GUI and the .Net list is updated automatically.
I've started to write the xaml code, but figured that I don't actually know how to do the binding on both sides (c# and 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>
There is my c# code:
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;
}
}
This is a quick version, you'll need to add code to check the car is selected, etc.
To see your Car data you'll need to define a data template. In the example it's just a simple name, but you can change the text colour, font size, add more fields, etc.
It's best to work on the list when adding / removing cars, not on the ListBox directly.
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;
}
}
精彩评论