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

【问题标题】：How to switch between Xamarin vertical ListView to Grid using Synfusion SfListView?如何使用 Synfusion SfListView 在 Xamarin 垂直 ListView 到 Grid 之间切换？
【发布时间】：2021-01-09 20:11:24
【问题描述】：

我打算使用 SfListView 创建一个垂直列表，然后单击按钮布局外观必须更改为 2 列网格布局。如何做到这一点？

【问题讨论】：

嗨！你会提供相同的数据吗？如果是这样，我会使用具有您想要的布局的不同模板。但如果数据不同，我只会隐藏SfListView 并使用网格显示另一个视图。

标签： listview xamarin xamarin.forms syncfusion

【解决方案1】：

您可以使用IsVisible 属性来切换更好的SFListview 和Grid。但我建议使用 Listview 而不是 Grid。因为 Listview 可以使用与 SFLisview 相同的 ItemSource。

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

}

截图：

【讨论】：

【解决方案2】：

我们希望您可以在运行时将您的 Layout Manager 属性实现为 GridLayout。

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:中的demo样例

【讨论】：