1. 程式人生 > >ComboBox在WPF中的綁定示例:綁定項、集合、轉換,及其源代碼

ComboBox在WPF中的綁定示例:綁定項、集合、轉換,及其源代碼

ati .com med owa panel center generic tle summary

在WPF的Xaml中為ComboBox綁定數據時,由於參數很多,很容易混淆,在ListView中使用更是如此。本文通過對ComboBox在窗口和在ListView中綁定對象的屬性和屬性可能是枚舉類型的情況進行簡單講解和示例,以作實際應用參照。

源碼可以到這裏下載:ComboBoxBindings.rar

1、ComboBox在窗口容器中的情況

2、ComboBox在ListView中的情況

3、綁定枚舉

示例中做枚舉類型Sex的綁定時,先在Xaml中綁定值,然後在ComboBox的ItemsSouce中以String的方式枚舉每個枚舉值,形成Items的集合。這種方法是沒問題,但在Xaml中枚舉每個值,容易出錯。

其實枚舉類型綁定可以做的更簡單一些,就是在ComboBox的loaded時間中枚舉並賦值ItemsSource,這個集合就是要綁定的枚舉類型,而不是String類型:

如在一個ListView中綁定Size屬性:

1、在後臺代碼中重寫ComboBox的loaded事件,在裏面將枚舉類型以一個集合的形式綁定到ComboBox的ItemsSource:

技術分享 技術分享代碼 private void comboBoxSizeType_Loaded(object sender, RoutedEventArgs e)
{
List<RebarSize> items = new List<RebarSize>();
items.Add(RebarSize.S3);
items.Add(RebarSize.S4);
items.Add(RebarSize.S5);
items.Add(RebarSize.S6);
items.Add(RebarSize.S7);
items.Add(RebarSize.S8);
items.Add(RebarSize.S9);
items.Add(RebarSize.S10);
items.Add(RebarSize.S11);
items.Add(RebarSize.S14);
items.Add(RebarSize.S18);

ComboBox box = sender as ComboBox;
box.ItemsSource = items;
} 技術分享

這樣,當ComboBox顯示到界面時即可自動綁定ItemsSource = items。

2、在Xaml中綁定:

就一句話:SelectedValue="{Binding Path=Size, Mode=TwoWay}“,Ok了:

技術分享 技術分享代碼 <ListView Name="listView1" Margin="20" BorderThickness="0,0,1,1">
<ListView.View>
<GridView>
<GridViewColumn Header="ID" DisplayMemberBinding="{Binding Path=Name}"/>
<GridViewColumn Header="Size">
<GridViewColumn.CellTemplate>
<DataTemplate>
<ComboBox Name="comboBoxSizeType" Loaded="comboBoxSizeType_Loaded" MinWidth="60" BorderThickness="0"
SelectedValue="{Binding Path=Size, Mode=TwoWay}"/>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
...
... 技術分享

4、ItemsSource的RelativeSource綁定


示例中的Xmal代碼:

Window1.xaml:

技術分享 技術分享代碼 <Window x:Class="ComboBoxBindings.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:ComboBoxBindings"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
Title="Window1" Height="402" Width="566">

<Window.Resources>
<ResourceDictionary>
<local:EducationGradeConverter x:Key="educConverter"/>
</ResourceDictionary>
</Window.Resources>

<Grid Margin="10">
<StackPanel>
<StackPanel Name="stackPanel1">
<TextBlock VerticalAlignment="Center" FontStyle="Italic" >ComboBox In Window:</TextBlock>
<TextBlock VerticalAlignment="Center" Foreground="#ff3300" >A dog‘s information</TextBlock>
<ComboBox VerticalAlignment="Center" HorizontalAlignment="Left" Width="120" Name="comboBoxInWnd" SelectionChanged="comboBoxInWnd_SelectionChanged"
DisplayMemberPath="Name"
ItemsSource="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:Window1}}, Path=Dogs}">
</ComboBox>
<TextBlock VerticalAlignment="Center" Text="{Binding Path=Name}"></TextBlock>
<TextBlock VerticalAlignment="Center" Text="{Binding Path=Id}"></TextBlock>
</StackPanel>

