问题描述
我打算使用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; }
}
截屏: