首页 文章

Xamarin表单网格布局

提问于
浏览
0

我很难在网格上设置文本和图像 . 这是我需要做的:

  • 两列

  • 第一列包含两行文本,左对齐 .

  • 第二列包含单个图像,占据整个高度,但右对齐 .

所以它基本上是这样的:

enter image description here

我尝试了两种方法 .

  • 第一种方法是创建一个2x2网格,并将图像的ColumnSpan设置为2.但是图标没有垂直居中,它仍然位于顶行 .

  • 第二种方法是创建1x2网格(1行,2列),然后将包含两个文本字符串的StackLayout添加到第一个子项,将图像添加到第二个子项 . 这次图像垂直居中,但遗憾的是左对齐 .

有人可以帮帮忙吗?

谢谢 .

第二种方法的代码:

Content = new Grid
        {
            //Padding = new Thickness(75, 5, 25, 5),
            VerticalOptions = LayoutOptions.FillAndExpand,
            HorizontalOptions = LayoutOptions.StartAndExpand,

            RowDefinitions =
            {
                new RowDefinition(),
            },

            ColumnDefinitions =
            {
                new ColumnDefinition(),
                new ColumnDefinition(),
            },
        };

        (Content as Grid).RowDefinitions[0].Height = new GridLength(1, GridUnitType.Star);
        (Content as Grid).ColumnDefinitions[0].Width = new GridLength(9, GridUnitType.Star);
        (Content as Grid).ColumnDefinitions[1].Width = new GridLength(1, GridUnitType.Star);

        StackLayout left = new StackLayout
        {
            HorizontalOptions = LayoutOptions.StartAndExpand,
            VerticalOptions = LayoutOptions.Center,
            Orientation = StackOrientation.Vertical,
            Children =
            {
                firstName,
                lastName,
            }
        };

        StackLayout right = new StackLayout
        {
            HorizontalOptions = LayoutOptions.Start,
            VerticalOptions = LayoutOptions.Center,
            Orientation = StackOrientation.Horizontal,
            Children =
            {
                icon,
            }
        };

        (Content as Grid).Children.Add(left, 0, 0);
        (Content as Grid).Children.Add(right, 1, 0);
        //(Content as Grid).Children[1].HorizontalOptions = LayoutOptions.End

现在看起来像这样:

enter image description here

图像应位于网格的最右侧 .

谢谢 .

1 回答

  • 3

    在#2示例中,“右”StackLayout具有HorizontalOptions.Start,这意味着它将保持对齐 . 您可能希望将其填充到容器中,然后将图像右对齐 . 或完全摆脱StackLayout

相关问题