Silverlight控件用法合集DataGrid,ComboBox,DataPick,CheckBox,RadioButtonSilverlight控件用法合集DataGrid,ComboBox,DataPick,CheckBox,RadioButton

平台 ：Vs 2010,Blend 4

OK,代码下载：http://files.cnblogs.com/Royal_WH/BlogWebTest.rar

 

技术性不是很强，但是很实用，题目想好了，明天来写，以后每天补充一点吧！

好了，先来介绍DataGrid吧，毕竟大家都要用么！

先看下他的属性吧（对于画笔、外观、布局方面的属性我就不介绍了，毕竟是一些公共属性想必大家已经比较了解了）:

重要属性：

1.ItemSource 设置数据源。

用法: dataGrid.ItemSource = 数据源集合;

2.AutoGenerateColumns 是否在绑定数据源后自动生成列。

用法：直接在Xmal中附加上这一属性 true or false。

3.Columns 不用多说了，就是列集合。

用法：在Xmal中写入以下内容

< sdk:DataGrid.Columns >
< sdk:DataGridTextColumn />
</ sdk:DataGrid.Columns >

当然这里的sdk:DataGridTextColumn也可以是模板列和CheckBoxColumn,关于模板列我们后面再讲解。

 

4.HeadersVisibility 标题是否可见。

用法：xmal中写，All是行列都可见，None是都不可见，Column和Row分别是列和行可见。

5.GridLinesVisibility 是否显示网格线

用法：Xmal中写，All是行列都可见，None是都不可见，Horizontal是行可见，Vertical是列可见

6.SelectedIndex 当前选中的索引编号

用法：C# 中 dataGrid.SelectedIndex 获取或设置

7.SelectionMode 当前选择模式单选(single)或多选(Extended)

用法：Xmal中写标记

8.CanUserReorderColumns 是否可拖动列和改变列顺序

用法：Xmal中写标记

9.CanUserResizeColumns 是否可以改变列的大小

用法：Xmal中写标记

好了还有一些什么 IsReadyOnly,IsEnabled,IsHitTestVisible,CanUserSortColumns大家一看就明白的我就不过多讲了！

 

下面写个绑定数据的小例子，由于是测试我就不用WCF或WebService来传数据了。先上图:

Xmal 代码:

代码

< UserControl x:Class = " SilverlightApplication.MainPage "
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 = " 419 " d:DesignWidth = " 642 " xmlns:sdk = " http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk " >

< Grid x:Name = " LayoutRoot " Background = " White " Height = " 357 " Width = " 594 " >
< sdk:DataGrid x:Name = " dataGrid " Height = " 169 " HorizontalAlignment = " Left " Margin = " 88,48,0,0 " VerticalAlignment = " Top " Width = " 400 " AutoGenerateColumns = " True " />
< Button Content = " Button " Height = " 23 " HorizontalAlignment = " Left " Margin = " 88,272,0,0 " Name = " button1 " VerticalAlignment = " Top " Width = " 75 " Click = " button1_Click " />
</ Grid >
</ UserControl >

C# 代码：

代码

public partial class MainPage : UserControl
{
List < ModelTest > temp = new List < ModelTest > ();
public MainPage()
{
InitializeComponent();
}
void LoadData()
{
ModelTest newModel = new ModelTest();
newModel.ID = 1 ;
newModel.Name = " 张三 " ;
newModel.RegData = DateTime.Now;
newModel.Sex = 0 ;
temp.Add(newModel);

newModel = new ModelTest();
newModel.ID = 2 ;
newModel.Name = " 李四 " ;
newModel.RegData = DateTime.Now;
newModel.Sex = 0 ;
temp.Add(newModel);

newModel = new ModelTest();
newModel.ID = 3 ;
newModel.Name = " 小王 " ;
newModel.RegData = DateTime.Now;
newModel.Sex = 1 ;
temp.Add(newModel);
}
private void button1_Click( object sender, RoutedEventArgs e)
{
LoadData();
dataGrid.ItemsSource = temp;
}
}

public class ModelTest
{
public int ID
{ set ; get ; }
public string Name
{ set ; get ; }

public DateTime RegData
{ set ; get ; }

public byte Sex
{ set ; get ; }
public string Image
{ set ; get ; }
}

一.获取内容

OK，我们看下如何获取选中框的内容：

C# 代码：

private void button2_Click( object sender, RoutedEventArgs e)
{
if (dataGrid.SelectedItem != null )
{
ModelTest model = dataGrid.SelectedItem as ModelTest;

MessageBox.Show(model.Name);
}
}

当然上面 model实体中的其它内容也就能获取到了。

当然DataGrid中添加了 dataGrid_SelectionChanged 事件里我们如何获取内容呢

private void dataGrid_SelectionChanged( object sender, System.Windows.Controls.SelectionChangedEventArgs e)
{
ModelTest model = e.AddedItems[ 0 ] as ModelTest;
ModelTest model2 = dataGrid.SelectedItem as ModelTest;
MessageBox.Show(model.Name);
}

这时我们会发现 sender 其实是 DataGrid,e是一个SelectionChangedEventArgs,这里e.AddedItems[0] 其实

就是我们先中的ModelTest实体。不知道为什么微软要叫他AddedItems。

 

二、绑定数据和格式化字符串

我们上面都是用DataGrid 自动生成列，我们看下如何不自动生成列怎么办:

代码

