time 
设为首页】【收藏本站
当前位置: 主页 > 程序设计 > .net > Silverlight > Silverlight Control(一)ComboBox 数据绑定、自定义、取值

Silverlight Control(一)ComboBox 数据绑定、自定义、取值

时间:2010-08-15 23:11 点击:3745次 字体:[ ]




Silverlight的ComboBox与winform中的ComboBox存在类似的地方,但也有不同之处,本章包含以下内容:

一、ComboBox 如何添加和绑定数据。

二、ComboBox 如何添加自定义Item。

三、ComboBox 如何取得所选项的值。

 

首先我们在页面添加4个ComboBox分别用不同的形式进行绑定。

 

代码
<ComboBox Height="23" HorizontalAlignment="Left" Margin="10,10,0,0" Name="comboBox" VerticalAlignment="Top" Width="165" SelectionChanged="comboBox_SelectionChanged" />
<ComboBox Height="23" HorizontalAlignment="Left" Margin="12,65,0,0" Name="comboBox1" VerticalAlignment="Top" Width="161" />
<ComboBox Height="27" HorizontalAlignment="Left" Margin="12,123,0,0" Name="comboBox2" VerticalAlignment="Top" Width="163" />
<ComboBox Height="23" HorizontalAlignment="Left" Margin="12,180,0,0" Name="comboBox3" VerticalAlignment="Top" Width="165" SelectionChanged="comboBox3_SelectionChanged" />

 

接下来,我们先介绍添加和绑定数据的方法。

 

如何添加和绑定数据:

this.comboBox.Items.Add("武汉");
this.comboBox.Items.Add("大连");
this.comboBox.Items.Add("苏州");

 

上面的代码用最简单的方法添加了3个string类型的对象到comboBox中,运行后效果如下:

Silverlight Control(一)ComboBox 数据绑定、自定义、取值_www.fengfly.com

对于自定义的数据类型我们可以用下面的方法进行绑定:

 

第一步:定义数据对象

 

public class MyData
{
public DateTime Time
{
get; set; }

public string Place
{
get; set; }
}

 

第二步:填充数据,并进行绑定:

 

代码
List<MyData> list = new List<MyData>
{
new MyData{Time =DateTime.Now.AddDays(1),Place="中山路"},
new MyData{Time =DateTime.Now.AddDays(2),Place="光谷高新"}
};

this.comboBox3.DisplayMemberPath = "Place";
this.comboBox3.ItemsSource = list;

我们通过设置this.comboBox3.DisplayMemberPath = "Place" 来定义显示哪个字段。运行效果如下图:

Silverlight Control(一)ComboBox 数据绑定、自定义、取值_www.fengfly.com

是不是很简单呢,那么接下来我们介绍一下如何进行自定义Item的添加。

 

如何添加自定义Item:

 要添加自定义Item我们就需要用到ComboBoxItem对象。 

 

代码
ComboBoxItem cbiRight = new ComboBoxItem();
cbiRight.Background = new SolidColorBrush(Colors.Yellow);
cbiRight.HorizontalContentAlignment = HorizontalAlignment.Right;
cbiRight.SetValue(ComboBoxItem.ContentProperty, "上海");

 
ComboBoxItem cbiCenter = new ComboBoxItem();
cbiCenter.Background = new SolidColorBrush(Colors.Cyan);
cbiCenter.HorizontalContentAlignment = HorizontalAlignment.Center;
cbiCenter.SetValue(ComboBoxItem.ContentProperty, "北京");


 
ComboBoxItem cbiLeft = new ComboBoxItem();
cbiLeft.Background = new SolidColorBrush(Colors.LightGray);
cbiLeft.HorizontalContentAlignment = HorizontalAlignment.Left;
cbiLeft.SetValue(ComboBoxItem.ContentProperty, "深圳");

 

在上面的代码中,我们分别对3个ComboBoxItem对象设置了背景色、对齐方式和值,剩下要做的只需要将这些对象添加到ComboBox中即可。

 

this.comboBox1.Items.Add(cbiRight);
this.comboBox1.Items.Add(cbiCenter);
this.comboBox1.Items.Add(cbiLeft);

 

运行效果如下:

 

Silverlight Control(一)ComboBox 数据绑定、自定义、取值_www.fengfly.com

在某些情况下我们需要显示更复杂的效果,比如在下拉框中显示图片,那这样的需求应该如何处理呢?看看后面的代码就知道了。

既然我们需要显示图片,那么我们就先定义一个Image图片对象,然后我们在定义一个Label进行文字显示。

 

Image img = new Image();
img.Source
= new BitmapImage(new Uri("0.jpg",UriKind .Relative));
Label lbl
= new Label();
lbl.Content
= "带图片的选项";

 

然后我们需要用一个容器装载这两个对象,这里我们使用的是StackPanel

 

StackPanel sp = new StackPanel();
sp.Orientation
= Orientation.Horizontal;
sp.Children.Add(img);
sp.Children.Add(lbl);

 

在这里可以看到我们在设置StackPanel的方向时选择的是 Orientation.Horizontal,就表示我们添加的两个对象会水平的显示在下拉框中。

最后一步就是把这个容器加载到我们的ComboBox中。

 

 

ComboBoxItem multipleCmb = new ComboBoxItem();
multipleCmb.Content
= sp;

this.comboBox2.Items.Add(multipleCmb);

 

