如何在列表視圖中創建網格綁定Xamarin.Forms

Question

如何在具有數據綁定的ListView中創建網格？我正在用Xamarin.Forms創建這個應用程序。

如果我不知道我需要多少行和列，我該如何在ListView綁定中動態創建Grid？

這是我到目前爲止有：

<ListView x:Name="List" HasUnevenRows="True"> 
    <ListView.ItemTemplate> 
    <DataTemplate> 
    <ViewCell> 
     <ViewCell.View> 
     <Grid Padding="10,10,10,10"> 
      <Grid.RowDefinitions> 
      <RowDefinition Height="200"></RowDefinition> 
      </Grid.RowDefinitions> 
      <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="200"></ColumnDefinition> 
      </Grid.ColumnDefinitions> 
      <StackLayout BackgroundColor="#313FA0" Grid.Row="0" Grid.Column="0" HeightRequest="200" WidthRequest="200"> 
      <Label Text="{Binding NUMBER}" FontSize="50" TextColor="White" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/> 
      <Label Text="{Binding NAME}" FontSize="30" TextColor="White" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/> 
      </StackLayout> 
     </Grid> 
     </ViewCell.View> 
    </ViewCell> 
    </DataTemplate> 
    </ListView.ItemTemplate> 
</ListView> 

在這個代碼僅創建一個行和一列。如果我有多個數據點，我該如何解決這個問題？例如，如果我需要一行兩列。

在此先感謝。

Answer 1

在XAML中動態構建具有可變數量的行或列的網格佈局並不是一種好方法。我建議在你的代碼隱藏文件中創建DataTemplate，你可以根據需要輕鬆添加任意數量的RowDefinitions和ColumnDefinitions。這裏有一個例子：

 var myDataTemplate = new DataTemplate(() => 
     { 
      var cell = new ViewCell(); 
      var grid = new Grid(); 

      foreach (var record in myRecords) 
      { 
       grid.RowDefinitions.Add(new RowDefinition()); 
      } 

      foreach (var field in myFields) 
      { 
       grid.ColumnDefinitions.Add(new ColumnDefinition()); 
      } 

      /* 
      * 
      * Populate grid here... 
      * 
      */ 

      cell.View = grid; 
      return cell; 
     }); 

然後，只需將此DataTemplate分配給您的ListView。

Answer 2

您也可以使用下一個方法示例（通過xaml，正面）。

<ContentPage.Resources> 
     <ResourceDictionary> 
     <Color x:FactoryMethod="FromHex" x:Key="fondoBlancoPalido"> 
      <x:Arguments> 
      <x:String>#F2F2F2</x:String> 
      </x:Arguments> 
     </Color> 
     </ResourceDictionary> 
    </ContentPage.Resources> 

<ListView x:Name="listView" ItemsSource="{Binding .}" BackgroundColor="{StaticResource fondoBlancoPalido}"> 
     <ListView.ItemTemplate> 
      <DataTemplate> 
      <ViewCell> 
       <ViewCell.View> 
       <Grid Padding="5"> 
        <Grid.RowDefinitions> 
        <RowDefinition Height="60"></RowDefinition> 
        <RowDefinition Height="60"></RowDefinition> 
        <RowDefinition Height="10"></RowDefinition> 
        </Grid.RowDefinitions> 
        <Grid.ColumnDefinitions> 
        <ColumnDefinition Width="1*"></ColumnDefinition> 
        <ColumnDefinition Width="2*"></ColumnDefinition> 
        <ColumnDefinition Width="3*"></ColumnDefinition> 
        </Grid.ColumnDefinitions> 

        <Button Grid.Row="0" Grid.Column="0" Clicked="OnStartClicked" Image="play.png" BackgroundColor="Transparent" HorizontalOptions="Center" Grid.RowSpan="2"/> 
        <Label Grid.Row="0" Grid.Column="1" Text="Hora de Inicio: " XAlign="Center" YAlign="Center" TextColor="Black" FontAttributes="Bold"/> 
        <Label Grid.Row="0" Grid.Column="2" Text="{ Binding attribute3 }" XAlign="Center" YAlign="Center" TextColor="Black"/> 
        <Label Grid.Row="1" Grid.Column="1" Text="Encargado de la Tarea: " XAlign="Center" YAlign="Center" TextColor="Black" FontAttributes="Bold"/> 
        <Label Grid.Row="1" Grid.Column="2" Text="{ Binding attribute4 }" XAlign="Center" YAlign="Center" TextColor="Black"/> 
        <BoxView Color="Navy" HeightRequest="2" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="3"/> 
       </Grid> 
       </ViewCell.View> 
      </ViewCell> 
      </DataTemplate> 
     </ListView.ItemTemplate> 
     </ListView> 

Answer 3

如果你想添加的行和列的動態，你可以創建在page.cs一格，並在page.xaml綁定。假設你有一系列物品，並且你想在網格中對它們進行排序：

public page() 
{ 
    string[] items = {"Item 1","Item 2",......."Item n"}; 
    var itemsGrid = new Grid(); 

    int k = 1 + items.Length/3; 
    // just to make it clear in the for loop i used (int k) 
    // suppose 3 column need we divide on 3 

    // define the number of rows according to the number of item you have 
    for (int i = 0; i <k ; i++) 
    { 
      itemsGrid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star) }); 
    } 

    // defining column number (in this case 3) 
    for (int j = 0; j < 3; j++) 
    { 
      itemsGrid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) }); 
    } 

    // adding the items to the grid (3 column , RN rows) 
    int RN = 0; // initializing the row number 

    for (int num = 0; num < items.Length; num++) 
    { 
      if (num % 3 == 0)  // first column 
      { 
       itemsGrid.Children.Add(new Label() // adding the item as label 
       { 
        Text = items[num], 
        TextColor = Color.White, 
        BackgroundColor = Color.Blue, 
       HorizontalOptions = LayoutOptions.FillAndExpand, 
       HorizontalTextAlignment = TextAlignment.Center, 
       VerticalTextAlignment = TextAlignment.Center 
      }, 0, RN); 

      } 
      else if (num % 3 == 1)// second column 
      { 
       itemsGrid.Children.Add(new Label() 
       { 
        Text = items[num], 
        TextColor = Color.White, 
        BackgroundColor = Color.Blue, 
        HorizontalOptions = LayoutOptions.FillAndExpand, 
        HorizontalTextAlignment = TextAlignment.Center, 
        VerticalTextAlignment = TextAlignment.Center 
       }, 1, RN); 
      } 
      else //third column 
      { 
       itemsGrid.Children.Add(new Label() 
       { 
        Text = items[num], 
        TextColor = Color.White, 
        BackgroundColor = Color.Blue, 
        HorizontalOptions = LayoutOptions.FillAndExpand, 
        HorizontalTextAlignment = TextAlignment.Center, 
        VerticalTextAlignment = TextAlignment.Center 
       }, 2, RN); 
       RN++; 
      } 
     } 
    }