Xamarin - Expander inside ListView not showing properly on iOs - ios

Hello Im trying to use a Xamarin Toolkit Expander in a ViewCell of a ListView.
On android works as expected without any problem but on iOs looks like the ViewCell is not changing its size and the content of the expander is not usable.
It has a strange behaviour because if I scroll up enough to hide the header looks like the cell resizes itself and the content works fine but when clicking again the header the content hides but the cell keeps on the same size
Here is the xaml code
<ViewCell>
<Frame Margin="0,10,0,0" Padding="0">
<StackLayout Orientation="Horizontal" BackgroundColor="White" Padding="0">
<BoxView BackgroundColor="#FF9A31" HeightRequest="15" WidthRequest="15"/>
<behaviors:Expander Margin="10,0,10,0" HorizontalOptions="FillAndExpand" BackgroundColor="White" x:Name="Expander">
<behaviors:Expander.Header>
<StackLayout Orientation="Horizontal">
<Label Text="{Binding NombreCliente}" FontSize="25" TextColor="Gray"/>
<Image Source="adultos.png" HeightRequest="20" Margin="20,0,0,0">
<Image.Triggers>
<DataTrigger TargetType="Image"
Binding="{Binding Source={RelativeSource AncestorType={x:Type behaviors:Expander}}, Path=IsExpanded}"
Value="True">
<Setter Property="IsVisible"
Value="False" />
</DataTrigger>
</Image.Triggers>
</Image>
<Label Text="{Binding PaxAdultos}" x:Name="AdultsHeaderText" FontSize="20" VerticalOptions="CenterAndExpand" TextColor="Gray">
<Label.Triggers>
<DataTrigger TargetType="Label"
Binding="{Binding Source={RelativeSource AncestorType={x:Type behaviors:Expander}}, Path=IsExpanded}"
Value="True">
<Setter Property="IsVisible"
Value="False" />
</DataTrigger>
</Label.Triggers>
</Label>
<Image Source="ninos.png" HeightRequest="20">
<Image.Triggers>
<DataTrigger TargetType="Image"
Binding="{Binding Source={RelativeSource AncestorType={x:Type behaviors:Expander}}, Path=IsExpanded}"
Value="True">
<Setter Property="IsVisible"
Value="False" />
</DataTrigger>
</Image.Triggers>
</Image>
<Label Text="{Binding PaxNinos}" x:Name="NinosHeaderText" FontSize="20" VerticalOptions="CenterAndExpand" TextColor="Gray">
<Label.Triggers>
<DataTrigger TargetType="Label"
Binding="{Binding Source={RelativeSource AncestorType={x:Type behaviors:Expander}}, Path=IsExpanded}"
Value="True">
<Setter Property="IsVisible"
Value="False" />
</DataTrigger>
</Label.Triggers>
</Label>
<Image Source="bebe.png" HeightRequest="20">
<Image.Triggers>
<DataTrigger TargetType="Image"
Binding="{Binding Source={RelativeSource AncestorType={x:Type behaviors:Expander}}, Path=IsExpanded}"
Value="True">
<Setter Property="IsVisible"
Value="False" />
</DataTrigger>
</Image.Triggers>
</Image>
<Label Text="{Binding PaxBebes}" x:Name="BebesHeaderText" FontSize="20" VerticalOptions="CenterAndExpand" TextColor="Gray">
<Label.Triggers>
<DataTrigger TargetType="Label"
Binding="{Binding Source={RelativeSource AncestorType={x:Type behaviors:Expander}}, Path=IsExpanded}"
Value="True">
<Setter Property="IsVisible"
Value="False" />
</DataTrigger>
</Label.Triggers>
</Label>
<Image HeightRequest="20" Source="arrow_down.png" HorizontalOptions="EndAndExpand">
<Image.Triggers>
<DataTrigger TargetType="Image"
Binding="{Binding Source={RelativeSource AncestorType={x:Type behaviors:Expander}}, Path=IsExpanded}"
Value="True">
<Setter Property="Source"
Value="arrow_up.png" />
</DataTrigger>
</Image.Triggers>
</Image>
</StackLayout>
</behaviors:Expander.Header>
<behaviors:Expander.Content>
<StackLayout Orientation="Vertical" Padding="0,10">
<StackLayout Orientation="Horizontal">
<Image Source="adultos.png" HeightRequest="25" Margin="30,0,0,0" />
<ImageButton Source="menos.png" WidthRequest="20" BackgroundColor="Transparent" Margin="44,0" x:Name="menosAdultos" Clicked="OnLessAdults" CommandParameter="{Binding .}"/>
<Label x:Name="nAdultsText" Text="{Binding PaxAdultos}" FontSize="20" TextColor="Gray" />
<ImageButton Source="mas.png" WidthRequest="20" HeightRequest="15" BackgroundColor="Transparent" Margin="44,0" x:Name="masAdultos" Clicked="OnMoreAdults" CommandParameter="{Binding .}"/>
</StackLayout>
<StackLayout Orientation="Horizontal" Margin="0,10,0,0">
<Image Source="ninos.png" HeightRequest="25" Margin="30,0,0,0"/>
<ImageButton Source="menos.png" WidthRequest="20" BackgroundColor="Transparent" Margin="44,0" x:Name="menosNinos" Clicked="OnLessKids" CommandParameter="{Binding .}"/>
<Label x:Name="nKidsText" Text="{Binding PaxNinos}" FontSize="20" TextColor="Gray"/>
<ImageButton Source="mas.png" WidthRequest="20" HeightRequest="15" BackgroundColor="Transparent" Margin="44,0" x:Name="masNinos" Clicked="OnMoreKids" CommandParameter="{Binding .}"/>
</StackLayout>
<StackLayout Orientation="Horizontal" Margin="0,10,0,0">
<Image Source="bebe.png" HeightRequest="25" Margin="30,0,0,0"/>
<ImageButton Source="menos.png" WidthRequest="20" BackgroundColor="Transparent" Margin="44,0" x:Name="menosBebes" Clicked="OnLessBabies" CommandParameter="{Binding .}"/>
<Label x:Name="nBabiesText" Text="{Binding PaxBebes}" FontSize="20" TextColor="Gray"/>
<ImageButton Source="mas.png" WidthRequest="20" HeightRequest="15" BackgroundColor="Transparent" Margin="44,0" x:Name="masBebes" Clicked="OnMoreBabies" CommandParameter="{Binding .}"/>
</StackLayout>
<Button x:Name="ConfirmarButton" FontSize="12" Text="CONFIRMAR CLIENTE" HorizontalOptions="Center" Padding="10,0" TextColor="White" BackgroundColor="Black" Margin="0,10,0,0" Clicked="ConfirmarButton_Clicked" CommandParameter="{Binding .}"/>
</StackLayout>
</behaviors:Expander.Content>
</behaviors:Expander>
</StackLayout>
</Frame>
</ViewCell>
Isn't it weird that on android works withou any problem but on iOs i am getting this weird behaviour?