运行结果如下,我们可以看到图片和文字同时现实在一个选择项内。

 

Silverlight Control(一)ComboBox 数据绑定、自定义、取值_www.fengfly.com

现在我们已经用不同的方法把数据添加到ComboBox中了,接下来的问题就是如何取得所选项的值。

 

如何取得所选项的值:

一般情况下有两种方式进行取值代码如下:

 

代码
private void comboBox3_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
MyData md
= (sender as ComboBox).SelectedItem as MyData;

DateTime selectedDateTime
= md.Time;
string selectedPlace = md.Place;


MyData md2
= comboBox3.SelectedValue as MyData;
DateTime selectedDateTime2
= md2.Time;
string selectedPlace2 = md2.Place;
}

 

 

这里的 MyData 是我们在前面自定义的数据类型,当我们在SelectionChanged事件中进行取值时,可分别对SelectedItem和SelectedValue进行操作,

我们只需要将它们显示的转换成正确的数据类型即可。

 

本章所涉及的完整代码:

 

代码
<UserControl x:Class="MySilverlightTest.Control_Combobox"
xmlns
="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x
="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d
="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc
="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable
="d"
d:DesignHeight
="600" d:DesignWidth="800">

<Grid x:Name="LayoutRoot" Background="White">
<ComboBox Height="23" HorizontalAlignment="Left" Margin="12,12,0,0" Name="comboBox" VerticalAlignment="Top" Width="165" SelectionChanged="comboBox_SelectionChanged" />
<ComboBox Height="23" HorizontalAlignment="Left" Margin="12,60,0,0" Name="comboBox1" VerticalAlignment="Top" Width="165" />
<ComboBox Height="27" HorizontalAlignment="Left" Margin="12,164,0,0" Name="comboBox2" VerticalAlignment="Top" Width="165" />
<ComboBox Height="23" HorizontalAlignment="Left" Margin="12,113,0,0" Name="comboBox3" VerticalAlignment="Top" Width="165" SelectionChanged="comboBox3_SelectionChanged" />
</Grid>
</UserControl>

 

 

代码
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Data;
using System.Windows.Media.Imaging;

namespace MySilverlightTest
{
public partial class Control_Combobox : UserControl
{
public Control_Combobox()
{
InitializeComponent();
Loaded
+= new RoutedEventHandler(Control_Combobox_Loaded);
}

void Control_Combobox_Loaded(object sender, RoutedEventArgs e)
{
this.comboBox.Items.Add("武汉");
this.comboBox.Items.Add("大连");
this.comboBox.Items.Add("苏州");

List
<MyData> list = new List<MyData>
{
new MyData{Time =DateTime .Now .AddDays(1),Place="中山路"},
new MyData{Time =DateTime .Now .AddDays(2),Place="光谷高新"}
};

this.comboBox3.DisplayMemberPath = "Place";
this.comboBox3.ItemsSource = list;

ComboBoxItem cbiRight
= new ComboBoxItem();
cbiRight.Background
= new SolidColorBrush(Colors.Yellow);
cbiRight.HorizontalContentAlignment
= HorizontalAlignment.Right;
cbiRight.SetValue(ComboBoxItem.ContentProperty,
"上海");

ComboBoxItem cbiCenter
= new ComboBoxItem();
cbiCenter.Background
= new SolidColorBrush(Colors.Cyan);
cbiCenter.HorizontalContentAlignment
= HorizontalAlignment.Center;
cbiCenter.SetValue(ComboBoxItem.ContentProperty,
"北京");

ComboBoxItem cbiLeft
= new ComboBoxItem();
cbiLeft.Background
= new SolidColorBrush(Colors.LightGray);
cbiLeft.HorizontalContentAlignment
= HorizontalAlignment.Left;
cbiLeft.SetValue(ComboBoxItem.ContentProperty,
"深圳");

this.comboBox1.Items.Add(cbiRight);
this.comboBox1.Items.Add(cbiCenter);
this.comboBox1.Items.Add(cbiLeft);


Image img
= new Image();
img.Source
= new BitmapImage(new Uri("0.jpg",UriKind .Relative));
Label lbl
= new Label();
lbl.Content
= "带图片的选项";

StackPanel sp
= new StackPanel();
sp.Orientation
= Orientation.Horizontal;
sp.Children.Add(img);
sp.Children.Add(lbl);

ComboBoxItem multipleCmb
= new ComboBoxItem();
multipleCmb.Content
= sp;

this.comboBox2.Items.Add(multipleCmb);
}

public class MyData
{
public DateTime Time
{
get; set; }

public string Place
{
get; set; }
}

private void comboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
string selected = comboBox.SelectedValue as string;
}

private void comboBox3_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
MyData md
= (sender as ComboBox).SelectedItem as MyData;

DateTime selectedDateTime
= md.Time;
string selectedPlace = md.Place;

MyData md2
= comboBox3.SelectedValue as MyData;
DateTime selectedDateTime2
= md2.Time;
string selectedPlace2 = md2.Place;
}
}
}

 

 转自:http://www.cnblogs.com/hades/archive/2010/08/06/1793844.html



本文地址 : http://www.fengfly.com/plus/view-186646-1.html
标签: Silverlight 数据绑定 ComboBox
------分隔线----------------------------
最新评论 查看所有评论
发表评论 查看所有评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码: