How to switch between Xamarin vertical ListView to Grid using Synfusion SfListView?

Question

I am planning to use an SfListView to create a vertical list and on button click the layout appearance must change to, say, a 2 column Grid layout. How can this be done?

Answer 1

We would like to let you that you can achieve your requirement Layout Manager property into GridLayout at a runtime.

LayoutManager updated with GridLayout.

private void Button_Clicked(object sender, EventArgs e)
{
    var layoutManager = listView.LayoutManager;
    if (layoutManager is LinearLayout)
    {
        listView.LayoutManager = new GridLayout() { SpanCount = 2 };
    }
    else
        listView.LayoutManager = new LinearLayout();
}

Please refer to the following demo sample in the following Link:

Answer 2

You could use IsVisible property to switch beterrn SFListview and Grid. But I suggest to use Listview instead of Grid. Because the Listview could use the same ItemSource with SFLisview.

Xaml:

 <ContentPage.Content>
    <StackLayout>
        <Button Clicked="Button_Clicked" />
        <sf:SfListView x:Name="SFListview" ItemsSource="{Binding Infos}">
            <sf:SfListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout Orientation="Horizontal">
                            <Label Text="{Binding Name}" />
                            <Label Text="{Binding Age}" />
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </sf:SfListView.ItemTemplate>
        </sf:SfListView>
        <Grid x:Name="grid" IsVisible="False">
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>

            <Label
                Grid.Row="0"
                Grid.Column="0"
                Text="A" />
            <Label
                Grid.Row="0"
                Grid.Column="1"
                Text="1" />

            <Label
                Grid.Row="1"
                Grid.Column="0"
                Text="B" />
            <Label
                Grid.Row="1"
                Grid.Column="1"
                Text="2" />

            <Label
                Grid.Row="2"
                Grid.Column="0"
                Text="C" />
            <Label
                Grid.Row="2"
                Grid.Column="1"
                Text="3" />

        </Grid>
    </StackLayout>
</ContentPage.Content>

Code Behind:

 public partial class Page2 : ContentPage
{
    public ObservableCollection<Info> Infos { get; set; }
    public Page2()
    {
        InitializeComponent();
        Infos = new ObservableCollection<Info>()
        {
             new Info(){ Name="A", Age=1},
              new Info(){ Name="B", Age=2},
               new Info(){ Name="C", Age=3},
        };

        this.BindingContext = this;
    }

    private void Button_Clicked(object sender, EventArgs e)
    {
        SFListview.IsVisible = false;
        grid.IsVisible = true;
    }
}
public class Info
{
    public string Name { get; set; }
    public int Age { get; set; }

}

Screenshot: