clock-up-blog

go-mi-tech

Xamarin ListView のアイテム縦幅を動的に変える

Xamarin

こういうのを実現する方法。
f:id:kobake:20160812175237p:plain:w400
※フォントが化けてるのはスルーしてください(◔౪◔)

端的なまとめとサンプル

リスト項目部分の ContentView の XAML (MyListItemView.xaml)

<?xml version="1.0" encoding="utf-8" ?>
<ContentView …>
    <ContentView.Content>
        <StackLayout Orientation="Horizontal" Padding="10" VerticalOptions="Start">
            <Image Source="{Binding Image}" WidthRequest="50" VerticalOptions="Start" />
            <StackLayout Orientation="Vertical" Padding="10, 0, 0, 0">
                <Label Text="{Binding Name}" />
                <Label Text="{Binding State}" />
            </StackLayout>
        </StackLayout>
    </ContentView.Content>
</ContentView>

以下のような部品を作ってます。

┌──┬──────────┐
│画像│ラベル　　　　　　　│
│　　├──────────┤
│    │ラベル　　　　　　　│
└──┴──────────┘

リストビューを設置した ContentPage の XAML (Page1.xaml)

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage …>
  <ListView … HasUnevenRows="True"> <!-- 【大事】HasUnevenRows を True にする -->
    <ListView.ItemTemplate>
      <DataTemplate>
        <ViewCell>
          <local:MyListItemView /> <!-- 上で作った項目部分のビュー -->
        </ViewCell>
      </DataTemplate>
    </ListView.ItemTemplate>
  </ListView>
</ContentPage>

以上

HasUnevenRows を True にする以外は実は特に大事ではないです。
サンプルを見るのが早いかと。

以下おまけ：Gorilla Player によるプレビュー機能について

おまけと言いつつ割と大事な話なのですが。


Gorilla Player というモノを使うと XAML 編集中に見た目を確認できます。
使い方解説（日本語）はここを見るのが良いかと。


リストビューの項目部分の ContentView のプレビューをしたいときには
VerticalOptions を Start に設定して、かつ、BackgroundColor に適当な色を設定すると良いです。
（設定例）

<StackLayout … VerticalOptions="Start" BackgroundColor="#444">

f:id:kobake:20160812182817p:plain:w800
こんな感じに見れます。（右側の表示が Gorilla Player です。※正確には Genymotion 上で Gorilla Player を起動している）


これらのプロパティを設定しないとこうなります。縦幅がどこまであるかわからなくなる。
f:id:kobake:20160812182941p:plain:w350

参考