随笔 - 616, 文章 - 0, 评论 - 10492
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
[索引页]
[源码下载]


稳扎稳打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 getset; }
        
public int Age getset; }
        
public DateTime DayOfBirth getset; }
        
public bool Male getset; }
    }

}


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(2060),
                        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(255223227230));
            }

        }


        
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(255223227230));
            }

        }


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