Xamarin.Formsでアイテムの幅が可変な水平方向のリストビューを使用したいです。
メモ帳を作っているのですが、ツリー構造になっているジャンルの流れを表示するために、
ジャンル1 -> ジャンル1-1 -> 選択されているジャンル
のように画面に表示したいです。
いろいろと調べた結果、プレビュー版のCollectionViewという物があると知り、サンプルなどを参考に単純化したコードを書いてみました。
xaml
1View 2 3<?xml version="1.0" encoding="utf-8" ?> 4<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 5 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 6 x:Class="PrismTest.Views.MainPage" 7 x:Name="root"> 8 <Grid> 9 <Grid.RowDefinitions> 10 <RowDefinition Height="2*"/> 11 <RowDefinition Height="*"/> 12 <RowDefinition Height="*"/> 13 </Grid.RowDefinitions> 14 <CollectionView Grid.Row="0" ItemsSource="{Binding Items}" 15 ItemsLayout="{x:Static ListItemsLayout.HorizontalList}"> 16 <CollectionView.ItemTemplate> 17 <DataTemplate> 18 <StackLayout Orientation="Horizontal"> 19 <Label Text="{Binding}" BackgroundColor="Red" VerticalOptions="Center" HorizontalOptions="FillAndExpand"/> 20 </StackLayout> 21 </DataTemplate> 22 </CollectionView.ItemTemplate> 23 </CollectionView> 24 <Button Text="Add" Command="{Binding AddItemCommand}" Grid.Row="1"/> 25 <Button Text="Delete" Command="{Binding DeleteItemCommand}" Grid.Row="2"/> 26 </Grid> 27</ContentPage>
C#
1ViewModel 2 3using Prism.Navigation; 4using System; 5using System.Collections.ObjectModel; 6using System.Windows.Input; 7using Xamarin.Forms; 8 9namespace PrismTest.ViewModels 10{ 11 12 public class MainPageViewModel : ViewModelBase 13 { 14 15 public ObservableCollection<string> Items { get; } = new ObservableCollection<string>(); 16 public ICommand AddItemCommand { get; } 17 public ICommand DeleteItemCommand { get; } 18 19 private Random RandomGenerator { get; set; } = new Random(); 20 21 public MainPageViewModel(INavigationService navigationService) 22 : base(navigationService) 23 { 24 AddItemCommand = new Command(_ => 25 { 26 Items.Add(Guid.NewGuid().ToString("N").Substring(0, RandomGenerator.Next(1, 30))); 27 }); 28 29 DeleteItemCommand = new Command(_ => 30 { 31 if (Items.Count > 0) 32 Items.RemoveAt(Items.Count - 1); 33 }); 34 } 35 } 36} 37
このコードはUWPではうまくいくのですが、Androidでは空白ができたり、ジャンル名が折り返されて表示されたりしてしまいます。
何度か追加と削除を繰り返していると、Labelに関係なく同じ幅のStackLayoutが表示されていることに気づいたのですが、どうすればStackLayoutがLabelの幅に合わせてくれるのかわかりません・・・。
このバグをどうしたら取り除けるか、CollectionView以外に水平方向のリストビューを表示する方法があれば教えてください
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/02/23 01:53 編集