Converting Xamarin.Forms.ListView to SfListView

[Spencer Bosley]

Hello,

What is the process for converting Xamarin.Forms.Listview.Header to SfListView?

SfListview has the headertemplate property, but I cant seem to produce the same results with directly changing the header to header template.

Edit - 

After a bit more work, I figured out the more specific problem that I am having. When converting to SfListView, the SfListView does not work when I have multiple stack layouts inside a single stack layout which is inside the header template. The xaml that I am having trouble with is provided below. I took the lines out in between the stacklayout to shorten it (This works as intended as a listview but not as an sflistview).

The stacklayouts inside of the header change depending on what part of the flow the user is at in the page. This is done by changing which stacklayouts are visible.

           

               

                   

                       

                           

                               

                                   

                                   

                               

                               

                           

                       

                   

               

           

     

        

             

                

                

                

                

                

                

            

             

                            

                

                              

                

            

   

[Spencer Bosley]

The listview I am having trouble with is attached to this reply.

Attachment: listview_xaml_e7e2ccfd.zip

[Lakshmi Natarajan]

Hi Spencer, 

 

Thank you for using Syncfusion products. 

 

We have checked the reported query “How to convert ListView Header to SfListView Header” from our side. We would like to inform you that you can achieve your requirement by loading the StackLayouts in the SfListView.HeaderTemplate. To update the runtime customization, we suggest you to use AutoFitMode as DynamicHeight for SfListView. Please refer the following code snippets for more reference, 

 

XAML 

<StackLayout> 

    <Button x:Name="button" Text="Change header" HeightRequest="50"/> 

    <syncfusion:SfListView x:Name="listView" ItemsSource="{Binding ContactsInfo}"  AutoFitMode="DynamicHeight"> 

        <syncfusion:SfListView.ItemTemplate > 

            <DataTemplate> 

                ... 

            </DataTemplate> 

        </syncfusion:SfListView.ItemTemplate> 

        <syncfusion:SfListView.HeaderTemplate> 

            <DataTemplate> 

                <StackLayout BackgroundColor="LightSkyBlue"> 

                    <StackLayout IsVisible="{Binding IsListViewNotEmpty, Converter={StaticResource InverseBoolConverter}}"> 

                        <StackLayout HeightRequest="80" WidthRequest="80" Margin="0,80,0,0" HorizontalOptions="CenterAndExpand"> 

                            <Image Source="Add.png" HeightRequest="80" WidthRequest="80" HorizontalOptions="CenterAndExpand"/> 

                        </StackLayout> 

                        <Label HorizontalOptions="CenterAndExpand" HorizontalTextAlignment="Center" Margin="30"/> 

                        <Button Text="Add New" Margin="60,10" HorizontalOptions="FillAndExpand"/> 

                    </StackLayout> 

                    <StackLayout IsVisible="{Binding IsListViewNotEmpty}"> 

                        <StackLayout Orientation="Horizontal" HorizontalOptions="CenterAndExpand" Padding="0,20,0,20"> 

                            <StackLayout.IsVisible> 

                                <OnPlatform x:TypeArguments="x:Boolean" iOS="False" Android="True"/> 

                            </StackLayout.IsVisible> 

                            <Image Source="Add.png" HeightRequest="32"/> 

                            <Label >MyList</Label> 

                        </StackLayout> 

                    </StackLayout> 

                </StackLayout> 

            </DataTemplate> 

        </syncfusion:SfListView.HeaderTemplate> 

    </syncfusion:SfListView> 

</StackLayout> 

 

C#: You can update the visbility at run time. Also, refresh the ListView to update the changes in the UI. 

private void Button_Clicked(object sender, EventArgs e) 

{ 

    ((sender as Button).BindingContext as ContactsViewModel).IsListViewNotEmpty = !((sender as Button).BindingContext as ContactsViewModel).IsListViewNotEmpty; 

    ListView.RefreshView(); 

} 

 

We have prepared a sample to achieve your requirement and attached in the following link, 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/161330-1860308841 

 

You can also refer to our user guidance document regarding the same in the following link, 

UG links: 

https://help.syncfusion.com/xamarin/listview/headerandfooter#header-and-footer-customization 

https://help.syncfusion.com/xamarin/listview/working-with-sflistview#refresh-view 

 

Please let us know if you need further assistance. 

 

Regards, 

Lakshmi Natarajan