WPF使用Grid实现自定义条形图比例不准确如何修复

比例不准是两个核心问题导致的：

• 整数除法精度丢失：如果percentage1/percentage2是用整型变量计算，C#中两个整数相除会直接截断小数部分，25/(25+14)、14/(25+14)的计算结果都会变成0，就算提前转成浮点类型，布局逻辑本身的错误也会导致比例失真。
• 布局基准不统一：A、B类条形分别放在两个独立Grid中，每个Grid的号行高按自身权重和分配实际像素。两个Grid的两行权重和分别是0.2 + percentage1、0.2 + percentage2，数值不相等，意味着两个Grid中1对应的实际高度完全不同，算出来的条形高度自然不符合真实比例。

1. 统一布局基准：不要给每个条形单独套独立Grid分配行高，所有条形共用同一个父容器作为高度基准，保证相同数值对应相同的像素高度。
2. 修正占比计算：全部使用浮点数做除法，避免整数截断，总样本量total = 25 + 14 = 39，A类占比25d/total ≈ 0.641，B类占比14d/total ≈ 0.359。
3. 对齐方式统一设为底部对齐，避免留白占用条形的计算空间，顶部留白如果没有特殊自适应要求优先用固定高度，减少比例计算的额外干扰。

修复后参考代码 #

如果用值转换器做高度绑定（精度最高，自适应最好），先写个简单的百分比转换器：

public class PercentageToHeightConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value is double totalHeight && parameter is string perStr && double.TryParse(perStr, out double percentage))
        {
            return totalHeight * percentage;
        }
        return 0;
    }

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

在XAML资源中引入转换器后，图表部分代码如下：

<!-- 外层容器作为统一高度基准，可随父容器自适应拉伸，也可手动固定高度 -->
<Grid x:Name="ChartRoot" Margin="15">
    <Grid.Resources>
        <local:PercentageToHeightConverter x:Key="PercentConverter"/>
    </Grid.Resources>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="80"/> <!-- 条形宽度 -->
        <ColumnDefinition Width="40"/> <!-- 条形间距 -->
        <ColumnDefinition Width="80"/> <!-- 条形宽度 -->
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="30"/> <!-- 顶部固定留白，可按需调整 -->
        <RowDefinition Height="*" x:Name="BarArea"/> <!-- 条形绘制区域，所有条共用这个高度基准 -->
    </Grid.RowDefinitions>

    <!-- A类产品条形 -->
    <Rectangle Grid.Row="1" Grid.Column="0" Fill="#dc3912" HorizontalAlignment="Stretch" VerticalAlignment="Bottom"
               Height="{Binding ElementName=BarArea, Path=ActualHeight, Converter={StaticResource PercentConverter}, ConverterParameter=0.641}"/>
    <!-- B类产品条形 -->
    <Rectangle Grid.Row="1" Grid.Column="2" Fill="#3366cc" HorizontalAlignment="Stretch" VerticalAlignment="Bottom"
               Height="{Binding ElementName=BarArea, Path=ActualHeight, Converter={StaticResource PercentConverter}, ConverterParameter=0.359}"/>

    <!-- 可选：加坐标轴、数值标签，直接放在对应行列即可 -->
</Grid>

如果不想写转换器，也可以通过嵌套Grid的权重分配实现，只要保证两个条形的高度计算用同一个基准就行，不过灵活度不如绑定高度的方案。

注意：如果需要做自适应拉伸，不要给外层容器固定宽高比，绑定BarArea.ActualHeight的写法会自动跟随容器大小重算条形高度，比例不会失真。

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