Xamarin.Forms画面の向きやサイズに応じた動的レイアウト

Question

Xamarin.Formsには、画面の向きやサイズに応じて内容を並べるコントロール/レイアウトが既に含まれていましたか？

私が欲しいもの： 画面に十分なスペースがあれば、水平に並べられた2つのスタックレイアウト。 画面が変更され、画面の水平スペースが不足すると、2つのスタックレイアウトを垂直方向に並べる必要があります。

I dont want to do it in code behind.

I search for an solution wich only uses the xaml.

事前

Answer 1

のおかげで（私は私の悪い英語のため申し訳ありませんが）

私はあなただけのXAMLを使用してこれを達成することができないと思います。確かに、いくつかのC＃コードが必要になります。 Xamarin.FormsのXAMLは応答性に優れており、多くの場合、相対モード（istead of absolute）でビュープロパティを定義します。

あなたはできるSEあなたは私たちが画面を（あなたが独自のレイアウト・コンポーネントを記述するためにあなたの指針として使用することができます）、デバイスの向きに従ってStackLayoutの向きを変える

を見ることができat this topicをしたい動作の例ポートレートモードで画面：

：

ランドスケープモードの画面以下のXAMLを用いて達成される10

：

protected override void OnSizeAllocated (double width, double height){ base.OnSizeAllocated (width, height); if (width != this.width || height != this.height) { this.width = width; this.height = height; if (width > height) { outerStack.Orientation = StackOrientation.Horizontal; } else { outerStack.Orientation = StackOrientation.Vertical; } } } 

：いくつかのC＃はデバイスの 姿勢に基づいてouterStackの向きを変更するために使用される

<?xml version="1.0" encoding="UTF-8"?> 
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
x:Class="ResponsiveLayout.StackLayoutPageXaml" 
Title="Stack Photo Editor - XAML"> 
    <ContentPage.Content> 
     <StackLayout Spacing="10" Padding="5" Orientation="Vertical" 
     x:Name="outerStack"> <!-- can change orientation to make responsive --> 
      <ScrollView> 
       <StackLayout Spacing="5" HorizontalOptions="FillAndExpand" 
        WidthRequest="1000"> 
        <StackLayout Orientation="Horizontal"> 
         <Label Text="Name: " WidthRequest="75" 
          HorizontalOptions="Start" /> 
         <Entry Text="deer.jpg" 
          HorizontalOptions="FillAndExpand" /> 
        </StackLayout> 
        <StackLayout Orientation="Horizontal"> 
         <Label Text="Date: " WidthRequest="75" 
          HorizontalOptions="Start" /> 
         <Entry Text="07/05/2015" 
          HorizontalOptions="FillAndExpand" /> 
        </StackLayout> 
        <StackLayout Orientation="Horizontal"> 
         <Label Text="Tags:" WidthRequest="75" 
          HorizontalOptions="Start" /> 
         <Entry Text="deer, tiger" 
          HorizontalOptions="FillAndExpand" /> 
        </StackLayout> 
        <StackLayout Orientation="Horizontal"> 
         <Button Text="Save" HorizontalOptions="FillAndExpand" /> 
        </StackLayout> 
       </StackLayout> 
      </ScrollView> 
      <Image Source="deer.jpg" /> 
     </StackLayout> 
    </ContentPage.Content> 
</ContentPage> 

私はそれがあなたを助けてくれることを願っています。

Answer 2

私が知る限り、これは不可能です。私は基本的に正確にあなたが「手動で」したいことをしました。しかしそれほど難しいことではありません。まず第一に、あなたは別のStackLayout

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
      xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
      x:Class="App.Views.TestPage"> 
    <ContentPage.Content> 
     <StackLayout x:Name="OuterStackLayout"> 
      <StackLayout> 
       <!-- Inner stack layout 1 --> 
      </StackLayout> 
      <StackLayout> 
       <!-- Inner stack layout 2 --> 
      </StackLayout> 
     </StackLayout> 
    </ContentPage.Content> 
</ContentPage> 

次のあなたのスタックレイアウトをラップする必要があります、あなたは、画面の向きに応じてOnSizeAllocatedをオーバーライドすることがあり、外側のOuterStackLayout.Orientationを設定します

protected override void OnSizeAllocated(double width, double height) 
{ 
    base.OnSizeAllocated(width, height); 

    if (SizeHasChanged(width, height)) // elided, just compare width, height with the stored values 
    { 
     StoreSize(width, height); // store in private members 

     if (IsLandscape) 
     { 
      this.OuterStackLayout.Orientation = StackOrientation.Horizontal; 
     } 
     else 
     { 
      this.OuterStackLayout.Orientation = StackOrientation.Vertical; 
     } 
    } 
} 

public bool IsLandscape => _width > _height; 

StackLayoutビットの水平方向のオプションやその他のレイアウトパラメータを使ってみる必要があるかもしれませんが、基本的にこれが必要です。