如何使用VerticalOptions FillAndExpand使Xamarin图像垂直扩展

时间:2019-05-26 23:03:36

标签: xamarin xamarin.forms

我正在学习下面的Xamarin代码,我想使每个图像都满足其要求。我已经尝试过VerticalOptions="FillAndExpand"。 但这是行不通的。如何解决?

<Grid x:Name="initialpagelayout" VerticalOptions="StartAndExpand" >
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Image VerticalOptions="FillAndExpand" BackgroundColor="Red" Grid.Row="0" Grid.Column="0" x:Name="MyIcon01"></Image>
            <Image BackgroundColor="Blue" Grid.Row="0" Grid.Column="1" x:Name="MyIcon02"></Image>
            <Image BackgroundColor="Green" Grid.Row="0" Grid.Column="2" x:Name="MyIcon03"></Image>
            <Image BackgroundColor="Yellow" Grid.Row="1" Grid.Column="0" x:Name="MyIcon04"></Image>
            <Image BackgroundColor="Pink" Grid.Row="1" Grid.Column="1" x:Name="MyIcon05"></Image>
            <Image BackgroundColor="Red" Grid.Row="1" Grid.Column="2" x:Name="MyIcon06"></Image>
            <Image Grid.Row="2" Grid.Column="0" x:Name="MyIcon07"></Image>
            <Image Grid.Row="2" Grid.Column="1" x:Name="MyIcon08"></Image>
            <Image Grid.Row="2" Grid.Column="2" x:Name="MyIcon09"></Image>
            <Image Grid.Row="3" Grid.Column="0" x:Name="MyIcon10"></Image>
            <Image Grid.Row="3" Grid.Column="1" x:Name="MyIcon11"></Image>
            <Image Grid.Row="3" Grid.Column="2" x:Name="MyIcon12"></Image>
        </Grid>

image

UPDATE1

我将Aspect="Fill"添加到每个<Image>中,得到以下内容: update1

效果很好,但我注意到第一行上方有一个空白,但是我那里没有任何占位符,

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Guru.Pwa.Mobile.Initial">
    <ContentPage.Content>
        <Grid x:Name="initialpagelayout" VerticalOptions="StartAndExpand" >
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Image Aspect="Fill" Grid.Row="0" Grid.Column="0" x:Name="MyIcon01"></Image>
            <Image Aspect="Fill" Grid.Row="0" Grid.Column="1" x:Name="MyIcon02"></Image>
            <Image Aspect="Fill" Grid.Row="0" Grid.Column="2" x:Name="MyIcon03"></Image>
            <Image Aspect="Fill" Grid.Row="1" Grid.Column="0" x:Name="MyIcon04"></Image>
            <Image Aspect="Fill" Grid.Row="1" Grid.Column="1" x:Name="MyIcon05"></Image>
            <Image Aspect="Fill" Grid.Row="1" Grid.Column="2" x:Name="MyIcon06"></Image>
            <Image Aspect="Fill" Grid.Row="2" Grid.Column="0" x:Name="MyIcon07"></Image>
            <Image Aspect="Fill" Grid.Row="2" Grid.Column="1" x:Name="MyIcon08"></Image>
            <Image Aspect="Fill" Grid.Row="2" Grid.Column="2" x:Name="MyIcon09"></Image>
            <Image Aspect="Fill" Grid.Row="3" Grid.Column="0" x:Name="MyIcon10"></Image>
            <Image Aspect="Fill" Grid.Row="3" Grid.Column="1" x:Name="MyIcon11"></Image>
            <Image Aspect="Fill" Grid.Row="3" Grid.Column="2" x:Name="MyIcon12"></Image>
        </Grid>
    </ContentPage.Content>
</ContentPage>

如何删除它?

0 个答案:

没有答案