在后台代码中设置WPF对象动态大小并实现Grid动态柱状图

嘿，我来给你捋捋用WPF Grid实现这种动态分层柱状图的具体方案，完全贴合你提到的DataTable结构需求～

一、先把数据结构映射到Grid布局逻辑 #

首先得把你的DataTable里的层级关系转换成Grid能识别的行和列：

• 每行对应一组有Parent关联的柱子：根级柱子（Parent为空）是每行的起始柱，它的子柱子（Parent指向根的Key）会紧跟在同一行的右侧，拆分成更小的柱子。
• 我建议在ViewModel里先把数据处理成更友好的格式，比如创建一个RowColumnGroup类，包含行索引、该行列的所有柱子信息（每个柱子存宽度比例、名称、长度这些字段），这样后续绑定Grid会方便很多。

二、动态生成Grid的行和列 #

Grid的行和列肯定不能写死，得跟着数据走：
在XAML里先把Grid和maingrid的大小绑定好，然后动态生成行定义和列定义：

<Grid x:Name="ChartGrid" 
      Width="{Binding ElementName=maingrid, Path=ActualWidth}"
      Height="{Binding ElementName=maingrid, Path=ActualHeight}">
    <!-- 后续行和列通过代码或绑定生成 -->
</Grid>

然后在ViewModel或者后台代码里，根据处理好的RowColumnGroup集合来生成行和列：

// 生成行：每个分组对应一行，高度均分
foreach (var rowGroup in RowColumnGroups)
{
    ChartGrid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star) });
}

// 计算所有柱子的总宽度比例，用来生成列
var totalWidth = RowColumnGroups.Sum(g => g.Columns.Sum(c => c.WidthRatio));
foreach (var column in RowColumnGroups.SelectMany(g => g.Columns))
{
    ChartGrid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(column.WidthRatio, GridUnitType.Star) });
}

三、动态生成每个柱子控件 #

用ItemsControl来绑定数据生成柱子是最方便的，嵌套两层：外层绑行分组，内层绑每行的柱子：

<ItemsControl ItemsSource="{Binding RowColumnGroups}">
    <ItemsControl.ItemContainerStyle>
        <Style TargetType="ContentPresenter">
            <Setter Property="Grid.Row" Value="{Binding RowIndex}"/>
        </Style>
    </ItemsControl.ItemContainerStyle>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <ItemsControl ItemsSource="{Binding Columns}">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Horizontal"/>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Border Background="#4682B4" 
                                Width="{Binding WidthRatio, Converter={StaticResource RatioToWidthConverter}, ConverterParameter={Binding ElementName=ChartGrid, Path=ActualWidth}}"
                                Margin="0 1">
                            <TextBlock Text="{Binding Name}" 
                                       HorizontalAlignment="Center" 
                                       VerticalAlignment="Center"
                                       Foreground="White"
                                       FontSize="10"/>
                        </Border>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

这里需要一个转换器把比例转换成实际宽度，代码很简单：

public class RatioToWidthConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value is double ratio && parameter is double totalGridWidth)
        {
            return ratio * totalGridWidth;
        }
        return 0;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

别忘了在XAML的资源里注册这个转换器哦～

四、处理DataTable的Parent层级关系 #

最关键的一步是把原始DataTable转换成我们需要的RowColumnGroup集合：

// 先把DataTable转成强类型对象集合，方便操作
var dataItems = yourDataTable.AsEnumerable().Select(row => new ChartDataItem
{
    Key = row.Field<string>("Key"),
    Length = row.Field<double>("Length"),
    Name = row.Field<string>("Name"),
    Parent = row.Field<string>("Parent")
}).ToList();

// 找出所有根级柱子（没有Parent的）
var rootItems = dataItems.Where(item => string.IsNullOrWhiteSpace(item.Parent)).ToList();

// 为每个根柱子构建一行，包含它和它的子柱子
foreach (var root in rootItems)
{
    var rowGroup = new RowColumnGroup { RowIndex = RowColumnGroups.Count };
    // 添加根柱子
    rowGroup.Columns.Add(new ColumnInfo
    {
        WidthRatio = root.Length,
        Name = root.Name,
        Length = root.Length
    });
    // 找出当前根柱子的所有子柱子
    var childItems = dataItems.Where(item => item.Parent == root.Key).ToList();
    foreach (var child in childItems)
    {
        rowGroup.Columns.Add(new ColumnInfo
        {
            WidthRatio = child.Length,
            Name = child.Name,
            Length = child.Length
        });
    }
    RowColumnGroups.Add(rowGroup);
}

这里要注意：如果子柱子的Length是相对于父柱子的比例（而不是整个图表的绝对比例），你需要先把父柱子的Length作为基数，计算子柱子占父柱子的比例，再转换成整个图表的宽度比例，不然柱子宽度会不对。

五、一些小提醒 #

• 你提到间隙不是当前要解决的问题，那暂时可以忽略Margin的调整，后续如果要优化视觉效果，再微调即可。
• Grid绑定maingrid的ActualWidth和ActualHeight后，柱状图会自动跟着maingrid缩放，很方便。
• 如果数据量比较大，记得给ItemsControl开虚拟化，用VirtualizingStackPanel作为ItemsPanel，避免性能问题。

内容的提问来源于stack exchange，提问作者Azzarrel