Viewbox下Grid列水平对齐异常的解决方案咨询

为避免用户切换屏幕分辨率或调整系统缩放时内容变形，我使用了Stretch="Uniform"的Viewbox，内部嵌套了一个单行多列的Grid。Grid的第0列会根据条件显示或隐藏，当前仅考虑该列隐藏的场景。

原本设计靠第4列（Width="*"的占位列）实现两个效果：一是让第5、6列（帮助按钮和三点按钮）水平靠右对齐，二是在第3列（功能按钮）和第5列之间留出空白区域。但添加Viewbox后，这个布局逻辑失效了——实际显示中最后两列并未靠右，和预期效果不符。移除Viewbox能达到预期，但我必须保留Viewbox来做自动适配，请问该如何解决？

相关XAML代码 #

<Viewbox StretchDirection="Both" 
         Stretch="Uniform"
         HorizontalAlignment="Left"
         VerticalAlignment="Stretch">

        <Grid Focusable="True"
              Height="Auto">
            <Grid.ColumnDefinitions>
                <!-- Animated image -->
                <ColumnDefinition Width="Auto" />
                <!-- Stack panel with icon and text -->
                <ColumnDefinition Width="Auto" />
                <!-- A vertical separator -->
                <ColumnDefinition Width="Auto" />
                <!-- A button -->
                <ColumnDefinition Width="Auto" />
                <!-- Empty dummy column to help distribute space correctly between columns so it will cause next columns to be horizontally right aligned. -->
                <ColumnDefinition Width="*" />
                <!-- Help button -->
                <ColumnDefinition Width="Auto" />
                <!-- Three dots button -->
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>

            <StackPanel Grid.Column="0"
                        Orientation="Horizontal"
                        Visibility="{Binding Path=IsAnimatedImgVisible, Converter={StaticResource BoolToVisibility}}">
                <v:UserControlAnimatedImg x:Name="UcSpinner" VerticalAlignment="Center" HorizontalAlignment="Left"/>
                <Label SnapsToDevicePixels="True"
                   RenderOptions.BitmapScalingMode="HighQuality"
                   VerticalAlignment="Center" HorizontalAlignment="Left"
                   Content="{Binding Path=StatusText}"/>
            </StackPanel>


           <StackPanel Grid.Column="1"
                       Orientation="Horizontal">

                <Image
                   Margin="10,5"
                   Height="24"
                   Width="24"
                   MaxHeight="24"
                   MaxWidth="24"
                   VerticalAlignment="Center"
                   HorizontalAlignment="Center"
                   Stretch="None" 
                   SnapsToDevicePixels="True"
                   RenderOptions.BitmapScalingMode="HighQuality"
                   Source="{Binding Path=Icon}"/>

                <Label 
                   VerticalAlignment="Center"
                   HorizontalAlignment="Left"
                   Content="{Binding Path=StatusTxt}"
                   SnapsToDevicePixels="True"
                   RenderOptions.BitmapScalingMode="HighQuality">
                </Label>
            </StackPanel>

            <Separator Grid.Column="2"
                   Margin="10,5,5,5"
                   Height="26"
                   Style="{StaticResource {x:Static ToolBar.SeparatorStyleKey}}">

           <Button Grid.Column="3"
                Height="Auto"
                Width="150"
                Command="{Binding ButtonOnClick}">
                <StackPanel Orientation="Horizontal">
                    <Image 
                       Height="24"
                       Width="25"
                       MaxHeight="24"
                       MaxWidth="25"
                       VerticalAlignment="Center"
                       HorizontalAlignment="Center"
                       Stretch="None" 
                       SnapsToDevicePixels="True"
                       RenderOptions.BitmapScalingMode="HighQuality"
                       Source="{Binding ImageIcon}"/>

                    <TextBlock
                           Margin="10,2,5,2"
                           VerticalAlignment="Center"
                           HorizontalAlignment="Left"
                           Text="{x:Static p:Resources.BtnText}"
                           SnapsToDevicePixels="True"
                           RenderOptions.BitmapScalingMode="HighQuality">
                    </TextBlock>
                </StackPanel>
            </Button>

            <!-- Empty dummy space to help distribute space correctly between columns and
                 make next columns to be horizontally right aligned. This column will be blank   
                 space.-->
            <ContentControl Grid.Column="4"/>

            <Button 
                Grid.Column="5"
                Height="25"
                Width="25"
                MaxHeight="25"
                MaxWidth="25"
                Margin="8,0,5,0"
                Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}"
                Command="{Binding BtnHlpClick}">
                <Image HorizontalAlignment="Center"
                   VerticalAlignment="Center"
                   Stretch="Uniform"
                   SnapsToDevicePixels="True"
                   RenderOptions.BitmapScalingMode="HighQuality"
                   Source="{Binding ImageHelpIcon}"/>
            </Button>

            <StackPanel Grid.Column="6"
                    x:Name="PlaceHolder"
                    VerticalAlignment="Center"
                    Margin="2,0,12,0"
                    Width="27"
                    Height="Auto">
                <Image
                   HorizontalAlignment="Center"
                   VerticalAlignment="Center"
                   Stretch="Uniform"
                   Height="20"
                   Width="20"
                   SnapsToDevicePixels="True"
                   RenderOptions.BitmapScalingMode="HighQuality"
                   Source="{Binding ImgThreeDotsIcon}">
                    <Image.ContextMenu>
                        <ContextMenu Placement="Bottom" Background="#FFFFFF">
                            <MenuItem Header="{x:Static p:Resources.mnutext}" Command="{Binding MenuOnClick}"></MenuItem>
                        </ContextMenu>
                    </Image.ContextMenu>
                </Image>
            </StackPanel>
</Viewbox>

效果对比 #

• 实际效果：
• 预期效果：

解决方案 #

问题根源在于Viewbox的HorizontalAlignment="Left"属性——它会让Viewbox仅包裹内部Grid的最小宽度，而非占满父容器的可用宽度，导致Grid中Width="*"的列无法拉伸分配空间。只需做两处修改：

1. 将Viewbox的HorizontalAlignment="Left"改为HorizontalAlignment="Stretch"，让Viewbox占满父容器的宽度。
2. 给内部Grid添加Width="100%"属性，确保Grid在Viewbox内部占满可用宽度，这样*列就能正常拉伸。

修改后的核心代码片段：

<Viewbox StretchDirection="Both" 
         Stretch="Uniform"
         HorizontalAlignment="Stretch"
         VerticalAlignment="Stretch">

        <Grid Focusable="True"
              Height="Auto"
              Width="100%">
        <!-- 剩余Grid内容保持不变 -->
        </Grid>
</Viewbox>

这样修改后，Viewbox依然会按Uniform模式缩放内容以适配分辨率和缩放，同时Grid的占位列能正常工作，实现最后两列靠右对齐、第3列与第5列之间留空白的预期效果。

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