Related

toolbar items appear twice in a page in some ios devices xamarin.forms

i have created a cross platform app using xamarin.forms. i added some toolbar items to some pages but the problem is that they appear twice as in the following picture.
this is the code of ny page:
<?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="ALNahrainAlphaApp.Accounting"
xmlns:images="clr-namespace:ALNahrainAlphaApp;assembly=ALNahrainAlphaApp"
xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
ios:Page.UseSafeArea="true">
<ContentPage.ToolbarItems >
<ToolbarItem Order="Secondary"
Text="logout"
Priority="2"
Clicked="ToolbarItem_Clicked"
/>
<ToolbarItem Order="Secondary"
Text="View Total Income"
Priority="2"
Clicked="ToolbarItem_Clicked_1"
/>
</ContentPage.ToolbarItems>
<ContentPage.Resources>
<Style TargetType="Grid">
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="Selected">
<VisualState.Setters>
<Setter Property="BackgroundColor"
Value="#f4f0ec" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
</ContentPage.Resources>
<ContentPage.Content>
<AbsoluteLayout Padding="0" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<StackLayout BackgroundColor="White" AbsoluteLayout.LayoutBounds="0, 0, 1, 1" AbsoluteLayout.LayoutFlags="All">
<StackLayout HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" >
<SearchBar HorizontalOptions="FillAndExpand" x:Name="search" TextChanged="search_TextChanged"/>
<RefreshView x:Name="refresh" >
<CollectionView x:Name="registeredstdslist" SelectionChanged="registeredstdslist_SelectionChanged" SelectionMode="Single" >
<CollectionView.Header>
<Grid Padding="2" ColumnSpacing="1" RowSpacing="1">
<Grid.RowDefinitions>
<RowDefinition Height="35"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.4*"/>
<ColumnDefinition Width="0.5*"/>
<ColumnDefinition Width="0.5*"/>
<ColumnDefinition Width="0.3*"/>
<ColumnDefinition Width="0.2*"/>
<ColumnDefinition Width="0.3*"/>
</Grid.ColumnDefinitions>
<Label
Grid.Column="0"
Text="StdID"
TextColor="Black"
VerticalOptions="Center"
HorizontalOptions="Center"
LineBreakMode="TailTruncation"
/>
<Label
Grid.Column="1"
Text="Name"
TextColor="Black"
VerticalOptions="Center"
HorizontalOptions="Center"
LineBreakMode="TailTruncation"
/>
<Label
Grid.Column="2"
Text="Expected Date"
TextColor="Black"
VerticalOptions="Center"
HorizontalOptions="Center"
LineBreakMode="TailTruncation"
/>
<Label
Grid.Column="3"
Text="Edlevel"
TextColor="Black"
VerticalOptions="Center"
HorizontalOptions="Center"
LineBreakMode="TailTruncation"
/>
<Label
Grid.Column="4"
Text="Grade"
TextColor="Black"
VerticalOptions="Center"
HorizontalOptions="Center"
LineBreakMode="TailTruncation"
/>
<Label
Grid.Column="5"
Text="Status"
TextColor="Black"
VerticalOptions="Center"
HorizontalOptions="Center"
LineBreakMode="TailTruncation"
/>
</Grid>
</CollectionView.Header>
<CollectionView.ItemTemplate>
<DataTemplate >
<Grid ColumnSpacing="1" RowSpacing="0" Padding="9,0,0,0" >
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.4*"/>
<ColumnDefinition Width="0.5*"/>
<ColumnDefinition Width="0.5*"/>
<ColumnDefinition Width="0.3*"/>
<ColumnDefinition Width="0.2*"/>
<ColumnDefinition Width="0.3*"/>
</Grid.ColumnDefinitions>
<Label
Grid.Column="0"
Text="{Binding stdid}"
TextColor="Black"
VerticalOptions="Center"
HorizontalOptions="Center"
LineBreakMode="TailTruncation"
FontSize="13"
/>
<Label
Grid.Column="1"
Text="{Binding name}"
TextColor="Black"
VerticalOptions="Center"
HorizontalOptions="Center"
LineBreakMode="TailTruncation"
FontSize="13"
/>
<Label
Grid.Column="2"
Text="{Binding ExpectedDateofPayment}"
TextColor="Black"
VerticalOptions="Center"
HorizontalOptions="Center"
LineBreakMode="TailTruncation"
FontSize="13"
/>
<Label
Grid.Column="3"
Text="{Binding edlevel}"
TextColor="Black"
VerticalOptions="Center"
HorizontalOptions="Center"
LineBreakMode="TailTruncation"
FontSize="13"
/>
<Label
Grid.Column="4"
Text="{Binding grade}"
TextColor="Black"
VerticalOptions="Center"
HorizontalOptions="Center"
LineBreakMode="TailTruncation"
Padding="10"
FontSize="13"
/>
<Image
Grid.Column="5"
VerticalOptions="Center"
HorizontalOptions="Center"
HeightRequest="20"
WidthRequest="20"
>
<Image.Triggers>
<DataTrigger TargetType="Image" Binding="{Binding status}" Value="false" >
<Setter Property="Source" Value="{OnPlatform Android=redtik.png,iOS=redtik.png}"/>
</DataTrigger>
<DataTrigger TargetType="Image" Binding="{Binding status}" Value="true" >
<Setter Property="Source" Value="{OnPlatform Android=greentik.png, iOS=greentik.png}"/>
</DataTrigger>
</Image.Triggers>
</Image>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</RefreshView>
<StackLayout VerticalOptions="EndAndExpand" HorizontalOptions="FillAndExpand" Orientation="Horizontal" BackgroundColor="#0d98ba">
<StackLayout Style="{StaticResource ButtonNavigationBarStackLayoutStyle}" x:Name="stckAddStd">
<Image Margin="0,10,0,5" x:Name="imgAdd" Style="{StaticResource ButtonNavigationBarImageStyle}" />
</StackLayout>
<StackLayout Style="{StaticResource ButtonNavigationBarStackLayoutStyle}" x:Name="stckfilter">
<Image Margin="0,10,0,10" x:Name="imgfilter" Style="{StaticResource ButtonNavigationBarImageStyle}" />
</StackLayout>
<StackLayout Style="{StaticResource ButtonNavigationBarStackLayoutStyle}" x:Name="stckshare">
<Image Margin="0,10,0,10" x:Name="imgshare" Style="{StaticResource ButtonNavigationBarImageStyle}" />
</StackLayout>
</StackLayout>
</StackLayout>
</StackLayout>
<ContentView x:Name="popupLoadingView" BackgroundColor="Transparent" Padding="10, 0" IsVisible="false" AbsoluteLayout.LayoutBounds="0, 0, 1, 1" AbsoluteLayout.LayoutFlags="All">
<StackLayout VerticalOptions="Center" HorizontalOptions="Center">
<StackLayout Orientation="Vertical" HeightRequest="150" WidthRequest="200" BackgroundColor="Transparent">
<ActivityIndicator x:Name="activityIndicator" Margin="0,50,0,0" VerticalOptions="Center" HorizontalOptions="Center" Color="Black" WidthRequest="40" HeightRequest="40" ></ActivityIndicator>
</StackLayout>
</StackLayout>
</ContentView>
</AbsoluteLayout>
</ContentPage.Content>
</ContentPage>
in android nothing is wrong. but for some reason, in ios, the toolbar items are repeated. any suggestions. thanks in advance.

