Silverlight datagrid定制，实现 每行可细分为若干小行

先看效果

上图中，DataGrid的每行的CellPresenter部分只有一列，用来显示时间。 而每行 的DetailPresenter部分 嵌入了一个隐藏了Header 的DataGrid。

<sdk:DataGrid.RowDetailsTemplate>
                <DataTemplate>
                    <sdk:DataGrid Background="#00000000" HeadersVisibility="None" x:Name="detailDataGrid" AutoGenerateColumns="False" Margin="150,0,0,0" HorizontalAlignment="Stretch" IsReadOnly="True" Grid.Row="1" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Disabled">
                        <sdk:DataGrid.Columns>
                            <sdk:DataGridTextColumn Width="150" Header="项目" Binding="{Binding Project}"/>

                            <sdk:DataGridTemplateColumn Width="*" Header="内容">
                                <sdk:DataGridTemplateColumn.CellTemplate>
                                    <DataTemplate>
                                        <my:MyTextBox Background="#00000000" Height="Auto" Text="{Binding Contents, Mode=TwoWay}" BorderBrush="{x:Null}" TextWrapping="Wrap" HorizontalAlignment="Stretch" x:Name="textBox32413" VerticalAlignment="Top" AcceptsReturn="True" IsReadOnly="True"></my:MyTextBox>
                                    </DataTemplate>
                                </sdk:DataGridTemplateColumn.CellTemplate>
                            </sdk:DataGridTemplateColumn>

                            <sdk:DataGridTemplateColumn Width="100">
                                <sdk:DataGridTemplateColumn.CellTemplate>
                                    <DataTemplate>
                                        <Button Content="保存" Width="100" VerticalAlignment="Top" HorizontalAlignment="Left"></Button>
                                    </DataTemplate>
                                </sdk:DataGridTemplateColumn.CellTemplate>
                            </sdk:DataGridTemplateColumn>

                            <sdk:DataGridTemplateColumn Width="100">
                                <sdk:DataGridTemplateColumn.CellTemplate>
                                    <DataTemplate>
                                        <Button Content="历史" Width="100" VerticalAlignment="Top" HorizontalAlignment="Left"></Button>
                                    </DataTemplate>
                                </sdk:DataGridTemplateColumn.CellTemplate>
                            </sdk:DataGridTemplateColumn>
                            

                        </sdk:DataGrid.Columns>
                    </sdk:DataGrid>
                    
                </DataTemplate>
            </sdk:DataGrid.RowDetailsTemplate>

另外，因为silverlight datagrid每行的默认样式如下，

如果采用默认的样式，则会使嵌套的子DataGrid显示在每行的下面，不是我想要的，故需要更改每行的样式（style）。更改如下：

在代码中，主要是将默认样式：

                    <localprimitives:DataGridRowHeader Grid.RowSpan="3" Name="RowHeader" localprimitives:DataGridFrozenGrid.IsFrozen="True" />
                    <localprimitives:DataGridCellsPresenter Grid.Column="1" Name="CellsPresenter" localprimitives:DataGridFrozenGrid.IsFrozen="True" />
                    <localprimitives:DataGridDetailsPresenter Grid.Row="1" Grid.Column="1" Name="DetailsPresenter" />
                    <Rectangle Grid.Row="2" Grid.Column="1" Name="BottomGridLine" HorizontalAlignment="Stretch" Height="1" />

更改为：

                    <sdk:DataGridRowHeader x:Name="RowHeader" sdk:DataGridFrozenGrid.IsFrozen="True" Grid.RowSpan="3"/>
                    <sdk:DataGridCellsPresenter x:Name="CellsPresenter" Grid.Column="1" sdk:DataGridFrozenGrid.IsFrozen="True" Grid.RowSpan="2"/>
                    <sdk:DataGridDetailsPresenter x:Name="DetailsPresenter" Grid.Column="2" Grid.RowSpan="2"/>
                    <Rectangle x:Name="BottomGridLine" Grid.Column="1" HorizontalAlignment="Stretch" Height="1" Grid.Row="2" Grid.ColumnSpan="2"/>
                        

关于Siverlight datagird 样式设置，请参考 msdn 的  DataGrid Styles and Templates

在此处下载示例代码