XAML with listview and mixed layouts works in Android but not in iOS

TonyIgnatiusTonyIgnatius Tony IgnatiusUSMember

I'm sorry for a messy layout. But this works in Android like a charm. In iOS emulator I can see the listview loaded but couldnot scroll or select an item. [Seems to be like some other transparent layout stand in the way.

<RelativeLayout>
  <Image Source="{local:ImageResource UPS_XW.Images.ITAS_HomePage.PNG}"  HeightRequest="100"
           RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height,Factor=0.15}"
           RelativeLayout.YConstraint="{ConstraintExpression Type = Constant, Constant= 0}"
           RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}" />
  <BoxView Color="#ffcc00"
           RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height,Factor=0.17}"
           RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
           RelativeLayout.XConstraint ="{ConstraintExpression Type = Constant,Factor=0, Constant= 0}"
           RelativeLayout.YConstraint="{ConstraintExpression Type=Constant, Constant=80}"/>
  <BoxView Color="Gray"
           RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height,Factor=0.13}"
           RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
           RelativeLayout.XConstraint ="{ConstraintExpression Type = Constant,Factor=0.2, Constant= 0}"
           RelativeLayout.YConstraint="{ConstraintExpression Type=Constant, Constant=90}"/>
  <Label x:Name="lblSource" FontSize ="14" FontAttributes="Bold"  TextColor="White" HorizontalTextAlignment="Center"
           RelativeLayout.XConstraint ="{ConstraintExpression Type = Constant, Constant= 0}"
           RelativeLayout.YConstraint="{ConstraintExpression Type = Constant, Constant= 100}"
           RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.4}"/>
  <Image Source="{local:ImageResource UPS_XW.Images.Arrow64.png}" HeightRequest="48" WidthRequest="48" HorizontalOptions="Center"
           RelativeLayout.XConstraint ="{ConstraintExpression Type = Constant, Constant= 110}"
           RelativeLayout.YConstraint="{ConstraintExpression Type = Constant, Constant= 90}"
           RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.4}"/>
  <Label x:Name="lblDest" FontSize ="14" FontAttributes="Bold"  TextColor="White" HorizontalTextAlignment="Center"
           RelativeLayout.XConstraint ="{ConstraintExpression Type = Constant, Constant= 215}"
           RelativeLayout.YConstraint="{ConstraintExpression Type = Constant, Constant= 100}"
           RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.4}"/>
  <Label x:Name="lblWeight" FontSize ="14" FontAttributes="Bold"  HorizontalTextAlignment="Center" TextColor="White"
           RelativeLayout.XConstraint ="{ConstraintExpression Type = Constant, Constant= 110}"
           RelativeLayout.YConstraint="{ConstraintExpression Type = Constant, Constant= 115}"
           RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.4}"/>
  <Label x:Name="lblloading" FontSize ="10" Text="Loading available ups services.Please wait..." IsVisible="False" HorizontalTextAlignment="Center" TextColor="Maroon"
           RelativeLayout.XConstraint ="{ConstraintExpression Type = Constant, Constant= 20}"
           RelativeLayout.YConstraint="{ConstraintExpression Type = Constant, Constant= 155}"
           RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"/>
  <ScrollView HorizontalOptions="Fill" HeightRequest="250" RelativeLayout.YConstraint="{ConstraintExpression Type = Constant, Constant= 170}">     
    <StackLayout Orientation="Vertical" VerticalOptions="Fill" HorizontalOptions="Fill" HeightRequest="250">  
      <ListView  x:Name="lstservices" HasUnevenRows="True" ItemSelected="lstItemSelected" HeightRequest="250" IsRefreshing="{Binding IsBusy, Mode=OneWay}">
        <ListView.ItemTemplate>
          <DataTemplate>
            <ViewCell Height="100">
              <Grid Padding="10,5">
                <Grid.ColumnDefinitions>
                  <ColumnDefinition Width="Auto"/>
                  <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                  <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Image Source="{Binding imgsrc}" VerticalOptions="Center">
                  <Image.WidthRequest>
                    <OnPlatform x:TypeArguments="x:Double">
                      <OnPlatform.iOS>55</OnPlatform.iOS>
                      <OnPlatform.Android>55 </OnPlatform.Android>
                      <OnPlatform.WinPhone>75</OnPlatform.WinPhone>
                    </OnPlatform>
                  </Image.WidthRequest>
                  <Image.HeightRequest>
                    <OnPlatform x:TypeArguments="x:Double">
                      <OnPlatform.iOS>55</OnPlatform.iOS>
                      <OnPlatform.Android>55</OnPlatform.Android>
                      <OnPlatform.WinPhone>75</OnPlatform.WinPhone>
                    </OnPlatform>
                  </Image.HeightRequest>
                </Image>
                <StackLayout Grid.Column="1"
                             Padding="8"
                             Spacing="4"
                             VerticalOptions="Center">
                  <Label Text="{Binding svcname}" FontSize="Medium" FontAttributes="Bold" TextColor="#ffcc00" LineBreakMode="NoWrap"/>
                  <Label Text="{Binding doa}" FontSize="Small" TextColor="White" FontAttributes="Bold"   LineBreakMode="WordWrap"/>
                  <Label Text="{Binding rate}" FontSize="Small" TextColor="#ffcc00" FontAttributes="Bold"  LineBreakMode="NoWrap"/>
                </StackLayout>
              </Grid>
            </ViewCell>
          </DataTemplate>
        </ListView.ItemTemplate>
      </ListView>
      <StackLayout  HorizontalOptions="Center" IsVisible="{Binding IsBusy}" BackgroundColor="#80000000" Padding="12" 
                    RelativeLayout.XConstraint="{ConstraintExpression Type = Constant, Constant= 140}" 
                    RelativeLayout.YConstraint="{ConstraintExpression Type = Constant, Constant= 350}">
          <ActivityIndicator IsRunning="{Binding IsBusy}" Color ="White">
          </ActivityIndicator>
          <Label Text="Loading..." HorizontalOptions="Center" TextColor="White"/>
        </StackLayout>
    </StackLayout>
  </ScrollView>

  <RelativeLayout   HorizontalOptions="Center" VerticalOptions="Center" WidthRequest="70" HeightRequest="70">
    <Image  Source="load.png"  x:Name="imgLoading"  HorizontalOptions="Fill" Aspect="AspectFill" IsVisible="False"
            RelativeLayout.YConstraint="{ConstraintExpression Type = Constant, Constant= 250}"
             RelativeLayout.XConstraint ="{ConstraintExpression Type = Constant, Constant= 140}" />
            <!--RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0,Constant=40}"
                RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.55, Constant= -30}"
               />-->
  </RelativeLayout>

  <RelativeLayout>
    <Button x:Name="btnSubmit" IsEnabled="False" Text="Submit" Clicked="btnSubmitClicked" BackgroundColor="#4d4dff" VerticalOptions="Center"  TextColor="White"
             RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height,Factor=0.1}"
             RelativeLayout.XConstraint ="{ConstraintExpression Type = Constant, Constant= 135}"
             RelativeLayout.YConstraint="{ConstraintExpression Type=Constant, Constant=420}" />

    <BoxView Color="Gray"
             RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height,Factor=0.1}"
             RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
             RelativeLayout.XConstraint ="{ConstraintExpression Type = Constant,Factor=1, Constant= 0}"
             RelativeLayout.YConstraint="{ConstraintExpression Type=Constant, Constant=470}"/>

    <Label Text="Copyright © 2016, United Parcel Service of America, Inc. All Rights Reserved" FontAttributes="Bold" FontSize="15" TextColor="#1a0000"
           HorizontalTextAlignment="Center"
             RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height,Factor=0.1}"
             RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
             RelativeLayout.XConstraint ="{ConstraintExpression Type = Constant, Factor=1, Constant= 0}"
             RelativeLayout.YConstraint="{ConstraintExpression Type=Constant,  Constant=470}" />
  </RelativeLayout>
