Question

我有一个包含图像的网格（顶部有2行，我将在稍后使用的机器人）和另一个包含4个单选按钮的网格。

当我调整大小时，如果网格的高度大于图像，我在图像周围有2个白色的行：

但如果高度较小，则图像显示不正确，我的按钮消失：

如何在屏幕上保留按钮并左右添加白色列以查看整个图像？

有我的代码：

<Grid Grid.Column="2">
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="auto"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="auto"/>
    </Grid.RowDefinitions>

    <Image Grid.Row="1"
           Source="{Binding Picture}"
           HorizontalAlignment="Stretch"
           VerticalAlignment="Stretch"/>

    <Grid Grid.Row="3">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <RadioButton Grid.Column="0" Grid.Row="0" Background="Red" Content="Point 1" IsChecked="{Binding SelectedPointIndex, ConverterParameter=1, Converter={StaticResource IndexBooleanConverter}}" />
        <RadioButton Grid.Column="1" Grid.Row="0" Background="Green" Content="Point 2" IsChecked="{Binding SelectedPointIndex, ConverterParameter=2, Converter={StaticResource IndexBooleanConverter}}"/>
        <RadioButton Grid.Column="1" Grid.Row="1" Background="Blue" Content="Point 3" IsChecked="{Binding SelectedPointIndex, ConverterParameter=3, Converter={StaticResource IndexBooleanConverter}}"/>
        <RadioButton Grid.Column="0" Grid.Row="1" Background="Yellow" Content="Point 4" IsChecked="{Binding SelectedPointIndex, ConverterParameter=4, Converter={StaticResource IndexBooleanConverter}}"/>
    </Grid>
</Grid>

Answer 1

对于图像集<RowDefinition Height="*"/>而不是<RowDefinition Height="auto"/>的行。如果您想在图像和单选按钮之间留出空格，我会看到您的其他行，将其高度设置为固定大小。

说明：＆＃39;自动＆＃39;保证网格行的高度等于子内容的高度。如果您希望动态调整通过父控件的大小调整内容的大小，则应使用＆＃39; N *＆＃39;，其中N - number。

例如：

 <Grid.RowDefinitions>
     <RowDefinition Height="*"/> <!-- 25% of the rest of space -->
     <RowDefinition Height="2*"/> <!-- 50% of the rest of space -->
     <RowDefinition Height="*"/> <!-- 25% of the rest of space -->
     <RowDefinition Height="auto"/> <!-- As result is static value. Height equals to height that's needed to display child content -->
 </Grid.RowDefinitions>

Answer 2

你有简单的布局问题。如果你想要一些东西来保证空间，使用Storyboard/ XIB，它优先于星星（星星正在分配剩余的空间，如果没有，它们什么也得不到）。

您需要以下布局：

Auto

和演示

调整图像大小使网格从窗口中移出

2 个答案: