План макета в форматах Xamarin до нижнего

Я делаю приложение в форматах Xamarin, но у меня есть некоторые проблемы с приложением макета к нижней части устройства. Я думал, что AbsoluteLayout будет работать, но я не могу понять, как это работает. Поэтому я создал RelativeLayout, который я заполнил элементами, которые хотел заполнить, но теперь я не могу заставить его работать над тем, чтобы все время придерживаться нижней части устройства.

Ниже приведен снимок экрана, чтобы сделать вещи, надеюсь, немного более ясными. У меня есть stacklayout, который я заполняю headerlayout и contentlayout. Но если я просто добавлю footerlayout к stacklayout, он не будет прикреплен к нижней части страницы, но (логически) сразу за предыдущим ребенком. Теперь я думаю, что Absolutelayout выполнит трюк, но я не могу понять функциональность и Layoutflags и ее границы. Может ли кто-нибудь помочь мне?

Ответы

Ответ 1

<StackLayout>
  <StackLayout Orientation="Horizontal" VerticalOptions="Start">
    <!-- top controls -->
  </StackLayout>

  <StackLayout VerticalOptions="CenterAndExpand">
    <!-- middle controls -->
  </StackLayout>

  <StackLayout Orientation="Horizontal" VerticalOptions="End">
    <!-- bottom controls -->
  </StackLayout>
</StackLayout>

Убедитесь, что у вас есть не более одного ребенка с параметрами Expand для лучшей производительности.

Ответ 2

Вы можете использовать VerticalOptions для отправки макета снизу.

var stacklayout = new stackLayout()
{
     VerticalOptions = LayoutOptions.EndAndExpand
     Children = {
      //your elements
     }
}

Ответ 3

В RelativeLayout я получил наилучшие результаты с определением ограничений высоты и Y.

<RelativeLayout>
        <StackLayout VerticalOptions="Start" BackgroundColor="Green"
                    RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
                    RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.25}">
          <!-- Top Content -->
          <Button Text="Top Button" Clicked="Button_OnClicked" />
        </StackLayout>

        <StackLayout VerticalOptions="Center" BackgroundColor="Aqua"
                          RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
                          RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.30}"
                          RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.6}">
          <!-- Mid Content -->
          <Button Text="Mid Button" Clicked="Button_OnClicked" /> 
        </StackLayout>

        <StackLayout VerticalOptions="End" BackgroundColor="Yellow"
                          RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
                          RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.90}"
                          RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.1}">

          <!-- Bottom Content -->
          <Button Text="Bottom Button" Clicked="Button_OnClicked" />
        </StackLayout>
</RelativeLayout>

Результаты:

Ответ 4

Вы уже поняли это? Если нет, можно сделать несколько способов: Обратите внимание, что у меня такая же проблема, но это моя теория:

Итак, у вас может быть StackLayout, в котором вы заполняете его тремя "главными". Первый может быть абсолютным или относительным расположением (я пока не знаю разницы, что хорошо). Теоретически вы должны иметь возможность добавить элемент в абсолютный макет, а затем добавить элементы поверх первого элемента, поскольку абсолютный макет использует z-index, который работает как слои в Photoshop. Другими словами, сделайте так:

var topAbsoluteLayout = new AbsoluteLayout();

            topAbsoluteLayout.Children.Add(header, new Point(0, 0));
            topAbsoluteLayout.Children.Add(element1, new Point(x,y));
            topAbsoluteLayout.Children.Add(element2, new Point(x, y));

Затем вы должны сделать то же самое с нижним колонтитулом и не забудьте добавить topAbsoluteLayout в Childeren в StackLayout.

Я надеюсь, что это поможет вам

Ответ 5

Здесь класс, который я использую для автоматизации этого. Есть много дополнений, которые вы можете сделать, расширяя класс до прокручиваемой центральной части (чтобы он не перекрывал нижний, если слишком длинный) и т.д.

public class CakeLayout : StackLayout
{
    public CakeLayout()
    {
        TopStack = new StackLayout // TOP stack
        {
            Orientation = StackOrientation.Horizontal,
            VerticalOptions = LayoutOptions.Start
        };

        CenterStack = new StackLayout // CENTER stack
        {
            VerticalOptions = LayoutOptions.CenterAndExpand
        };

        BottomStack = new StackLayout // BOTTOM stack
        {
            Orientation = StackOrientation.Horizontal,
            VerticalOptions = LayoutOptions.End
        };

        Children.Add(TopStack);
        Children.Add(CenterStack);
        Children.Add(BottomStack);
    }

    public StackLayout BottomStack { get; private set; }
    public StackLayout CenterStack { get; private set; }
    public StackLayout TopStack { get; private set; }
}

Затем, чтобы использовать это как страницу, например:

public class MyPage
{
    public MyPage()
    {
        CakeLayout cakeLayout = new CakeLayout();

        cakeLayout.TopStack.Children.Add(new Label { Text = "Hello Cake" });   
        cakeLayout.CenterStack.Children.Add(MyListView);
        cakeLayout.BottomStack.Children.Add(MyButton);

        // Assign the cake to the page
        this.Content = cakeLayout;
        ...
    }
...
}

Ответ 6

Я понял:

Я использовал StackLayout, который содержит три основных Childeren

 var stack = new StackLayout {
                Children =
                    {

                        _header,
                        _grid,
                        _footer,

                    }
            };

И тогда вы должны добавить заголовок как AbsoluteLayout и не забудьте использовать:

 {
    AbsoluteLayout.SetLayoutFlags(_imageYouWantToUse, AbsoluteLayoutFlags.PositionProportional);
    AbsoluteLayout.SetLayoutBounds(_imageYouWantToUse, new Rectangle(x, y, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize));
_headerAbsLayout.Children.Add(_imageYouWantToUse);
    }

И для основной сетки или основного содержимого вы должны использовать сетку внутри StackLayout, так что вы уверены, что макет вертикальный (ориентация - это правильный вариант для использования здесь).

И сделаем то же самое для нижнего колонтитула, и я догадываюсь, что вам хорошо идти