稳扎稳打Silverlight(17) - 2.0数据之详解DataGrid, 绑定数据到ListBox

稳扎稳打Silverlight(17) - 2.0数据之详解DataGrid,详解ListBox

作者： webabcd

介绍
Silverlight 2.0 详解DataGrid,绑定数据到ListBox：
    AutoGenerateColumns - 是否根据数据源自动生成列
    RowDetailsVisibilityMode - 显示相应的行的详细数据时所使用的显示模式
    DataGrid.Columns - 手工定义DataGrid的列
    DataGrid.RowDetailstemplate - 用于显示相应的行的详细数据的模板
    AreRowDetailsFrozen - 是否冻结 RowDetailstemplate
    GridLinesVisibility - 表格分隔线的显示方式
    RowBackground - 奇数数据行背景
    AlternatingRowBackground - 偶数数据行背景
    IsReadOnly - 单元格是否只读
    FrozenColumnCount - 表格所冻结的列的总数（从左边开始数）
    SelectionMode - 行的选中模式
    CanUserReorderColumns - 是否允许拖动列
    CanUserResizeColumns - 是否允许改变列的宽度
    CanUserSortColumns - 是否允许列的排序
    VerticalGridLinesBrush - 改变表格的垂直分隔线的 Brush
    HorizontalGridLinesBrush - 改变表格的水平分隔线的 Brush
    HeadersVisibility - 表头（包括列头和行头）的显示方式

在线DEMO
http://www.cnblogs.com/webabcd/archive/2008/10/09/1307486.html

示例
SourceDataModel.cs

using System;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Ink;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

namespace Silverlight20.Data

