稳扎稳打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, 223, 227, 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
[源码下载]