AppShell tabbar color changes on iOS when there is content behind it

I have the exact same issue as asked in this question. The tabbar changes color when there is content behind it. However, as stated in this question, if they remove the renderer then their problem stops. I currently do not have a renderer at all and still have this problem. The only part of my code that doesn't have this problem are pages that are not in the shell hierarchy and that are navigated to using the following line of code:
var search = new SearchList();
Navigation.PushAsync(search);
The pages that are navigated to using the style of the following lines of code have the tabbar issue:
await Shell.Current.GoToAsync($"//{nameof(MemberList)}");
The xaml and code behind for the different pages are the exact same. The only difference is one is defined in the appshell hierarchy(MemberList) and the other is not(SearchList) as seen below:
<Shell xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:SampleYE.Views"
Title="SampleYE"
x:Class="SampleYE.AppShell"
>
<!--
The overall app visual hierarchy is defined here, along with navigation.
https://learn.microsoft.com/xamarin/xamarin-forms/app-fundamentals/shell/
-->
<Shell.Resources>
<ResourceDictionary>
<Style x:Key="BaseStyle" TargetType="Element">
<Setter Property="Shell.BackgroundColor" Value="{StaticResource Primary}" />
<Setter Property="Shell.ForegroundColor" Value="{StaticResource Secondary}" />
<Setter Property="Shell.TitleColor" Value="{StaticResource Secondary}" />
<Setter Property="Shell.DisabledColor" Value="#AD94BB" />
<Setter Property="Shell.UnselectedColor" Value="{StaticResource Tertiary}" />
<Setter Property="Shell.TabBarBackgroundColor" Value="{StaticResource Primary}" />
<Setter Property="Shell.TabBarForegroundColor" Value="{StaticResource Secondary}"/>
<Setter Property="Shell.TabBarUnselectedColor" Value="{StaticResource Tertiary}"/>
<Setter Property="Shell.TabBarTitleColor" Value="{StaticResource Secondary}"/>
</Style>
<Style TargetType="TabBar" BasedOn="{StaticResource BaseStyle}" />
<Style TargetType="FlyoutItem" BasedOn="{StaticResource BaseStyle}" />
</ResourceDictionary>
</Shell.Resources>
<TabBar>
<ShellContent Route="StartupPage" Shell.FlyoutBehavior="Disabled" ContentTemplate="{DataTemplate local:StartupPage}" />
</TabBar>
<TabBar>
<Tab Title="Directory" Icon="icon_feed.png">
<ShellContent Route="MemberList" ContentTemplate="{DataTemplate local:MemberList}"/>
</Tab>
<Tab Title="Profile" Icon="icon_about.png">
<ShellContent Route="ProfilePage1" ContentTemplate="{DataTemplate local:ProfilePage1}" />
</Tab>
</TabBar>
<!--
If you would like to navigate to this content you can do so by calling
await Shell.Current.GoToAsync("//LoginPage");
-->
<TabBar>
<ShellContent Route="LoginPage1" Shell.FlyoutBehavior="Disabled" ContentTemplate="{DataTemplate local:LoginPage1}" />
</TabBar>
</Shell>
The definition of the pages with the issue are as follows:
<ContentPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="SampleYE.Views.MemberList">
<ContentPage.Content>
<ListView x:Name="listView" ItemSelected="OnItemSelected" IsGroupingEnabled="true">
<ListView.GroupHeaderTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Padding="5,0,0,0" VerticalOptions="StartAndExpand" Orientation="Vertical">
<Label Text="{Binding Title}" VerticalTextAlignment="Center" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.GroupHeaderTemplate>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout HorizontalOptions="StartAndExpand" Orientation="Horizontal">
<Image WidthRequest="44" HeightRequest="44" Source="{Binding Photo}" />
<StackLayout Padding="5,0,0,0" VerticalOptions="StartAndExpand" Orientation="Vertical">
<Label Text="{Binding Name}" VerticalTextAlignment="Center" Font="Medium" />
<Label Text="{Binding Title}" VerticalTextAlignment="Center" Font="Micro" />
</StackLayout>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentPage.Content>
</ContentPage>
<ContentPage.Content>
<Grid RowDefinitions="Auto">
<ScrollView Grid.Row="0" >
<Grid RowDefinitions="Auto,Auto,Auto,Auto" ColumnDefinitions="*,*" VerticalOptions="CenterAndExpand"
RowSpacing="25">
<Frame Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" BorderColor="{StaticResource Secondary}"
VerticalOptions="Start" HorizontalOptions="Center" WidthRequest="150" HeightRequest="150"
CornerRadius="75" HasShadow="False" Padding="0" IsClippedToBounds="True">
<Image Source="Profile" Aspect="AspectFill"/>
</Frame>
<Button Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2"
TextColor="{StaticResource Primary}" BackgroundColor="{StaticResource Secondary}"
HeightRequest="54" WidthRequest="54" CornerRadius="27" TranslationX="65"
ImageSource="Camera" HorizontalOptions="Center" VerticalOptions="End"/>
<Frame Grid.Row="2" Grid.ColumnSpan="2" IsClippedToBounds="True"
Margin="20,20,20,0" CornerRadius="15" Padding="0,20,0,20" >
<Grid RowDefinitions="*,*,*" ColumnDefinitions="*,*,*,*" RowSpacing="12" ColumnSpacing="5">
<Label Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" HorizontalTextAlignment="Center"
Text="Calvin"/>
<Label Grid.Row="0" Grid.Column="2" Grid.ColumnSpan="2" HorizontalTextAlignment="Center"
Text="Carter"/>
<Label Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" HorizontalTextAlignment="Center"
Text="Ace"/>
<Label Grid.Row="1" Grid.Column="2" Grid.ColumnSpan="2" HorizontalTextAlignment="Center"
Text="Wrecking Ball"/>
<Label Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" HorizontalTextAlignment="Center"
Text="Spring"/>
<Label Grid.Row="2" Grid.Column="2" Grid.ColumnSpan="2" HorizontalTextAlignment="Center"
Text="2014"/>
</Grid>
</Frame>
<Frame Grid.Row="3" Grid.ColumnSpan="2" IsClippedToBounds="False"
Margin="20,20,20,0" CornerRadius="15" Padding="0,20,0,45" >
<Grid RowDefinitions="*,Auto,Auto,*" ColumnDefinitions="*,*,*,*" RowSpacing="20" ColumnSpacing="5" >
<Label Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="4" HorizontalTextAlignment="Center"
Text="02/01/1994"/>
<Label Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="4" HorizontalTextAlignment="Center"
Text="Wreckingball14"/>
<Label Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" HorizontalTextAlignment="Center"
Text="CCC#blackhousedevelopers.com"/>
<Label Grid.Row="2" Grid.Column="2" Grid.ColumnSpan="2" HorizontalTextAlignment="Center"
Text="Wrecking Ball"/>
<Label Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2" HorizontalTextAlignment="Center"
Text="Spring"/>
<Label Grid.Row="3" Grid.Column="2" Grid.ColumnSpan="2" HorizontalTextAlignment="Center"
Text="2014"/>
</Grid>
</Frame>
<Grid
Grid.Row="4" Grid.ColumnSpan="2" IsClippedToBounds="False"
Margin="20,0,20,0" Padding="0,20,0,20"
RowDefinitions="Auto,Auto" ColumnDefinitions="*,*" RowSpacing="20" >
<Frame IsClippedToBounds="true" Grid.Row="0" Grid.ColumnSpan="2"
Padding="0"
CornerRadius="15">
<Editor HeightRequest="70" x:Name="interestEntry"
BackgroundColor="{StaticResource Primary}" TextColor="{StaticResource Secondary}"
Placeholder="Interests (i.e. UFC, Fishing, Investing etc;)"
PlaceholderColor="{StaticResource Secondary}"/>
</Frame >
<Frame IsClippedToBounds="true" Grid.Row="1" Grid.ColumnSpan="2"
Padding="0"
CornerRadius="15">
<Editor HeightRequest="140" x:Name="bioEntry"
BackgroundColor="{StaticResource Primary}" TextColor="{StaticResource Secondary}"
Placeholder="Biography (A little information about yourself)"
PlaceholderColor="{StaticResource Secondary}"/>
</Frame>
</Grid>
</Grid>
</ScrollView>
</Grid>
</ContentPage.Content>
The fix to this was updating my ios project to a newer version. they fixed it in the update.

