Home > OS >  How to replace SFListView into Xamarin Forms ListView
How to replace SFListView into Xamarin Forms ListView

Time:04-06

For some reason when I use SfListView the list is not loading on time , it seems the page loads way faster than the list. In context , the service that fills the list is full of linQ selections . Iam not sure if these were the reasons why the list doesn't appear on time . After some research, when I use a regular xamarin forms or collection view it does show the items on time. I choose syncfusion because it is easier to display an inner list with less code on my end. However, my frustration is so real now that I'd rather do whatever it takes to get these 2 list working.

Question How can I replace what I have to match xamarin forms list binding properties? How can I replace SFListview into a Listview in the below example? Is there any other thing that I could add to force the page to load in delay or until the list gets filled? If I use a hardcode list not a problem . I just dont understand
NOTES: When I use xamarin forms HotReload , I can inmediately see the list . but I have to force the refresh or something like that .

  1. List item

I tried the following

public class OuterListViewBehavior : Behavior<SfListView>
    {
        SfListView ListView;
        protected override void OnAttachedTo(SfListView bindable)
        {
            ListView = bindable;
            
            ListView.Loaded  = ListView_Loaded;
            base.OnAttachedTo(bindable);
        }
        private async void ListView_Loaded(object sender, ListViewLoadedEventArgs e)
        {
            await Task.Delay(2000);
            ListView.RefreshView();
        }
    }

XAML

<StackLayout x:Name="mainGrid" Grid.Row="0" BackgroundColor="Transparent" Padding="4">

            <sync:SfListView x:Name="outerlist" ItemsSource="{Binding ActiveDates}" 

                              AutoFitMode="DynamicHeight"

                              SelectionMode ="Single"

                              IsScrollBarVisible="False"

                              ItemSpacing="0"

                              TapCommand="{Binding TapGestureCommand}">


                <!--customize on item tapped-->

                <sync:SfListView.ItemTemplate >

                    <DataTemplate>

                        <Grid Grid.RowDefinitions="Auto,Auto" VerticalOptions="FillAndExpand" BackgroundColor="White" HorizontalOptions="FillAndExpand">

                            <Grid x:Name="grid" RowSpacing="0" Padding="0,5,0,0">

                                <yummy:PancakeView Margin="4" WidthRequest="60" Padding="4" BackgroundColor="White" CornerRadius="4" HorizontalOptions="Center" >

                                    <yummy:PancakeView.Border>

                                        <yummy:Border Thickness="4" Color="red" />

                                    </yummy:PancakeView.Border>

                                    <StackLayout>

                                        <Label Text="{Binding Month}" TextColor="#2A86E3" FontSize="16" HorizontalTextAlignment="Center" Margin="0" >
                                            <Label.Triggers>
                                                <DataTrigger TargetType="Label" 
                                                             Binding="{Binding completed}"
                                                             Value="true">
                                                    <Setter Property="TextColor" Value="White"/>
                                                    <Setter Property="BackgroundColor" Value="LightBlue"/>
                                                </DataTrigger>
                                            </Label.Triggers>
                                        </Label>

                                    </StackLayout>

                                </yummy:PancakeView>

                            </Grid>

                            <Grid Grid.RowDefinitions="1,80" IsVisible="{Binding completed}" ColumnSpacing="0" RowSpacing="0" Grid.Row="1" BackgroundColor="White" HorizontalOptions="FillAndExpand" Padding="5" VerticalOptions="FillAndExpand">

                                <BoxView Grid.Row="0" Grid.Column="0" BackgroundColor="LightGray" />

                                <!--Building list inner list -->

                                <helpers:ExtendedListView x:Name="innerListView"

                                           SelectionMode ="None"

                                           Grid.Row="1"

                                           TapCommand="{Binding Path=BindingContext.TapInnerListGestureCommand,

                                           Source={x:Reference outerlist}}"

                                           IsScrollBarVisible="False"

                                           ItemsSource="{Binding Path=BindingContext.Activehours,

                                           Source={x:Reference outerlist}}" >

                                    <helpers:ExtendedListView.ItemTemplate>

                                        <DataTemplate>

                                            <Grid Grid.RowDefinitions="Auto" >

                                                <yummy:PancakeView Margin="3" WidthRequest="60" Padding="4" BackgroundColor="White" CornerRadius="4" HorizontalOptions="Center" >

                                                    <yummy:PancakeView.Border>

                                                        <yummy:Border Thickness="4" Color="#D9DADB" />

                                                    </yummy:PancakeView.Border>

                                                    <StackLayout>

                                                        <Label Text="{Binding body}" TextColor="#2A86E3" FontSize="16" HorizontalTextAlignment="Center" Margin="0">
                                                            <Label.Triggers>
                                                                <DataTrigger TargetType="Label" 
                                                             Binding="{Binding completed}"
                                                             Value="true">
                                                                    <Setter Property="TextColor" Value="White"/>
                                                                </DataTrigger>
                                                            </Label.Triggers>
                                                        </Label>

                                                    </StackLayout>

                                                </yummy:PancakeView>

                                            </Grid>

                                        </DataTemplate>

                                    </helpers:ExtendedListView.ItemTemplate>

                                </helpers:ExtendedListView>

                            </Grid>

                        </Grid>

                    </DataTemplate>

                </sync:SfListView.ItemTemplate>

            </sync:SfListView>

        </StackLayout>

ViewModel

Device.BeginInvokeOnMainThread(async () =>
            {

             await GetListAsync(id, buid);


           });

CodePudding user response:

If the cause is the time of getting data from the database, you can put the method of loading data in a Task async methdod and use the Task.Wait() in the page's Onappearing method. Such as:

create a method in your viewmodel

 public async Task getDataFromSQlite()
 {
     //do the linQ selections
 }

use the following code in your page.cs

  public Page()
    {
        InitializeComponent();
        PageViewModel viewmodel = new PageViewModel();
        this.BindingContext = viewmodel;

        //You can also call the method here
        //Task result = viewmodel.getDataFromSQlite()
        //result.Wait();
    }
  
  protected override void OnAppearing()
  {
        Task result = viewmodel.getDataFromSQlite()
        result.Wait();
        base.OnAppearing();
  }
 

CodePudding user response:

We suspect that the delay is caused by the Delay provided in the Loaded event. Please remove the delay to resolve the reported scenario.

private async void ListView_Loaded(object sender, ListViewLoadedEventArgs e)
{
    await Task.Delay(2000);
    ListView.RefreshView();
}
  • Related