質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.37%

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 849

score 28

前提、実現したい事

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

<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="App1.View1">
    <ContentView.Content>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="64"/>
                <RowDefinition x:Name="Height" Height="0"/>
            </Grid.RowDefinitions>
            <Button Grid.Row="0" Text="{Binding}" Clicked="Button_Clicked"/>
            <Grid Grid.Row="1" IsClippedToBounds="True" BackgroundColor="Red">
                <Label Text="{Binding}"/>
            </Grid>
        </Grid>
    </ContentView.Content>
</ContentView>
using System;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
namespace App1
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class View1 : ContentView
    {
        public View1()=>InitializeComponent();
        private void Button_Clicked(object sender, EventArgs e)
        {
            if (Height.Height.Value == 256)
                Height.Height = 0;
            else
                Height.Height = 256;
        }
    }
}


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

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:App1"
             x:Class="App1.MainPage">
    <Grid BackgroundColor="Yellow" Margin="64">
        <ListView HasUnevenRows="True" x:Name="list">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <local:View1 BindingContext="{Binding}"/>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </Grid>
</ContentPage>
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace App1
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();

            List<string> urls = new List<string>();
            urls.Add("https://www.google.com/");
            urls.Add("https://www.yahoo.com/");
            urls.Add("https://www.goo.ne.jp/");
            list.ItemsSource = urls;
        }
    }
}


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)

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

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

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();

        List<Item> urls = new List<Item>();
        urls.Add(new Item
        {
            Url = "https://www.google.com/"
        });
        urls.Add(new Item
        {
            Url = "https://www.yahoo.com/"
        });
        urls.Add(new Item
        {
            Url = "https://www.goo.ne.jp/"
        });
        list.ItemsSource = urls;

    }
}

public class Item
{
    public string Url { get; set; }
    public int Height { get; set; }
}
<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="App1.View1">
    <ContentView.Content>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="64"/>
                <RowDefinition x:Name="Height" Height="{Binding Height}"/>
            </Grid.RowDefinitions>
            <Button Grid.Row="0" Text="{Binding Url}" Clicked="Button_Clicked"/>
            <Grid Grid.Row="1" IsClippedToBounds="True" BackgroundColor="Red">
                <Label Text="{Binding Url}"/>
            </Grid>
        </Grid>
    </ContentView.Content>
</ContentView>
using System;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
namespace App1
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class View1 : ContentView
    {
        public View1()=>InitializeComponent();
        private void Button_Clicked(object sender, EventArgs e)
        {
            var item = BindingContext as Item;

            if (item.Height == 256)
                item.Height = 0;
            else
                item.Height = 256;

            var listView = Parent.Parent as ListView;
            var source = listView.ItemsSource;
            listView.ItemsSource = null;
            listView.ItemsSource = source;
        }
    }
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/11/26 22:32

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.37%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る