控件是对数据和方法的封装。控件可以有自己的属性、方法和事件。属性是控件数据的简单访问者，方法则是控件的一些简单而可见的功能，事件是可以被控件识别的操作。Silverlight中，控件的特性和控件显示方式分开，控件在用户界面上的样子是由控件模板决定，Silverlight为每个控件提供了默认的控件模板和相应的特性，用户也可用自己的控件模板来替换，让它成为有个性化的控件，如过去方形的按扭，可以换成圆的或椭圆的，或者任意图片等，但按扭的基本属性没有改变。
所有控件由基类System.Windows.Control类派生而来，其命名空间是System.Windows.Controls，System.Windows.Controls命名空间中包含的某些控件用于Silverlight运行时，其它控件用于Silverlight SDK。
现对Silverlight 控件按照常规功能进行分类，主要有：
◎     按钮/命令控件，如：Button、HyperlinkButton、RepeatButton
◎     日期显示和选择，如：Calendar、DatePicker
◎     信息显示：TextBlock、ProgressBarvRichTextBox
◎ 文本显示和编辑：AutoCompleteBox、PasswordBox、TextBox、RichTextBox
◎ 数据显示 DataGrid、DataPager、TreeView
◎     图形和视频显示：Image、MultiScaleImage、MediaElement、InkPresenter
◎     对话框和窗口：OpenFileDialog、SaveFileDialog、ChildWindow、Popup
◎     导航：Frame、Page
◎     用户帮助： DescriptionViewer、Label、ToolTip、ValidationSummary
◎ 布局和元素分组 Border、Canvas、ContentControl、Grid GridSplitter、StackPanel、 Viewbox、VirtualizingStackPanel、ScrollBar、ScrollViewer、TabControl
◎     选择控件，如：CheckBox、ComboBox、ListBox、RadioButton、Slider
如安控件的派生关系分，有：面板控件、内容控件、列表控件等。
DataGrid控件提供一种用户喜爱的、灵活的方式来以表格的形式显示数据，用户可根据自己的需求来定制列的模板，内置列类型包括文本框列、复选框列和模板列，位于命名空间System.Windows.Controls下，在System.Windows.Controls程序集中，该程序集并不包含在Silverlight运行库中，因此需添加对System.Windows.Controls.Data.Dll的引用，在XAML界面的根标记UserControl声明如下：
xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"
实际操作时，如从工具箱中将DataGrid控件拖放至XAML界面中时，会自动添加上面的设置。
DataGrid控件重要属性有：
◎ IsReadOnly：可以直接编辑项。为了确保正确地提交和取消这些编辑。
◎ IsValid：支持单元格级别的属性验证和行级别的对象验证。如果在属性 setter 中遇到验证异常，则单元格编辑控件将显示其错误状态。DataGridCell..::.IsValid、DataGridRow..::.IsValid 和 DataGrid..::.IsValid 属性都设置为 false。DataGrid 将不会退出单元格编辑模式，直到验证错误得以解决。
◎ IPagedCollectionView：对数据进行分页。
◎ PagedCollectionView：实现数据源提供分组、排序和分页功能。
◎ ItemsSource：数据网格中的每一行均绑定到数据源中的一个对象，而数据网格中的每一列均绑定到该数据对象的一个属性。当向源数据中添加项或从源数据中移除项时，为了使 DataGrid 用户界面能够自动更新，DataGrid 必须绑定到实现 INotifyCollectionChanged 的集合，例如 ObservableCollection<(Of <(T>)>)。为了自动反映属性更改，源集合中的对象必须实现 INotifyPropertyChanged 接口。
◎ AutoGenerateColumns：属性设置为 false时，可以阻止自动生成列。如果要显式创建和配置所有列，则这一点很有用。此外，还可以让数据网格生成列，但处理 AutoGeneratingColumn 事件以便在创建后对列进行自定义。若要重新排列列的显示顺序，可以针对各个列设置 DisplayIndex 属性。
◎CanUserReorderColumns:属性设置为true时，可以拖动该列改变该列的顺序，否则不能拖动。
◎CanUserResizeColumns：属性设置为true时，用户可以用鼠标调整列的宽度，否则列的宽度不能被调整。

范例示范使用RowDetailTemplate

    图13.1-6是Ch13_Exam1_4的运行画面，单击某一行后，出现详细信息。
 
图13.1-6
◎XAML标记如下，已添加注解。
<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
<!--增加的命名空间支持 -->
    xmlns:myheader="clr-namespace:System.Windows.Controls.Primitives;assembly=System.Windows.Controls.Data"
    mc:Ignorable="d"
xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"
x:Class="SilverlightApplication74.MainPage"
    d:DesignWidth="640" d:DesignHeight="580"
     xmlns:local="clr-namespace:SilverlightApplication74">
  <Grid x:Name="LayoutRoot">
         <StackPanel Margin="10,0,8,18">
                <TextBlock Height="51" Margin="179,0,299,0" Text="热门新车销量表" TextWrapping="Wrap" FontSize="32" Foreground="#FFE90D0D"/>
