屏幕宽度为一半的布局（包含图像）

Question

我想要一种布局，其中两个图像（其宽度与屏幕尺寸有关）并排放置，并自动填充其中没有剪切或居住空间的容器。

我使用了网格视图，但是该行往往会在调整大小之前获取图像的高度，从而在图像的上方和下方保留一个空间。

            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="5*" x:Name="colFirst"/>
                    <ColumnDefinition Width="5*" x:Name="colSecond" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <Image Source="avatar.png" Grid.Column="0" Grid.Row="0"/>
                <Label Text="Item1" Grid.Column="0" Grid.Row="1"/>

                <Image Source="avatar.png" Grid.Column="1" Grid.Row="0"/>
                <Labe Text="Item2" Grid.Column="1" Grid.Row="1"/>
            </Grid>

图像是正方形图像。我怎么能做到这就是Xamarin？

Answer 1

设置宽度变化时图像的高度。这可以在代码隐藏或XAML中完成。这是在XAML中执行此操作的示例：

<Grid BackgroundColor="Black" 
      VerticalOptions="Center">

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="5*" x:Name="colFirst"/>
        <ColumnDefinition Width="5*" x:Name="colSecond" />
    </Grid.ColumnDefinitions>

    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>

    <Image x:Name="img1" Grid.Column="0" Grid.Row="0"
           HeightRequest="{Binding Width, Source={x:Reference img1}}"
           Source="stackoverflow.png" />

    <Label Grid.Column="0" Grid.Row="1"
           HorizontalTextAlignment="Center"
           Text="Item1" 
           TextColor="White" />

    <Image x:Name="img2" Grid.Column="1" Grid.Row="0"
           HeightRequest="{Binding Width, Source={x:Reference img2}}"
           Source="stackoverflow.png" />

    <Label Grid.Column="1" Grid.Row="1"
           HorizontalTextAlignment="Center"
           Text="Item2"
           TextColor="White" />

</Grid>