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

Silverlight 2020-07-27
[索引页]
[源码下载]


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

相关文章

c# – 如何在Silverlight 4中绑定ContextMenu的IsEnabled属性？
如何在Silverlight4(XAML)中绑定IsEnabled属性？我试过简单的...
c# – 使用Silverlight / windows手机式控件设置我的.Net桌面应用程序GUI
我正在编写我的第一个vb.net应用程序(但我也会在这里标记c#,...
c# – Silverlight：将服务调用和文件处理移动到后台线程
ProcessFile()是在UIThread上运行还是在单独的线程上运行.如...
c# – 如何从ASP.NET / Silverlight开发人员成为sharepoint开发人员？
我从同行那里听说,对sharepoint的了解对职业生涯有益.我们不...
c# – Windows Phone 8 – 将列表保存到IsolatedStorage
我正在尝试保存一个类我的类对象的集合.我收到一个错误说明：...
c# – 在XAML中使用绑定设置样式
我需要根据Silverlight中的某些配置值设置给定控件的Style.我...