// 设置RowDetailsVisibilityMode属性
<data:DataGrid x:Name="gridStudent" Margin="10,10,0,0" AutoGenerateColumns="False" Width="604" Height="488" HorizontalAlignment="Left" RowDetailsVisibilityMode="VisibleWhenSelected" >
//定义详细数据区域
<data:DataGrid.RowDetailsTemplate>
                         <DataTemplate>
                                <Border>
<Border Margin="10" Padding="10" BorderBrush="SteelBlue" BorderThickness="4" CornerRadius="4">
                  <TextBlock Text="{Binding Description}" TextWrapping="Wrap" FontSize="14"></TextBlock>
                                       </Border>
                                </Border>
                         </DataTemplate>
</data:DataGrid.RowDetailsTemplate>
// 定义ColumnHeaderStyle列标题样式
                  <data:DataGrid.ColumnHeaderStyle>
                      <Style TargetType="myheader:DataGridColumnHeader">
                             <Setter Property="FontSize" Value="18" />
                                <Setter Property="Foreground" Value="Red" />
                         </Style>
                  </data:DataGrid.ColumnHeaderStyle>         
                  <data:DataGrid.Columns >
                              <data:DataGridTextColumn Header="车名"
                                     FontSize="16"
                                     Width="100"
                                     Binding="{Binding Name}" >                     
                         </data:DataGridTextColumn>                                                
                         <data:DataGridTextColumn Header="类型"
                                     FontSize="16"
                                     Width="100"
                                     Binding="{Binding Type}" >                      
                         </data:DataGridTextColumn>                                         
                              <data:DataGridTextColumn Header="销量"
                                     FontSize="16"
                                     Width="150"
                                     Binding="{Binding Total,Mode=TwoWay}">             
                                <data:DataGridTextColumn.ElementStyle>
                                   <Style TargetType="TextBlock">
                                      <Setter Property="TextWrapping" Value="Wrap" />
                                   </Style>
                                </data:DataGridTextColumn.ElementStyle>                      
                                <data:DataGridTextColumn.EditingElementStyle>
                                   <Style TargetType="TextBox">
                                      <Setter Property="FontWeight" Value="Bold" />
                                         <Setter Property="Foreground" Value="Red" />
                                   </Style>
                                </data:DataGridTextColumn.EditingElementStyle>
                         </data:DataGridTextColumn>                    
                              <data:DataGridTemplateColumn Header="图片" >             
                                     <data:DataGridTemplateColumn.CellTemplate>
                                            <DataTemplate>
  <Image Stretch="UniformToFill" Source ="{Binding Img}" Width="150"/>
                                            </DataTemplate>
                                     </data:DataGridTemplateColumn.CellTemplate>         
                                     <data:DataGridTemplateColumn.CellEditingTemplate>
                                            <DataTemplate>
                              <TextBox Text="{Binding Car, Mode=TwoWay}" />
                                            </DataTemplate>
    </data:DataGridTemplateColumn.CellEditingTemplate>
                </data:DataGridTemplateColumn>                 
    </data:DataGrid.Columns>
         </data:DataGrid>
         </StackPanel>
  </Grid>
</UserControl>
◎     主要代码如下：
   public void LoadData()
        {
            car = new Car[] {
                 new Car{
                                Name="新明锐",
                                Total =8500,
                                Type="小型车",
                                Img=GetPath("CarPhoto/mingru.jpg"),
Description="斯柯达品牌秉承德国大众集团的先进技术，其产品特点是智慧和品质…………….",
                                },
               new Car{
                    Name="高尔夫6",
                             Total =15500,
                             Type="豪华车",
                             Img=GetPath("CarPhoto/golf.jpg"),
                          Description="高尔夫不仅追求外观和实用性完美结合，而且在产品品质、内饰及舒适性装备上也毫不妥协地追求完美…………….."
                          },
                new Car{
                                 Name="科鲁兹",
                                Total =11000,
                                Type="中型车",
                                Img=GetPath("CarPhoto/kouluz.jpg"),
                          Description="科鲁兹的外形给人一种锋利运动的感觉，尤其是锐角的前大灯更强化了……………."
                         },
                new Car{
                                Name="福克斯两厢",
                                Total =12800,
                                Type="紧凑型车",
                                Img=GetPath("CarPhoto/fukes.jpg"),
                          Description="福克斯两厢车头采用的X焦点设计，正是福特汽车车头设计的进化成果……………."
                         },
                new Car{
                                Name="速腾1.4T",Total =10600,
                                Type="中型车",
                                Img=GetPath("CarPhoto/suteng.jpg"),
                          Description="速腾是一汽大众于2006年4月9日投放中国市场的一款新车型，其英文名称为…………….",
                         }
            };
        }
//读取图片的绝对路径
           string GetPath(string path)
           {
                  string Uri;
    string absoUri= System.Windows.Application.Current.Host.Source.AbsoluteUri;
                  if (absoUri.IndexOf("ClientBin") > 0)
               Uri=absoUri.Substring(0, absoUri.IndexOf("ClientBin")) + path;
            else
               Uri=absoUri.Substring(0, absoUri.LastIndexOf("/") + 1) + path;
                  return Uri;
           }
    }
//定义汽车类
    public class Car
    {
        public string Name
        { set;get;}
        public int Total
        { set;get;}
        public string Type
        { set;get; }
           public string Description
        { set;get; }
           public string Img
        { set;get;}
 }