<StackPanel>
<TextBlock VerticalAlignment="Center" FontStyle="Italic" >ComboBox In ListView:</TextBlock>
<TextBlock VerticalAlignment="Center" Foreground="#ff3300">Some people</TextBlock>
<ListView Name="listView1" MinHeight="200" >
<ListView.View>
<GridView>
<GridViewColumn Header="Index" DisplayMemberBinding="{Binding Path=Index}"/>
<GridViewColumn Header="Name" DisplayMemberBinding="{Binding Path=Name}"/>
<GridViewColumn Header="Sex">
<GridViewColumn.CellTemplate>
<DataTemplate>
<ComboBox Width="120" SelectedValue="{Binding Path=Sex, Mode=TwoWay}" SelectedIndex="0">
<ComboBox.Items>
<sys:String>Male</sys:String>
<sys:String>Female</sys:String>
<sys:String>Unknow</sys:String>
</ComboBox.Items>
</ComboBox>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header="Education Grade">
<GridViewColumn.CellTemplate>
<DataTemplate>
<ComboBox Width="120" SelectedValue="{Binding Path=EducationGrade, Mode=TwoWay, Converter={StaticResource educConverter}}"
ItemsSource="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:Window1}}, Path=EducationTypes}"> //這裏就是綁定了後臺的集合對象實例,它是Window1的屬性
</ComboBox>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header="My Dog">
<GridViewColumn.CellTemplate>
<DataTemplate>
<ComboBox Width="120" Loaded="comboBoxInListView_Loaded"
SelectedValue="{Binding Path=MyDog, Mode=TwoWay}"
SelectedValuePath="Id" DisplayMemberPath="Name">
</ComboBox>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView>
</ListView.View>
</ListView>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Button Margin="5" Click="btnAdd_Click" VerticalAlignment="Center" HorizontalAlignment="Left" Width="120" Height="28">Add</Button>
<Button Margin="5" Click="btnDel_Click" VerticalAlignment="Center" HorizontalAlignment="Right" Width="120" Height="28">Delete</Button>
</StackPanel>
</StackPanel>
</Grid>
</Window>
技術分享


Window1的後臺代碼:

Window1.xaml.cs:

技術分享 技術分享代碼 using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.ComponentModel;

namespace ComboBoxBindings
{
/// <summary>
/// Interaction logic for Window1.xaml
/// </summary>
public partial class Window1 : Window
{
private int index;

public Window1()
{
InitializeComponent();

dogs.Add(new Dog("Dog1"));
dogs.Add(new Dog("Dog2"));
dogs.Add(new Dog("Dog3"));

types.Add("EducationGrade1");
types.Add("EducationGrade2");
types.Add("EducationGrade3");

this.listView1.ItemsSource = persons;
}

public List<String> types = new List<String>();
public List<String> EducationTypes
{
get
{
return types;
}
}

public BindingList<Dog> dogs = new BindingList<Dog>();
public BindingList<Dog> Dogs
{
get
{
return dogs;
}
}

public BindingList<Person> persons = new BindingList<Person>();
public BindingList<Person> Persons
{
get
{
return persons;
}
}

private void comboBoxInListView_Loaded(object sender, RoutedEventArgs e)
{
ComboBox box = sender as ComboBox;
box.ItemsSource = null;
box.ItemsSource = dogs;
}

private void btnAdd_Click(object sender, RoutedEventArgs e)
{
persons.Add(new Person(++index));
}

private void btnDel_Click(object sender, RoutedEventArgs e)
{
while (this.listView1.SelectedItems.Count > 0)
{
persons.Remove((Person)this.listView1.SelectedItems[0]);
}
}

private void comboBoxInWnd_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
ComboBox box = sender as ComboBox;

this.stackPanel1.DataContext = null;
this.stackPanel1.DataContext = box.SelectedItem;
}
}
}

ComboBox在WPF中的綁定示例:綁定項、集合、轉換,及其源代碼