Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[iOS] CarouselView ItemSpacing property in ItemsLayout not working with CV2 #27025

Open
anandhan-rajagopal opened this issue Jan 9, 2025 · 2 comments · May be fixed by #27056
Open

[iOS] CarouselView ItemSpacing property in ItemsLayout not working with CV2 #27025

anandhan-rajagopal opened this issue Jan 9, 2025 · 2 comments · May be fixed by #27056
Assignees
@sheiksyedm
Labels
area-controls-collectionview CollectionView, CarouselView, IndicatorView collectionview-cv2 partner/syncfusion Issues / PR's with Syncfusion collaboration platform/iOS 🍎 platform/macOS 🍏 macOS / Mac Catalyst s/triaged Issue has been reviewed s/verified Verified / Reproducible Issue ready for Engineering Triage t/bug Something isn't working
Milestone
.NET 9 Servicing

Comments

@anandhan-rajagopal
Copy link
Contributor

anandhan-rajagopal commented Jan 9, 2025 •
edited
Loading

Description

The ItemSpacing property of LinearItemsLayout within a CarouselView is not functioning as expected in .NET MAUI, the items in the CarouselView are still displayed without any visible spacing between them. This issue replicates in CV2, in CV1 its works as expected.

Note: While fixing this issue enable the test case from HostApp: Issue25192.

CV2: Image

CV1: Image

<Grid>
      <CarouselView Margin="2,9,2,20"
                    HeightRequest="180"
                    Loop="False"
                    PeekAreaInsets="20"
                    VerticalOptions="End">
          <CarouselView.ItemsSource>
              <x:Array Type="{x:Type x:String}">
                  <x:String>Item1</x:String>
                  <x:String>Item2</x:String>
                  <x:String>Item3</x:String>
              </x:Array>
          </CarouselView.ItemsSource>
          <CarouselView.ItemsLayout>
              <LinearItemsLayout ItemSpacing="100"
                                 Orientation="Horizontal"
                                 SnapPointsAlignment="Center"
                                 SnapPointsType="MandatorySingle"/>
          </CarouselView.ItemsLayout>
          <CarouselView.ItemTemplate>
              <DataTemplate
                  x:DataType="{x:Null}">
                  <Border BackgroundColor="Red"
                          Stroke="Blue"
                          StrokeShape="RoundRectangle 12"
                          StrokeThickness="0">
                      <Grid Margin="16"
                            ColumnDefinitions="*,*"
                            ColumnSpacing="15"
                            RowDefinitions="*,*,36"
                            RowSpacing="15">
                          <VerticalStackLayout
                              Grid.Row="0"
                              Grid.ColumnSpan="2"
                              VerticalOptions="Center">
                              <Label FontSize="16"
                                     LineBreakMode="WordWrap"
                                     Text="DummyLabel"
                                     TextColor="#333333"
                                     VerticalOptions="Center"/>
                              <Label FontFamily="Medium"
                                     FontSize="14"
                                     LineBreakMode="WordWrap"
                                     Text="DummyDesc"
                                     TextColor="#5F5E6A"/>
                          </VerticalStackLayout>

                          <Border Grid.Row="1"
                                  Grid.Column="0"
                                  BackgroundColor="LightGray"
                                  HorizontalOptions="Start"
                                  StrokeShape="RoundRectangle 12"
                                  StrokeThickness="0"
                                  VerticalOptions="Center">
                              <Label Grid.Column="1"
                                     FontFamily="Regular"
                                     FontSize="14"
                                     Margin="6"
                                     AutomationId="{Binding .}"
                                     Text="{Binding .}"
                                     TextColor="Black"
                                     VerticalOptions="Center"/>
                          </Border>

                          <Border Grid.Row="1"
                                  Grid.Column="1"
                                  BackgroundColor="#e8fccf"
                                  HorizontalOptions="Center"
                                  StrokeShape="RoundRectangle 12"
                                  StrokeThickness="0"
                                  VerticalOptions="Center">
                              <Label Grid.Column="1"
                                     FontFamily="Regular"
                                     FontSize="14"
                                     Margin="6"
                                     Text="{Binding .}"
                                     TextColor="#155d27"
                                     VerticalOptions="Center"/>
                          </Border>

                          <Label Grid.Row="2"
                                 FontSize="24"
                                 HorizontalOptions="Start"
                                 Text="I am here"
                                 TextColor="Black"
                                 VerticalOptions="Center"/>

                          <Button Grid.Row="2"
                                  Grid.Column="1"
                                  BackgroundColor="White"
                                  BorderWidth="2"
                                  TextColor="Black"
                                  Text="Click me"
                                  VerticalOptions="Center"/>
                      </Grid>
                  </Border>
              </DataTemplate>
          </CarouselView.ItemTemplate>
      </CarouselView>
  </Grid>

Steps to Reproduce

  1. Deploy attached sample.
    MauiApp1.zip

CV1 Behavior: The items in the CarouselView should be displayed with the specified spacing between them.

