Question

我正在尝试在标签页上设置背景图像（该背景显示在下面的屏幕上）。我希望它不仅在选项卡式页面容器内的内容页面上在包括选项卡栏的整个页面上。很多小时后，我认为这是不可能的... :) [1]：https://i.stack.imgur.com/z8DWI.png

Answer 1

这是另一种方式。

使用按钮代替标签页。

xaml

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             xmlns:d="http://xamarin.com/schemas/2014/forms/design" 
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core" 
             ios:Page.UseSafeArea="True"
             mc:Ignorable="d" 
             x:Class="test_view.MainPage">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>   
        <Image x:Name="BgImage" Aspect="AspectFill" Source="bg100.jpg" Grid.Row="0" />
        <!-- you can put contents here -->
        <StackLayout Grid.Row="0"
                    Orientation="Horizontal" HorizontalOptions="FillAndExpand" VerticalOptions="End"
                              >
            <Button FontFamily="{DynamicResource MaterialFontFamily}"
            Text="&#xF1514;" FontSize="Large" TextColor="White"
                    HorizontalOptions="CenterAndExpand" 
BackgroundColor="Transparent" />
            <Button FontFamily="{StaticResource MaterialFontFamily}"
                    Text="&#xF158C;" FontSize="Large" TextColor="White"
             HorizontalOptions="CenterAndExpand" BackgroundColor="Transparent" />
            <Button FontFamily="{DynamicResource MaterialFontFamily}"
            Text="&#xF1543;" FontSize="Large" TextColor="White"
                    HorizontalOptions="CenterAndExpand" BackgroundColor="Transparent"/>
        </StackLayout>
    </Grid>
</ContentPage>

cs

    protected override void OnAppearing()
    {
        base.OnAppearing();
        var inset = On<iOS>().SafeAreaInsets();
        BgImage.Margin = new Thickness(-inset.Left, -inset.Top, -inset.Right, -inset.Bottom);
    }
}

Answer 2

在TabbedPage模板上，使用以下代码将标签设置为底部。

<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms" 
xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
android:TabbedPage.ToolbarPlacement="Bottom">

然后在MainActivity中删除代码。

            TabLayoutResource = Resource.Layout.Tabbar;
        ToolbarResource = Resource.Layout.Toolbar;

之后，将背景设置为TabbedPage时，它也会同时设置标签栏。

  BackgroundColor="AliceBlue"

如果您想使用“渐变背景”，则可以将链接中的代码用作参考。 Gradient Background in Frame XAML Element

Xamarin表单-TabbedPage背景图像

2 个答案: