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

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

ただいまの
回答率

90.47%

  • C#

    7445questions

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

  • Android

    6632questions

    Androidは、Google社が開発したスマートフォンやタブレットなど携帯端末向けのプラットフォームです。 カーネル・ミドルウェア・ユーザーインターフェイス・ウェブブラウザ・電話帳などのアプリケーションやソフトウェアをひとつにまとめて構成。 カーネル・ライブラリ・ランタイムはほとんどがC言語/C++、アプリケーションなどはJavaSEのサブセットとAndroid環境で書かれています。

  • iOS

    4089questions

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

  • Visual Studio

    1914questions

    Microsoft Visual StudioはMicrosoftによる統合開発環境(IDE)です。多種多様なプログラミング言語に対応しています。

  • Xamarin

    518questions

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

Xamarin.Forms(Prism)でListViewのタップ時に選択項目に応じた詳細欄を表示する方法

受付中

回答 1

投稿

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

ReKp

score 2

 実現したいこと

Xamarin.Forms(Prism使用) にて、ListView をタップした際に タップした項目に応じた詳細欄を表示したいと思っています。

イメージは以下の図の通りです。
タップした項目が「女」なら「身長」の入力欄を含むテンプレートを、
タップした項目が「男」なら「体重」の入力欄を含むテンプレートを表示したいです。

ListViewイメージ

ここではMVVMパターンを使用しており、リストには「名前」「性別」「身長」「体重」を含むモデルがバインディングされているとします。

 発生している問題

これを実現するには、通常時用、男性用、女性用の3種類の ItemsTemplate を用意しておき、タップした際にテンプレートを差し替えれば良いのだろうと思っています。

しかし、

  • どのようにして差し替えを実現したら良いのか(そもそもXAMLで差し替え部分だけ作成可能?)
  • 差し替えはView側で行うのだとは思うが、どうやって選択項目の性別を知るのか(人物のモデルを持っているのはViewModelなのでViewからは分からない)

が分かりません。

このような場合は、どう実装すべきなのでしょうか。

 その他

プロジェクトでは以下のライブラリを使用しているので、実現にあたり必要であれば利用可能です。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

0

動的にTemplateを入れ替える方法は無いような気がしますね。
DataTemplateSelectorという機能がありますが、ListViewへのバインド時にItemの状態によって適用するDataTemplateを切り替えるだけで、その後の状態の変化によってTemplateを切り替えるということはできません。

今回の場合、アプローチとしては、行を表すクラスにIsSelectedのようなプロパティを保持しておいて、それによって入力欄の表状態を切り替えれば仰っている内容は実装できると思います。
こんな感じで。

イメージ説明

今回の例ではDataTemplateSelectorで性別によって適用するテンプレートを変えています。  
まずSelectorを作ります。  

public class PersonDataTemplateSelector : Xamarin.Forms.DataTemplateSelector
{
    public DataTemplate MaleTemplate { get; set; }
    public DataTemplate FemaleTemplate { get; set; }
    protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
    {
        return (item as Person)?.Gender == Gender.Male
            ? MaleTemplate
            : FemaleTemplate;
    }
}

そしてXAMLには次のように記述します。  
PersonのGenderプロパティをみてテンプレートを分けていますが、PersonのサブクラスとしてMaleクラスとFemaleクラスを作り、テンプレートを切り替えたり、そもそも全てViewModel(Personの)で何とかする方法もあると思います。  

