WPF XAML实现带6:4优先分割比例的Grid动态尺寸调整方法

实现方案 #

可以仅通过XAML配合极简的通用转换器实现需求，无需编写业务逻辑代码，以下是具体实现：

核心思路 #

我们要实现的是「内容宽度优先满足，剩余空间默认按6:4分配，某列内容未用满默认额度时，剩余额度可分配给另一列有内容需求的列」，具体逻辑为：

1. 计算两列内容的实际宽度总和，若总和≥容器总宽度：两列按6:4比例分配宽度，避免内容溢出
2. 若总和<容器总宽度：
   • 若第一列内容宽度<60%总宽度，第二列内容宽度<40%总宽度：按默认6:4分配
   • 若第一列内容宽度>60%总宽度，第二列<40%：给第一列分配「总宽度-第二列内容宽度」，第二列取内容宽度
   • 若第二列内容宽度>40%总宽度，第一列<60%：给第二列分配「总宽度-第一列内容宽度」，第一列取内容宽度

实现代码 #

第一步：添加通用列宽转换器（全局通用，仅需添加一次）

public class ColumnWidthConverter : IMultiValueConverter
{
    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
    {
        if (values.Length < 3 || values.Any(v => v is not double)) 
            return parameter.ToString() == "Col1" ? new GridLength(6, GridUnitType.Star) : new GridLength(4, GridUnitType.Star);
        
        double totalWidth = (double)values[0];
        double col1ContentWidth = (double)values[1];
        double col2ContentWidth = (double)values[2];
        double defaultCol1Width = totalWidth * 0.6;
        double defaultCol2Width = totalWidth * 0.4;

        // 内容总宽度超出容器，按比例分配
        if (col1ContentWidth + col2ContentWidth >= totalWidth)
        {
            return parameter.ToString() == "Col1" 
                ? new GridLength(6, GridUnitType.Star) 
                : new GridLength(4, GridUnitType.Star);
        }

        // 第一列内容超过默认宽度，第二列未用满
        if (col1ContentWidth > defaultCol1Width && col2ContentWidth < defaultCol2Width)
        {
            return parameter.ToString() == "Col1" 
                ? new GridLength(totalWidth - col2ContentWidth, GridUnitType.Pixel) 
                : new GridLength(col2ContentWidth, GridUnitType.Pixel);
        }

        // 第二列内容超过默认宽度，第一列未用满
        if (col2ContentWidth > defaultCol2Width && col1ContentWidth < defaultCol1Width)
        {
            return parameter.ToString() == "Col1" 
                ? new GridLength(col1ContentWidth, GridUnitType.Pixel) 
                : new GridLength(totalWidth - col1ContentWidth, GridUnitType.Pixel);
        }

        // 都未用满，按默认比例分配
        return parameter.ToString() == "Col1" 
            ? new GridLength(6, GridUnitType.Star) 
            : new GridLength(4, GridUnitType.Star);
    }

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

第二步：XAML布局代码

<Window.Resources>
    <local:ColumnWidthConverter x:Key="ColumnWidthConverter"/>
</Window.Resources>

<Grid x:Name="RootGrid" HorizontalAlignment="Stretch">
    <Grid.ColumnDefinitions>
        <ColumnDefinition>
            <ColumnDefinition.Width>
                <MultiBinding Converter="{StaticResource ColumnWidthConverter}" ConverterParameter="Col1">
                    <Binding Path="ActualWidth" ElementName="RootGrid"/>
                    <Binding Path="ActualWidth" ElementName="Txt1"/>
                    <Binding Path="ActualWidth" ElementName="Txt2"/>
                </MultiBinding>
            </ColumnDefinition.Width>
        </ColumnDefinition>
        <ColumnDefinition>
            <ColumnDefinition.Width>
                <MultiBinding Converter="{StaticResource ColumnWidthConverter}" ConverterParameter="Col2">
                    <Binding Path="ActualWidth" ElementName="RootGrid"/>
                    <Binding Path="ActualWidth" ElementName="Txt1"/>
                    <Binding Path="ActualWidth" ElementName="Txt2"/>
                </MultiBinding>
            </ColumnDefinition.Width>
        </ColumnDefinition>
    </Grid.ColumnDefinitions>

    <TextBlock x:Name="Txt1" Grid.Column="0" Text="Test1" HorizontalAlignment="Left" TextWrapping="Wrap"/>
    <TextBlock x:Name="Txt2" Grid.Column="1" Text="Test2" HorizontalAlignment="Right" TextWrapping="Wrap"/>
</Grid>

无转换器纯XAML简化方案 #

如果不想引入转换器，可以用双层Grid的简化实现，满足绝大多数场景的需求：

<Grid HorizontalAlignment="Stretch">
    <!-- 上层内容层，优先满足内容宽度 -->
    <DockPanel>
        <TextBlock x:Name="Txt2" DockPanel.Dock="Right" HorizontalAlignment="Right" Text="Test2"/>
        <TextBlock x:Name="Txt1" DockPanel.Dock="Left" HorizontalAlignment="Left" Text="Test1"/>
    </DockPanel>
    <!-- 底层限制最小宽度比例，保证默认6:4分配 -->
    <Grid IsHitTestVisible="False">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="6*"/>
            <ColumnDefinition Width="4*"/>
        </Grid.ColumnDefinitions>
        <Rectangle Grid.Column="0" Fill="Transparent" MinWidth="{Binding ActualWidth, RelativeSource={RelativeSource Self}}" Width="{Binding ActualWidth, ElementName=Txt1, Mode=OneWayToSource}"/>
        <Rectangle Grid.Column="1" Fill="Transparent" MinWidth="{Binding ActualWidth, RelativeSource={RelativeSource Self}}" Width="{Binding ActualWidth, ElementName=Txt2, Mode=OneWayToSource}"/>
    </Grid>
</Grid>

替代方案：自定义布局面板 #

如果需要更高的灵活性，可以自定义继承自Panel的布局控件，重写MeasureOverride和ArrangeOverride方法实现宽度计算逻辑，适合有大量同类布局需求的项目，性能比绑定转换器更高。

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