< sdk:DataGrid x:Name = " dataGrid " Height = " 169 " HorizontalAlignment = " Left " Margin = " 88,48,0,0 " VerticalAlignment = " Top " Width = " 400 " SelectionChanged = " dataGrid_SelectionChanged " >
< sdk:DataGrid.Columns >
< sdk:DataGridTextColumn Header = " ID号 " Binding = " {Binding ID} " />
< sdk:DataGridTextColumn Header = " 名称 " Binding = " {Binding Name} " />
< sdk:DataGridTextColumn Header = " 性别 " Binding = " {Binding Sex} " />
< sdk:DataGridTextColumn Header = " 注册时间 " Binding = " {Binding RegData} " />
</ sdk:DataGrid.Columns >
</ sdk:DataGrid >

这就是不自动生成列的Xaml代码。

如果我显示注册时间只显示年月的话又怎么办呢这时候我们要用到StringFormat这个标识属性了，代码如下：

 

<sdk:DataGridTextColumn Header= "注册时间" Binding= "{Binding RegData,StringFormat='yyyy年MM月dd日'}" />

把注册时间改为上面内容。

 

三.绑定图片,添加按钮

先上图

OK，看一下我们要在实体类中给值的 Image,赋什么样的值

 

 

ModelTest newModel = new ModelTest();
newModel.ID = 1;
newModel.Name = "张三" ;
newModel.RegData = DateTime.Now;
newModel.Sex = 0;
newModel.Image = "../pic/png-0037.png" ;
temp.Add(newModel);

newModel = new ModelTest();
newModel.ID = 2;
newModel.Name = "李四" ;
newModel.RegData = DateTime.Now;
newModel.Sex = 0;
newModel.Image = "../pic/png-0038.png" ;
temp.Add(newModel);

newModel = new ModelTest();
newModel.ID = 3;
newModel.Name = "小王" ;
newModel.RegData = DateTime.Now;
newModel.Sex = 1;
newModel.Image = "../pic/png-0039.png" ;
temp.Add(newModel);

这里把他的Image加上了地址，如果需要从外部获取请用 WCF,WebService,WebClient等通信类。具体我就不详细讲了，毕竟这个是写Datagrid控件的

 

我们再看下Xaml 中代码的变化：

 

<sdk:DataGrid.Columns>
    <sdk:DataGridTextColumn Header= "ID号" Binding= "{Binding ID}" />
    <sdk:DataGridTextColumn Header= "名称" Binding= "{Binding Name}" />
    <sdk:DataGridTextColumn Header= "性别" Binding= "{Binding Sex}" />
    <sdk:DataGridTextColumn Header= "注册时间" Binding= "{Binding RegData,StringFormat='yyyy年MM月dd日'}" />
    <sdk:DataGridTemplateColumn>
        <sdk:DataGridTemplateColumn.CellTemplate>
            <DataTemplate>
                <StackPanel>
                    <Button x:Name= "btnUp" Content= "置顶" Tag= "{Binding ID}" ></Button>
                    <Image Width= "64" Height= "64" Stretch= "Fill" Source= "{Binding Image}" ></Image>
                </StackPanel>
            </DataTemplate>
        </sdk:DataGridTemplateColumn.CellTemplate>
    </sdk:DataGridTemplateColumn>
</sdk:DataGrid.Columns>

这里我加了一个按钮，按钮可以通过他的Tag属性来找到是哪一行点击了，同样也可以加一个事件来响应他！

ComboBox用法：

XAML中的代码我就省了，其实就是一行标记

直接设置绑定：

 

代码

int length = e.Result.Count;
yearComboBox.Items.Clear();
for ( int i = 0 ; i < length; i ++ )
{
yearComboBox.Items.Add(e.Result[i].ToString());
}

 

这里没有用绑定，也就是那个ItemSource方法.

 

获取值，很简单就一行代码:

 

Convert.ToInt32(yearComboBox.SelectedItem)

 

如果显示值和属性值不一样的话也就是DisplayMember和ValueMember不一样的话我一般是这样做的

 

 

代码

int length = e.Result.Count;
yearComboBox.Items.Clear();
for ( int i = 0 ; i < length; i ++ )
{
yearComboBox.Items.Add(new new ComboBoxItem(){Content = "显示值",Tag="属性值"});
}

 

然后获取的时候

 

 

ComboBoxItem item = yearComboBox.SelectedItem as ComboBoxItem;
item.Tag // 获取属性值
item.Content // 获取显示值

 

然后说一下事件:

 

yearComboBox_SelectionChanged,其实发觉其它事件用的很少真的没什么事说的，改变事件SelectionChanged,选择值发生改变时引发

 

DataPick

 

DisplayDateEnd,显示最大日期

DisplayDateStart,显示最小日期

 

< sdk:DatePicker x:Name = " datePicker " Height = " 26 " SelectedDateFormat = " Long " Margin = " 308,8,150,0 " VerticalAlignment = " Top " IsDropDownOpen = " False " />

 

 

 

datePicker.SelectedDate.ToString()

就可以获取当前选择时间。

主要事件：

SelectedDateChanged 选择日期改变后引发这个事件。

 

CheckBox

 

< CheckBox x:Name="checkBox" Content = " CheckBox " Checked = " CheckBox_Checked " HorizontalAlignment = " Right " Margin = " 0,11,52,0 " VerticalAlignment = " Top " />

 

 

要判断CheckBox状态 checkBox.IsChecked

重要事件：Checked,UnChecked

三选状态:IsThreeState="True"

 

RadioButton

其实他和CheckBox差不多了

 

< RadioButton Content = " RadioButton " HorizontalAlignment = " Right " Margin = " 0,48,39,0 " VerticalAlignment = " Top " IsThreeState = " True " Checked = " RadioButton_Checked " />

 

要判断CheckBox状态 checkBox.IsChecked

重要事件：Checked,UnChecked

三选状态:IsThreeState="True"