こういうのを実現する方法。
※フォントが化けてるのはスルーしてください(◔౪◔)
端的なまとめとサンプル
- ListView の HasUnevenRows プロパティを True にすると良いです。
- サンプル: https://github.com/xamarin-samples/XamarinFormsListViewXamlImage
リスト項目部分の 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">
こんな感じに見れます。(右側の表示が Gorilla Player です。※正確には Genymotion 上で Gorilla Player を起動している)
これらのプロパティを設定しないとこうなります。縦幅がどこまであるかわからなくなる。