{

public class SourceDataModel

{

public string Name { get; set; }

public int Age { get; set; }

public DateTime DayOfBirth { get; set; }

public bool Male { get; set; }

}

SourceData.cs

using System;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Ink;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using System.Collections.ObjectModel;

namespace Silverlight20.Data

{

public class SourceData

{

// ObservableCollection<T> 内置实现了 INotifyCollectionChanged 接口（可直接应用于 OneWay 和 TwoWay 的绑定模式）

public ObservableCollection<SourceDataModel> GetData()

{

var source = new ObservableCollection<SourceDataModel>();

for (int i = 0; i < 100; i++)

{

source.Add(

new SourceDataModel

{

Name = "Name" + i.ToString().PadLeft(4, '0'),

Age = new Random(i).Next(20, 60),

DayOfBirth = DateTime.Now,

Male = Convert.ToBoolean(i % 2)

});

}

return source;

}

1、DataGrid01.xaml

< UserControl x:Class ="Silverlight20.Data.DataGrid01"

xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:data ="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"

xmlns:basics ="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls" >

< StackPanel HorizontalAlignment ="Left" >

< CheckBox Content ="是否冻结 RowDetailstemplate" Margin ="5"

Checked ="chkFreezeRowDetails_Changed" Unchecked ="chkFreezeRowDetails_Changed" />

<!--

AutoGenerateColumns - 是否根据数据源自动生成列。默认值为 true

RowDetailsVisibilityMode - 显示相应的行的详细数据时所使用的显示模式 [System.Windows.Controls.DataGridRowDetailsVisibilityMode枚举]

DataGridRowDetailsVisibilityMode.Collapsed - 总不显示

DataGridRowDetailsVisibilityMode.Visible - 总是显示

DataGridRowDetailsVisibilityMode.VisibleWhenSelected - 只显示选中行的详细数据。默认值

-->

< data:DataGrid x:Name ="DataGrid1" Margin ="5"

Width ="400" Height ="200"

AutoGenerateColumns ="False"

<!--

DataGrid.Columns - 手工定义DataGrid的列

DataGridTextColumn - 该列的单元格内文本方式显示

DataGridCheckBoxColumn - 该列的单元格以复选框方式显示

DataGridTemplateColumn - 该列的单元格以自定义方式显示

DataGridTemplateColumn.CellTemplate - 显示模式下的单元格模板

DataGridTemplateColumn.CellEditingTemplate - 编辑模式下的单元格模板

-->

< data:DataGrid.Columns >

< data:DataGridTextColumn Header ="姓名" Binding =" {Binding Name} " />

< data:DataGridTextColumn Header ="生日" Binding =" {Binding DayOfBirth} " />

< data:DataGridTextColumn Header ="年龄" Binding =" {Binding Age} " />

< data:DataGridCheckBoxColumn Header ="性别" Binding =" {Binding Male} " />

< data:DataGridTemplateColumn Header ="生日" >

< data:DataGridTemplateColumn.CellTemplate >

< DataTemplate >

< Grid >

< Rectangle Fill ="Red" Margin ="2" />

< TextBlock Text =" {Binding DayOfBirth} " Foreground ="Yellow" />

</ Grid >

</ DataTemplate >

</ data:DataGridTemplateColumn.CellTemplate >

< data:DataGridTemplateColumn.CellEditingTemplate >

< DataTemplate >

< basics:DatePicker SelectedDate =" {Binding DayOfBirth} " />

</ DataTemplate >

</ data:DataGridTemplateColumn.CellEditingTemplate >

</ data:DataGridTemplateColumn >

</ data:DataGrid.Columns >

<!--

DataGrid.RowDetailstemplate - 用于显示相应的行的详细数据的模板

-->

< data:DataGrid.RowDetailstemplate >

< DataTemplate >

< StackPanel Margin ="5" Background ="Aqua" Height ="100" >

< TextBlock Text =" {Binding Name} " Margin ="5" />

< TextBlock Text =" {Binding Age} " Margin ="5" />

< TextBlock Text =" {Binding DayOfBirth} " Margin ="5" />

</ StackPanel >

</ DataTemplate >

</ data:DataGrid.RowDetailstemplate >

</ data:DataGrid >

</ StackPanel >

</ UserControl >

DataGrid01.xaml.cs

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;

namespace Silverlight20.Data

{

public partial class DataGrid01 : UserControl

{

public DataGrid01()

{

InitializeComponent();

BindData();

}

void BindData()

{

var source = new Data.sourceData();

// 设置 DataGrid 的数据源

DataGrid1.ItemsSource = source.GetData();

}

private void chkFreezeRowDetails_Changed(object sender, RoutedEventArgs e)

{

// AreRowDetailsFrozen - 是否冻结 RowDetailstemplate 。默认值为 false

// 如果等于 true ，那么在 DataGrid 的水平滚动条滚动的时候 RowDetailstemplate 不会跟着滚动

CheckBox chk = sender as CheckBox;

if (DataGrid1 != null)

DataGrid1.AreRowDetailsFrozen = (bool)chk.IsChecked;

}

2、DataGrid02.xaml

< UserControl x:Class ="Silverlight20.Data.DataGrid02"

xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:data ="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data" >

< StackPanel HorizontalAlignment ="Left" >

< StackPanel Orientation ="Vertical" Margin ="5" >

< CheckBox Content ="是否只读" Margin ="5"

Checked ="chkReadOnly_Changed" Unchecked ="chkReadOnly_Changed" />

< CheckBox Content ="冻结列" Margin ="5"

Checked ="chkFreezeColumn_Changed" Unchecked ="chkFreezeColumn_Changed" />

< CheckBox Content ="行的选中模式，是否只能单选" Margin ="5"

Checked ="chkSelectionMode_Changed" Unchecked ="chkSelectionMode_Changed" />

< CheckBox Content ="是否允许拖动列" IsChecked ="true" Margin ="5"

Checked ="chkColReorder_Changed" Unchecked ="chkColReorder_Changed" />

< CheckBox Content ="是否允许改变列的宽度" IsChecked ="true" Margin ="5"

Checked ="chkColResize_Changed" Unchecked ="chkColResize_Changed" />

< CheckBox Content ="是否允许列的排序" IsChecked ="true" Margin ="5"

Checked ="chkColSort_Changed" Unchecked ="chkColSort_Changed" />

< CheckBox Content ="改变表格的垂直分隔线的 Brush" Margin ="5"

Checked ="chkCustomGridLineVertical_Changed" Unchecked ="chkCustomGridLineVertical_Changed" />

< CheckBox Content ="改变表格的水平分隔线的 Brush" Margin ="5"

Checked ="chkCustomGridLineHorizontal_Changed" Unchecked ="chkCustomGridLineHorizontal_Changed" />

< ComboBox SelectionChanged ="cboHeaders_SelectionChanged" Width ="200" HorizontalAlignment ="Left" >

< ComboBoxItem Content ="列头和行头均显示" Tag ="All" />

< ComboBoxItem Content ="只显示列头（默认值）" Tag ="Column" IsSelected ="True" />

< ComboBoxItem Content ="只显示行头" Tag ="Row" />

< ComboBoxItem Content ="列头和行头均不显示" Tag ="None" />

</ ComboBox >

</ StackPanel >

<!--

GridLinesVisibility - 表格分隔线的显示方式 [System.Windows.Controls.DataGridGridLinesVisibility枚举]

DataGridGridLinesVisibility.None - 都不显示

DataGridGridLinesVisibility.Horizontal - 只显示水平分隔线

DataGridGridLinesVisibility.Vertical - 只显示垂直分隔线。默认值

DataGridGridLinesVisibility.All - 显示水平和垂直分隔线

RowBackground - 奇数数据行背景

AlternatingRowBackground - 偶数数据行背景

-->

< data:DataGrid x:Name ="DataGrid1" Margin ="5"

Width ="400" Height ="200"

AutoGenerateColumns ="False"

GridLinesVisibility ="All"

RowBackground ="White"

AlternatingRowBackground ="Yellow"

ItemsSource =" {Binding} "

< data:DataGrid.Columns >

<!--

IsReadOnly - 该列的单元格是否只读

CanUserReorder - 该列是否可以拖动

CanUserResize - 该列是否可以改变列宽

CanUserSort - 该列是否可以排序

SortMemberPath - 该列的排序字段

-->

< data:DataGridTextColumn Header ="姓名" Binding =" {Binding Name} "

IsReadOnly ="False"

CanUserReorder ="True"

CanUserResize ="True"

CanUserSort ="True"

SortMemberPath ="Name"

<!--

Width - 列宽

Auto - 根据列头内容的宽度和单元格内容的宽度自动设置列宽

SizetoCells - 根据单元格内容的宽度设置列宽

SizetoHeader - 根据列头内容的宽度设置列宽

Pixel - 像素值

-->

< data:DataGridTextColumn Header ="生日" Binding =" {Binding DayOfBirth} " Width ="100" />

< data:DataGridTextColumn Header ="年龄" Binding =" {Binding Age} " />

< data:DataGridCheckBoxColumn Header ="性别" Binding =" {Binding Male} " />

< data:DataGridTextColumn Header ="姓名" Binding =" {Binding Name} " />

< data:DataGridTextColumn Header ="生日" Binding =" {Binding DayOfBirth} " />

< data:DataGridTextColumn Header ="年龄" Binding =" {Binding Age} " />

< data:DataGridCheckBoxColumn Header ="性别" Binding =" {Binding Male} " />

</ data:DataGrid.Columns >

</ data:DataGrid >

</ StackPanel >

</ UserControl >

DataGrid02.xaml.cs

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;

namespace Silverlight20.Data

{

public partial class DataGrid02 : UserControl

{

public DataGrid02()

{

InitializeComponent();

BindData();

}

void BindData()

{

var source = new Data.sourceData();

// 设置 DataGrid 的数据源

DataGrid1.DataContext = source.GetData();

}

private void chkReadOnly_Changed(object sender, RoutedEventArgs e)

{

CheckBox chk = sender as CheckBox;

// IsReadOnly - 单元格是否只读。默认值 false

DataGrid1.IsReadOnly = (bool)chk.IsChecked;

}

private void chkFreezeColumn_Changed(object sender, RoutedEventArgs e)

{

CheckBox chk = sender as CheckBox;

// FrozenColumnCount - 表格所冻结的列的总数（从左边开始数）。默认值 0

if (chk.IsChecked == true)

DataGrid1.FrozenColumnCount = 1;

else if (chk.IsChecked == false)

DataGrid1.FrozenColumnCount = 0;

}

private void chkSelectionMode_Changed(object sender, RoutedEventArgs e)

{

CheckBox chk = sender as CheckBox;

// SelectionMode - 行的选中模式 [System.Windows.Controls.DataGridSelectionMode枚举]

// DataGridSelectionMode.Single - 只能单选

// DataGridSelectionMode.Extended - 可以多选（通过Ctrl或Shift的配合）。默认值

if (chk.IsChecked == true)

DataGrid1.SelectionMode = DataGridSelectionMode.Single;

else if (chk.IsChecked == false)

DataGrid1.SelectionMode = DataGridSelectionMode.Extended;

}

private void chkColReorder_Changed(object sender, RoutedEventArgs e)

{

CheckBox chk = sender as CheckBox;

// CanUserReorderColumns - 是否允许拖动列。默认值 true

if (DataGrid1 != null)

DataGrid1.CanUserReorderColumns = (bool)chk.IsChecked;

}

private void chkColResize_Changed(object sender, RoutedEventArgs e)

{

CheckBox chk = sender as CheckBox;

// CanUserResizeColumns - 是否允许改变列的宽度。默认值 true

if (DataGrid1 != null)

DataGrid1.CanUserResizeColumns = (bool)chk.IsChecked;

}

private void chkColSort_Changed(object sender, RoutedEventArgs e)

{

CheckBox chk = sender as CheckBox;

// CanUserSortColumns - 是否允许列的排序。默认值 true

if (DataGrid1 != null)

DataGrid1.CanUserSortColumns = (bool)chk.IsChecked;

}

private void chkCustomGridLineVertical_Changed(object sender, RoutedEventArgs e)

{

CheckBox chk = sender as CheckBox;

if (DataGrid1 != null)

{

// VerticalGridLinesBrush - 改变表格的垂直分隔线的 Brush

if (chk.IsChecked == true)

DataGrid1.VerticalGridLinesBrush = new SolidColorBrush(Colors.Blue);

else

DataGrid1.VerticalGridLinesBrush = new SolidColorBrush(Color.FromArgb(255, 223, 227, 230));

}

private void chkCustomGridLineHorizontal_Changed(object sender, RoutedEventArgs e)

{

CheckBox chk = sender as CheckBox;

if (DataGrid1 != null)

{

// HorizontalGridLinesBrush - 改变表格的水平分隔线的 Brush

if (chk.IsChecked == true)

DataGrid1.HorizontalGridLinesBrush = new SolidColorBrush(Colors.Blue);

else

DataGrid1.HorizontalGridLinesBrush = new SolidColorBrush(Color.FromArgb(255, 230));

}

private void cboHeaders_SelectionChanged(object sender, RoutedEventArgs e)

{

ComboBoxItem cbi = ((ComboBox)sender).SelectedItem as ComboBoxItem;

if (DataGrid1 != null)

{

// HeadersVisibility - 表头（包括列头和行头）的显示方式 [System.Windows.Controls.DataGridHeadersVisibility枚举]

// DataGridHeadersVisibility.All - 列头和行头均显示

// DataGridHeadersVisibility.Column - 只显示列头。默认值

// DataGridHeadersVisibility.Row - 只显示行头

// DataGridHeadersVisibility.None - 列头和行头均不显示

if (cbi.Tag.ToString() == "All")

DataGrid1.HeadersVisibility = DataGridHeadersVisibility.All;

else if (cbi.Tag.ToString() == "Column")

DataGrid1.HeadersVisibility = DataGridHeadersVisibility.Column;

else if (cbi.Tag.ToString() == "Row")

DataGrid1.HeadersVisibility = DataGridHeadersVisibility.Row;

else if (cbi.Tag.ToString() == "None")

DataGrid1.HeadersVisibility = DataGridHeadersVisibility.None;

}

3、ListBox.xaml

< UserControl x:Class ="Silverlight20.Data.ListBox"

xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml" >

< StackPanel HorizontalAlignment ="Left" >

<!--

ListBox.ItemTemplate - ListBox 的选项模板

DataTemplate - 手工定义 ListBox 的选项数据

-->

< ListBox x:Name ="ListBox1" Margin ="5" Width ="200" Height ="100" >

< ListBox.ItemTemplate >

< DataTemplate >

< StackPanel Orientation ="Horizontal" >

< TextBlock Text =" {Binding Name} " Margin ="5" />

< TextBlock Text =" {Binding Age} " Margin ="5" />

</ StackPanel >

</ DataTemplate >

</ ListBox.ItemTemplate >

</ ListBox >

</ StackPanel >

</ UserControl >

ListBox.xaml.cs

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;

namespace Silverlight20.Data

{

public partial class ListBox : UserControl

{

public ListBox()

{

InitializeComponent();

BindData();

}

void BindData()

{

var source = new Data.sourceData();

// 设置 ListBox 的数据源

ListBox1.ItemsSource = source.GetData();

}

OK
[源码下载]

稳扎稳打Silverlight(17) - 2.0数据之详解DataGrid, 绑定数据到ListBox

相关推荐