<?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:DataTemplateSelector"
             x:Class="DataTemplateSelector.MainPage">
    <ContentPage.BindingContext>
        <local:MainPageViewModel/>
    </ContentPage.BindingContext>
    <ContentPage.Resources>
        <ResourceDictionary>
            <DataTemplate x:Key="MaleDataTemplate">
                <ViewCell>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Label Grid.Row="0" Grid.Column="0" Text="氏名"/>
                        <Label Grid.Row="0" Grid.Column="1" Text="{Binding Name}" TextColor="Blue"/>
                        <Label Grid.Row="1" Grid.Column="0" Text="体重" IsVisible="{Binding IsSelected}"/>
                        <Entry Grid.Row="1" Grid.Column="1" Text="{Binding Weight}" IsVisible="{Binding IsSelected}"/>
                    </Grid>
                </ViewCell>
            </DataTemplate>
            <DataTemplate x:Key="FemaleDataTemplate">
                <ViewCell>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Label Grid.Row="0" Grid.Column="0" Text="氏名"/>
                        <Label Grid.Row="0" Grid.Column="1" Text="{Binding Name}" TextColor="Red"/>
                        <Label Grid.Row="1" Grid.Column="0" Text="身長" IsVisible="{Binding IsSelected}"/>
                        <Entry Grid.Row="1" Grid.Column="1" Text="{Binding Height}" IsVisible="{Binding IsSelected}"/>
                    </Grid>
                </ViewCell>
            </DataTemplate>
            <local:PersonDataTemplateSelector x:Key="PersonDataTemplateSelector"
                                              MaleTemplate="{StaticResource MaleDataTemplate}"
                                              FemaleTemplate="{StaticResource FemaleDataTemplate}"/>
        </ResourceDictionary>
    </ContentPage.Resources>
    <ListView ItemsSource="{Binding Persons}" 
              ItemTemplate="{StaticResource PersonDataTemplateSelector}"
              SelectedItem="{Binding SelectedPerson}"
              HasUnevenRows="True"/>
</ContentPage>

一応この全コードは以下のリポジトリのDataTemplateSelectorのプロジェクトにあげてあるので、良かったらご覧ください。
https://github.com/nuitsjp/XamarinSamples

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/08/18 00:10

    ご回答ありがとうございます。DataTemplateSelectorという手段があることを初めて知りました。
    ご提案いただいた方法で目的が達成できそうです。

    2点質問をさせてください。

    > PersonのサブクラスとしてMaleクラスとFemaleクラスを作り、テンプレートを切り替えたり

    これは、 return (item as Person)?.Gender == Gender.Male ? MaleTemplate : FemaleTemplate
    ではなく、return item is MalePerson ? MaleTemplate : FemaleTemplate
    のように、Genderプロパティの値ではなくitem自体のクラスを判定するようにする、という意味でしょうか。

    > そもそも全てViewModel(Personの)で何とかする方法もあると思います。

    これについては想像がつかないのですが、もう少し詳しく教えていただけないでしょうか。

    キャンセル

  • 2017/08/21 17:35

    前者についてはその通りです。
    後者については、PersonにVisibleWeightとVisibleHeightを用意して、テンプレート自体は一つにしてしまい、表示時に性別によって制御する方法です。
    ただ、そもそもリストの中で編集できることは、あまり一般的ではない印象があります。
    画面遷移して編集画面で編集した方が良いようにも思えますがいかがでしょうか?

    特に、入力欄が画面下部にあった場合に、入力エリアが正しく表示されるか不安を感じます(未確認ですが)

    キャンセル

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

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

関連した質問

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

  • C#

    7445questions

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

  • Android

    6632questions

    Androidは、Google社が開発したスマートフォンやタブレットなど携帯端末向けのプラットフォームです。 カーネル・ミドルウェア・ユーザーインターフェイス・ウェブブラウザ・電話帳などのアプリケーションやソフトウェアをひとつにまとめて構成。 カーネル・ライブラリ・ランタイムはほとんどがC言語/C++、アプリケーションなどはJavaSEのサブセットとAndroid環境で書かれています。

  • iOS

    4089questions

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

  • Visual Studio

    1914questions

    Microsoft Visual StudioはMicrosoftによる統合開発環境(IDE)です。多種多様なプログラミング言語に対応しています。

  • Xamarin

    518questions

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