WPF Grid列宽适配需求及现有实现问题求助

需求说明 #

需要实现三列布局：

• 宽度可变（最大80）的Label列
• 占用剩余空间、文本过长自动截断的内容列
• 固定尺寸、始终靠右的Icon列

当前实现代码 #

<Grid SnapsToDevicePixels="True">
    <Grid.ColumnDefinitions>
        <!-- I tried 'Width' instead of 'MaxWidth'. No difference -->
        <ColumnDefinition MaxWidth="80" SharedSizeGroup="Label" />
        <ColumnDefinition Width="*" SharedSizeGroup="Name" />
        <ColumnDefinition Width="Auto" SharedSizeGroup="Icon" />
    </Grid.ColumnDefinitions>

    <TextBlock Grid.Column="0"
               Text="{Binding Label}" 
               FontWeight="Bold"
               TextTrimming="CharacterEllipsis"
               TextWrapping="NoWrap" />
        <!-- Started with a simple TextBlock, tried StackPanel, now Grid.
            Still this one pushes the icon to the right -->
    <Grid Grid.Column="1">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <TextBlock Grid.Column="0"
                   Text="{Binding Name}"
                   FontWeight="Bold" />
        <TextBlock Grid.Column="1"
                   Text="{Binding CombinedDisplayName}"
                   TextTrimming="CharacterEllipsis"
                   TextWrapping="NoWrap" />
    </Grid>
    <materialDesign:PackIcon Grid.Column="2"
                             HorizontalAlignment="Right"
                             Kind="ConsoleNetworkOutline" />
</Grid>

问题表现 #

当前实现的不良效果：中间列内容过多时会将右侧Icon列挤向右侧，无法保持在父容器最右端；中间列未正确占用全部剩余空间，仅在硬编码TextBlock宽度时才会截断文本。

解决方案 #

修改后的代码 #

<Grid SnapsToDevicePixels="True" HorizontalAlignment="Stretch">
    <Grid.ColumnDefinitions>
        <!-- 第一列：自动适配内容宽度，最大限制80 -->
        <ColumnDefinition Width="Auto" MaxWidth="80"/>
        <!-- 第二列：占用所有剩余空间 -->
        <ColumnDefinition Width="*"/>
        <!-- 第三列：自动适配Icon尺寸 -->
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>

    <TextBlock Grid.Column="0"
               Text="{Binding Label}" 
               FontWeight="Bold"
               TextTrimming="CharacterEllipsis"
               TextWrapping="NoWrap" />

    <!-- 中间列用DockPanel实现并排文本，确保剩余空间被填充且文本截断 -->
    <DockPanel Grid.Column="1" LastChildFill="True" Margin="8,0,0,0">
        <TextBlock Text="{Binding Name}" 
                   FontWeight="Bold" 
                   DockPanel.Dock="Left"
                   TextWrapping="NoWrap"/>
        <TextBlock Text="{Binding CombinedDisplayName}"
                   TextTrimming="CharacterEllipsis"
                   TextWrapping="NoWrap"/>
    </DockPanel>

    <materialDesign:PackIcon Grid.Column="2"
                             Kind="ConsoleNetworkOutline" />
</Grid>

关键修改点 #

1. 移除不必要的SharedSizeGroup：该属性会强制列宽与其他同组列保持一致，若没有多行列对齐需求，会干扰自适应布局逻辑。
2. 调整父Grid列定义：
   • 第一列设为Width="Auto" MaxWidth="80"，既自动适配Label内容，又限制最大宽度。
   • 第二列设为Width="*"，确保占用父容器剩余所有空间。
   • 第三列设为Width="Auto"，自动适配Icon的固定尺寸。
3. 中间列替换为DockPanel：通过LastChildFill="True"让第二个TextBlock自动填充剩余空间，保证文本过长时触发截断；同时用DockPanel.Dock="Left"固定第一个TextBlock的位置。
4. 确保父Grid横向拉伸：设置HorizontalAlignment="Stretch"，让父Grid填满所在容器的宽度，为三列布局提供正确的空间基础。

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