穩紮穩打Silverlight(17) - 2.0資料之詳解DataGrid, 綁定資料到ListBox

<a href="http://webabcd.blog.51cto.com/1787395/342790" target="_blank">[索引頁]</a>

<a href="http://down.51cto.com/data/100302" target="_blank">[源碼下載下傳]</a>

穩紮穩打Silverlight(17) - 2.0資料之詳解DataGrid, 詳解ListBox

介紹

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

<a href="http://webabcd.blog.51cto.com/1787395/342779">http://webabcd.blog.51cto.com/1787395/342779</a>

示例

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.Collections.ObjectModel; 

        public class SourceData 

                //    ObservableCollection&lt;T&gt; 内置實作了 INotifyCollectionChanged 接口（可直接應用于 OneWay 和 TwoWay 的綁定模式） 

                public ObservableCollection&lt;SourceDataModel&gt; GetData() 

                { 

                        var source = new ObservableCollection&lt;SourceDataModel&gt;(); 

                        for (int i = 0; i &lt; 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

&lt;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"&gt; 

        &lt;StackPanel HorizontalAlignment="Left"&gt; 

                &lt;CheckBox Content="是否當機 RowDetailsTemplate" Margin="5" 

                        Checked="chkFreezeRowDetails_Changed" Unchecked="chkFreezeRowDetails_Changed" /&gt; 

                &lt;!-- 

                AutoGenerateColumns - 是否根據資料源自動生成列。預設值為 true 

                RowDetailsVisibilityMode - 顯示相應的行的詳細資料時所使用的顯示模式 [System.Windows.Controls.DataGridRowDetailsVisibilityMode枚舉] 

                        DataGridRowDetailsVisibilityMode.Collapsed - 總不顯示         

                        DataGridRowDetailsVisibilityMode.Visible - 總是顯示     

                        DataGridRowDetailsVisibilityMode.VisibleWhenSelected - 隻顯示選中行的詳細資料。預設值                    

                --&gt; 

                &lt;data:DataGrid x:Name="DataGrid1" Margin="5" 

                        Width="400" Height="200"    

                        AutoGenerateColumns="False"    

                        &gt; 

                        &lt;!-- 

                        DataGrid.Columns - 手工定義DataGrid的列 

                                DataGridTextColumn - 該列的單元格内文本方式顯示 

                                DataGridCheckBoxColumn - 該列的單元格以複選框方式顯示 

                                DataGridTemplateColumn - 該列的單元格以自定義方式顯示 

                                        DataGridTemplateColumn.CellTemplate - 顯示模式下的單元格模闆 

                                        DataGridTemplateColumn.CellEditingTemplate - 編輯模式下的單元格模闆 

                        --&gt; 

                        &lt;data:DataGrid.Columns&gt; 

                                &lt;data:DataGridTextColumn Header="姓名" Binding="{Binding Name}" /&gt; 

                                &lt;data:DataGridTextColumn Header="生日" Binding="{Binding DayOfBirth}" /&gt; 

                                &lt;data:DataGridTextColumn Header="年齡" Binding="{Binding Age}" /&gt; 

                                &lt;data:DataGridCheckBoxColumn Header="性别" Binding="{Binding Male}" /&gt; 

                                &lt;data:DataGridTemplateColumn Header="生日"&gt; 

                                        &lt;data:DataGridTemplateColumn.CellTemplate&gt; 

                                                &lt;DataTemplate&gt; 

                                                        &lt;Grid&gt; 

                                                                &lt;Rectangle Fill="Red" Margin="2" /&gt; 

                                                                &lt;TextBlock Text="{Binding DayOfBirth}" Foreground="Yellow" /&gt; 

                                                        &lt;/Grid&gt; 

                                                &lt;/DataTemplate&gt; 

                                        &lt;/data:DataGridTemplateColumn.CellTemplate&gt; 

                                        &lt;data:DataGridTemplateColumn.CellEditingTemplate&gt; 

                                                        &lt;basics:DatePicker SelectedDate="{Binding DayOfBirth}" /&gt; 

                                        &lt;/data:DataGridTemplateColumn.CellEditingTemplate&gt; 

                                &lt;/data:DataGridTemplateColumn&gt; 

                        &lt;/data:DataGrid.Columns&gt; 

                        DataGrid.RowDetailsTemplate - 用于顯示相應的行的詳細資料的模闆 

                        &lt;data:DataGrid.RowDetailsTemplate&gt; 

                                &lt;DataTemplate&gt; 

                                        &lt;StackPanel Margin="5" Background="Aqua" Height="100"&gt; 

                                                &lt;TextBlock Text="{Binding Name}" Margin="5"    /&gt; 

                                                &lt;TextBlock Text="{Binding Age}" Margin="5"    /&gt; 

                                                &lt;TextBlock Text="{Binding DayOfBirth}" Margin="5"    /&gt; 

                                        &lt;/StackPanel&gt; 

                                &lt;/DataTemplate&gt; 

                        &lt;/data:DataGrid.RowDetailsTemplate&gt; 

                &lt;/data:DataGrid&gt; 

        &lt;/StackPanel&gt; 

&lt;/UserControl&gt;

DataGrid01.xaml.cs

using System.Collections.Generic; 

using System.Linq; 

        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; 

<a href="http://webabcd.blog.51cto.com/1787395/343107" target="_blank">未完待續&gt;&gt;</a>

OK

     本文轉自webabcd 51CTO部落格，原文連結：http://blog.51cto.com/webabcd/343109，如需轉載請自行聯系原作者