xamarin.forms中网格的背景图像 [英] Background Image for grid in xamarin.forms

问题描述

我正在尝试为整个网格设置背景图像，而不仅仅是为单个行/列设置背景图像.设置BackgroundImage= "image.jpg"可以在android上使用，但在iOS上则显示为拉伸.我已附上了android方面的屏幕截图，以更加清晰地了解应如何设置.

I am trying to set a background image for my entire grid, not just for a single row/column. Setting BackgroundImage= "image.jpg" works on android but on iOS it appears stretched. I've attached a screenshot from the android side to be more clear of how it should be.

代码

<?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>

您可以在上面的代码中看到我尝试添加的内容，但是所有这些都包括将图像包含在"Cards"块中.如何将其设置在整个网格后面?

As you can see in the above code I've tried to add but all this does is include the image on the "Cards" block. How can I set it behind the entire grid?

推荐答案

您在这里有几个选择.

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

The first option is very close to what you tried: Placing the background image in the Grid.

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

Please note that XAML is declarative and not sequential. Just because you've placed the Grid.RowDefinitions and the Grid.ColumnDefinitions after the Image this does not mean that they don't apply to it.

您仍然必须在Image标签中设置Grid.RowSpan="3"和Grid.ColumnSpan="2".

You will still have to set Grid.RowSpan="3" and Grid.ColumnSpan="2" in the Image tag.

只要Grid中没有Padding，此功能将起作用.如果将Padding定义为大于零的Grid，则Image不会延伸到整个父视图，而只会延伸到填充内的区域.这将导致我们选择第二个选项:绝对布局.

This will work as long as there is no Padding in the Grid. If you define the Grid with a Padding greater zero the Image will not stretch to the whole parent view, but only the region within the padding. This leads us to the second option: Absolute layout.

带有AbsoluteLayout(请参阅文档这里)(在某种程度上)您会更加灵活(但它也有自己的怪癖).基本上，您将Grid包裹在AbsoluteLayout中，并将Image放在Grid后面.

With an AbsoluteLayout (see the docs here) you are (to some extent) a bit more flexible (but it comes with its own quirks). Basically you are wrapping the Grid in an AbsoluteLayout and place the Image behind the 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>

这篇关于xamarin.forms中网格的背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！