adding listview hides form background image Xamarin ios - ios

Question

I am working on Xamarin cross platform app.
I have have form where I am using form's BackgroundImage = "timelinebackground.png"; on constructor to set background image.
Its working on fine Android but when I check same in iOS it's not showing background image.
When I remove listview from xaml then its background image is showing in iOS as well.
here is 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"
x:Class="BMTHomesApp.Views.Timeline">
<ContentPage.ToolbarItems>
<ToolbarItem Text="Logout" Order="Primary" Priority="0" Clicked="MenuItem_OnClicked"></ToolbarItem>
</ContentPage.ToolbarItems>
<StackLayout>
<ListView
x:Name="timelineListView"
ItemTapped="timelineListView_ItemTapped"
ItemsSource="{Binding .}"
RowHeight="75"
SeparatorVisibility="None">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid ColumnSpacing="0" RowSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="25" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Label HorizontalOptions="Center" Text="{Binding ActualStartDate}" TextColor="#0073ae" />
<Label Grid.Column="2" Margin="20,0" FontSize="Medium" Text="{Binding StageName}" TextColor="#ffffff"/>
<!--<Label
Grid.Row="1"
Grid.Column="2"
Margin="20,0"
FontSize="Small"
Text="Please add some desc text in api" TextColor="#ffffff"/>-->
<BoxView
Grid.RowSpan="2"
Grid.Column="1"
BackgroundColor="#ffffff"
HorizontalOptions="Center"
VerticalOptions="Fill"
WidthRequest="1" />
<Image Grid.Column="1" Source="Bullet.png" HeightRequest="25" WidthRequest="25" />
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<DatePicker x:Name="DatePickerTimeline" IsVisible="False"></DatePicker>
</StackLayout>
</ContentPage>
and code behind:
public partial class Timeline : ContentPage
{
public Timeline ()
{
InitializeComponent ();
NavigationPage.SetBackButtonTitle(this, "");
Title = "TIMELINE";
BackgroundImage = "timelinebackground.png";
var constructionStages = GetConstructionStages();
if (!string.IsNullOrEmpty(constructionStages.Result.Error))
{
DisplayAlert("Error", constructionStages.Result.Error, "Ok");
}
else
{
timelineListView.ItemsSource = constructionStages.Result.ConstructionStages;
}
}
private void timelineListView_ItemTapped(object sender, ItemTappedEventArgs e)
{
var selectedItem = (ConstructionStages) e.Item;
if (!string.IsNullOrEmpty(selectedItem.ActualStartDate))
{
DateTime dateTimeStart;
if (DateTime.TryParse(selectedItem.ActualStartDate, out dateTimeStart))
{
DatePickerTimeline.MinimumDate = dateTimeStart;
}
}
if (!string.IsNullOrEmpty(selectedItem.ActualCompletionDate))
{
DateTime dateTimeEnd;
if (DateTime.TryParse(selectedItem.ActualCompletionDate, out dateTimeEnd))
{
DatePickerTimeline.MaximumDate = dateTimeEnd;
}
}
if (!string.IsNullOrEmpty(selectedItem.ActualStartDate) ||
!string.IsNullOrEmpty(selectedItem.ActualCompletionDate))
{
DatePickerTimeline.Format = "MM-dd-yyyy";
DatePickerTimeline.BackgroundColor = Color.FromHex("#ffffff");
//DatePickerTimeline.IsVisible = true;
DatePickerTimeline.Focus();
}
else
{
timelineListView.SelectedItem = null;
}
}
private async Task<ConstructionStagesResponse> GetConstructionStages()
{
ConstructionStageManager manager = new ConstructionStageManager();
var result = await manager.GetConstructionStages(Application.Current.Properties["SessionId"].ToString());
return result;
}
private async void MenuItem_OnClicked(object sender, EventArgs e)
{
HelperClasses.LogOut();
Application.Current.MainPage = new NavigationPage(new Login());
//Navigation.PushAsync(new Login());
}
}

Answer 1

You need to set your ListView's BackgroundColor property to transparent for the Page's background image to be shown:
<ListView BackgroundColor="Transparent">