MasterDetailPage background image not displaying in IOS in xamarin.forms

Question

I am using MasterDetailPage in Xamarin.Forms. I have set BackgroundImage property in OnAppearing() method. It works fine in android. But, In IOS image doesn't display.

My Code : XAML

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         x:Class="EzySales.Views.MainPageMaster"
         Title="Master" >
<StackLayout VerticalOptions="FillAndExpand">
    <ListView x:Name="MenuItemsListView" WidthRequest="200"
          HasUnevenRows="true"
          ItemsSource="{Binding MenuItems}"
          SeparatorColor="White">
        <ListView.Header>
            <Grid >
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="10"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="10"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="30"/>
                    <RowDefinition Height="80"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="10"/>
                </Grid.RowDefinitions>
                <Image Source="logo.png" Grid.Row="1" Grid.Column="1"></Image>
            </Grid>
        </ListView.Header>
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell Grid.Row="2">
                    <StackLayout Padding="15,10" Orientation="Horizontal">
                        <Image Source="{Binding Icon}"
                                WidthRequest="30"
                                HeightRequest="30" Margin="0,0,5,0"
                                VerticalOptions="Center" />
                        <Label VerticalOptions="FillAndExpand" 
                            VerticalTextAlignment="Center" 
                            HorizontalTextAlignment="Center"                     
                            Text="{Binding Title}" 
                            TextColor="White"                    
                            FontSize="16" FontAttributes="Bold" />
                    </StackLayout>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</StackLayout>

MainPageMaster.xaml.cs

 protected override void OnAppearing()
    {
        this.BackgroundImage = "masterpagebg.png";           
    }

Image is available in Resource Folder.

Answer 1

I have also face same issue and solved. Try this Hope it will Help..

You could use a Relative layout to achieve the results

<RelativeLayout>
    <Image Source="masterpagebg.png" Opacity="1"
                RelativeLayout.WidthConstraint=
                  "{ConstraintExpression Type=RelativeToParent, Property=Width}"
                RelativeLayout.HeightConstraint=
                  "{ConstraintExpression Type=RelativeToParent, Property=Height}"/>

       <ListView RelativeLayout.WidthConstraint=
              "{ConstraintExpression Type=RelativeToParent, Property=Width}"
            RelativeLayout.HeightConstraint=
              "{ConstraintExpression Type=RelativeToParent, Property=Height}" x:Name="MenuItemsListView" WidthRequest="200"
      HasUnevenRows="true"
      ItemsSource="{Binding MenuItems}"
      SeparatorColor="White">
    <ListView.Header>
        <Grid >
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="10"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="10"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="30"/>
                <RowDefinition Height="80"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="10"/>
            </Grid.RowDefinitions>
            <Image Source="logo.png" Grid.Row="1" Grid.Column="1"></Image>
        </Grid>
    </ListView.Header>
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell Grid.Row="2">
                <StackLayout Padding="15,10" Orientation="Horizontal">
                    <Image Source="{Binding Icon}"
                            WidthRequest="30"
                            HeightRequest="30" Margin="0,0,5,0"
                            VerticalOptions="Center" />
                    <Label VerticalOptions="FillAndExpand" 
                        VerticalTextAlignment="Center" 
                        HorizontalTextAlignment="Center"                     
                        Text="{Binding Title}" 
                        TextColor="White"                    
                        FontSize="16" FontAttributes="Bold" />
                </StackLayout>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>
  </RelativeLayout>

Answer 2

You should check if the image is set to the iOS project as BundleResource, if not you should set it as so. I myself had some troubles with this.