如何在绑定Xamarin.Forms的列表视图中创建网格

cotxawn7  于 2023-02-10  发布在  其他
关注(0)|答案(3)|浏览(135)

如何在ListView中创建带有数据绑定的Grid?我正在使用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>

在这段代码中,只创建了一行和一列。如果我有多个数据点,我该如何解决这个问题?例如,如果我需要一行两列。

70gysomp

70gysomp1#

您也可以使用下一种方法例如(通过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" HasUnevenRows="True"  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>
1rhkuytd

1rhkuytd2#

在XAML中,没有一种好方法可以动态生成行数或列数可变的网格布局。我建议在代码隐藏文件中创建DataTemplate,在该文件中,您可以根据需要轻松添加任意数量的RowDefinition和ColumnDefinition。下面是一个示例:

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。

w6mmgewl

w6mmgewl3#

如果你想动态添加行和列,你可以在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++;
            }
        }
    }

相关问题