Xamarin.Forms CollectionView GridItemsLayout same height elements

How do I make the CollectionView render all items with the same height while using a GridItemsLayout on iOS? It already works on Android that all elements in a row gets the same height but on iOS they are squished vertically in the center of the row.
This is how it currently looks on iOS (how it not should be..):
And this is how it currently looks on Android (how it also should be on iOS - all elements are scaled to the same height in the same row):
As of now, this is how my XAML looks like:
<CollectionView Grid.Row="1" x:Name="DataListView" ItemSizingStrategy="MeasureAllItems" ItemsSource="{Binding Data}" IsGrouped="False" ItemTemplate="{StaticResource EntryTemplate}"
Header="{Binding Header}" Footer="{Binding Footer}" BackgroundColor="{DynamicResource DarkBackgroundColor}">
<CollectionView.ItemsLayout>
<!-- Span is set in OnSizeAllocated to make this "dynamic" -->
<GridItemsLayout x:Name="GridItemsLayout" Orientation="Vertical" Span="1" />
</CollectionView.ItemsLayout>
<CollectionView.HeaderTemplate>
<DataTemplate x:DataType="x:String">
<Grid Padding="10,20">
<Label Text="{Binding}" TextColor="{DynamicResource TextColor}" FontAttributes="Bold" HorizontalTextAlignment="Center" LineBreakMode="WordWrap" />
</Grid>
</DataTemplate>
</CollectionView.HeaderTemplate>
<CollectionView.FooterTemplate>
<DataTemplate x:DataType="x:String">
<Grid Padding="{OnPlatform iOS=20 30 20 20, Default=20}">
<Label Text="{Binding}" TextColor="{DynamicResource LightTextColor}" FontSize="Micro" HorizontalTextAlignment="Center" LineBreakMode="WordWrap" />
</Grid>
</DataTemplate>
</CollectionView.FooterTemplate>
</CollectionView>
This is my entry data template XAML:
<DataTemplate x:Key="EntryTemplate" x:DataType="data:Entry">
<Grid BackgroundColor="Red" VerticalOptions="FillAndExpand" Margin="0">
<Frame WidthRequest="{Binding Converter={StaticResource FlowColumnWidthConverter}, ConverterParameter=324}" BackgroundColor="{DynamicResource DarkerBackgroundColor}"
BorderColor="{Binding IsActive, Converter={StaticResource ActiveToColorConverter}}" HorizontalOptions="Center" Margin="8" Padding="10" CornerRadius="5">
<Frame.GestureRecognizers>
<TapGestureRecognizer Tapped="OnChecklistElementTapped" />
</Frame.GestureRecognizers>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Image Grid.Row="0" Grid.Column="0" Grid.RowSpan="4" Source="{Binding Type, Converter={StaticResource TypeToEmbeddedImageConverter}}" WidthRequest="32" HeightRequest="32" Margin="4" />
<Label Grid.Row="0" Grid.Column="1" Text="{Binding Name}" FontAttributes="Bold" LineBreakMode="TailTruncation" VerticalOptions="Start" />
<Label Grid.Row="1" Grid.Column="1" Text="{Binding Region}" FontSize="12" LineBreakMode="TailTruncation" VerticalOptions="Start" Margin="0,-6,0,0" />
<Label Grid.Row="2" Grid.Column="1" Text="{Binding AdditionalData}" TextType="Html" FontSize="12" LineBreakMode="WordWrap" Margin="0"
IsVisible="{Binding AdditionalData, Converter={StaticResource EmptyToVisibilityConverter}}" InputTransparent="True" />
<Label Grid.Row="3" Grid.Column="1" Text="{Binding Description}" FontSize="12" LineBreakMode="WordWrap"
IsVisible="{Binding Description, Converter={StaticResource EmptyToVisibilityConverter}}" />
<Switch Grid.Row="0" Grid.Column="2" Grid.RowSpan="2" IsToggled="{Binding IsDone}" HorizontalOptions="Center" VerticalOptions="Center" />
<StackLayout Grid.Row="2" Grid.Column="2" Grid.RowSpan="2" Orientation="Horizontal" Spacing="12" HorizontalOptions="Center" VerticalOptions="Start" Margin="0,4,0,4">
<controls:TintedImageButton Source="Details.png" Clicked="OnNavigateToDetailsButtonClicked" HeightRequest="32" WidthRequest="32"
IsVisible="{Binding Details, Converter={StaticResource EmptyToVisibilityConverter}}"
HorizontalOptions="Center" BackgroundColor="Transparent" />
<controls:TintedImageButton Source="Map.png" Clicked="OnNavigateToMapButtonClicked" HeightRequest="32" WidthRequest="32"
HorizontalOptions="Center" BackgroundColor="Transparent" IsVisible="{x:Static resources:Metadata.MAP_ENABLED}" />
</StackLayout>
</Grid>
</Frame>
</Grid>
</DataTemplate>
And this is my code behind (where I set how many columns there should be):
protected override void OnSizeAllocated(double width, double height)
{
base.OnSizeAllocated(width, height);
GridItemsLayout.Span = Convert.ToInt32(Math.Floor(width / 340d));
}
Anyone has an idea, why this is looks different on iOS in the first place and what I should look up to fix this problem?

