When flowlist scrolled fastly, it mixed viewcell for a few seconds.

pelinalpppelinalpp Member ✭✭

Hi,
I have a flowlist with group in xamarin forms. (This groups are folders or files) Flowlist has different viewcell in groups. For example in folder has folder icon in left and it has name and date information in right. But in file has thumbnail image in top and it has name and date information in bottom. I managed this with viewmodels. But I have a trouble. When flowlist scrolled fastly, it mixed viewcell for a few seconds (ex.:image1). And after it recovers.(ex.:image2).
How can I fix this?


(image1)


(image2)

I tried this situations:

-For thumbnail images: "ff:CachedImage" and Image

-Flowlist ListViewCachingStrategy RetainElement and RecycleElement
FlowListFileFolder = new FlowListView(ListViewCachingStrategy.RetainElement);

FileSystemPage.xaml

<flv:FlowListView x:Name="FlowListFileFolder" 
              IsPullToRefreshEnabled="True"
              FlowColumnCount="{Binding FlowListGridCount}" 
              FlowRowBackgroundColor="Transparent"
              HasUnevenRows="True"
              SeparatorVisibility="None"
              IsGroupingEnabled="true" 
              FlowGroupDisplayBinding="{Binding Path=Key}"
              BackgroundColor="Transparent"
              FlowItemsSource="{Binding Path=FlowListCloudItem, Mode=TwoWay}">
    <!-- List title head -->
    <flv:FlowListView.GroupHeaderTemplate>
        <DataTemplate>
            <local:ExtendedViewCell x:Name="viewCellGroupHeader" SelectedBackgroundColor="#EFEFF5" Height="20">
                <StackLayout BackgroundColor="{DynamicResource PageBgColor}" Margin="5,0,0,0">
                    <Label Text="{Binding Path=Key}" FontFamily="{DynamicResource AvenirBlack}" TextColor="{DynamicResource FolderFileCountTextColor}" FontSize="{DynamicResource FlowListGroupTitleSize}"></Label>
                </StackLayout>
            </local:ExtendedViewCell>
        </DataTemplate>
    </flv:FlowListView.GroupHeaderTemplate>
    <!-- List title end -->
    <!-- List content head -->
    <flv:FlowListView.FlowColumnTemplate>
        <DataTemplate>
            <Frame OutlineColor="Transparent" BackgroundColor="Transparent" HasShadow="False" Padding="0" Margin="0">

                <!-- Click and Long press event: FolderFileListViewItemClick_Events -->
                <lc:GesturesContentView ExcludeChildren="False" GestureRecognized="FolderFileListViewItemClick_Events">

                    <!-- For click and long press event -->
                    <lb:Gestures.Interests>
                        <lb:GestureCollection>
                            <lb:GestureInterest GestureType="SingleTap"/>
                            <lb:GestureInterest GestureType="LongPress"/>
                        </lb:GestureCollection>
                    </lb:Gestures.Interests>
                    <!-- For click and long press event -->
                    <local:CustomFolderFrame BorderColor="{Binding FrameColor}" BackgroundColor="{Binding FrameColor}" HasShadow="False" Margin="3,6,3,6" Padding="0" >
                        <StackLayout Orientation="Vertical" Spacing="0">
                            <Grid HorizontalOptions="FillAndExpand" VerticalOptions="{Binding LvGridVerticalOptions}" RowSpacing="0" ColumnSpacing="0" Padding="0">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="{Binding LvGridRowHeight}" />
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="35" />
                                </Grid.ColumnDefinitions>

                                <StackLayout AutomationId="FileSystemPage_FolderStackLayout" 
                                             Grid.Row="0" Grid.Column="0" Spacing="0" 
                                             HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" 
                                             Padding="0" Margin="0">
                                    <StackLayout 
                                             Orientation="{Binding LvItemLeftWrapperOrientation}" 
                                             Spacing="0" Padding="0" Margin="0"
                                             HorizontalOptions="FillAndExpand"
                                             VerticalOptions="{Binding LvItemLeftWrapperVerticalOptions}">
                                        <ff:CachedImage Source="{Binding LvItemThumbnailSource}" 
                                                        HorizontalOptions="Start"
                                                    WidthRequest="{Binding LvItemThumbnailWidthRequest}" 
                                                    HeightRequest="{Binding LvItemThumbnailHeightRequest}" 
                                                    Margin="{Binding LvItemThumbnailMargin}"
                                                    LoadingPlaceholder="{Binding LvItemThumbnailLoadingPlaceholder}"
                                                    DownsampleToViewSize="true" />
                                        <StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="{Binding LvItemLeftInformationWrapperVerticalOptions}" Spacing="0" Margin="7,0,0,0">
                                            <StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" Spacing="5">

                                                <Label AutomationId="FileSystemPage_lblDisplayNameFolder" 
                                                   Text="{Binding DisplayName}" 
                                                   LineBreakMode="MiddleTruncation" 
                                                   FontSize="{DynamicResource FolderTitleSize}" 
                                                   FontFamily="{DynamicResource AvenirBlack}" 
                                                   TextColor="{DynamicResource TitleTextColor}"
                                                   HorizontalOptions="FillAndExpand" />
                                                <ff:CachedImage Source="group.png" IsVisible="{Binding LvItemLeftInformationGroupIconIsVisible}" 
                                                            HeightRequest="20" WidthRequest="20" 
                                                            HorizontalOptions="End" />
                                            </StackLayout>
                                            <Label Text="{Binding CreationDate}" FontSize="{DynamicResource FolderDateSize}"
                                               FontFamily="{DynamicResource AvenirMedium}" 
                                               HorizontalOptions="FillAndExpand"
                                               TextColor="{DynamicResource FolderFileDetailTextColor}" />
                                        </StackLayout>
                                    </StackLayout>
                                </StackLayout>


                                <StackLayout Orientation="Vertical" HorizontalOptions="End" VerticalOptions="{Binding LvItemRightWrapperVerticalOptions}" Grid.Row="0" Grid.Column="1" Spacing="0" Margin="0" Padding="0">
                                    <StackLayout HorizontalOptions="{Binding LvItemCheckIconsHorizontalOptions}" VerticalOptions="CenterAndExpand" IsVisible="{Binding CheckedVisible}" Padding="{Binding LvItemLeftIconsPadding}">
                                        <ff:CachedImage VerticalOptions="CenterAndExpand" Source="checked.png" WidthRequest="{Binding LvItemLeftIconsWidthHeightRequest}" HeightRequest="{Binding LvItemLeftIconsWidthHeightRequest}" Margin="{Binding LvItemLeftIconsMargin}" />
                                    </StackLayout>
                                    <StackLayout HorizontalOptions="{Binding LvItemCheckIconsHorizontalOptions}" VerticalOptions="CenterAndExpand" IsVisible="{Binding UncheckedVisible}" Padding="{Binding LvItemLeftIconsPadding}">
                                        <ff:CachedImage VerticalOptions="CenterAndExpand" Source="unchecked.png" WidthRequest="{Binding LvItemLeftIconsWidthHeightRequest}" HeightRequest="{Binding LvItemLeftIconsWidthHeightRequest}" Margin="{Binding LvItemLeftIconsMargin}" />
                                    </StackLayout>
                                    <StackLayout HorizontalOptions="{Binding LvItemMoreDetailWrapperHorizontalOptions}" VerticalOptions="FillAndExpand" IsVisible="{Binding MoreImageVisible}" Padding="{Binding LvItemLeftIconsPadding}">
                                        <ff:CachedImage AutomationId="FileSystemPage_ItemMoreDetail" 
                                                    HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" 
                                                    Source="ic_dots_gray.png" WidthRequest="20" HeightRequest="20"
                                                    Margin="{Binding LvItemMoreDetailIconMargin}"/>
                                        <StackLayout.GestureRecognizers>
                                            <TapGestureRecognizer Tapped="ItemMoreDetail_Clicked" />
                                        </StackLayout.GestureRecognizers>
                                    </StackLayout>
                                </StackLayout>

                            </Grid>
                        </StackLayout>
                    </local:CustomFolderFrame>
                </lc:GesturesContentView>

            </Frame>
        </DataTemplate>
    </flv:FlowListView.FlowColumnTemplate>
    <!-- List content end -->
    <flv:FlowListView.Footer>
        <StackLayout BackgroundColor="{DynamicResource PageBgColor}" Margin="5,0,0,0" HeightRequest="100" VerticalOptions="CenterAndExpand" Spacing="0">
            <StackLayout Orientation="Vertical" Spacing="0" VerticalOptions="CenterAndExpand">
                <Label Text="{Binding LabelFolderCount}" FontFamily="{DynamicResource AvenirBlack}" FontSize="{DynamicResource FlowListFooterSize}" TextColor="{DynamicResource FolderFileCountTextColor}" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" />
                <Label Text="{Binding LabelFileCount}" FontFamily="{DynamicResource AvenirBlack}" FontSize="{DynamicResource FlowListFooterSize}" TextColor="{DynamicResource FolderFileCountTextColor}" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" />
            </StackLayout>
        </StackLayout>
    </flv:FlowListView.Footer>
