CarouselView / CarouselPage has"freeze/lag" when i switch view/page

voidstreamvoidstream ✭✭✭FRMember ✭✭✭
edited March 2017 in Xamarin.Forms

Hello,

I'm trying to understand how works the switch of view and the switch of pages from Carousel because when i switch view / page i have random "freeze/lags". When i switch page/view, what my app do? Reload binding? Resize layout and more?

Best regards

Best Answer

  • voidstreamvoidstream ✭✭✭ FR ✭✭✭
    Accepted Answer

    Lags =>
    Too much bindings
    Too much complexe datatriggers
    Binding on missing command
    Missing images on Android (all drawable folders should be fill)

Answers

  • VelocityVelocity ✭✭✭ NZMember ✭✭✭

    Are you trying to use CarouselView or CarouselPage?

  • voidstreamvoidstream ✭✭✭ FRMember ✭✭✭
    edited March 2017

    @Velocity said:
    Are you trying to use CarouselView or CarouselPage?

    I try CarouselView, CarouselPage and a custom CarouselView by Alex Rainman

    Each Page/View content a ListView which have grouped data.
    Each item has a grid of 3 rows and 7 columns (calendar).
    Each grid box content a BoxView which have a binding command with my data on parameters

  • voidstreamvoidstream ✭✭✭ FRMember ✭✭✭
    edited March 2017

    Okay, without my listview i don't have lag/freeze but if i add a light listview, i got light freeze now.

    So the binding of binding generate freeze or it's just because i have a listview in a carousel?

    XAML of lightest listview

    <ListView ItemsSource="{Binding PeriodsGroupedByUser}"
              IsGroupingEnabled="True"
              SeparatorVisibility="None"
              HasUnevenRows="True">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <ContentView>
                        <Label Text="Don't freeze my friend"/>
                    </ContentView>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
    

    XAML without listview:

            <!-- CarouselView -->
            <controls:CarouselViewControl AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All"
                                          ItemsSource="{Binding Weeks}" Orientation="Horizontal"
                                          InterPageSpacing="20" InterPageSpacingColor="Black">
            <controls:CarouselViewControl.ItemTemplate>
                    <DataTemplate>
                        <ContentView>
                            <StackLayout Orientation="Vertical">
    
                                <!-- Week XX -->
                                <Label Text="{Binding WeekNumber, StringFormat='Semaine {0}'}" TextColor="{StaticResource LightGray}" HeightRequest="60"
                                       VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/>
    
                                <!-- Days -->
                                <Grid ColumnSpacing="1">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition/>
                                        <ColumnDefinition/>
                                        <ColumnDefinition/>
                                        <ColumnDefinition/>
                                        <ColumnDefinition/>
                                        <ColumnDefinition/>
                                        <ColumnDefinition/>
                                    </Grid.ColumnDefinitions>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="60"/>
                                    </Grid.RowDefinitions>
                                    <Grid.Resources>
                                        <ResourceDictionary>
                                            <Style TargetType="Label">
                                                <Setter Property="TextColor" Value="{StaticResource LightGray}"/>
                                                <Setter Property="HorizontalTextAlignment" Value="Center"/>
                                                <Setter Property="VerticalTextAlignment" Value="Center"/>
                                            </Style>
                                        </ResourceDictionary>
                                    </Grid.Resources>
                                    <Label Grid.Column="0" Text="{Binding Dates[0], StringFormat='{0:ddd dd}'}"/>
                                    <Label Grid.Column="1" Text="{Binding Dates[1], StringFormat='{0:ddd dd}'}"/>
                                    <Label Grid.Column="2" Text="{Binding Dates[2], StringFormat='{0:ddd dd}'}"/>
                                    <Label Grid.Column="3" Text="{Binding Dates[3], StringFormat='{0:ddd dd}'}"/>
                                    <Label Grid.Column="4" Text="{Binding Dates[4], StringFormat='{0:ddd dd}'}"/>
                                    <Label Grid.Column="5" Text="{Binding Dates[5], StringFormat='{0:ddd dd}'}"/>
                                    <Label Grid.Column="6" Text="{Binding Dates[6], StringFormat='{0:ddd dd}'}"/>
                                </Grid>
    
                                <!-- ListView -->
    
                            </StackLayout>
                        </ContentView>
    
                    </DataTemplate>
                </controls:CarouselViewControl.ItemTemplate>
            </controls:CarouselViewControl>
    
  • cjacquelcjacquel ✭✭✭ FRMember ✭✭✭

    I am also interested to make a carouselView with page, but with the official carouselview

  • voidstreamvoidstream ✭✭✭ FRMember ✭✭✭
    edited March 2017

    @cjacquel said:
    I am also interested to make a carouselView with page, but with the official carouselview

    I don't use the official because he has a scroll bug when you include a listview in a carouselview... and others bug :/

    You can download the official beta nuget package:
    Xamarin.Forms.CarouselView

    or a custom CarouselView:
    CarouselView.FormsPlugin

  • VelocityVelocity ✭✭✭ NZMember ✭✭✭

    The issue with a ListView inside CarouselView is a known bug on Android at the moment. UWP and iOS are OK.
    However, you can resolve this by overriding the CarouselView renderer on Android.

    The freeze/lag problem you are occurring, are you sure it is not a delay before your view model is bound to the ListView? Are you doing any heavy loading in the background? How many items in your datasource? Have you set caching strategy to recycle?

  • voidstreamvoidstream ✭✭✭ FRMember ✭✭✭
    edited March 2017

    @Velocity said:
    The issue with a ListView inside CarouselView is a known bug on Android at the moment. UWP and iOS are OK.
    However, you can resolve this by overriding the CarouselView renderer on Android.

    The freeze/lag problem you are occurring, are you sure it is not a delay before your view model is bound to the ListView? Are you doing any heavy loading in the background? How many items in your datasource? Have you set caching strategy to recycle?

    Thanks you for following

    However, you can resolve this by overriding the CarouselView renderer on Android.
    Do you have an example?

    are you sure it is not a delay before your view model is bound to the ListView?
    I'm not sure but the user experience is impacted so i can't accept this

    Are you doing any heavy loading in the background?
    No, all loading are doing when i navigate on the page

    How many items in your datasource?
    Only 3 views/pages of 5 grouped List of List of box

    My Class:

                public class Box : BindableBase
                {
                    // Fields
                    private bool _isEdited;
                    private int _statusCode;                
    
                    // Properties
                    public bool IsEdited { get { return _isEdited; } set { SetProperty(ref _isEdited, value); } }
                    public int StatusCode { get { return _statusCode; } set { SetProperty(ref _statusCode, value); } }                
    
                    public int WeekIndex { get; private set; }
                    public int PeriodIndex { get; private set; }
                    public int DayIndex { get; private set; }
                    public UserInfos UserInfos { get; private set; }
                    public bool IsEnabled { get; private set; }
    
                    // Methods
                    public Box(int weekIndex, int periodIndex, int dayIndex, User User, bool isEnabled)
                    {
                        StatusCode = -2;
                        WeekIndex = weekIndex;
                        PeriodIndex = periodIndex;
                        DayIndex = dayIndex;
                        UserInfos = new UserInfos
                        {
                            ID = User.ID,
                            Name = User.Name,
                            JobName = User.Job.Name
                        };
                        IsEnabled = IsEnabled;
                    }
                }
    
                public class UserInfos
                {
                    public int ID { get; set; }
                    public string Name { get; set; }
                    public string JobName { get; set; }
                }
    

    Have you set caching strategy to recycle?
    What is this?

  • voidstreamvoidstream ✭✭✭ FRMember ✭✭✭
    Accepted Answer

    Lags =>
    Too much bindings
    Too much complexe datatriggers
    Binding on missing command
    Missing images on Android (all drawable folders should be fill)

  • AndreiMisiukevich_AndreiMisiukevich_ ✭✭✭✭✭ USMember ✭✭✭✭✭
Sign In or Register to comment.