silverlight使用DataGrid实现类似Treelistview效果

最新推荐文章于 2015-01-05 10:00:51 发布

明夜2013

最新推荐文章于 2015-01-05 10:00:51 发布

阅读量835

点赞数

文章标签： datagrid silverlight binding datatemplate header button

折叠效果展开效果

目标实现上面的效果:

知识准备:使用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,设置折叠展开时的图标