Xamarin.FormsのListViewのTemplate内の高さ可変コントロールの挙動について(iOS)

###前提、実現したい事
ボタンを押すと詳細を表示するというGUIを実現するため
以下のようなコントロールを作成しました

xaml
1<?xml version="1.0" encoding="UTF-8"?>
2<ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
3             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
4             x:Class="App1.View1">
5    <ContentView.Content>
6        <Grid>
7            <Grid.RowDefinitions>
8                <RowDefinition Height="64"/>
9                <RowDefinition x:Name="Height" Height="0"/>
10            </Grid.RowDefinitions>
11            <Button Grid.Row="0" Text="{Binding}" Clicked="Button_Clicked"/>
12            <Grid Grid.Row="1" IsClippedToBounds="True" BackgroundColor="Red">
13                <Label Text="{Binding}"/>
14            </Grid>
15        </Grid>
16    </ContentView.Content>
17</ContentView>

c#
1using System;
2using Xamarin.Forms;
3using Xamarin.Forms.Xaml;
4namespace App1
5{
6    [XamlCompilation(XamlCompilationOptions.Compile)]
7    public partial class View1 : ContentView
8    {
9        public View1()=>InitializeComponent();
10        private void Button_Clicked(object sender, EventArgs e)
11        {
12            if (Height.Height.Value == 256)
13                Height.Height = 0;
14            else
15                Height.Height = 256;
16        }
17    }
18}

このコントロールをListViewのTemplateで以下のように利用いたしました。

xaml
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:App1"
5             x:Class="App1.MainPage">
6    <Grid BackgroundColor="Yellow" Margin="64">
7        <ListView HasUnevenRows="True" x:Name="list">
8            <ListView.ItemTemplate>
9                <DataTemplate>
10                    <ViewCell>
11                        <local:View1 BindingContext="{Binding}"/>
12                    </ViewCell>
13                </DataTemplate>
14            </ListView.ItemTemplate>
15        </ListView>
16    </Grid>
17</ContentPage>

c#
1using System;
2using System.Collections.Generic;
3using System.ComponentModel;
4using System.Linq;
5using System.Text;
6using System.Threading.Tasks;
7using Xamarin.Forms;
8
9namespace App1
10{
11    public partial class MainPage : ContentPage
12    {
13        public MainPage()
14        {
15            InitializeComponent();
16
17            List<string> urls = new List<string>();
18            urls.Add("https://www.google.com/");
19            urls.Add("https://www.yahoo.com/");
20            urls.Add("https://www.goo.ne.jp/");
21            list.ItemsSource = urls;
22        }
23    }
24}

Androidでは望んだようにURLを表示したボタンのリストが表示され、ボタンを押下するとその下に詳細表示用の領域が展開されその分リストのアイテムの高さも変更されることを確認しました。

ところがiOSですと望んだような挙動にならず、表示が壊れてしまいます。
ボタン押下に反応しなかったり
アイテムの高さが変わらずにオーバーラップしたような状態で詳細表示領域が展開されたり
何度も展開を繰り返していると、下にいるはずの別のアイテムが上に出てきてしまったり
等とおかしな挙動をします。

iOSでこのようなUIは実現できないものでしょうか？

###開発環境
iPhone実機なし iOS v14.1
macOS Catalina v10.15.7
Visual Studio for mac v8.8(build 2913)
Xcode v12.1(12A7403)

行動規範の内容に同意します

回答1件

ベストアンサー

以下の様にするのはどうでしょうか？高さのデータもバインドする様にして、ボタン押下時に再描画を行う様にしています。

C#
1public partial class MainPage : ContentPage
2{
3    public MainPage()
4    {
5        InitializeComponent();
6
7        List<Item> urls = new List<Item>();
8        urls.Add(new Item
9        {
10            Url = "https://www.google.com/"
11        });
12        urls.Add(new Item
13        {
14            Url = "https://www.yahoo.com/"
15        });
16        urls.Add(new Item
17        {
18            Url = "https://www.goo.ne.jp/"
19        });
20        list.ItemsSource = urls;
21
22    }
23}
24
25public class Item
26{
27    public string Url { get; set; }
28    public int Height { get; set; }
29}

xaml
1<?xml version="1.0" encoding="UTF-8"?>
2<ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
3             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
4             x:Class="App1.View1">
5    <ContentView.Content>
6        <Grid>
7            <Grid.RowDefinitions>
8                <RowDefinition Height="64"/>
9                <RowDefinition x:Name="Height" Height="{Binding Height}"/>
10            </Grid.RowDefinitions>
11            <Button Grid.Row="0" Text="{Binding Url}" Clicked="Button_Clicked"/>
12            <Grid Grid.Row="1" IsClippedToBounds="True" BackgroundColor="Red">
13                <Label Text="{Binding Url}"/>
14            </Grid>
15        </Grid>
16    </ContentView.Content>
17</ContentView>

C#
1using System;
2using Xamarin.Forms;
3using Xamarin.Forms.Xaml;
4namespace App1
5{
6    [XamlCompilation(XamlCompilationOptions.Compile)]
7    public partial class View1 : ContentView
8    {
9        public View1()=>InitializeComponent();
10        private void Button_Clicked(object sender, EventArgs e)
11        {
12            var item = BindingContext as Item;
13
14            if (item.Height == 256)
15                item.Height = 0;
16            else
17                item.Height = 256;
18
19            var listView = Parent.Parent as ListView;
20            var source = listView.ItemsSource;
21            listView.ItemsSource = null;
22            listView.ItemsSource = source;
23        }
24    }
25}

投稿2020/11/26 10:34

f-miyu

総合スコア1625

ikarimame

2020/11/26 13:32

ありがとうございます、ItemsSourceを一度nullに設定することで再描画を行わせるということですね望んだ通りに動作していることを確認できました。また、選択状態がリセットされているのが気になりましたが、それも再描画後に改めてSelectedItemを設定してあげ、展開イベントが発生した要素までScrollToすることでそれっぽく動くようになりました。

行動規範の内容に同意します