毎日寒いですね。。ざわです。
前回から引き続きXAMLのお勉強メモです。
動作環境
・Windows10
・Microsoft Visual Studio Community 2022 Preview 7.0
・Xamarin.Forms
今回試してみたこと
今後使いそうだな、と思う コレクションを表示するビューコントロールを２つ試してみました。
- ListView
- CollectionView
先に実行結果をお見せしますとこんなカンジ。
１．ListView
1) コンテンツページ ListViewPage.xaml に、ListViewコントロールを配置。
<ListView x:Name="lstView"><ListView.ItemTemplate><DataTemplate><ImageCell Text="{Binding Name}"Detail="{Binding Comment}"ImageSource="{Binding Image}"></ImageCell></DataTemplate></ListView.ItemTemplate></ListView>
次に、9～11行目のText、Detail、ImageSourceプロパティにデータバインディングする値を設定していきます。
2) クラス（ここでは demoModelという名前のクラス）にプロパティを定義。
public class demoModel{public string Name { get; set; }public string Comment { get; set; }public string Image { get; set; }}
3) コードビハインド側（ListViewPage.xaml.cs）に、demoModel型のListオブジェクトを生成 ＆ ListViewに表示する値を設定して、そのListを ListViewのItemSourceにセット。
public partial class ListViewPage : ContentPage{public ListViewPage(){InitializeComponent();List<demoModel> list = new List<demoModel>{new demoModel() { Name = "テキスト１", Comment = "コメント１", Image="Number01.png" },new demoModel() { Name = "テキスト２", Comment = "コメント２", Image="Number02.png" },new demoModel() { Name = "テキスト３", Comment = "コメント３", Image="Number03.png" },new demoModel() { Name = "テキスト４", Comment = "コメント４", Image="Number04.png" },new demoModel() { Name = "テキスト５", Comment = "コメント５", Image="Number05.png" }};lstView.ItemsSource = list;}}
4) あと、ListViewの項目をタップしたときのイベントを追加してみます。
ListViewPage.xaml に ItemTapped イベントを追加し、
<ListView x:Name="lstView" ItemTapped="lstView_ItemTapped">
コードビハインド（ListViewPage.xaml.cs）のイベントに、アラートダイアログを表示する処理を追加。
タップした項目のNameとCommentプロパティ値を表示するようにしています。
private void lstView_ItemTapped(object sender, ItemTappedEventArgs e){var item = e.Item as demoModel;DisplayAlert(item.Name, item.Comment, "OK");}
■実行結果
２．CollectionView
CollectionViewは基本的な使い方はListViewとほぼ同じで、
以下のレイアウトのいずれかを使用することができます。
- Vertical list：新しい項目が追加されると縦に伸びる一列のリスト
- Horizontal list：新しい項目が追加されると水平方向に伸びる一列のリスト
- Vertical grid：新しい項目が追加されると垂直方向に伸びる複数列のグリッド
- Horizontal grid ：新しい項目が追加されると水平方向に伸びる複数行のグリッド
1) コンテンツページ CollectionViewPage.xaml に、CollectionViewコントロールを配置。
まずは「Vertical grid」 で試してみます。
<CollectionView x:Name="colView"ItemsLayout="VerticalGrid, 2"><CollectionView.ItemTemplate><DataTemplate><Grid Padding="10"><Grid.RowDefinitions><RowDefinition Height="35" /><RowDefinition Height="35" /></Grid.RowDefinitions><Grid.ColumnDefinitions><ColumnDefinition Width="70" /><ColumnDefinition Width="80" /></Grid.ColumnDefinitions><Image Grid.RowSpan="2"Source="{Binding Image}"Aspect="AspectFill"HeightRequest="60"WidthRequest="60" /><Label Grid.Column="1"Text="{Binding Name}"FontAttributes="Bold"LineBreakMode="TailTruncation" /><Label Grid.Row="1"Grid.Column="1"Text="{Binding Comment}"LineBreakMode="TailTruncation"FontAttributes="Italic"VerticalOptions="End" /></Grid></DataTemplate></CollectionView.ItemTemplate></CollectionView>
2) ListViewのときと同様に、
コードビハインド側（CollectionViewPage.xaml.cs）に、demoModel型のListオブジェクトを生成 ＆ CollectionViewに表示する値を設定して、そのListを CollectionViewのItemSourceにセット。
public partial class CollectionViewPage : ContentPage{public CollectionViewPage(){InitializeComponent();List<demoModel> list = new List<demoModel>{new demoModel() { Name = "テキスト１", Comment = "コメント１", Image="Number01.png" },new demoModel() { Name = "テキスト２", Comment = "コメント２", Image="Number02.png" },new demoModel() { Name = "テキスト３", Comment = "コメント３", Image="Number03.png" },new demoModel() { Name = "テキスト４", Comment = "コメント４", Image="Number04.png" },new demoModel() { Name = "テキスト５", Comment = "コメント５", Image="Number05.png" },new demoModel() { Name = "テキスト６", Comment = "コメント６", Image="Number06.png" },new demoModel() { Name = "テキスト７", Comment = "コメント７", Image="Number07.png" },new demoModel() { Name = "テキスト８", Comment = "コメント８", Image="Number08.png" },};colView.ItemsSource = list;}}
■実行結果
「Horizontal grid」の場合
<CollectionView x:Name="colView"ItemsLayout="HorizontalGrid, 4"><CollectionView.ItemTemplate><DataTemplate><Grid Padding="10"><Grid.RowDefinitions><RowDefinition Height="35" /><RowDefinition Height="35" /></Grid.RowDefinitions><Grid.ColumnDefinitions><ColumnDefinition Width="70" /><ColumnDefinition Width="140" /></Grid.ColumnDefinitions><Image Grid.RowSpan="2"Source="{Binding Image}"Aspect="AspectFill"HeightRequest="60"WidthRequest="60" /><Label Grid.Column="1"Text="{Binding Name}"FontAttributes="Bold"LineBreakMode="TailTruncation" /><Label Grid.Row="1"Grid.Column="1"Text="{Binding Comment}"LineBreakMode="TailTruncation"FontAttributes="Italic"VerticalOptions="End" /></Grid></DataTemplate></CollectionView.ItemTemplate></CollectionView>
では今日はこれで。また次回(⌒ー⌒)ﾉ
0 件のコメント:
コメントを投稿