Xamarin Forms - TabbedPage background image

Question

I am trying to set background image on my tabbed page (this background is presented on the screen below). I want it to be on the whole page including tabbar not only on content page inside tabbed page container. After many hours I think it is impossible... :) [1]: https://i.stack.imgur.com/z8DWI.png

Answer 1

This is alternative way.

Using buttons instead of tabbed page.

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

On the TabbedPage template, set the tab to bottom with the code below.

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

And then remove the code in MainActivity.

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

After that, when you set the background to TabbedPage, it would set the tab bar as well.

  BackgroundColor="AliceBlue"

If you wanna Gradient Background, you could take the code in the link for reference. Gradient Background in Frame XAML Element