</RelativeLayout> 

</ContentPage.Content>

Posts

  • ankur_devankur_dev Ankur Shukla INMember ✭✭

    @TonyIgnatius Did you find a solution to this problem? I am facing the same problem.

  • TonyIgnatiusTonyIgnatius Tony Ignatius USMember

    No, :-( still I'm banging my head against the wall for solving this. I think the XAML layout engine is different for Android and iOS. like in Android its inside out and for iOS it is the reverse. So I can't touch the list view that is in-between other layouts in iOS. I took this problem to regional Xamarin meetups, experts there agreed to my views on this problem. One idea is to create a different page for iOS for this page alone and proceed[i know that this is against the pcl ethics]. Trying to solve this only will consume more time. But still if you find a solution it would be worth to share.

  • ankur_devankur_dev Ankur Shukla INMember ✭✭

    Yes, if I find a solution to this problem, I will definitely share. You too please do the same. I am stuck on this for past few hours and I don't want to create a different page for iOS.

    Thanks.

  • ankur_devankur_dev Ankur Shukla INMember ✭✭

    @TonyIgnatius I was able to resolve the problem in my code. To give you an overview, my page had a RelativeLayout with an Image and a ListView. Image was serving as background for the page. In order to achieve blur effect in iOS I used following line in Image declaration "iOSSpecific:VisualElement.BlurEffect="Dark". It was causing ListView to become unresponsive (I don't know why). I removed this snippet and implemented blur using Custom Renderers and ListView started working fine.

  • BoguslawBlonskiBoguslawBlonski Boguslaw Blonski PLMember ✭✭

    Not sure is this your case but adding elements to grid for same row column works as z-index, but it doesn't work same way on iOS and android . The way you add layers on iOS will work on Android, in second way what works on Android not always work on iOS. I would start commenting xaml code part by part. Probably just proper sorting of elements should help.

Sign In or Register to comment.