Question

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

我在我的xaml中删除了我的网格和stacklayout。

        <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>

然后在我的##我想创造

            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元素，我想在两个colomns（并排）上显示，但我没有成功显示它们

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元素，我想在两个colomns（并排）上显示，但我没有成功地正确显示它们

问题是您没有两个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的不同实例。

Xamarin网格和StackLayout

2 个答案: