ListView is showing only the half screen until i click once on a item.

[Steven]

My ListView is also not loading fully (Android and Windows)

After or at loading page, listview is only showing 2-3 items instead of all 100. I have to click one time on a item to load all.

it doenst matter if there are 5, 100 or 500 items in the list. list just not loading correctly.

I have this issue now since one month.

As you can see, listview is cutted until i click once on a item.

Direct after start and loading:

https://gyazo.com/9b8ae30d8ad4bc0b8ce75d0a7a00e2d7

After Click on item

https://gyazo.com/2ca3b89477b8b803ffe686018dd8eb51

[Suthi Yuvaraj]

Hi Steven,

We would like to inform you that there is a framework level issue in visual studio preview 4 , which is fixed in our SP NuGet release update version 20.2.43 which is available for download (https://www.nuget.org/) and let us know if you still facing the same issue.

Can you please share the below details which  will be more helpful for us to find the solution as soon as possible if the reported issue is reporduced

1. .NET MAUI version
2. Visual Studio version which you have used
3. Syncfusion SfListView version
4. Code snippet related to SfListView
5. Code snippet related to data population
6. Code snippet related Events , if any that you have used in your sample
7. Code snippet related ListView items, if it is added at runtime.

Regards,

Suthi Yuvaraj.

[Steven]

Still have same problem since over 2 months

Functions that also dont work:

listView.ExpandAll();

listView.CollapseAll();

HeaderSize=

GroupHeaderSize=""

have no effect in latest Versions.

VisualStudio und MAUI Version: 17.4.0 Preview 1.0 (older Versions same problem)

SfListView-Version: 20.2.44

ListView Code:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

             x:Class="DocuWeb.Termine"

             xmlns:local="clr-namespace:DocuWeb"

             xmlns:syncfusion="clr-namespace:Syncfusion.Maui.ListView;assembly=Syncfusion.Maui.ListView"

             xmlns:data="clr-namespace:Syncfusion.Maui.DataSource;assembly=Syncfusion.Maui.DataSource"

             Title="Terminliste"

             Background="#cccccc">

    <ContentPage.BindingContext>

        <local:ViewModel />

    </ContentPage.BindingContext>

    <ContentPage.ToolbarItems>

        <ToolbarItem Order="Secondary"

                     Text="Service auf diesem Gerät"

                     Priority="1" />

        <ToolbarItem Order="Secondary"

                     Text="Objekte sichern/entfernen"

                     Priority="2" />

        <ToolbarItem Order="Secondary"

                     Text="Vertretung wählen"

                     Priority="3" />

    </ContentPage.ToolbarItems>

    <Grid RowDefinitions="30,*"

          ColumnDefinitions="Auto"

          Margin="0"

          HorizontalOptions="CenterAndExpand"

          VerticalOptions="Fill"

          RowSpacing="5">

        <Grid Grid.Row="0"

              RowDefinitions="40"

              Margin="0,15,0,0"

              VerticalOptions="Center"

              HorizontalOptions="CenterAndExpand">

            <Frame Background="Ghostwhite"

                   CornerRadius="5"

                   Padding="5"

                   HorizontalOptions="CenterAndExpand">

                <Border MaximumWidthRequest="372"

                        WidthRequest="372"

                        StrokeThickness="0"

                        BackgroundColor="#a6a6a6"

                        HorizontalOptions="CenterAndExpand"

                        Background="lightgray"

                        StrokeShape="RoundRectangle 2.5,2.5,2.5,2.5">

                    <SearchBar x:Name="SearchBar"

                               Placeholder="Kunde suchen..."

                               x:FieldModifier="Public"

                               PlaceholderColor="DimGray"

                               FontSize="15"

                               TextChanged="OnFilterTextChanged"

                               TextColor="Black"

                               HorizontalOptions="CenterAndExpand"></SearchBar>

                </Border>

            </Frame>

        </Grid>

        <Grid Grid.Row="1"

              Margin="0,10,0,0">

            <Border x:Name="Border"

                    x:FieldModifier="public"

                    StrokeThickness="0"

                    Background="Transparent"

                    Margin="0,0,1.5,0"

                    InputTransparent="false"

                    StrokeShape="RoundRectangle 8,8,8,8"

                    HorizontalOptions="CenterAndExpand"

                    VerticalOptions="Start">

                <!--<Border.Shadow>

                    <Shadow

                        Brush="#4B39EF"

                        Radius="18"

                        Opacity="0.7"/>

                </Border.Shadow>-->

                <syncfusion:SfListView x:Name="listView"

                                       AutoFitMode="DynamicHeight"

                                       ItemsSource="{Binding Firmen}"

                                       SelectionMode="Single"

                                       Background="Transparent"

                                       Grid.Row="1"

                                       Grid.Column="1"

                                       ItemSpacing="2.5"

                                       x:FieldModifier="public"

                                       PropertyChanged="listView_PropertyChanged"

                                       SelectionGesture="Tap"

                                       SelectedItem="{Binding listViewItem}"

                                       SelectionChangedCommand="{Binding listView_SelectionChangedCommand}"

                                       SelectionBackground="#6857ff">

                    <syncfusion:SfListView.ItemTemplate>

                        <DataTemplate>

                            <Grid BackgroundColor="Transparent"

                                  Padding="5,-1,0,-1"

                                  ColumnSpacing="5"

                                  RowDefinitions="*"

                                  ColumnDefinitions="70,*">

                                <Border StrokeThickness="0"

                                        StrokeShape="RoundRectangle 8,8,8,8">

                                    <Image Source="{Binding Path=DayImageSource}"

                                           HorizontalOptions="Center"

                                           VerticalOptions="Center"

                                           HeightRequest="75"

                                           WidthRequest="75"

                                           Aspect="Fill"></Image>

                                </Border>

                                <Border Grid.Column="1"

                                        StrokeThickness="0"

                                        StrokeShape="RoundRectangle 8,0,8,0">

                                    <Grid BackgroundColor="#FFFFFF"

                                          Padding="5"

                                          RowDefinitions="Auto,Auto,Auto,Auto">

                                        <Label Text="{Binding Path=Firma}"

                                               Margin="5,0,0,0"

                                               LineBreakMode="WordWrap"

                                               TextColor="#4B39EF"

                                               FontFamily="Roboto-Medium"

                                               FontSize="15"

                                               FontAttributes="Bold" />

                                        <Rectangle  Grid.Row="1"

                                                    Margin="5,0,5,0"

                                                    Background="#F1F4F8"

                                                    HeightRequest="2"

                                                    VerticalOptions="Center" />

                                        <Label Grid.Row="2"

                                               LineBreakMode="NoWrap"

                                               Margin="5,7,5,0"

                                               TextColor="#95A1AC"

                                               LineHeight="1.1"

                                               FontAttributes="Bold"

                                               FontFamily="Roboto-Regular"

                                               FontSize="13">

                                            <Label.Text>

                                                <MultiBinding StringFormat='{} {0} | {1}'>

                                                    <Binding Path="Termin" />

                                                    <Binding Path="ServiceText" />

                                                </MultiBinding>

                                            </Label.Text>

                                        </Label>

                                        <Image Grid.Row="3"

                                               Margin="5,5,0,0"

                                               Source="location.png"

                                               HorizontalOptions="Start"

                                               HeightRequest="18"

                                               Aspect="AspectFit" />

                                        <Label Grid.Row="3"

                                               LineBreakMode="TailTruncation"

                                               Margin="30,5,0,0"

                                               TextColor="#4B39EF"

                                               FontAttributes="Bold,Italic"

                                               VerticalOptions="Center"

                                               HorizontalOptions="Start"

                                               FontFamily="Roboto-Regular"

                                               FontSize="13">

                                            <Label.Text>

                                                <MultiBinding StringFormat="DE-{0} {1}, {2} {3}">

                                                    <Binding Path="Postleitzahl" />

                                                    <Binding Path="Ort" />

                                                    <Binding Path="Strasse" />

                                                    <Binding Path="HausNr" />

                                                </MultiBinding>

                                            </Label.Text>

                                        </Label>

                                    </Grid>

                                </Border>

                            </Grid>

                        </DataTemplate>

                    </syncfusion:SfListView.ItemTemplate>

                </syncfusion:SfListView>

            </Border>

        </Grid>

        <ContentView x:Name="ContentPanel"

                     Grid.Row="1"

                     Content="{Binding bottomSheet}"

                     VerticalOptions="EndAndExpand"

                     HorizontalOptions="FillAndExpand"

                     WidthRequest="390"

                     Margin="0,-15"

                     Background="Transparent" />

    </Grid>

</ContentPage>

ViewModel

using DocuWeb.Classes;

using Newtonsoft.Json;

using RestSharp;

using ServiceStack;

using Syncfusion.Maui.DataSource.Extensions;

using System.Data;

using System.Globalization;

using Command = Microsoft.Maui.Controls.Command;

namespace DocuWeb

{

public class ViewModel : ObservableObject

{

private object item;

public object listViewItem

{

get { return item; }

set

{

item = value;

OnPropertyChanged();

}

}

public static IEnumerable<FirmenKunden> firmen;

public IEnumerable<FirmenKunden> Firmen

{

get { return firmen; }

set

{

firmen = value;

OnPropertyChanged();

}

}

public Command listView_SelectionChangedCommand { get; set; }

private readonly string GetUrl = "HTTPS URL"; // CENSORED

public ViewModel()

{

try

{

listView_SelectionChangedCommand = new Command(listView_SelectionChanged);

var options = new RestClientOptions(GetUrl)

{

ThrowOnAnyError = true

};

var client = new RestClient(options);

RestRequest request = new RestRequest();

RestResponse response = client.Get(request);

using (DataTable dt = (DataTable)JsonConvert.DeserializeObject(response.Content, (typeof(DataTable))))

{

CultureInfo german = new CultureInfo("de-DE");

firmen = (from DataRow row in dt.Rows

select new FirmenKunden()

{

Firma = row["Firma"].ToString(),

Termin = Convert.ToDateTime(row["Termin"]).ToString("ddd'. 'dd'.'MM'.'yyyy' 'HH:mm", german),

Strasse = row["Strasse"].ToString(),

HausNr = row["Hausnummer"].ToString(),

Postleitzahl = row["Postleitzahl"].ToString(),

Ort = row["Ort"].ToString()

}).ToList();

}

}

catch (Exception ex)

{

}

}

}

}

[Suthi Yuvaraj]

Hi Steven ,

# Regarding Functions that also dont work

HeaderSize and GroupHeaderSize	We suggest you to remove the AutoFitMode property or set the AutoFitMode as None, If you need to specify the size particular item of listview , as the AutoFitMode allows the listview to dynamically adjust the size of items based on the content irrespective of the size given to the header or groupheader.
ExpandAll() and CollapseAll()	We are able to reproduce the issue in our end. We have internally logged a bug and working for the fix and the fix will be include in our upcoming weekly nuget  August 23,2022. We appreciate your patience until then.

#Regarding ListView is showing only the half screen until click once on a item.

We would like to let know that we have faced the same issue in visual studio 2022 preview 2 , we have fixed that with the work around , the issue is fixed in framework level in the preview 4 release and we reverted the workaround in our  SP NuGet release update version 20.2.43 ,Now the all items are loaded properly. We are unable to reproduce the loading issue at our end. If possible can we arrange a meeting to investigate the problem at your end ?

Regards,

Suthi Yuvaraj.

[Steven]

Thank you for your quick response, I am very pleased that you answered me in such detail.

GroupHeaderSize

Here i hoped to find some settings for padding or TextColor, TextSize. Group Name is only left-top aligned and looks not good

About the ListView load problem:

I found out when this problem occurs.

As long as data is inserted into an OberservableCollection and the binding is created from it, there are no problems.

But when data comes from a DataTable, the ListView seems to have trouble handling it and probably can't load the data in time or fast enough.

You should take a look at it, because I can imagine that they solved the problem with an observable collection, but didn't quite pay attention to the fact that data could also come from a DataTable.

Also please give a look on this function:

listView.SelectedItems.Clear();

It does nothing, It doesnt matter how many items i select, if i hover 'SelectedItems' to see the information, it just give me the info that SelectedItems Count is Zero, which is simply not true...

EDIT:  listView.SelectedItems.Clear() // DONT WORK WITH DATATABLE AS BINDING CONTEXT (ItemsSource)

BUT WORKS WITH OBSERVABLE COLLECTION

And here just a little Question:

Is it possible to change the GroupHeader Background Color and TextColor specific?

I couldn't find anything about it in the documentation

[Suthi Yuvaraj]

Hi Steven,

#Regarding GroupHeader Customization

In SfListView , you can customize the groupheader by defining the necessary customization to the items which is added inside the groupheader template. Please refer the below code snippet for groupheader customization

<syncfusion:SfListView.GroupHeaderTemplate>

<DataTemplate>

<!-- Customization for groupheader background color and padding -->

<StackLayout Padding="10,0,0,0"

BackgroundColor="#E4E4E4">

<!-- Customization for groupheader Text -->

<Label Text="{Binding Key}"

FontSize="22"

TextColor="Chocolate"          

FontAttributes="Bold"

VerticalOptions="Center"

HorizontalOptions="Center"

Margin="20,0,0,0" />

</StackLayout>

</DataTemplate>

</syncfusion:SfListView.GroupHeaderTemplate>

#Regarding About the ListView load problem and SelectedItems is not working

We would like to let you know the reported issue items are not loaded on the initial loading is not reproduced, we have prepared a sample from the code snippet that you have provided and converted the JSON object to data table from web url , items are loaded properly and selection and selectedItems() contains the exact selected items value at our end. We have attached the workable sample , Please have a look at this sample and let us know if missed any customization you have done in your application or revert us with modified replicate the reported issue on our end. Please share details how do you set the ItemsSource of the Listview? It will be more helpful for us to provide timely solution.

Also, we have attached the KB which contains information about how to bind the data table to the listview for your reference.

KB Link: https://www.syncfusion.com/kb/9697/how-to-bind-data-from-the-datatable-to-listview-in-xamarin-forms

Regards,

Suthi Yuvaraj.

Attachment: JSON_34bd4b15.zip

[Steven]

I facing the same issue, i uploadet here my sample with your ViewModel, on first Page you have to Click on "Termine".

What iam talking about is, that the ListView is only showing the half of "All" items. Your Json Array is to big to see the issue.

In my Sample i have linked my own json with 5 items. You will see the cut on the half.

If this is improtant: I build and emulate with Android 12.1, Pixel 5 API 32

Feel free to use my referenced link in ViewModel

https://github.com/ShiiikK/Syncfusion-ListView-Load-Bug-Repo

[Steven]

Are you facing the same issue now ? 

[Suthi Yuvaraj]

Hi Steven ,

Currently, we are validating the reported issue on our end. We have checked the provided sample in windows platform with datatable issue is not reproduced at our end. We are in need of two more business days to validate this issue and check the issue in both the platform on our end. We will update you with further details on or before August 25, 2022. We appreciate your patience until then.

Regards,

Suthi Yuvaraj.

[Steven]

I found out what is causing the error, it is AutoFitMode.

your listView Control cannot handle AutoFitMode"DynamicHeight". if i set this to None and set my own ItemSize, then it works like expected.

PS. i tested it also with your newest Version from yesterday

AutoFitMode="None" solved it for me, for now.

[Amit Saraf]

I'm also facing the problem

Listview working properly on WinUI but not on Andriod

1. .NET MAUI version
2. Visual Studio version which you have used :  VS 2022 17.3.1
3. Syncfusion SfListView version :  20.2.44
4. Code snippet related to SfListView

From App.XAML

            <DataTemplate x:Key="AInfoTemplate">
                <Grid RowDefinitions="Auto,Auto,Auto" RowSpacing="5" Padding="5,10">
                    <Label Grid.Row="0" Text="{Binding AName}" FontAttributes="Bold" FontSize="20" LineBreakMode="NoWrap"/>
                    <Label Grid.Row="1" Text="{Binding ACatStr}" LineBreakMode="NoWrap"/>
                    <Label Grid.Row="2" Text="{Binding DTypeStr}" LineBreakMode="NoWrap"/>
                    <!--<HorizontalStackLayout  Grid.Row="2">
                        <Label Text="{Binding DType}"/>
                        <Label Text="{Binding ADOB, StringFormat='{}{0: : dd/MM/yyyy}'}"/>
                    </HorizontalStackLayout>-->
                </Grid>
            </DataTemplate>

From ContentPage

            <syncLV:SfListView x:Name="LV"
                    ItemsSource="{Binding AInfo_List}" SelectedItem="{Binding SelAInfo}"
                    SelectionMode="Single" AutoFitMode="Height"
                    ItemTemplate="{x:StaticResource AInfoTemplate}">
            </syncLV:SfListView>

1. Code snippet related to data population

        List<AInfo> _AInfo;
        public List<AInfo> AInfo { get => _AInfo; set { _AInfo = value; RaisePropertyChanged(nameof(AInfo)); RaisePropertyChanged(nameof(AInfo_List)); } }
        public List<AInfo> AInfo_List { get => AInfo.OrderBy(X => X.AName.ToLower()).ToList() as List<AInfo>; }

1. Code snippet related Events , if any that you have used in your sample

        LV.SelectionChanged += async (s, e) => await Navigation.PushAsync(new AInfo_Details(ref CurAppData));

1. Code snippet related ListView items, if it is added at runtime.

Hope this h

[Suthi Yuvaraj]

Hi Steven,

We would like to let you know that we are unable to reproduce the issue in the provided sample with all the AutoFit Mode(Height, DynamicHeight, and None) settings. We have attached the output video and the tested scenario details for your reference. 

Tested Scenario Information:

Visual Studio preview version: 17.4.0 Preview 1.0

SfListView version: 20.2.45

Tested Platform : Device (Android 9 API- 28) and Emulator(Android 12.0  API-31 )

If possible, can we arrange a meeting to investigate the problem at your end? Could you please share the exact .NET Maui version details also.

Regards,

Suthi Yuvaraj

Attachment: ListViewDataTable_f012b507.zip

[Steven]

Hey, try to change the AutoFitMode="Height" to AutoFitMode="None" and add then also ItemSize="40" or other Value to define the size manually. this fixed for me the issue.

[Amit Saraf]

Thanks,

it worked for me too

[Suthi Yuvaraj]

Hi Amit,

We have checked the reported query on our end. We are unable to reproduce the issue at this time, we suspect that the issue is caused by a conflict between dependency packages. We have internally logged the issue and working on upgrading the packages(6.0.486) and compatibility of our control. We will fix the issue and include the fix in our upcoming weekly nuget August 30, 2022, or we will update you with further details on or before August 30, 2022. We appreciate your patience until then.

Regards,

Suthi Yuvaraj.

[Suthi Yuvaraj]

Hi Steven/Amit,

We regret to inform you that we could not include the issue fix as promised We will fix it and update you with further details on or before September 8,2022. We appreciate your patience until then.

Regards,

Suthi Yuvaraj.

[Suthi Yuvaraj]

Hi Steven/Amit,

As mentioned ,we have internally logged the issue and working on upgrading the packages(6.0.486) and compatibility of our control. Here we have shared custom assembly of Syncfusion.Maui.ListView package with dependencies . We request you to use the dlls in your project and let us know if you are still facing the issue.

Regards,

Suthi Yuvaraj.

Attachment: Custom_dll_6636c86c.zip