如何使用Synfusion SfListView在Xamarin垂直ListView和Grid之间切换？

如何解决如何使用Synfusion SfListView在Xamarin垂直ListView和Grid之间切换？

我打算使用SfListView创建一个垂直列表，然后单击按钮，布局外观必须更改为2列Grid布局。该怎么办？

解决方法

我们从头开始检查了报告的查询“在SfListview中从线性布局切换到网格布局”。我们希望让您可以在运行时将需求Layout Manager属性实现到GridLayout中。

代码段C＃：LayoutManager已使用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();
}

请参考以下Link:

中的以下演示示例 ,

您可以使用IsVisible属性来切换SFListview和Grid。但是我建议使用Listview而不是Grid。因为Listview可以将相同的ItemSource与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>

隐藏代码：

 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; }

}

截屏：