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

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

新規登録して質問してみよう
ただいま回答率
85.50%
C#

C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

iOS

iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム(OS)です。その他にもiPod touch・Apple TVにも搭載されています。

XAML

XAML(Extensible Application Markup Language)はWPF、Silverlight、Windows PhoneそしてWindows Store appsでユーザーインターフェースを定義するために使われるXML言語です。

Xamarin

Xamarin(ザマリン)は、iPhoneなどのiOSやAndroidで動作し、C# 言語を用いてアプリを開発できるクロスプラットフォーム開発環境です。Xamarin Studioと C# 言語を用いて、 iOS と Android の両方の開発を行うことができます。

Q&A

解決済

1回答

1585閲覧

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

ikarimame

総合スコア37

C#

C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

iOS

iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム(OS)です。その他にもiPod touch・Apple TVにも搭載されています。

XAML

XAML(Extensible Application Markup Language)はWPF、Silverlight、Windows PhoneそしてWindows Store appsでユーザーインターフェースを定義するために使われるXML言語です。

Xamarin

Xamarin(ザマリン)は、iPhoneなどのiOSやAndroidで動作し、C# 言語を用いてアプリを開発できるクロスプラットフォーム開発環境です。Xamarin Studioと C# 言語を用いて、 iOS と Android の両方の開発を行うことができます。

0グッド

0クリップ

投稿2020/11/26 02:26

###前提、実現したい事
ボタンを押すと詳細を表示するという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)

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

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することでそれっぽく動くようになりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問