Home » Android » In my xamarin cross platform forms application, the following image on my page is being cut off or clipped on only the Android platform-Exceptionshub

In my xamarin cross platform forms application, the following image on my page is being cut off or clipped on only the Android platform-Exceptionshub

Posted by: admin February 26, 2020 Leave a comment

Questions:

In my xamarin cross platform forms application, the following image on my page is being cut off or clipped on only the Android platform even though I have adjusted it accordingly and per platform with the se of different methods and properties such as the padding, margins and aspect. Is there another property that avoids the image being cut off on my android platform? On my iOS platform the image displays correctly without being cut off.

My xaml code for the promotions page:

<?xml version="1.0" encoding="UTF-8" ?>
<ContentView
    x:Class="MopaniPharmacy.Views.PromotionsViewTemplate"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
    Margin="2"
    BackgroundColor="White"
    HorizontalOptions="CenterAndExpand"
    VerticalOptions="Center">
    <StackLayout Padding="0" Spacing="5">
        <StackLayout.Padding>
            <OnPlatform x:TypeArguments="Thickness">
                <On Platform="iOS" Value="0" />
                <On Platform="Android" Value="2" />
            </OnPlatform>
        </StackLayout.Padding>
        <Frame Margin="2" HasShadow="True">
            <Frame.Margin>
                <OnPlatform x:TypeArguments="Thickness">
                    <On Platform="iOS" Value="2" />
                    <On Platform="Android" Value="5" />
                </OnPlatform>
            </Frame.Margin>
            <Grid BackgroundColor="Transparent" VerticalOptions="CenterAndExpand">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>

                <Grid
                    Grid.Row="0"
                    Grid.ColumnSpan="2"
                    BackgroundColor="Transparent"
                    HorizontalOptions="Fill"
                    VerticalOptions="Fill">
                    <Grid.Margin>
                        <OnPlatform x:TypeArguments="Thickness">
                            <On Platform="iOS" Value="-20,-20,-48,40" />
                            <On Platform="Android" Value="0,0,0,0" />
                        </OnPlatform>
                    </Grid.Margin>

                    <Image Source="{Binding PromotionImages}">
                        <Image.Aspect>
                            <OnPlatform x:TypeArguments="Aspect">
                                <On Platform="iOS" Value="Fill" />
                                <On Platform="Android" Value="AspectFill" />
                            </OnPlatform>
                        </Image.Aspect>
                        <Image.Margin>
                            <OnPlatform x:TypeArguments="Thickness">
                                <On Platform="iOS" Value="0" />
                                <On Platform="Android" Value="-10,-10,-10,10" />
                            </OnPlatform>
                        </Image.Margin>
                    </Image>
                </Grid>

                <Grid
                    Grid.Row="1"
                    Padding="15,0,15,5"
                    BackgroundColor="Transparent"
                    HorizontalOptions="Center"
                    VerticalOptions="Center">
                    <Label
                        FontFamily="Arial Black"
                        FontSize="18"
                        Text="{Binding Description}"
                        TextColor="Black" />
                </Grid>


            </Grid>
        </Frame>
    </StackLayout>

</ContentView>

This is how the images are supposed to display:

Android Platform Image being cut off

How to&Answers: