CollectionViews look different on iOS and Android

[rogersm-uwosh]

I have what should be a simple problem -- a CollectionView that does not appear the same on both iOS and Android. There are 3 major problems - the icons on iOS don't show up, the stars in the 4th column are wrapping around, and the bottommost cell is cut off. I figured that since this is cross-platform, they should look the same on both, alas they do not. Reddit seems to be butchering the formatting, but hopefully you can see what's going on.

Any advice would be hugely appreciated!

`

<ContentPage.ToolbarItems>
    <ToolbarItem IconImageSource="plus.png"  Text="Add" Clicked="AddAirport_Clicked"/>
    <ToolbarItem IconImageSource="logout.png" Text="Logout" Clicked="Logout_Clicked"/>
</ContentPage.ToolbarItems>

<ContentPage.Resources>

    <ResourceDictionary>
        <converters:NumberToStarsConverter x:Key="NumberToStarsConverter" />
    </ResourceDictionary>

    <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="LightSkyBlue" />
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateGroupList>
        </Setter>
    </Style>
</ContentPage.Resources>


    <VerticalStackLayout
        Spacing="0"
        Padding="15,0"
        VerticalOptions="FillAndExpand"> 

        <!-- This line says that the ItemsSource of the CollectionView is the Airports property of the Domain object (an ObservableCollection) -->
        <!--<CollectionView x:Name="CV" ItemsSource="{Binding Airports}" SelectionMode="Single">-->
            <CollectionView x:Name="CV" SelectionMode="Single" ItemsSource="{Binding .}" VerticalOptions="FillAndExpand">
                <CollectionView.Header>
                    <Grid RowDefinitions="Auto" ColumnDefinitions="50,3*,3*, 1.75*, 0.5*">
                        <Label Grid.Column="0" Text="Id" FontAttributes="Bold" VerticalTextAlignment="Center"/>
                        <Label Grid.Column="1" Text="City" FontAttributes="Bold" VerticalTextAlignment="Center"/>
                        <Label Grid.Column="2" Text="Date Visited" FontAttributes="Bold" VerticalTextAlignment="Center"/>
                        <Label Grid.Column="3" Text="Rating" FontAttributes="Bold" VerticalTextAlignment="Center" />
                    </Grid>
                </CollectionView.Header>
                <CollectionView.ItemTemplate>
                    <DataTemplate x:DataType="model:Airport">
                        <Grid RowDefinitions="Auto" ColumnDefinitions="50,3*,3*, 1.75*, 0.5*, 0.75*">
                            <Label Grid.Column="0" Text="{Binding Id}" VerticalTextAlignment="Center" HorizontalTextAlignment="Start"/>
                            <Label Grid.Column="1" Text="{Binding City}" VerticalTextAlignment="Center" HorizontalTextAlignment="Start"/>
                            <Label Grid.Column="2" Text="{Binding DateVisited, StringFormat='{0:MM/dd/yy}'}" VerticalTextAlignment="Center" HorizontalTextAlignment="Start"/>
                            <Label Grid.Column="3" Text="{Binding Rating,Converter={StaticResource NumberToStarsConverter}}" VerticalTextAlignment="Center" HorizontalTextAlignment="Start" />
                            <Button Grid.Column="4" BackgroundColor="Transparent"  Clicked="EditAirport_Clicked" ImageSource="pencil.png"/>
                            <Button Grid.Column="5" BackgroundColor="Transparent"  Clicked="DeleteAirport_Clicked"  ImageSource="trash.png" />
                        </Grid>
                    </DataTemplate>
                </CollectionView.ItemTemplate>

            </CollectionView>

        </VerticalStackLayout>

`