silverlight使用DataGrid实现类似Treelistview效果

来源：互联网发布：php curl culopt 编辑：程序博客网时间：2024/06/05 15:19

折叠效果展开效果

目标实现上面的效果:

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

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

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

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

xaml代码主要部分

<sdk:DataGrid x:Name="bidlistGrid" AutoGenerateColumns="False" Height="268" HorizontalAlignment="Left" Margin="12,20,0,0"  VerticalAlignment="Top" Width="376"                      RowDetailsVisibilityMode="Collapsed" SelectionMode="Single" ItemsSource="{Binding}"  CanUserReorderColumns="False" CanUserSortColumns="False">            <sdk:DataGrid.RowDetailsTemplate>                <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>            <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>

构建数据后,后台代码

 private void Button_Click(object sender, RoutedEventArgs e)        {            FrameworkElement el = bidlistGrid.Columns.First().GetCellContent(bidlistGrid.SelectedItem);            DataGridRow row = DataGridRow.GetRowContainingElement(el.Parent as FrameworkElement);            row.DetailsVisibility = row.DetailsVisibility == Visibility.Visible ? Visibility.Collapsed : Visibility.Visible;        }

效果美化:

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