CV2 Behavior: The items in the CarouselView are displayed without any visible spacing, ignoring the ItemSpacing property value.

Link to public reproduction project repository

No response

Version with bug

9.0.22 SR2.2

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

Unknown/Other

Affected platforms

iOS, macOS

Affected platform versions

iOS 18.0

Did you find any workaround?

No response

Relevant log output


      		
    

      
  





        



            

              
            

        

      


      
    








      

    



      

  
            

    

      
    

    


      

          @anandhan-rajagopal
anandhan-rajagopal




          added
  the 

  t/bug

  Something isn't working
 label


      Jan 9, 2025

    

  








      

  
      



  

  @similar-issues-ai

    
      Similar Issues AI
    




  


    

      

  

    

        
    
    

  


      
          
  
      
            Copy link

  

      
    

  


  

      



      

  


  

    

  





      


        


  
    

      
          
We've found some similar issues:



If any of the above are duplicates, please consider closing this issue out and adding additional context in the original issue.




Note: You can give me feedback by 👍 or 👎 this comment.



      		
    

  





        


            

            

              
            

        

      


      

            
  

    
  
    
    

  

  



    












      

  
            

    

      
    

    


      

          @jfversluis
jfversluis




            added
      

  area-controls-collectionview

  CollectionView, CarouselView, IndicatorView

      

  collectionview-cv2


    and removed
      

  area-controls-collectionview

  CollectionView, CarouselView, IndicatorView

  labels


      Jan 9, 2025

    

  



  

  

    
  


  

      

    @anandhan-rajagopal
anandhan-rajagopal



    mentioned this issue
    
      Jan 9, 2025
    





  


  

      
   Open

  







  




    

    

      
    

    


      

          @PureWeen
PureWeen




          added this to the   .NET 9 Servicing milestone


      Jan 9, 2025

    

  



    


    


    

    

      
    

    


      

          @sheiksyedm
sheiksyedm




          added
  the 

  partner/syncfusion

  Issues / PR's with Syncfusion collaboration
 label


      Jan 9, 2025

    

  



    

    

      
    

    


      

          @sheiksyedm
sheiksyedm




              self-assigned this


      Jan 9, 2025

    

  



    

    

      
    

    


      

          @Ying-6
Ying-6




            added
      

  s/triaged

  Issue has been reviewed

      

  s/verified

  Verified / Reproducible Issue ready for Engineering Triage

      

  platform/macOS 🍏

  macOS / Mac Catalyst

      

  platform/iOS 🍎


  labels


      Jan 10, 2025

    

  








      

  
      



  

  @Ying-6





  


    

      

  

    

        
    
    

  


      
          
  
      
            Copy link

  

      
    

  


  

      



      

  


  

    

      

      
            Ying-6
  

      

      

      commented


        Jan 10, 2025


      
    


  





      


        


  
    

      
          
This issue has been verified Visual Studio Code 1.96.2 (9.0.22 & 9.0.21 & 9.0.14). Can repro this issue on iOS and MacOS platforms.

      		
    

  





        


            

            

              
            

        

      


      

            
  

    
  
    
    

  

  



    












      

  
          

  

    
  


  

      

    @Ahamed-Ali
Ahamed-Ali



    linked a pull request
    
      Jan 10, 2025
    

    that will
    close
    this issue





  


  

      
   Open

  





  
  

      
        
      
      

  
    
    
  


    4 tasks
  





  













  
  

    

      

  





  




  
  

              

  
    Sign up for free
    to join this conversation on GitHub.
    Already have an account?
    Sign in to comment


  



  






  
                  




    

  


      
  

    Assignees
  



        

      

        

  
      @sheiksyedm
  
    sheiksyedm
    

      








      


  


  

    Labels
  



    

      

    area-controls-collectionview

  CollectionView, CarouselView, IndicatorView
  

    collectionview-cv2

  

    partner/syncfusion

  Issues / PR's with Syncfusion collaboration
  

    platform/iOS 🍎

  

    platform/macOS 🍏

  macOS / Mac Catalyst
  

    s/triaged

  Issue has been reviewed
  

    s/verified

  Verified / Reproducible Issue ready for Engineering Triage
  

    t/bug

  Something isn't working








      

  

    

        

    Projects
  


        




        
  

    

      
          
        MAUI SDK Ongoing
        
    

    

      

            
    Status: Todo

              
      

    

    

  







  



      


  

    
  

    Milestone
  


      
    
  
    .NET 9 Servicing
  





    
      
          


  

    
      

        
    

    Development
  




          
  
Successfully merging a pull request may close this issue.





    


  
          
      [iOS] Fix for CarouselView ItemSpacing property in ItemsLayout not working with CV2

    
      Ahamed-Ali/maui
    





    
  




      

    

  
      

  

    

      5 participants
    

    

        
          @jfversluis 
        
          @PureWeen 
        
          @sheiksyedm 
        
          @anandhan-rajagopal 
        
          @Ying-6