Xamarin 网格和 StackLayout

Question

我想知道如何将 stacklayout 放入 xamarin 表格的网格案例中并重复该模式。

我在我的 xaml 中取消了我的网格和堆栈布局。

        <Grid x:Name="MyGrid" RowSpacing="0" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>


            <StackLayout x:Name="MyLayout">
                <StackLayout.GestureRecognizers>
                    <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
                </StackLayout.GestureRecognizers>
            </StackLayout>
    </Grid>

然后在我的 c# 中我想创建

            var test = new List<Product>
        {
            new Product() {Desc = "DESC", Brand= "HelloWorld", Price= "30", Uri = "UriToPicture" },
             new Product() {Desc = "DESC2", Brand= "HelloWorld2", Price= "30", Uri = "UriToPicture" }

        };


        Image PicProd = new Image { Aspect = Aspect.AspectFit };
        PicProd.Source = FileImageSource.FromUri(new Uri(test[0].Uri));
        Label Name= new Label { Text = test[0].Marque.ToString(), TextColor = Color.Black, HorizontalOptions = LayoutOptions.Center, VerticalOptions = LayoutOptions.Center };
        Label Desc = new Label { Text = test[0].Desc.ToString(), TextColor = Color.Black, HorizontalOptions = LayoutOptions.Center, VerticalOptions = LayoutOptions.Center };
        Label Price = new Label { Text = test[0].Prix.ToString(), TextColor = Color.Black, HorizontalOptions = LayoutOptions.Center, VerticalOptions = LayoutOptions.Center };


        MyLayout.Children.Add(PicProd);
        MyLayout.Children.Add(Name);
        MyLayout.Children.Add(Desc);
        MyLayout.Children.Add(Price);

        MyGrid.Children.Add(MyLayout, 0, 0);
        MyGrid.Children.Add(MyLayout, 0, 1);

        Content = MyGrid;

所以我有两个 stacklayout 元素，我想在两个列上显示（并排），但我没有成功正确显示它们

Answer 1

您可以在元素上设置Grid.Row 和Grid.Column 以将它们定位在网格内。这些是基于 0 的索引器。因此，在您的情况下，您可以按如下方式设置 StackLayout：

<StackLayout x:Name="MyLayout" Grid.Row="0" Grid.Column="0">

接下来你可以输入：

<StackLayout x:Name="MyLayout" Grid.Row="0" Grid.Column="1">

更新：

您不能将同一个控件实例添加到页面两次，这就是为什么只显示一个项目的原因。您应该实例化 StackLayout 的 2 个实际实例。从 XAML 中删除 StackLayout 并在代码隐藏中声明它。然后创建 2 个单独的标签实例并将它们添加到适当的 StackLayout。它应该看起来像这样：

var test = new List<Product>
{
    new Product() {Text1 = "DESC", Text2= "HelloWorld" },
    new Product() {Text1 = "DESC2", Text2= "HelloWorld2" }
};

MyGrid.BackgroundColor = Color.Yellow;

var Name = new Label { Text = test[0].Text1.ToString(), TextColor = Color.Black, HorizontalOptions = LayoutOptions.Center, VerticalOptions = LayoutOptions.Center };
var Desc = new Label { Text = test[0].Text2.ToString(), TextColor = Color.Black, HorizontalOptions = LayoutOptions.Center, VerticalOptions = LayoutOptions.Center };

var MyLayout = new StackLayout();
MyLayout.BackgroundColor = Color.Red;
MyLayout.Children.Add(Name);
MyLayout.Children.Add(Desc);
MyGrid.Children.Add(MyLayout, 0, 0);

var Name2 = new Label { Text = test[0].Text1.ToString(), TextColor = Color.Black, HorizontalOptions = LayoutOptions.Center, VerticalOptions = LayoutOptions.Center };
var Desc2 = new Label { Text = test[0].Text2.ToString(), TextColor = Color.Black, HorizontalOptions = LayoutOptions.Center, VerticalOptions = LayoutOptions.Center };

var MyLayout2 = new StackLayout();
MyLayout2.BackgroundColor = Color.Blue;
MyLayout2.Children.Add(Name2);
MyLayout2.Children.Add(Desc2);
MyGrid.Children.Add(MyLayout2, 1, 0);

另外要记住的是，Children.Add 调用的参数希望列作为第一个参数，然后是行。此外，您可以使用此扩展方法来简化添加具有跨度等的子项的过程。

public static class GridExtension
{
    public static void AddChild(this Grid grid, View view, int row, int column, int rowspan = 1, int columnspan = 1)
    {
        if (row < 0) throw new ArgumentOutOfRangeException(nameof(row));
        if (column < 0) throw new ArgumentOutOfRangeException(nameof(column));
        if (rowspan <= 0) throw new ArgumentOutOfRangeException(nameof(rowspan));
        if (columnspan <= 0) throw new ArgumentOutOfRangeException(nameof(columnspan));
        if (view == null) throw new ArgumentNullException(nameof(view));

        Grid.SetRow((BindableObject)view, row);
        Grid.SetRowSpan((BindableObject)view, rowspan);
        Grid.SetColumn((BindableObject)view, column);
        Grid.SetColumnSpan((BindableObject)view, columnspan);

        grid.Children.Add(view);
    }
}

Answer 2

所以我有两个 Stacklayout 元素，我想在两个列上显示（并排），但我没有成功正确显示它们

问题是您没有两个 Stacklayout 元素。相反，您有一个实例，您使用 Add 方法将两次传递给网格。

如果您想要并排使用第二个 Stacklayout，请先在代码或 XAML 中创建 Stacklayout 的新实例：

<StackLayout x:Name="MySecondLayout">
      <StackLayout.GestureRecognizers>
            <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
      </StackLayout.GestureRecognizers>
</StackLayout>

并使用Add 方法将其传递给您的网格：

 //... Populate "MySecondLayout" as you did for "MyLayout" 

 // Add your two layouts to the grid
 MyGrid.Children.Add(MyLayout, 0, 0);
 MyGrid.Children.Add(MySecondLayout, 0, 1);

如果您想并排使用两次完全相同的Stacklayout，您必须创建Stacklayout 的两个不同实例。