《SilverLight2快速入門》之基本控件DataGrid

基本控件的CheckBox，RadioButton等常見控件的使用這裡不再一一舉例了。

今天介紹DataGrid，也順便說點資料綁定的内容。與此雷同的可以有ListBox，ComboBox等。

本試驗實作用DataGrid顯示清單資料。

<UserControl xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"    x:Class="_51CTO.lesson02.DataGrid" 

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

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

        Width="400" Height="300"> 

        <Grid x:Name="LayoutRoot" Background="White"> 

                <data:DataGrid Name="DataGrid1" AutoGenerateColumns="True" ></data:DataGrid> 

        </Grid> 

</UserControl>

XMAL代碼依然簡單，僅僅是一個DataGrid控件，而且使用了自動産生列的方式來建構表格結構。

        public class Student 

        { 

                public string Name { get; set; } 

                public string No { get; set; } 

        } 

        public partial class DataGrid : UserControl 

                public DataGrid() 

                { 

                        InitializeComponent(); 

                        List<Student> list = new List<Student>(); 

                        Student stu = new Student(); 

                        stu.No = "0001"; 

                        stu.Name = "Jerry"; 

                        list.Add(stu); 

                        stu = new Student(); 

                        stu.No = "0002"; 

                        stu.Name = "Tom"; 

                        DataGrid1.ItemsSource = list; 

                } 

        }

C#代碼就稍微多了一點，因為要建構資料源。SilverLight中無法使用DataTable？是以我們建構了一個List清單來表示資料，Student類表示資料結構。表格的ItemsSource 就是資料綁定接口。

效果如下：

你可能更想使用自定義列，DataGrid也可以定制模闆，很好，很強大。

<UserControl xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"    x:Class="_51CTO.lesson02.DataGrid2" 

                <data:DataGrid Name="DataGrid1" AutoGenerateColumns="True" > 

                        <data:DataGrid.Columns> 

                                <data:DataGridTextColumn Header="學号" Width="100" Binding="{Binding No}" /> 

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

                                <data:DataGridTemplateColumn Header="操作" Width="100"> 

                                        <data:DataGridTemplateColumn.CellTemplate> 

                                                <DataTemplate> 

                                                        <Button Content="删除"></Button> 

                                                </DataTemplate> 

                                        </data:DataGridTemplateColumn.CellTemplate> 

                                </data:DataGridTemplateColumn> 

                        </data:DataGrid.Columns> 

                </data:DataGrid> 

資料綁定部分是一樣的。這裡沒有實作删除功能，隻是個裝飾。效果如下：

關于DataGrid的更多内容，讀者可以去摩爾森部落格上看。這個控件和其它SilverLight控件一樣，都在繼續完善。

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