「FlowListView for Xamarin.Forms」を使用して、画面の回転時(OnSizeAllocated)に対象のListViewの
FlowColumnCountの設定値を更新することで実現できました。
該当のソースはxaml、コードビハインドそれぞれ下記となります。
また、下記コードを含むサンプルプロジェクトを下記に作成致しました。
https://github.com/takuo-nkmr/FlowListViewSample
xml
1<?xml version="1.0" encoding="utf-8"?>
2<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
3 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
4 xmlns:local="clr-namespace:FlowListViewSample"
5 xmlns:flv="clr-namespace:DLToolkit.Forms.Controls;assembly=DLToolkit.Forms.Controls.FlowListView"
6 x:Class="FlowListViewSample.FlowListViewSamplePage">
7 <flv:FlowListView x:Name="FlowList"
8 FlowColumnCount="1" HasUnevenRows="false"
9 FlowItemsSource="{Binding Items}" RowHeight="100">
10 <flv:FlowListView.FlowColumnTemplate>
11 <DataTemplate>
12 <Frame BackgroundColor="#6D6D6D" Padding="1"
13 HasShadow="false">
14 <StackLayout HorizontalOptions="FillAndExpand"
15 BackgroundColor="#FFF">
16 <Label HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"
17 Text="{Binding Path=Title}"/>
18 </StackLayout>
19 </Frame>
20 </DataTemplate>
21 </flv:FlowListView.FlowColumnTemplate>
22 </flv:FlowListView>
23</ContentPage>
24
C#
1using System.Collections.ObjectModel;
2using Xamarin.Forms;
3using DLToolkit.Forms.Controls;
4using FlowListViewSample.Model;
5
6namespace FlowListViewSample
7{
8 public partial class FlowListViewSamplePage : ContentPage
9 {
10 ObservableCollection<ItemModel> Items = new ObservableCollection<ItemModel>();
11
12 private double width = 0;
13 private double height = 0;
14
15 public FlowListViewSamplePage()
16 {
17 InitializeComponent();
18 FlowListView.Init();
19
20 FlowList.FlowItemsSource = Items;
21
22 for (var i = 1; i <= 30; i++)
23 {
24 var itemModel = new ItemModel()
25 {
26 Title = "Test-" + i.ToString()
27 };
28
29 Items.Add(itemModel);
30 }
31 }
32
33 protected override void OnSizeAllocated(double width, double height)
34 {
35 base.OnSizeAllocated(width, height);
36
37 if (this.width != width || this.height != height)
38 {
39 this.width = width;
40 this.height = height;
41 if (width > height)
42 {
43 // Landscape : 2 items per row
44 FlowList.FlowColumnCount = 2;
45
46 }
47 else
48 {
49 // Portrait : 1 item per row
50 FlowList.FlowColumnCount = 1;
51 }
52 }
53 }
54 }
55}
56
■実行結果
一応うまくいきましたが、リストの内容が画像を含むものになったりすると
パフォーマンスに難がありそうにも見えます。
とはいえ、本件の目的は達成できましたので、解決済みと致します。
ありがとうございました!
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/04/20 05:48
2018/04/24 06:26