WPF Grid布局问题求助：列0宽度等于行0高且列宽统一

作为WPF新手，你遇到的这个需求其实挺典型的——要让Column0的宽度等于Row0的高度，所有列宽度保持一致，同时Grid的宽高不固定。下面给你两个实用的解决方案：

方案1：后台代码处理尺寸变化 #

这种方式简单直接，适合快速实现需求：

首先在XAML里定义好Grid的结构，给关键的行和列命名，同时绑定列宽确保一致：

<Grid x:Name="MainGrid" SizeChanged="MainGrid_SizeChanged">
    <Grid.RowDefinitions>
        <RowDefinition x:Name="Row0" Height="Auto"/>
        <!-- 其他行可以按需设置 -->
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition x:Name="Column0" Width="*"/>
        <!-- 后面的列直接绑定Column0的Width，确保宽度一致 -->
        <ColumnDefinition Width="{Binding ElementName=Column0, Path=Width}"/>
        <ColumnDefinition Width="{Binding ElementName=Column0, Path=Width}"/>
    </Grid.ColumnDefinitions>

    <!-- 加个示例边框方便看效果 -->
    <Border Grid.Row="0" Grid.Column="0" Background="Coral"/>
    <Border Grid.Row="0" Grid.Column="1" Background="LightGreen"/>
    <Border Grid.Row="0" Grid.Column="2" Background="SkyBlue"/>
    <Border Grid.Row="1" Grid.ColumnSpan="3" Background="LightGray"/>
</Grid>

然后在后台代码里监听Grid的SizeChanged事件，同步Column0的宽度和Row0的高度：

private void MainGrid_SizeChanged(object sender, SizeChangedEventArgs e)
{
    // 让Column0的宽度等于Row0的实际高度
    Column0.Width = new GridLength(Row0.ActualHeight);
    
    // 如果需要Grid保持宽高匹配（比如正方形），可以加这句
    // MainGrid.Height = MainGrid.ActualWidth;
}

方案2：用绑定+转换器，纯XAML实现 #

这种方式更符合WPF的MVVM思想，不需要后台写事件处理代码：

首先创建一个转换器，把数值转换成GridLength类型：

using System;
using System.Globalization;
using System.Windows;
using System.Windows.Data;

namespace YourNamespace
{
    public class DoubleToGridLengthConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            if (value is double lengthValue)
            {
                return new GridLength(lengthValue);
            }
            return GridLength.Auto;
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            if (value is GridLength gridLength)
            {
                return gridLength.Value;
            }
            return 0.0;
        }
    }
}

然后在XAML里引用转换器，绑定行高和列宽：

<Window x:Class="YourNamespace.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:YourNamespace"
        Title="MainWindow" Height="450" Width="800">
    <Window.Resources>
        <!-- 注册转换器 -->
        <local:DoubleToGridLengthConverter x:Key="DoubleToGridLength"/>
    </Window.Resources>

    <!-- 可选：绑定Grid的高度到宽度，让它保持正方形 -->
    <Grid x:Name="MainGrid" Height="{Binding ActualWidth, RelativeSource={RelativeSource Self}}">
        <Grid.RowDefinitions>
            <!-- Row0的高度绑定Column0的实际宽度 -->
            <RowDefinition x:Name="Row0" 
                          Height="{Binding ElementName=Column0, Path=ActualWidth, 
                                   Converter={StaticResource DoubleToGridLength}}"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition x:Name="Column0" Width="*"/>
            <!-- 其他列绑定Column0的Width，确保一致 -->
            <ColumnDefinition Width="{Binding ElementName=Column0, Path=Width}"/>
            <ColumnDefinition Width="{Binding ElementName=Column0, Path=Width}"/>
        </Grid.ColumnDefinitions>

        <!-- 示例内容 -->
        <Border Grid.Row="0" Grid.Column="0" Background="Coral"/>
        <Border Grid.Row="0" Grid.Column="1" Background="LightGreen"/>
        <Border Grid.Row="0" Grid.Column="2" Background="SkyBlue"/>
        <Border Grid.Row="1" Grid.ColumnSpan="3" Background="LightGray"/>
    </Grid>
</Window>

关键说明 #

• 所有列通过绑定Column0的Width属性，确保宽度完全一致；
• 通过绑定或者后台代码，让Row0的高度和Column0的宽度关联起来；
• 如果需要Grid的宽高始终匹配（比如保持正方形），直接绑定Height到ActualWidth即可，反之亦然。

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