Xamarin 表单 - TabbedPage 背景图像答案

【问题标题】：Xamarin Forms - TabbedPage background imageXamarin 表单 - TabbedPage 背景图像
【发布时间】：2020-08-23 22:19:50
【问题描述】：

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

【问题讨论】：

标签： xamarin xamarin.forms background tabbar tabbedpage

【解决方案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>

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

【讨论】：

【解决方案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

【讨论】：

是的，我知道我可以更改背景颜色，但我的主要问题是我想为整个标签页使用背景图片