WPF中如何让Grid列宽适配Collapsed元素的最大宽度（SharedSizeGroup）

问题核心在于：设置为Visibility="Collapsed"的元素不会参与任何布局尺寸计算，所以你的Grid第一列只会根据当前可见行的Label宽度调整，导致切换时列宽跳动。即使使用SharedSizeGroup，也无法获取Collapsed元素的尺寸，因此无效。

下面提供两种可行的解决方案：

方案一：用隐藏容器预计算所有Label的最大宽度 #

新增一个不占空间的隐藏容器，将所有需要考虑的Label放入其中（文本与对应行的Label一致，绑定多语言资源），让Grid第一列的宽度绑定到这个容器的实际宽度。这样不管行是否可见，所有Label的尺寸都会被计算，列宽始终保持最大值。

示例XAML：

<!-- 主Grid -->
<Grid>
    <Grid.ColumnDefinitions>
        <!-- 绑定到隐藏容器的ActualWidth -->
        <ColumnDefinition Width="{Binding ElementName=HiddenLabelContainer, Path=ActualWidth}"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <!-- 你的行内容（ComboBox行、各UserControl行） -->
    <!-- ... -->
</Grid>

<!-- 隐藏容器：不显示但计算所有Label的宽度 -->
<StackPanel x:Name="HiddenLabelContainer" Visibility="Hidden" Height="0" Orientation="Horizontal">
    <Label Content="{x:Static res:Resources.Name}"/>
    <Label Content="{x:Static res:Resources.Password}"/>
    <!-- 添加所有其他行的Label文本 -->
</StackPanel>

方案二：将非显示行设为Hidden+Height=0，结合SharedSizeGroup #

把原本设为Collapsed的行改为Visibility="Hidden"，同时将行高设为0——这样元素会参与布局计算（贡献Label宽度），但不会占用垂直空间。配合SharedSizeGroup就能让第一列保持所有Label的最大宽度。

示例XAML：

<!-- 开启SharedSizeScope -->
<Grid Grid.IsSharedSizeScope="True">
    <Grid.ColumnDefinitions>
        <ColumnDefinition SharedSizeGroup="LabelColumn"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/> <!-- ComboBox行 -->
        <RowDefinition Height="Auto"/> <!-- Name行 -->
        <RowDefinition Height="Auto"/> <!-- Password行 -->
        <RowDefinition Height="Auto"/> <!-- 其他行 -->
        <RowDefinition Height="Auto"/> <!-- 其他行 -->
    </Grid.RowDefinitions>

    <!-- ComboBox -->
    <ComboBox Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2"
              SelectedIndex="0" SelectionChanged="ComboBox_SelectionChanged"/>

    <!-- Name行元素 -->
    <Label Grid.Column="0" Grid.Row="1" Content="{x:Static res:Resources.Name}"/>
    <local:NameUserControl Grid.Column="1" Grid.Row="1"/>

    <!-- Password行元素 -->
    <Label Grid.Column="0" Grid.Row="2" Content="{x:Static res:Resources.Password}"/>
    <local:PasswordUserControl Grid.Column="1" Grid.Row="2"/>

    <!-- 其他行元素... -->
</Grid>

后台切换逻辑示例：

private void ComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    // 重置所有非ComboBox行的状态：隐藏+高度为0
    for (int i = 1; i < grid.RowDefinitions.Count; i++)
    {
        var rowDef = grid.RowDefinitions[i];
        rowDef.Height = new GridLength(0);
        
        // 找到该行的Label和UserControl并隐藏
        foreach (UIElement child in grid.Children)
        {
            if (Grid.GetRow(child) == i)
            {
                child.Visibility = Visibility.Hidden;
            }
        }
    }

    // 设置选中项对应的行为可见+自动高度
    int selectedRowIndex = ((ComboBox)sender).SelectedIndex + 1; // 对应第1-4行
    var targetRowDef = grid.RowDefinitions[selectedRowIndex];
    targetRowDef.Height = GridLength.Auto;

    foreach (UIElement child in grid.Children)
    {
        if (Grid.GetRow(child) == selectedRowIndex)
        {
            child.Visibility = Visibility.Visible;
        }
    }
}

两种方案都能解决列宽晃动的问题，方案一无需修改行的可见性逻辑，方案二更贴合原有的Grid布局结构，可根据实际场景选择。

内容的提问来源于stack exchange，提问作者Marcel Grüger