silverlight使用DataGrid实现类似Treelistview效果

折叠效果展开效果

目标实现上面的效果:

知识准备:使用DataGrid的RowDetail显示和隐藏行的展开和折叠效果.

RowDetail 默认显示方式有三种：一、Collapsed 及不显示；二、Visible 及一直显示；三、VisibleWhenSelected 及选中行时显示

其中VisibleWhenSelected 模式会在选中一行时显示相应的详细信息，但是当更改选中行时，之前选中行的详细信息就会隐藏，而且选中一行后也无法隐藏详细信息

（SelectionModel 设置为 Extended ，RowDetailsVisibilityMode 设置为 VisibleWhenSelected ，按住 Ctrl 键选中多行时也会同时显示多行的详细信息，但是当松开 Ctrl 键再选择某一行时，其他行的详细信息就会自动隐藏） .所以该模式不适合在此使用.

xaml代码主要部分

View Code

<sdk:DataGrid x:Name="bidlistGrid" AutoGenerateColumns="False" Height="268" HorizontalAlignment="Left" Margin="12,20,0,0"  VerticalAlignment="Top" Width="376"  
                      <span style="color:#FF6666;">RowDetailsVisibilityMode="Collapsed"</span> SelectionMode="Single" ItemsSource="{Binding}"  <span style="color:#FF6666;">CanUserReorderColumns="False" CanUserSortColumns="False"</span>>  
            <span style="color:#FF6666;"><sdk:DataGrid.RowDetailsTemplate></span>  
              <span style="color:#FF6666;">  <DataTemplate>  
                    <sdk:DataGrid x:Name="lidlistGrid" AutoGenerateColumns="False" Width="350" HorizontalAlignment="Center" ItemsSource="{Binding LidList}">  
                        <sdk:DataGrid.Columns>  
                            <sdk:DataGridTextColumn Header="序号" Binding="{Binding Index}"/>  
                            <sdk:DataGridTextColumn Header="素材ID" Binding="{Binding Clipid}"/>  
                            <sdk:DataGridTextColumn Header="素材名称" Binding="{Binding ClipName}"/>  
                        </sdk:DataGrid.Columns>  
                    </sdk:DataGrid>  
                </DataTemplate>  
            </sdk:DataGrid.RowDetailsTemplate></span>  
            <sdk:DataGrid.Columns>  
                <sdk:DataGridTemplateColumn Header="序号">  
                    <sdk:DataGridTemplateColumn.CellTemplate>  
                        <DataTemplate>  
                            <StackPanel>  
                                <Button Height="20" Width="20" Content="{Binding Index}" Click="Button_Click"/>  
                             </StackPanel>  
  
                        </DataTemplate>  
                    </sdk:DataGridTemplateColumn.CellTemplate>  
                </sdk:DataGridTemplateColumn>  
                <sdk:DataGridTextColumn Header="节目名" Binding="{Binding BidName}"/>  
            </sdk:DataGrid.Columns>  
        </sdk:DataGrid>

效果美化:

将button替换为Image,设置折叠展开时的图标