Stick Layout in Xamarin Forms nach unten

Mache ich eine Anwendung in Xamarin forms, aber ich habe einige Schwierigkeiten damit, Euch ein layout auf der Unterseite des Geräts. Ich dachte, ein AbsoluteLayout funktionieren würde, aber ich kann nicht begreifen, wie es funktioniert. Also machte ich ein RelativeLayout, die ich gefüllt mit den Elementen, die ich wollte zu füllen, aber jetzt kann ich nicht scheinen, um es arbeiten auf das festhalten an der Unterseite des Geräts zu jeder Zeit.

Unten ist ein screenshot zu machen, was hoffentlich ein wenig klarer.
Ich habe ein stacklayout, die ich füllen mit den headerlayout und die contentlayout. Aber wenn ich einfach das footerlayout dem stacklayout, es wird nicht geklebt, um die Unterseite der Seite, aber (logischerweise) nur hinter dem ersten Kind. Jetzt denke ich, dass ein Absolutelayout würde den trick tun, aber ich kann nicht scheinen zu begreifen, die Funktionalität und die Layoutflags und Grenzen. Könnte mir jemand helfen?

InformationsquelleAutor der Frage Huub S | 2014-12-30

absolutelayout c#layout xamarin.forms

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

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

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

Stellen Sie sicher, dass nicht mehr als ein Kind mit Expand Optionen für die beste Leistung.

InformationsquelleAutor der Antwort Sergey Metlov

Können Sie VerticalOptions zu schicken layout nach unten.

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

InformationsquelleAutor der Antwort Ricardo Romo

Innerhalb RelativeLayout ich habe die besten Ergebnisse mit der Festlegung der Höhe - und Y-Constraint.

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

Ergebnisse:

Stick Layout in Xamarin Forms nach unten

InformationsquelleAutor der Antwort Jendrik

1

Haben Sie herausgefunden noch?
Wenn nicht, gibt es ein paar Möglichkeiten, Sie können dies erreichen:
Beachten Sie, dass ich habe das gleiche problem meiner selbst, aber das ist meine Theorie:

So, dass man eine StackLayout, in dem Sie füllen Sie es mit drei "Haupt-Kinder". Die erste könnte eine absolute oder relative layout (ich weiß nicht, den Unterschied, dass Sie auch noch). In der Theorie sollten Sie in der Lage sein, das hinzufügen ein element der absolute layout und fügen Sie Elemente auf der Oberseite des ersten Elements, da das absolute layout verwendet einen z-index, die funktioniert wie die Ebenen in photoshop. Also in anderen Worten, machen Sie es wie diese:
```
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));
```
Dann sollten Sie das tun die gleiche Sache mit den footer und vergessen Sie nicht, topAbsoluteLayout der Kinder im StackLayout.

Ich hoffe, das hilft Ihnen heraus

InformationsquelleAutor der Antwort kitsco12

Hier ist eine Klasse, die ich verwenden, um zu automatisieren. Es gibt viele Ergänzungen, die Sie vornehmen können, durch erweitern der Klasse, um mit einem scrollbaren Mittelteil (so dass es überlappt den Boden, wenn es zu lang ist) etc!!!

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

Dann auf diese Seite, zum Beispiel:

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;
        ...
    }
...
}

InformationsquelleAutor der Antwort noelicus

Habe ich es herausgefunden:

Habe ich eine StackLayout, das enthält die drei wichtigsten Childeren

 var stack = new StackLayout {
                Children =
                    {

                        _header,
                        _grid,
                        _footer,

                    }
            };

Und dann sollten Sie die header als AbsoluteLayout und denken Sie daran, verwenden Sie die:

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

Sowie für die Netzanbindung oder die wichtigsten Inhalte, sollten Sie auf einem raster innerhalb eines StackLayout, so dass Sie sicher sind, dass Sie das layout ist vertikal (Ausrichtung, die richtige ist hier zu verwenden).

Und tun das gleiche für den footer, und ich denke, du bist gut zu gehen

InformationsquelleAutor der Antwort kitsco12

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.