xamarin.forms 中网格的背景图像

Question

我正在尝试为整个网格设置背景图像，而不仅仅是单行/列。设置BackgroundImage= "image.jpg" 可以在 android 上运行，但在 iOS 上它会显得拉伸。我附上了来自 android 端的屏幕截图，以便更清楚地了解它应该是怎样的。

代码

<?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="LoyaltyWorx.GridMenu"
             Title="Main Menu"
             >

    <Grid>
        <Image Source="grid.jpg"></Image>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="2*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="2*" />
        </Grid.ColumnDefinitions>
        <Label Text="Cards" TextColor="White" FontAttributes="Bold" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Grid.Row="0" Grid.Column="0" BackgroundColor="#1481BA"  Opacity="0.5" x:Name="CardTile"/>
        <Label Text="Transactions" TextColor="Black" FontAttributes="Bold" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Grid.Row="0" Grid.Column="1" BackgroundColor="#ede890" Opacity="0.5" x:Name="TransactionTile"/>
        <Label Text="Promotions" TextColor="White" FontSize="30" FontAttributes="Bold" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Grid.Row="1" Grid.Column="0" BackgroundColor="#1481BA" Grid.ColumnSpan="2" Opacity="0.7" x:Name="PromoTile"/>
        <Label Text="Settings" TextColor="Black" FontAttributes="Bold" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Grid.Row="2" Grid.Column="0" BackgroundColor="#ede890" Opacity="0.5" x:Name="SettingsTile" />
        <Label Text="My Profile" TextColor="White" FontAttributes="Bold" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Grid.Row="2" Grid.Column="1" BackgroundColor="#1481BA" Opacity="0.7" x:Name="ProfileTile"/>

    </Grid>

</ContentPage>

正如您在上面的代码中看到的，我尝试添加，但所做的只是将图像包含在“卡片”块中。如何将其设置在整个网格的后面？

Answer 1

这里有几个选项。

Grid 内的Image

第一个选项与您尝试的非常接近：将背景图像放在Grid 中。

请注意，XAML 是声明性的，而不是顺序的。仅仅因为您在Image 之后放置了Grid.RowDefinitions 和Grid.ColumnDefinitions，这并不意味着它们不适用于它。

您仍然需要在Image 标签中设置Grid.RowSpan="3" 和Grid.ColumnSpan="2"。

只要Grid 中没有Padding，这将起作用。如果您使用大于零的Padding 定义Grid，则Image 将不会延伸到整个父视图，而只会延伸到填充内的区域。这就引出了第二个选项：绝对布局。

使用AbsoluteLayout

使用AbsoluteLayout（请参阅文档here）（在某种程度上）您会更加灵活（但它有自己的怪癖）。基本上，您将Grid 包装在AbsoluteLayout 中，并将Image 放在Grid 后面。

<?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="LoyaltyWorx.GridMenu"
             Title="Main Menu">
    <AbsoluteLayout>
        <Image AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1" Source="grid.jpg" />
        <Grid AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1" BackgroundColor="Transparent" >
            <!-- Elided -->
        </Grid>
    </AbsoluteLayout>
</ContentPage>