</flv:FlowListView>

FileSystemPage.xaml.cs

FileSystemViewModel FileSystemVM { get; set; }

public FileSystemPage(CloudItemRequest _request, string PageTitle)
{
    InitializeComponent();

    if (FileSystemVM == null)
        FileSystemVM = new FileSystemViewModel();

    if(FileSystemVM.FlowListCloudItem == null)
    {
        FileSystemVM.FlowListCloudItem = new ObservableCollection<CloudItemList>();
    }

    FlowListFileFolder = new FlowListView(ListViewCachingStrategy.RetainElement);
    BindingContext = FileSystemVM;
    FileSystemVM.FlowListCloudItem = await this.GetCloudItems();
}

Answers

  • pelinalpppelinalpp Member ✭✭
    edited August 2

    Hey,
    I realized something. When I enter const value width request for thumbnail image in the flowlist, it works as it should. But if I enter binding value width request for thumbnail image in the flowlist, image which should not be there appears in an instant like above images for a few seconds. At the same time thumbnail imagesource mix for a few seconds when I scroll flowlist fastly. So flowlist doesn't apply bind value fastly. But I need two view in flowlist so I need binding value for width request. Really I don't know to do this situation. Is this a bug xamarin forms?
    Is there someone for help me?

    For example if I use it like it, image which should not be there appears.

    ff:CachedImage Source="{Binding LvItemThumbnailSource}" 
         HorizontalOptions="Start"
        WidthRequest="{Binding LvItemThumbnailWidthRequest}" 
        HeightRequest="{Binding LvItemThumbnailHeightRequest}" 
        Margin="{Binding LvItemThumbnailMargin}"
        LoadingPlaceholder="{Binding LvItemThumbnailLoadingPlaceholder}"
        DownsampleToViewSize="true"
    

    But if I set width request as follows, it works as it should.

    ff:CachedImage Source="{Binding LvItemThumbnailSource}" 
        HorizontalOptions="Start"
        WidthRequest="35" 
        HeightRequest="35" 
        Margin="{Binding LvItemThumbnailMargin}"
        LoadingPlaceholder="{Binding LvItemThumbnailLoadingPlaceholder}"
        DownsampleToViewSize="true"
    
Sign In or Register to comment.