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

Question

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

我想要的:如果屏幕有足够的空间，则水平排列的两个堆栈布局。当 Screen 发生变化，导致屏幕水平空间不够时，两个 stacklayout 应该垂直排列。

我不想在代码隐藏中这样做。

我正在寻找一个只使用 xaml 的解决方案。

Answer 1

我想您无法仅使用 XAML 来实现此目的。当然，您将需要一些 C# 代码。Xamarin.Forms 上的 XAML 旨在响应，您通常以相对模式(而不是绝对模式)定义 View 属性。

你可以看到你想要的行为的例子at this topic我们可以看到屏幕根据设备方向更改 StackLayout 的方向(您可以将其用作编写自己的布局组件的指南)

纵向模式下的屏幕:

横向模式下的屏幕:

That is accomplished with the following 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>

Some C# is used to change the orientation of outerStack based on the orientation of the device:

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

希望对你有帮助。