web-dev-qa-db-ja.com

Xamarin Formsのレイアウトを下に貼り付ける

Xamarinフォームでアプリケーションを作成していますが、デバイスの下部にレイアウトを貼り付けるのに問題があります。 AbsoluteLayoutが機能すると思ったが、どのように機能するかを把握できない。だから、私はRelativeLayoutを作り、それを埋めたい要素で埋めましたが、今では常にデバイスの底に張り付くように動かすことができないようです。

以下は、できればもう少しわかりやすくするためのスクリーンショットです。 headerlayoutとcontentlayoutで埋めるstacklayoutがあります。しかし、フッターレイアウトをスタックレイアウトに追加するだけの場合、ページの下部に貼り付けられるのではなく、（論理的に）前の子のすぐ後ろに貼り付けられます。今では、Absolutelayoutがトリックを行うと思いますが、機能とLayoutflagsとその境界を把握することはできません。誰かが私を助けてくれますか？

My application

c#layoutxamarin.formsabsolutelayout
39
Huub S
<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オプションを使用して子を1つだけにしてください。

85
Sergey Metlov

VerticalOptionsを使用して、レイアウトを下に送信できます。

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

RelativeLayout内で、Height制約と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>

結果：

Android Results

9
Jendrik

これを自動化するために使用するクラスを次に示します。スクロール可能な中央セクションを持つようにクラスを拡張することで、追加できるものがたくさんあります（そうすると、長すぎても下に重ならないようになります）。

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

あなたはまだそれを理解しましたか？そうでない場合、これを達成するためのいくつかの方法があります：私は同じ問題を自分自身に持っていることに注意してください、しかしこれは私の理論です：

そのため、3つの「主要な子」を入力する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));

次に、フッターでも同じことを行い、StackLayoutでtopAbsoluteLayoutをChilderenに追加することを忘れないでください。

これがお役に立てば幸いです

2
kitsco12

私はそれを考え出した：

3つのメインChilderenを含むStackLayoutを使用しました

 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内でグリッドを使用する必要があります。これにより、レイアウトが垂直になります（方向はここで使用するのに適しています）。

そして、フッターにも同じことをして、あなたが行ってもいいと思います

1
kitsco12