c# - 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);
    }
}