wpf - 简单的多级网格

Question

我想在 WPF 中显示对象的多级列表。我有一个祖父母名单，每个祖父母都包含一个父母名单，每个父母都包含一个儿子名单。我想在 MVVM 中的 DataGrid 中显示所有这些：

我试图将我的祖父母列表绑定到一个 DataGrid，并用另一个 DataGrid 设置孩子的模板。

这是我的xml：

<DataGrid Grid.Row="1" ItemsSource="{Binding CollectionGrandParents}"
          AutoGenerateColumns="False" IsReadOnly="True" CanUserAddRows="False" CanUserDeleteRows="False">
    <DataGrid.Columns>
        <DataGridTextColumn Binding="{Binding label}" />
        <DataGridTemplateColumn CellTemplate="{StaticResource CellParentTemplate}"/>
    </DataGrid.Columns>
</DataGrid>

<!-- Data Templates -->

<DataTemplate x:Key="CellParentTemplate">
    <DataGrid ItemsSource="{Binding .parents}"
     AutoGenerateColumns="False" IsReadOnly="True" CanUserAddRows="False" CanUserDeleteRows="False">
        <DataGrid.Columns>
            <DataGridTextColumn Binding="{Binding label}" />
            <DataGridTemplateColumn CellTemplate="{DynamicResource CellSonTemplate}"/>
        </DataGrid.Columns>    
    </DataGrid>
</DataTemplate>

<DataTemplate x:Key="CellSonTemplate">
<DataGrid ItemsSource="{Binding .sons}"
 AutoGenerateColumns="False" IsReadOnly="True" CanUserAddRows="False" CanUserDeleteRows="False">        
    <DataGrid.Columns>
        <DataGridTextColumn Binding="{Binding label}"/>
    </DataGrid.Columns>
</DataGrid>

结果：

我的问题是父母和儿子不在同一列中，他们在另一个 DataGrid 中。我想在同一个 DataGrid 中显示我所有的祖父母、父母和儿子（或者可能应该使用 DataGrid 之外的另一个元素，但我不知道是哪个），因为我想正确调整列宽。

Answer 1

非常接近您的要求：

使用以下 XAML 获得，其中包含对TreeViewItem 默认模板的轻微修改

<Window x:Class="MiscSamples.HorizontalTreeView"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="HorizontalTreeView" Height="300" Width="300">
    <Window.Resources>
        <Style x:Key="TreeViewItemFocusVisual">
            <Setter Property="Control.Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Rectangle/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <!-- Modified TreeViewItem Style -->
        <Style TargetType="{x:Type TreeViewItem}">
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
            <Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
            <Setter Property="Padding" Value="1,0,0,0"/>
            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
            <Setter Property="FocusVisualStyle" Value="{StaticResource TreeViewItemFocusVisual}"/>
            <Setter Property="BorderBrush" Value="Black"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="Template">
                <Setter.Value>
                    <!-- Modified TreeViewItem Template -->
                    <ControlTemplate TargetType="{x:Type TreeViewItem}">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition/>
                            </Grid.RowDefinitions>

                            <Border x:Name="Bd" 
                                    BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" 
                                    Background="{TemplateBinding Background}" 
                                    Grid.Column="1" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
                                <ContentPresenter x:Name="PART_Header" ContentSource="Header" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                            </Border>
                            <ItemsPresenter x:Name="ItemsHost" Grid.ColumnSpan="2" Grid.Column="2" Grid.Row="0"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsSelected" Value="true">
                                <Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
                                <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
                            </Trigger>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsSelected" Value="true"/>
                                    <Condition Property="IsSelectionActive" Value="false"/>
                                </MultiTrigger.Conditions>
                                <Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
                                <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
                            </MultiTrigger>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>

    <!-- Sample TreeView -->
    <Grid>
        <TreeView ItemsSource="{Binding}">
            <TreeView.ItemTemplate>
                <HierarchicalDataTemplate ItemsSource="{Binding Children}">
                    <TextBlock Text="{Binding DisplayName}"
                               Margin="5"/>
                </HierarchicalDataTemplate>
            </TreeView.ItemTemplate>
        </TreeView>
    </Grid>
</Window>

后面的代码（只是生成随机数据的样板）：

public partial class HorizontalTreeView : Window
{
    public HorizontalTreeView()
    {
        InitializeComponent();

        var data = new List<HierarchicalData>();
        var random = new Random();

        for (int i = 0; i < 5; i++)
        {
            var item = new HierarchicalData() {DisplayName = "Root" + i.ToString()};
            data.Add(item);
            var childcount = random.Next(0, 5);
            for (int j = 0; j < childcount ; j++)
            {
                var child = new HierarchicalData() {DisplayName = "Child" + i.ToString() + j.ToString()};
                item.Children.Add(child);

                var grandchildcount = random.Next(0, 5);
                for (int k = 0; k < grandchildcount; k++)
                {
                    var grandchild = new HierarchicalData() { DisplayName = "GrandChild" + i.ToString() + j.ToString() + k.ToString() };
                    child.Children.Add(grandchild);
                }
            }

        }

        DataContext = data;
    }
}

数据项：

public class HierarchicalData
{
    private List<HierarchicalData> _children;
    public string DisplayName { get; set; }

    public List<HierarchicalData> Children
    {
        get { return _children ?? (_children = new List<HierarchicalData>()); }
        set { _children = value; }
    }
}

WPF 摇滚 \m/