【问题标题】:Viewbox interfering grid columns horizontal alignmentViewbox 干扰网格列水平对齐
【发布时间】:2023-02-11 01:15:01
【问题描述】:

我使用的 Viewbox 的 Stretch 设置为 Uniform,以便当用户在操作系统中的屏幕分辨率和比例之间切换时不会扭曲内容。

在 Viewbox 中我有一个网格。 网格只有 1 行和一些列。

<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>

第一列是否显示取决于条件。在这里,我将仅向您展示第一列不可见的用例。

以上代码产生以下结果(第一列不可见):

而我想要的,预期的结果是:

我希望最后两列(5 和 6)水平对齐到最右边,并在第 3 列和第 5 列之间有一个额外的空白空间。请注意,第 4 列用作虚拟列来制作这个额外的空白区域,其宽度设置为列定义中的“*”。

我怎样才能得到预期的结果?如果我删除 Viewbox,那么我会得到预期的结果,但我想在添加 Viewbox 的情况下获得相同的结果。我需要 viewbox 作为根,我不想删除它,因为使用它我使内容独立于屏幕分辨率和缩放(Viewbox 自动执行)。

【问题讨论】:

    标签: c# wpf xaml .net-4.5 viewbox


    【解决方案1】:

    我认为您的网格需要一个明确的宽度。

    或者至少一旦我设置了它,事情就会变得更好。

    你没有向我们展示你的问题的最小复制品,所以我自己制作了一个。

    我为此使用了一些矩形。

    请注意,网格的大小是固定的,因此测量安排知道所有内容应该有多大才能使 * 正常工作。

    </Window.Resources>
        <Viewbox>
            <Grid Width="700">
                <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>
                <Rectangle Width="100" Height="50" Grid.Column="0"
                           Fill="Red" Margin="4"/>
                <Rectangle Width="100" Height="50" Grid.Column="1"
                           Fill="Red" Margin="4"/>
                <Rectangle Width="100" Height="50" Grid.Column="7"
                           Fill="Red" Margin="4"/>
            </Grid>
        </Viewbox>
    

    如果我缩小尺寸,它仍会保持比例:

    如果我然后将那个宽度从网格中取出:

    这张图片是在 900px 宽的窗口内使用相同的视图框和 700 宽的网格

    【讨论】:

    • 非常感谢您的宝贵时间。我将尝试一下,然后带着反馈回到这里。只有一个疑问:我看到您为网格指定了固定宽度,我想知道如果屏幕分辨率(宽度)小于或什至大于 700px 会发生什么情况?网格宽度会扩展以适应该父项的宽度吗?上面的代码位于嵌入到另一个控件中的 wpf 用户控件中。
    • 在我的概念验证中,viewbox 填满了窗口。这设置了视图框的大小。窗口内容宽度不是 700px。如果您没有固定的网格宽度,那么您需要固定的列宽。有些东西必须告诉布局一切应该是什么尺寸。
    • 如果您为网格设置固定宽度并且您的屏幕始终具有该宽度,则您的解决方案有效。但是如果屏幕可以改变它的宽度,我的意思是,宽度大于 700px 然后在右边留下一个额外的空间。如果您的屏幕宽度固定且始终相同,这可能是一个有效的解决方案。在我的情况下根本不起作用,我的屏幕可以有不同的宽度。
    • 我已经通过应用下面解释的内容解决了问题(而不是使用单个视图框作为根,而是将每个控件放在一个视图框(多个视图框)中的每一列上:stackoverflow.com/questions/33381736/…
    • “但如果屏幕可以改变其宽度,我的意思是,宽度大于 700 像素,那么右侧会留下一个额外的空间。”那不是真的@Willy。图片中的窗口是 850px 宽。 viewbox 将填充它所在的任何大小的容器。
    猜你喜欢
    • 1970-01-01
    • 2014-04-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-03-12
    • 2011-09-28
    • 2011-11-06
    • 1970-01-01
    相关资源
    最近更新 更多