Question

Rectangle的宽度现在为0。如果我将ColumnDefinition设置为200或Rectangle中的宽度为200，那么我可以看到Rectangle。但是这位明星不能正常工作。

我正在尝试将Rectangle 1和3的宽度设置为40％宽度，将Rectangle 2设置为20％。

我的代码有什么问题？

        <Grid Grid.Row="1">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="2*"/>
            <ColumnDefinition Width="1*"/>
            <ColumnDefinition Width="2*"/>
        </Grid.ColumnDefinitions>

        <StackPanel Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Center" Orientation="Vertical" Margin="0,100,0,0">
            <StackPanel HorizontalAlignment="Stretch" Orientation="Horizontal">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="3*"/>
                        <ColumnDefinition Width="4*"/>
                        <ColumnDefinition Width="3*"/>
                    </Grid.ColumnDefinitions>

                    <Rectangle Grid.Column="0" Height="200" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Fill="Beige" StrokeThickness="2" Stroke="Red" />
                    <Rectangle Grid.Column="1" Height="200" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
                    <Rectangle Grid.Column="2" Height="200" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Fill="Beige" StrokeThickness="2" Stroke="Red" />
                </Grid>
            </StackPanel>
        </StackPanel>
    </Grid>

Answer 1

为什么你需要堆叠面板？你可以用网格做。

无论如何，StackPanel不会沿其方向伸展（即垂直堆叠面板不会垂直拉伸，水平堆叠面板也不会水平伸展）。

示例：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="100" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="1*"/>
        <ColumnDefinition Width="3*"/>
        <ColumnDefinition Width="1*"/>
    </Grid.ColumnDefinitions>
    <Grid
        Grid.Row="1"
        Grid.Column="1"
        Margin="0,100,0,0"
        Background="Aquamarine"
        >
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="3*"/>
            <ColumnDefinition Width="4*"/>
            <ColumnDefinition Width="3*"/>
        </Grid.ColumnDefinitions>

        <Rectangle Grid.Column="0" Height="200" Fill="Beige" StrokeThickness="2" Stroke="Red" />
        <Rectangle Grid.Column="1" Height="200"/>
        <Rectangle Grid.Column="2" Height="200" Fill="Beige" StrokeThickness="2" Stroke="Red" />

    </Grid>
</Grid>

注意：对于矩形，您不需要HorizontalAlignment="Stretch" VerticalAlignment="Stretch" - 默认情况下，它们会拉伸。无论如何，指定VerticalAlignment="Stretch"和Height="200"并不合理。

更新：您的初始代码中存在问题：

<StackPanel Orientation="Vertical" ... >
    <StackPanel Orientation="Horizontal" ...>
        <Grid>

网格试图占用所有可用空间。有什么空间？您有两个嵌套的堆叠面板：一个不垂直拉伸而另一个不水平拉伸。因此，未指定Height或Width的网格没有可用空间。如果从矩形中删除Height="200"，则可能会看到网格为零。

Stackpanel内的网格不会伸展

1 个答案: