Xamarin.Forms取决于屏幕方向或大小的动态布局

Question

Xamarin.Forms是否已经包含控件/布局，根据屏幕方向或大小对内容进行排序？

我想要的： 如果屏幕有足够的空间，那么两个stacklayouts都是水平排列的。 当屏幕变化时，屏幕没有足够的水平空间，两个堆叠布局应该垂直排列。

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被设计为响应式的，并且您经常在相对模式（绝对地）中定义视图属性。

您可以瑟你想at this topic在这里我们可以看到一个屏幕根据设备的方向（你可以使用它作为你的指导编写自己的布局组件）

改变StackLayout的定向行为的一个例子在肖像模式屏幕：

：

景观模式的画面10

即用下面的XAML完成：

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

某些C＃是用来改变outerStack基于所述 定向装置的定向：

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

我希望它能帮助你。

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的水平选项 - 或其他布局参数，但基本上应该这样做。