BoxView not visible in iOS

I created the following BoxView in my App.xaml (as a separator)...
<Style x:Key="BoxViewGray" TargetType="BoxView">
<Setter Property="HeightRequest" Value="0.2"/>
<Setter Property="Color" Value="Gray"/>
</Style>
...and use it like so in my Page:
<BoxView Style="{StaticResource BoxViewGray}" />
Straight forward and it works out quite fine with Android (Release & Debug) though when I debug the iOS Solution, it's not visible. Maybe as an additional info: I don't have a physical Mac for debugging but use Macincloud instead of. Don't have a physical device (iPhone etc) either.
Update: The complete XAML code of the page:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:vm="clr-namespace:ErzengelMichael.ViewModels"
x:Class="ErzengelMichael.Views.EinstellungenPage"
Title="{Binding Rosenkranz[0].TabBarTitleSettings}" >
<ContentPage.BindingContext>
<vm:RosenkranzViewModel />
</ContentPage.BindingContext>
<ContentPage.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0.1" Color="Purple" />
<GradientStop Offset="0.9" Color="DarkSlateBlue" />
</LinearGradientBrush>
</ContentPage.Background>
<ScrollView>
<StackLayout Padding="10" >
<StackLayout Padding="5">
<BoxView Style="{StaticResource BoxViewGray}" />
<Label Text="{Binding Rosenkranz[0].SettingsText}"
HorizontalOptions="Center" FontSize="24" TextColor="White"
BackgroundColor="Transparent" Margin="0,0,0,5" />
<BoxView Style="{StaticResource BoxViewGray}" />
</StackLayout>
<StackLayout Orientation="Vertical" Padding="10" >
<StackLayout HorizontalOptions="Center" Orientation="Horizontal" Spacing="20" Padding="10">
<ImageButton CornerRadius="10" HeightRequest="80" BackgroundColor="Transparent" CommandParameter="French"
Command="{Binding ChangeLanguageCommand}" Source="france.jpg" VerticalOptions="Center" />
<ImageButton CornerRadius="10" HeightRequest="80" BackgroundColor="Transparent" CommandParameter="German"
Command="{Binding ChangeLanguageCommand}" Source="germany.jpg" VerticalOptions="Center" />
</StackLayout>
<StackLayout HorizontalOptions="Center" Orientation="Horizontal" Spacing="20" Padding="10" >
<ImageButton CornerRadius="10" HeightRequest="80" BackgroundColor="Transparent"
CommandParameter="English" Command="{Binding ChangeLanguageCommand}" Source="usa.jpg" VerticalOptions="Center" />
<ImageButton CornerRadius="10" HeightRequest="80" BackgroundColor="Transparent" CommandParameter="Spanish"
Command="{Binding ChangeLanguageCommand}" Source="spain.jpg" VerticalOptions="Center" />
</StackLayout>
<StackLayout HorizontalOptions="Center" Orientation="Horizontal" Spacing="20" Padding="10" >
<ImageButton CornerRadius="10" HeightRequest="80" BackgroundColor="Transparent" CommandParameter="Italian"
Command="{Binding ChangeLanguageCommand}" Source="italy.jpg" VerticalOptions="Center" />
<ImageButton CornerRadius="10" HeightRequest="80" BackgroundColor="Transparent" CommandParameter="Portugese"
Command="{Binding ChangeLanguageCommand}" Source="portugal.jpg" VerticalOptions="Center" />
</StackLayout>
</StackLayout>
<!--#region IMPRESSUM -->
<StackLayout Spacing="15" Padding="10" HorizontalOptions="Center" VerticalOptions="Center">
<BoxView Style="{StaticResource BoxViewGray}"/>
<Label HorizontalOptions="Center" HorizontalTextAlignment="Center" Text="Development and Design by xxx#web.de" TextColor="White" />
<Label HorizontalOptions="Center" Text="Version 1.0" TextColor="White" FontAttributes="Italic"/>
<Label HorizontalOptions="Center" TextColor="White" HorizontalTextAlignment="Center"
Text="Images used in this App are in the public domain worldwide."/>
<StackLayout Orientation="Horizontal" Spacing="0" HorizontalOptions="Center" >
<Label HorizontalTextAlignment="Center" >
<Label.FormattedText>
<FormattedString>
<Span Text="" FontFamily="FA-B" TextColor="White" CharacterSpacing="20" FontSize="24" />
<Span Text="" FontFamily="FA-B" TextColor="White" FontSize="24" />
</FormattedString>
</Label.FormattedText>
</Label>
</StackLayout>
<BoxView Style="{StaticResource BoxViewGray}" />
</StackLayout>
<!--#endregion-->
</StackLayout>
</ScrollView>
</ContentPage>
That because you set the HeightRequest as 0.2(which is less than 0.5) . So in iOS it will been ignored on some device because of screen resolution .
So you would better set it as 0.5 or higher on iOS device .
<Style x:Key="BoxViewGray" TargetType="BoxView">
<Setter Property="HeightRequest">
<Setter.Value>
<OnPlatform iOS="0.5" Android="0.2" />
</Setter.Value>
</Setter>
<Setter Property="Color" Value="Gray"/>
</Style>

