I have a UI alignment issue in Listview with Grid having 3 columns like the below screenshot:
My ListView Code:
<ListView x:Name="MyCustomers" ItemsSource="{Binding AllItems,Mode=TwoWay}" RowHeight="{OnIdiom Phone=80, Tablet=110, Desktop=80}" IsPullToRefreshEnabled="True" HasUnevenRows="True" CachingStrategy="RecycleElement" RefreshCommand="{Binding RefreshCommand}" IsRefreshing="{Binding IsRefreshing}"><ListView.ItemTemplate><DataTemplate><ViewCell><ViewCell.View><Grid HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand"><Grid.ColumnDefinitions><ColumnDefinition Width="2*" /><ColumnDefinition Width="6*" /><ColumnDefinition Width="2*" /></Grid.ColumnDefinitions><Grid Grid.Column="0" HorizontalOptions="Start"><Grid.ColumnDefinitions><ColumnDefinition Width="*" /><ColumnDefinition Width="12.25*" /></Grid.ColumnDefinitions><Grid VerticalOptions="CenterAndExpand" HorizontalOptions="Start" Grid.Column="1"><Image Source="ic_profilebg_xx.png" VerticalOptions="CenterAndExpand" HorizontalOptions="Start" x:Name="imagebg" Aspect="AspectFit"><Image.HeightRequest><OnIdiom x:TypeArguments="x:Double"><OnIdiom.Phone>60</OnIdiom.Phone><OnIdiom.Tablet>90</OnIdiom.Tablet><OnIdiom.Desktop>60</OnIdiom.Desktop></OnIdiom></Image.HeightRequest><Image.WidthRequest><OnIdiom x:TypeArguments="x:Double"><OnIdiom.Phone>60</OnIdiom.Phone><OnIdiom.Tablet>90</OnIdiom.Tablet><OnIdiom.Desktop>60</OnIdiom.Desktop></OnIdiom></Image.WidthRequest></Image><Label Text="{Binding user.fullname,Converter={StaticResource profilenameConverter}}" Style="{StaticResource InitalLabelStyle}"/></Grid></Grid><StackLayout Grid.Column="1" Margin="3,0,0,0" HorizontalOptions="Start" VerticalOptions="CenterAndExpand" Orientation="Vertical"><Label Text="{Binding user.fullname, Converter={StaticResource nameConverter}}" FontFamily="Bold" VerticalTextAlignment="Center" VerticalOptions="CenterAndExpand" HorizontalOptions="Start" HorizontalTextAlignment="Start" TextColor="#676767" IsVisible="{Binding user.fullname, Converter={StaticResource nullCheckConverter}}"><Label.FontSize><OnIdiom x:TypeArguments="x:Double"><OnIdiom.Phone>15</OnIdiom.Phone><OnIdiom.Tablet>20</OnIdiom.Tablet><OnIdiom.Desktop>15</OnIdiom.Desktop></OnIdiom></Label.FontSize></Label><Label Text="{Binding user.email}" VerticalOptions="CenterAndExpand" TextColor="#676767" VerticalTextAlignment="Center" HorizontalOptions="Start" HorizontalTextAlignment="Start" IsVisible="{Binding user.email , Converter={StaticResource nullCheckConverter}}"><Label.FontSize><OnIdiom x:TypeArguments="x:Double"><OnIdiom.Phone>12</OnIdiom.Phone><OnIdiom.Tablet>18</OnIdiom.Tablet><OnIdiom.Desktop>12</OnIdiom.Desktop></OnIdiom></Label.FontSize></Label><Label Text="{Binding phoneNumber, Converter={StaticResource phoneNumberFormatConverter}}" VerticalTextAlignment="Center" VerticalOptions="CenterAndExpand" HorizontalOptions="Start" HorizontalTextAlignment="Start" TextColor="#676767" IsVisible="{Binding isPhoneEmpty}"><Label.FontSize><OnIdiom x:TypeArguments="x:Double"><OnIdiom.Phone>12</OnIdiom.Phone><OnIdiom.Tablet>18</OnIdiom.Tablet><OnIdiom.Desktop>12</OnIdiom.Desktop></OnIdiom></Label.FontSize></Label><!--<StackLayout.WidthRequest><OnIdiom x:TypeArguments="x:Double"><OnIdiom.Phone>200</OnIdiom.Phone><OnIdiom.Tablet>300</OnIdiom.Tablet><OnIdiom.Desktop>200</OnIdiom.Desktop></OnIdiom></StackLayout.WidthRequest>--></StackLayout><StackLayout Grid.Column="2" Orientation="Vertical" VerticalOptions="CenterAndExpand" HorizontalOptions="EndAndExpand"><StackLayout Margin="0,0,0,5" HorizontalOptions="FillAndExpand" BackgroundColor="#5abcd7"><Label Text="{Binding pointsToVisualize}" FontFamily="Bold" HorizontalOptions="CenterAndExpand" HorizontalTextAlignment="Center" TextColor="White"><Label.FontSize><OnIdiom x:TypeArguments="x:Double"><OnIdiom.Phone>15</OnIdiom.Phone><OnIdiom.Tablet>20</OnIdiom.Tablet><OnIdiom.Desktop>15</OnIdiom.Desktop></OnIdiom></Label.FontSize></Label><!--<StackLayout.WidthRequest><OnIdiom x:TypeArguments="x:Double"><OnIdiom.Phone>80</OnIdiom.Phone><OnIdiom.Tablet>120</OnIdiom.Tablet><OnIdiom.Desktop>80</OnIdiom.Desktop></OnIdiom></StackLayout.WidthRequest>--><StackLayout.Padding><OnIdiom x:TypeArguments="Thickness"><OnIdiom.Phone>3</OnIdiom.Phone><OnIdiom.Tablet>6</OnIdiom.Tablet><OnIdiom.Desktop>3</OnIdiom.Desktop></OnIdiom></StackLayout.Padding></StackLayout><StackLayout Orientation="Horizontal"><Image VerticalOptions="Center" Source="ic_action_time.png"><Image.WidthRequest><OnIdiom x:TypeArguments="x:Double"><OnIdiom.Phone>13</OnIdiom.Phone><OnIdiom.Tablet>20</OnIdiom.Tablet><OnIdiom.Desktop>13</OnIdiom.Desktop></OnIdiom></Image.WidthRequest><Image.HeightRequest><OnIdiom x:TypeArguments="x:Double"><OnIdiom.Phone>13</OnIdiom.Phone><OnIdiom.Tablet>20</OnIdiom.Tablet><OnIdiom.Desktop>13</OnIdiom.Desktop></OnIdiom></Image.HeightRequest></Image><Label Margin="2,0,0,0" Text="{Binding user.updatedTime, Converter={StaticResource cnvDateTimeConverter}}" TextColor="#5abcd7" HorizontalOptions="FillAndExpand" VerticalOptions="Center"><Label.FontSize><OnIdiom x:TypeArguments="x:Double"><OnIdiom.Phone>10</OnIdiom.Phone><OnIdiom.Tablet>15</OnIdiom.Tablet><OnIdiom.Desktop>10</OnIdiom.Desktop></OnIdiom></Label.FontSize></Label><StackLayout.Margin><OnIdiom x:TypeArguments="Thickness"><OnIdiom.Phone>3</OnIdiom.Phone><OnIdiom.Tablet>6</OnIdiom.Tablet><OnIdiom.Desktop>3</OnIdiom.Desktop></OnIdiom></StackLayout.Margin><!--<StackLayout.WidthRequest><OnIdiom x:TypeArguments="x:Double"><OnIdiom.Phone>115</OnIdiom.Phone><OnIdiom.Tablet>300</OnIdiom.Tablet><OnIdiom.Desktop>50</OnIdiom.Desktop></OnIdiom></StackLayout.WidthRequest>--></StackLayout></StackLayout><Grid.Margin><OnIdiom x:TypeArguments="Thickness"><OnIdiom.Phone>3</OnIdiom.Phone><OnIdiom.Tablet>6</OnIdiom.Tablet><OnIdiom.Desktop>3</OnIdiom.Desktop></OnIdiom></Grid.Margin><Grid.Padding><OnIdiom x:TypeArguments="Thickness"><OnIdiom.Phone>3</OnIdiom.Phone><OnIdiom.Tablet>6</OnIdiom.Tablet><OnIdiom.Desktop>3</OnIdiom.Desktop></OnIdiom></Grid.Padding></Grid></ViewCell.View></ViewCell></DataTemplate></ListView.ItemTemplate><ListView.Footer><Label/></ListView.Footer></ListView>I tried to recreate this issue on a demo project and in the demo it is working fine. The demo project is uploaded here.
With the same codes the UI has no issue in demo project and has issues in my real project, what may be the possible reason?
Note: If I uncomment the StackLayout.WidthRequest for the second column the UI alignment issue is getting resolved.