Share via

MAUI: The listview items are not showing in UI with AbsoluteLayout

Sreejith Sreenivasan 896 Reputation points
2023-09-18T11:46:42.8333333+00:00

I have a UI with AbsoluteLayout like below in my MAUI project:

<AbsoluteLayout>
     <ListView
         AbsoluteLayout.LayoutFlags="All" 
         AbsoluteLayout.LayoutBounds="0,0,1,1"
         x:Name="commentlistview"
         IsPullToRefreshEnabled="True"
         RefreshCommand="{Binding RefreshCommand}"
         IsRefreshing="{Binding IsRefreshing}"
         SeparatorColor="#dddddd"
         SelectionMode="None"
         HasUnevenRows="True">
         <ListView.ItemTemplate>
             <DataTemplate>
                 <ViewCell>
                     <StackLayout 
                     HorizontalOptions="FillAndExpand" 
                     Margin="15,10"
                     Orientation="Vertical">

                     <StackLayout.GestureRecognizers>
                         <TapGestureRecognizer
                             Tapped="CommentItemTapped"
                             NumberOfTapsRequired="1"/>
                     </StackLayout.GestureRecognizers>

                     <Label 
                         Text="{Binding commenterName, Converter={StaticResource specialCharactorConverter}}"
                         TextColor="{Binding parentComment.supportItemComments.TextColor}"
                         Style="{StaticResource CommentBoldListviewStyle}"/>

                         <Label
                         Text="{Binding parentComment.supportItemComments.comment, Converter={StaticResource specialCharactorConverter}}"
                         TextColor="{Binding parentComment.supportItemComments.TextColor}"
                         Style="{StaticResource CommentListviewStyle}"/>

                         <StackLayout IsVisible="{Binding parentComment.supportItemComments.isImageFile}">

                             <ffimageloading:CachedImage 
                                 HorizontalOptions="FillAndExpand"
                                 Aspect="AspectFill"
                                 IsVisible="{Binding parentComment.supportItemComments.isImageNull}"
                                 Source="{Binding parentComment.supportItemComments.commentFiles, Converter={StaticResource urlJoinConverter}}"
                                 VerticalOptions="Fill">
                                 <ffimageloading:CachedImage.HeightRequest>
                                     <OnIdiom x:TypeArguments="x:Double">
                                         <OnIdiom.Phone>200</OnIdiom.Phone>
                                         <OnIdiom.Tablet>300</OnIdiom.Tablet>
                                         <OnIdiom.Desktop>200</OnIdiom.Desktop>
                                     </OnIdiom>
                                 </ffimageloading:CachedImage.HeightRequest>
                                 <ffimageloading:CachedImage.WidthRequest>
                                     <OnIdiom x:TypeArguments="x:Double">
                                         <OnIdiom.Phone>200</OnIdiom.Phone>
                                         <OnIdiom.Tablet>300</OnIdiom.Tablet>
                                         <OnIdiom.Desktop>200</OnIdiom.Desktop>
                                     </OnIdiom>
                                 </ffimageloading:CachedImage.WidthRequest>
                             </ffimageloading:CachedImage>
                             <StackLayout.GestureRecognizers>
                                 <TapGestureRecognizer   
                                     Tapped="ViewFullSizeCommentImage"
                                     NumberOfTapsRequired="1" />
                             </StackLayout.GestureRecognizers>
                         </StackLayout>

                         <StackLayout 
                             IsVisible="{Binding parentComment.supportItemComments.isDocFile}"
                             Orientation="Vertical">

                             <Image 
                                 HorizontalOptions="StartAndExpand"
                                 Aspect="AspectFill"
                                 IsVisible="{Binding parentComment.supportItemComments.isImageNull}"
                                 Source="{Binding parentComment.supportItemComments.commentFiles, Converter={StaticResource urlJoinConverter}}"
                                 VerticalOptions="Fill">
                                 <Image.HeightRequest>
                                     <OnIdiom x:TypeArguments="x:Double">
                                         <OnIdiom.Phone>70</OnIdiom.Phone>
                                         <OnIdiom.Tablet>100</OnIdiom.Tablet>
                                         <OnIdiom.Desktop>70</OnIdiom.Desktop>
                                     </OnIdiom>
                                 </Image.HeightRequest>
                                 <Image.WidthRequest>
                                     <OnIdiom x:TypeArguments="x:Double">
                                         <OnIdiom.Phone>50</OnIdiom.Phone>
                                         <OnIdiom.Tablet>75</OnIdiom.Tablet>
                                         <OnIdiom.Desktop>50</OnIdiom.Desktop>
                                     </OnIdiom>
                                 </Image.WidthRequest>
                             </Image>
                             <StackLayout.GestureRecognizers>
                                 <TapGestureRecognizer
                                     Tapped="CommentImageTapped"
                                     NumberOfTapsRequired="1">
                                 </TapGestureRecognizer>
                             </StackLayout.GestureRecognizers>
                         </StackLayout>

                         <StackLayout 
                             Padding="5"
                             Margin="0,5"
                             HorizontalOptions="StartAndExpand"
                             BackgroundColor="{Binding parentComment.supportItemComments.BGColor}"
                             IsVisible="{Binding parentComment.supportItemComments.isMultipleAttachments}"
                             Orientation="Vertical">

                             <Image 
                                 HorizontalOptions="CenterAndExpand"
                                 VerticalOptions="CenterAndExpand"
                                 Aspect="AspectFill"
                                 Source="ic_doc_xx.png">
                                 <Image.HeightRequest>
                                     <OnIdiom x:TypeArguments="x:Double">
                                         <OnIdiom.Phone>70</OnIdiom.Phone>
                                         <OnIdiom.Tablet>100</OnIdiom.Tablet>
                                         <OnIdiom.Desktop>70</OnIdiom.Desktop>
                                     </OnIdiom>
                                 </Image.HeightRequest>
                                 <Image.WidthRequest>
                                     <OnIdiom x:TypeArguments="x:Double">
                                         <OnIdiom.Phone>50</OnIdiom.Phone>
                                         <OnIdiom.Tablet>75</OnIdiom.Tablet>
                                         <OnIdiom.Desktop>50</OnIdiom.Desktop>
                                     </OnIdiom>
                                 </Image.WidthRequest>
                             </Image>

                             <Label
                                 Text="{Binding parentComment.supportItemComments.fileCount}"
                                 HorizontalOptions="CenterAndExpand"
                                 HorizontalTextAlignment="Center"
                                 TextColor="{Binding parentComment.supportItemComments.TextColor}"
                                 Style="{StaticResource CommentListviewStyle}"/>

                             <StackLayout.GestureRecognizers>
                                 <TapGestureRecognizer
                                     Tapped="ViewCommentAttachments"
                                     NumberOfTapsRequired="1">
                                 </TapGestureRecognizer>
                             </StackLayout.GestureRecognizers>
                             <StackLayout.HeightRequest>
                                 <OnIdiom x:TypeArguments="x:Double">
                                     <OnIdiom.Phone>100</OnIdiom.Phone>
                                     <OnIdiom.Tablet>150</OnIdiom.Tablet>
                                     <OnIdiom.Desktop>100</OnIdiom.Desktop>
                                 </OnIdiom>
                             </StackLayout.HeightRequest>
                             <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
                             Orientation="Horizontal">
                             <Label 
                                 Text="{Binding parentComment.supportItemComments.createdTime, Converter={StaticResource dateTimeConverter}}"
                                 TextColor="{Binding parentComment.supportItemComments.TextColor}"
                                 Style="{StaticResource CommentDateListviewStyle}"/>

                             <Label 
                                 Text="{Binding replyCount}"
                                 IsVisible="{Binding replyVisibility}"
                                 TextColor="{Binding parentComment.supportItemComments.TextColor}"
                                 HorizontalOptions="CenterAndExpand"
                                 HorizontalTextAlignment="Center"
                                 Style="{StaticResource CommentDateListviewStyle}">
                                 <Label.GestureRecognizers>
                                     <TapGestureRecognizer
                                         Tapped="ViewAllReplies"
                                         NumberOfTapsRequired="1">
                                     </TapGestureRecognizer>
                                 </Label.GestureRecognizers>
                             </Label>

                             <StackLayout
                                 Orientation="Horizontal"
                                 IsVisible="{Binding parentComment.supportItemComments.ReplyVisibility}"
                                 HorizontalOptions="EndAndExpand">

                                 <Image 
                                     Source="{Binding parentComment.supportItemComments.ArrowSource}">
                                     <Image.WidthRequest>
                                         <OnIdiom x:TypeArguments="x:Double">
                                             <OnIdiom.Phone>15</OnIdiom.Phone>
                                             <OnIdiom.Tablet>23</OnIdiom.Tablet>
                                             <OnIdiom.Desktop>15</OnIdiom.Desktop>
                                         </OnIdiom>
                                     </Image.WidthRequest>
                                     <Image.HeightRequest>
                                         <OnIdiom x:TypeArguments="x:Double">
                                             <OnIdiom.Phone>15</OnIdiom.Phone>
                                             <OnIdiom.Tablet>23</OnIdiom.Tablet>
                                             <OnIdiom.Desktop>15</OnIdiom.Desktop>
                                         </OnIdiom>
                                     </Image.HeightRequest>
                                 </Image>

                                 <Label 
                                     Text="Reply"
                                     TextColor="{Binding parentComment.supportItemComments.TextColor}"
                                     HorizontalOptions="EndAndExpand"
                                     HorizontalTextAlignment="End"
                                     Style="{StaticResource CommentDateListviewStyle}">
                                 </Label>
                                 <StackLayout.GestureRecognizers>
                                     <TapGestureRecognizer
                                         Tapped="ReplyTapped"
                                         NumberOfTapsRequired="1">
                                     </TapGestureRecognizer>
                                 </StackLayout.GestureRecognizers>
                             </StackLayout>

                             <Button
                                 x:Name="approval_button"
                                 Text="Waiting for approval"
                                 BackgroundColor="White"
                                 TextColor="#f3872c"
                                 BorderColor="#f3872c"
                                 HorizontalOptions="EndAndExpand"
                                 BorderWidth="1"
                                 IsVisible="{Binding parentComment.supportItemComments.ApprovalVisibility}"
                                 Style="{StaticResource ApprovalButtonStyle}"/>
                         </StackLayout>
                     </StackLayout>
                 </ViewCell>
             </DataTemplate>
         </ListView.ItemTemplate>
         <ListView.Footer>
             <Label/>
         </ListView.Footer>
     </ListView>

     <ImageButton 
         x:Name="invoices_stack"
         Source="ic_invoice_xx.png"
         BackgroundColor="Transparent"
         IsVisible="false"
         AbsoluteLayout.LayoutFlags="PositionProportional"  
         AbsoluteLayout.LayoutBounds="{OnIdiom Phone='.95,.80,50,50', Tablet = '.95,.80,75,75'}" 
         Clicked="invoices_stack_Clicked" />

     <ImageButton 
         x:Name="call_satck"
         Source="ic_requester_call_xx.png"
         BackgroundColor="Transparent"
         IsVisible="false"
         AbsoluteLayout.LayoutFlags="PositionProportional"  
         AbsoluteLayout.LayoutBounds="{OnIdiom Phone='.95,.95,50,50', Tablet = '.95,.95,75,75'}" 
         Clicked="StartCall" />

     <Label 
         Style="{StaticResource RequestMessageLabelStyle}"
         Text="No comments"
         AbsoluteLayout.LayoutFlags="PositionProportional"  
         AbsoluteLayout.LayoutBounds=".50,.50,150,150"
         HorizontalOptions="CenterAndExpand"
         HorizontalTextAlignment="Center"
         VerticalOptions="CenterAndExpand"
         VerticalTextAlignment="Center"
         x:Name="commentmessage_label"/>
 </AbsoluteLayout>

My problem is nothing is visible on the UI with AbsoluteLayout. If I remove the AbsoluteLayout the listview items are showing. Is the AbsoluteLayout properties are deprecated in MAUI?

.NET MAUI
.NET MAUI
A Microsoft open-source framework for building native device applications spanning mobile, tablet, and desktop.
3,502 questions
Accepted answer
  1. Leon Lu (Shanghai Wicresoft Co,.Ltd.) 75,661 Reputation points Microsoft Vendor
    2023-09-20T02:22:59.9+00:00

    Hello,

    Please add VerticalOptions="FillAndExpand"to the Absolutelayout , then ListView could appear correctly.

    By the way, you use http to get Json data, please add the following key to your info.plist for iOS platform.

    <key>NSAppTransportSecurity</key>

    Best Regards,

    Leon Lu

    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    0 comments

0 additional answers

Sort by: Most helpful
Most helpful Newest Oldest

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.