UIKit.UIImage initWithContentsOfFile Xamarin.iOS - Unreliably throwing exception

Please consider the following error message:
Could not initialize an instance of the type 'UIKit.UIImage": the native 'initWithContentsOfFile:' method returned nil.
I am attempting to load a page on a Xamarin PCL project, and every once in a while, this exception is thrown on iOS. All Android tests seem absolutely fine.
Now when I say "every once in a while" I mean, perhaps once in every 20. I can see no pattern to it whatsoever. It only appears to be happening on an iPhone 5S, however due to the unrepeatable nature of the bug and with limited physical devices to test with I can't guarantee that this is the case.
I can confirm that this is not a case of me setting an icon on a tabbed page as per this SO post, so please don't mark this as a duplicate (unless of course you find another question)
All suggestions welcome
Edit - XAML of the page that on load causes the issue
<?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:Trak="clr-namespace:Trak"
x:Class="Trak.FinishTrak">
<ContentPage.Padding>
<OnPlatform x:TypeArguments="Thickness">
<OnPlatform.iOS>0,20,0,0</OnPlatform.iOS>
<OnPlatform.Android>0,0,0,0</OnPlatform.Android>
</OnPlatform>
</ContentPage.Padding>
<ContentPage.BindingContext>
<Trak:TrackingPageScaling />
</ContentPage.BindingContext>
<ContentPage.Content>
<RelativeLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<ScrollView Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"
RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1}"
RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0}"
RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0}">
<StackLayout Padding="0" Orientation="Vertical" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<!-- EVENT/TRAK CONTROL BAR -->
<StackLayout Orientation="Horizontal">
<Label x:Name ="titleLabel" Text="Untitled trak"
FontSize="{Binding FontSmall}"
TextColor="#333333"
HorizontalOptions="StartAndExpand"
VerticalOptions="Center">
<Label.Margin>
<OnPlatform x:TypeArguments="Thickness"
iOS ="10,10,5,0"
Android ="10,15,5,10" />
</Label.Margin>
</Label>
<Image Source="{Trak:ImageResource Trak.Images.edit.png}"
x:Name="editTrakDetails"
HorizontalOptions="End"
VerticalOptions="Center"
HeightRequest="20">
<Image.Margin>
<OnPlatform x:TypeArguments="Thickness"
iOS ="10,5,5,0"
Android ="10,15,15,10" />
</Image.Margin>
</Image>
</StackLayout>
<!-- MAP IMAGE -->
<StackLayout x:Name="imageLayout" Orientation="Horizontal" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Margin="0,0,0,0">
<Image Source="{Trak:ImageResource Trak.Images.map.png}" VerticalOptions="Center" HorizontalOptions="FillAndExpand" HeightRequest="180" Margin="0,0,0,0"/>
</StackLayout>
<!-- TOP STATS-->
<StackLayout Orientation="Horizontal" VerticalOptions="Center" HorizontalOptions="FillAndExpand" Margin="10,10,10,10">
<StackLayout Orientation="Vertical" VerticalOptions="Center" HorizontalOptions="FillAndExpand">
<Label x:Name="milesLabel" FontSize="{Binding FontMed}" TextColor="#333333" FontAttributes="Bold" VerticalOptions="Center" HorizontalOptions="Center" Margin="0,0,0,0"/>
<Label Text="MILES" FontSize="{Binding FontXXSmall}" TextColor="#999999" VerticalOptions="Center" HorizontalOptions="Center" Margin="0,-10,0,0" />
</StackLayout>
<StackLayout Orientation="Vertical" VerticalOptions="Center" HorizontalOptions="FillAndExpand">
<Label x:Name="avrgMPHLabel" FontSize="{Binding FontMed}" TextColor="#333333" FontAttributes="Bold" VerticalOptions="Center" HorizontalOptions="Center" Margin="0,0,0,0"/>
<Label Text="AVG MPH" FontSize="{Binding FontXXSmall}" TextColor="#999999" VerticalOptions="Center" HorizontalOptions="Center" Margin="0,-10,0,0"/>
</StackLayout>
<StackLayout Orientation="Vertical" VerticalOptions="Center" HorizontalOptions="FillAndExpand">
<Label x:Name="minutesLabel" FontSize="{Binding FontMed}" TextColor="#333333" FontAttributes="Bold" VerticalOptions="Center" HorizontalOptions="Center" Margin="0,0,0,0"/>
<Label Text="MINUTES" FontSize="{Binding FontXXSmall}" TextColor="#999999" VerticalOptions="Center" HorizontalOptions="Center" Margin="0,-10,0,0"/>
</StackLayout>
</StackLayout>
<!-- DIVIDER -->
<BoxView Color="#DCDCDC" HeightRequest="1" Margin="0"
VerticalOptions="Center" HorizontalOptions="FillAndExpand"></BoxView>
<!-- BOTTOM STATS -->
<StackLayout Orientation="Horizontal" VerticalOptions="Center" HorizontalOptions="FillAndExpand" Margin="10,10,10,10">
<StackLayout Orientation="Vertical" VerticalOptions="Center" HorizontalOptions="FillAndExpand">
<Label x:Name="caloriesLabel" FontSize="{Binding FontMed}" TextColor="#333333" FontAttributes="Bold" VerticalOptions="Center" HorizontalOptions="Center" Margin="0,0,0,0"/>
<Label Text="CALORIES" FontSize="{Binding FontXXSmall}" TextColor="#999999" VerticalOptions="Center" HorizontalOptions="Center" Margin="0,-10,0,0" />
</StackLayout>
<StackLayout Orientation="Vertical" VerticalOptions="Center" HorizontalOptions="FillAndExpand">
<Label x:Name ="elevationLabel" FontSize="{Binding FontMed}" TextColor="#333333" FontAttributes="Bold" VerticalOptions="Center" HorizontalOptions="Center" Margin="0,0,0,0"/>
<Label Text="ELEVATION" FontSize="{Binding FontXXSmall}" TextColor="#999999" VerticalOptions="Center" HorizontalOptions="Center" Margin="0,-10,0,0"/>
</StackLayout>
<StackLayout Orientation="Vertical" VerticalOptions="Center" HorizontalOptions="FillAndExpand">
<Label x:Name ="HRLabel" FontSize="{Binding FontMed}" TextColor="#333333" FontAttributes="Bold" VerticalOptions="Center" HorizontalOptions="Center" Margin="0,0,0,0"/>
<Label Text="AVERAGE HR" FontSize="{Binding FontXXSmall}" TextColor="#999999" VerticalOptions="Center" HorizontalOptions="Center" Margin="0,-10,0,0"/>
</StackLayout>
</StackLayout>
<!-- DIVIDER -->
<BoxView Color="#DCDCDC" HeightRequest="1" Margin="0"
VerticalOptions="Center" HorizontalOptions="FillAndExpand"></BoxView>
<StackLayout Orientation="Vertical" VerticalOptions="Center" HorizontalOptions="FillAndExpand" Margin="10,10,10,10">
<Label Text="NOTES:" FontSize="{Binding FontSmall}" TextColor="#333333" />
<Label x:Name="trakNOTES" TextColor="#333333" FontSize="{Binding FontXSmall}">
Use this space to add any notes about your Trak. It mabe used to add weather condidtions, nutrition, road surface etc. You can also use the icons below to quickly add weather conditions or road surfaces. More icons will be added in time.
</Label>
</StackLayout>
<!-- WEATHER AND TERRAIN TOGGLE ICONS -->
<StackLayout Orientation="Horizontal" VerticalOptions="Center" HorizontalOptions="FillAndExpand" Margin="10,10,10,20">
<Image Source="{Trak:ImageResource Trak.Images.MeIcons.sun-grey.png}" x:Name="sunButton" WidthRequest="50" HeightRequest="50" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" />
<Image Source="{Trak:ImageResource Trak.Images.MeIcons.rain-grey.png}" x:Name="rainButton" WidthRequest="50" HeightRequest="50" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" />
<Image Source="{Trak:ImageResource Trak.Images.MeIcons.cloudy-grey.png}" x:Name="cloudButton" WidthRequest="50" HeightRequest="50" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" />
<Image Source="{Trak:ImageResource Trak.Images.MeIcons.road-grey.png}" x:Name="roadButton" WidthRequest="50" HeightRequest="50" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" />
<Image Source="{Trak:ImageResource Trak.Images.MeIcons.trail-grey.png}" x:Name="trailButton" WidthRequest="50" HeightRequest="50" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" />
</StackLayout>
<!-- SAVE TRAK BUTTON-->
<Button Text="Save" x:Name="saveButton"
Clicked="OnSaveButtonClick"
BackgroundColor="#ffffff"
FontSize="14" TextColor="#037ade"
BorderWidth="2" BorderColor="#037ade"
Grid.Row="11" Grid.Column="1"
VerticalOptions="Center" HorizontalOptions="Center"
WidthRequest="200" HeightRequest="50"
Margin="0,5,0,25"/>
</StackLayout>
</ScrollView>
<StackLayout x:Name="editTrakModalShadow" BackgroundColor="#000000" Opacity="0" IsVisible="false" Padding="5"
HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"
RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1}"
RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0}"
RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0}" />
<!-- MODEL TO SAVE TRAK INFO -->
<StackLayout x:Name="saveTrakModal" BackgroundColor="#FFFFFF" Opacity="0" IsVisible="false"
RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.8}"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.1}"
RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.1}">
<!-- TITLE INPUT -->
<Label Text="TITLE:" TextColor="#333333" HorizontalTextAlignment="Start" HeightRequest="20" Margin="20,40,20,5"/>
<Entry x:Name="trakTitle" Placeholder="Enter file name" HorizontalOptions="FillAndExpand" HeightRequest="50" Margin="20,5,20,5"/>
<!-- DETAILS INPUT -->
<Label Text="NOTES:" TextColor="#333333" HorizontalTextAlignment="Start" HeightRequest="20" Margin="20,40,20,5"/>
<Editor x:Name="trakNotes" HorizontalOptions="FillAndExpand" HeightRequest="100" Margin="20,5,20,5"/>
<!-- SAVE TRAK -->
<Button x:Name="saveTrakButton" Text="UPDATE" Clicked="saveTrakModelButton" BackgroundColor="#ffffff"
FontSize="14" TextColor="#037ade"
BorderWidth="2" BorderColor="#037ade" Margin="20,5,20,5"/>
<!-- CANCEL -->
<Button Text="CANCEL" Clicked="closeTrakModel" BackgroundColor="#ffffff"
FontSize="14" TextColor="#ff6961"
BorderWidth="2" BorderColor="#ff6961"
Margin="20,5,20,30"/>
</StackLayout>
</RelativeLayout>
</ContentPage.Content>
</ContentPage>

Resources