Question

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

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

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

拉伸是可以的，但没有对齐：

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

结果... enter image description here

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

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

结果... enter image description here

但我真正想要的是： （我希望上面的代码可以实现） enter image description here

非常感谢任何帮助。

Answer 1

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

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

Answer 2

我想到的第一件事是：

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

[编辑]我测试了（Silverlight 4，IE11）两个版本：VerticalAlignment="Stretch"和VerticalAlignment="Top" ......两者都会产生你想要完成的视觉效果。不确定为什么您使用VerticalAlignment="Top"

获得了不同的结果

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

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

3 个答案: