先看效果
上图中,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