我正在尝试为整个网格设置背景图像,而不仅仅是单行/列。设置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>
正如您在上面的代码中看到的那样,我试图添加,但所有这些都包含了&#34;卡片&#34;块。如何在整个网格后面设置它?
答案 0 :(得分:3)
这里有几种选择。
Image
Grid
第一个选项与您尝试的非常接近:将背景图片放在Grid
。
请注意,XAML是声明性的而非顺序的。仅仅因为您已将Grid.RowDefinitions
和Grid.ColumnDefinitions
放在Image
之后,这并不意味着他们不适用它。
您仍需在Grid.RowSpan="3"
标记中设置Grid.ColumnSpan="2"
和Image
。
只要Padding
中没有Grid
,此功能就会有效。如果您将Grid
定义为Padding
大于零,则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>