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.
I have copied your project and reproduced your problem.
This is becase all the items of the listview in the demo project is the same. But your real project has different data for each item (the stacklayouts have different width).
This is because you make each item's width same. And I found the
HorizontalOptions="Start"in the StackLayout didn't work for your project (target .net 7.0). But I tested the same code in the .net 8.0 and theHorizontalOptions="Start"worked well. The UI alignment issue disappeared.So you can try to upgrade your project to target net 8.0 to fix this issue. And you can report this on the repo.