Xamarin.FormsマルチカラムテーブルGUI

Question

Listは、このようなテーブルを作成するための適切なオプションですか？

セルの内容はテキストのみですが、私は、カスタムのエントリのいくつかの最も一般的なオプションを持つ細胞タッチとテキストフィールドにドロップダウンメニューのようなものを表示できるようにする必要があります。 最大80〜100行のデータがありますが、通常はそれほど多くはありません。

Answer 1

リストビューは実際にはテーブルを近似する最も良い方法です。ここでの例では、// ...

public class MyItem : INotifyPropertyChanged 
{ 
    bool _switch = false; 
    public bool Switch 
    { 
     get 
     { 
      return _switch; 
     } 
     set 
     { 
      if (_switch != value) 
      { 
       _switch = value; 
       PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("Switch")); 
      } 
     } 

    } 
    public int Addend1 { get; set; } 
    public int Addend2 { get; set; } 
    public int Result 
    { 
     get 
     { 
      return Addend1 + Addend2; 
     } 
    } 
    public string Summary 
    { 
     get 
     { 
      return Addend1 + " + " + Addend2 + " = " + Result; 
     } 
    } 
    public event PropertyChangedEventHandler PropertyChanged; 
} 

// ...

public MyItems ObservableCollection<MyItem> { get; set; } 

...これはビューモデルのコードです...

 <ListView x:Name="listViewm" ItemsSource="{Binding MyItems}"> 
      <ListView.Header> 
       <Grid BackgroundColor="Black"> 
        <Grid.ColumnDefinitions> 
         <ColumnDefinition Width="1*"></ColumnDefinition> 
         <ColumnDefinition Width="1*"></ColumnDefinition> 
         <ColumnDefinition Width="1*"></ColumnDefinition> 
         <ColumnDefinition Width="1*"></ColumnDefinition> 
        </Grid.ColumnDefinitions> 
        <Label Text="Switch" HorizontalOptions="Fill" Grid.Column="0" FontSize="Medium" FontAttributes="Bold" BackgroundColor="MediumBlue" TextColor="White" HorizontalTextAlignment="Center" Margin="1"/> 
        <Label Text="Addend 1" HorizontalOptions="Fill" Grid.Column="1" FontSize="Medium" FontAttributes="Bold" BackgroundColor="MediumBlue" TextColor="White" HorizontalTextAlignment="Center" Margin="1"/> 
        <Label Text="Addend 2" HorizontalOptions="Fill" Grid.Column="2" FontSize="Medium" FontAttributes="Bold" BackgroundColor="MediumBlue" TextColor="White" HorizontalTextAlignment="Center" Margin="1"/> 
        <Label Text="Result" HorizontalOptions="Fill" Grid.Column="3" FontSize="Medium" FontAttributes="Bold" BackgroundColor="MediumBlue" TextColor="White" HorizontalTextAlignment="Center" Margin="1"/> 
       </Grid> 
      </ListView.Header> 

      <ListView.ItemTemplate> 
       <DataTemplate> 
        <ViewCell> 
         <Grid BackgroundColor="Black"> 
          <Grid.ColumnDefinitions> 
           <ColumnDefinition Width="1*"></ColumnDefinition> 
           <ColumnDefinition Width="1*"></ColumnDefinition> 
           <ColumnDefinition Width="1*"></ColumnDefinition> 
           <ColumnDefinition Width="1*"></ColumnDefinition> 
          </Grid.ColumnDefinitions> 
          <Label Grid.Column="0" Text ="{Binding Switch}" HorizontalOptions="Fill" BackgroundColor="LightBlue" HorizontalTextAlignment="Center" Margin="1"></Label> 
          <Label Grid.Column="1" Text ="{Binding Addend1}" HorizontalOptions="Fill" BackgroundColor="LightBlue" HorizontalTextAlignment="Center" Margin="1"></Label> 
          <Label Grid.Column="2" Text ="{Binding Addend2}" HorizontalOptions="Fill" BackgroundColor="LightBlue" HorizontalTextAlignment="Center" Margin="1"></Label> 
          <Label Grid.Column="3" Text ="{Binding Result}" HorizontalOptions="Fill" BackgroundColor="LightBlue" HorizontalTextAlignment="Center" Margin="1"></Label> 
         </Grid> 
        </ViewCell> 
       </DataTemplate> 
      </ListView.ItemTemplate> 
     </ListView> 

です

 MyItems = new ObservableCollection<MyItem>(); 
     MyItems.Add(new MyItem() { Switch = true, Addend1 = 1, Addend2 = 2 }); 
     MyItems.Add(new MyItem() { Switch = false, Addend1 = 1, Addend2 = 2 }); 
     MyItems.Add(new MyItem() { Switch = true, Addend1 = 2, Addend2 = 3 }); 
     MyItems.Add(new MyItem() { Switch = false, Addend1 = 2, Addend2 = 3 }); 

この結果、次のような表が表示されます。

なぜ列間の溝が非常に広いのか分かりません。

ViewCell.ContextActionsでメニュー項目を定義できます。