在保持拉伸的同时对齐视图框答案

【问题标题】：Align a viewbox while maintaining stretch在保持拉伸的同时对齐视图框
【发布时间】：2017-09-08 11:10:37
【问题描述】：

我有一个网格（见下图），其中包含一些文本（在另一个网格中（粉色区域））和一个 Datagrid，其中包含几行分类数据（蓝色区域）。

蓝色区域始终位于底部并具有固定高度并且工作正常。然而，粉红色的网格位于视图框内，因此它会根据屏幕/浏览器的大小进行拉伸。拉伸按我想要的方式工作，但我想将视图框与左上角对齐。问题是如果我将视图框对齐到左上角，拉伸就消失了。

到目前为止我尝试了什么..

拉伸可以，但未对齐：

<Border BorderThickness="1" BorderBrush="Black">
    <Grid Background="Gold">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <Viewbox Grid.Row="0">
            <Grid Background="HotPink">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="20"/>
                    <ColumnDefinition Width="20"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="20"/>
                    <RowDefinition Height="20"/>
                </Grid.RowDefinitions>

                <TextBlock Grid.Column="0" Grid.Row="0" Text="A"/>
                <TextBlock Grid.Column="1" Grid.Row="0" Text="B"/>
                <TextBlock Grid.Column="0" Grid.Row="1" Text="C"/>
                <TextBlock Grid.Column="1" Grid.Row="1" Text="D"/>
            </Grid>
        </Viewbox>
        <Rectangle Grid.Row="1" Height="50" HorizontalAlignment="Stretch" Fill="DeepSkyBlue"></Rectangle>
    </Grid>
</Border>

导致..

对齐没问题，但拉伸消失了：

<Border BorderThickness="1" BorderBrush="Black">
    <Grid Background="Gold">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <Viewbox Grid.Row="0" HorizontalAlignment="Left" VerticalAlignment="Top">
            <Grid Background="HotPink">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="20"/>
                    <ColumnDefinition Width="20"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="20"/>
                    <RowDefinition Height="20"/>
                </Grid.RowDefinitions>

                <TextBlock Grid.Column="0" Grid.Row="0" Text="A"/>
                <TextBlock Grid.Column="1" Grid.Row="0" Text="B"/>
                <TextBlock Grid.Column="0" Grid.Row="1" Text="C"/>
                <TextBlock Grid.Column="1" Grid.Row="1" Text="D"/>
            </Grid>
        </Viewbox>
        <Rectangle Grid.Row="1" Height="50" HorizontalAlignment="Stretch" Fill="DeepSkyBlue"></Rectangle>
    </Grid>
</Border>

导致..

但我真正想要的是： （我希望上面的代码能够实现）

非常感谢任何帮助。

【问题讨论】：

标签： silverlight alignment viewbox

【解决方案1】：

显然问题的发生是因为此代码所在的UserControl 被加载到ScollViewer 中。

删除ScrollViewer（其实并不需要）后，Viewbox 的拉伸和对齐工作正常。

【讨论】：

【解决方案2】：

我首先想到的是：

<Viewbox Grid.Row="0" HorizontalAlignment="Left" VerticalAlignment="Stretch">
    ...
</Viewbox>

[编辑] 我测试了（Silverlight 4，IE11）两个版本：VerticalAlignment="Stretch" 和 VerticalAlignment="Top" ...并且两者都会产生您想要完成的视觉效果。不知道为什么VerticalAlignment="Top" 会得到不同的结果

【讨论】：

感谢您的回复 Martin，我刚刚尝试了我放置的 WPF 项目中的代码，并且它在那里也可以正常工作。我想在这种情况下这不是代码问题。我会尝试找出我的设置是否有问题。

【解决方案3】：

只需将HorizontalAlignment="Left" 添加到您的第一个代码即可。

    <Border BorderThickness="1" BorderBrush="Black">
        <Grid Background="Gold">
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>

            <Viewbox Grid.Row="0" HorizontalAlignment="Left">
                <Grid Background="HotPink">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="20"/>
                        <ColumnDefinition Width="20"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="20"/>
                        <RowDefinition Height="20"/>
                    </Grid.RowDefinitions>

                    <TextBlock Grid.Column="0" Grid.Row="0" Text="A"/>
                    <TextBlock Grid.Column="1" Grid.Row="0" Text="B"/>
                    <TextBlock Grid.Column="0" Grid.Row="1" Text="C"/>
                    <TextBlock Grid.Column="1" Grid.Row="1" Text="D"/>
                </Grid>
            </Viewbox>
            <Rectangle Grid.Row="1" Height="50" 
HorizontalAlignment="Stretch" Fill="DeepSkyBlue"></Rectangle>
        </Grid>
    </Border>

【讨论】：