GeräteausrichtungDevice Orientation

Beispiel herunterladen Das Beispiel herunterladenDownload Sample Download the sample

Es ist wichtig zu verstehen, wie Ihre Anwendung verwendet wird und wie die quer Ausrichtung integriert werden kann, um die Benutzerumgebung zu verbessern.It is important to consider how your application will be used and how landscape orientation can be incorporated to improve the user experience. Einzelne Layouts können so entworfen werden, dass Sie mehrere Ausrichtungen abdecken und den verfügbaren Platz optimal nutzen.Individual layouts can be designed to accommodate multiple orientations and best use the available space. Auf Anwendungsebene kann die Drehung deaktiviert oder aktiviert werden.At the application level, rotation can be disabled or enabled.

Steuern der AusrichtungControlling Orientation

Wenn Sie verwenden Xamarin.Forms , besteht die unterstützte Methode zum Steuern der Geräte Ausrichtung darin, die Einstellungen für die einzelnen Projekte zu verwenden.When using Xamarin.Forms, the supported method of controlling device orientation is to use the settings for each individual project.

iOSiOS

Unter IOS wird die Geräte Ausrichtung für Anwendungen konfiguriert, die die Info. plist -Datei verwenden.On iOS, device orientation is configured for applications using the Info.plist file. Verwenden Sie die oben in diesem Dokument beschriebenen IDE-Optionen, um auszuwählen, welche Anweisungen Sie anzeigen möchten:Use the IDE options at the top of this document to select which instructions you'd like to see:

Öffnen Sie in Visual Studio das IOS-Projekt, und öffnen Sie " Info. plist".In Visual Studio, open the iOS project and open Info.plist. Die Datei wird in einem Konfigurations Panel geöffnet, beginnend mit der Registerkarte "iPhone Deployment Info":The file will open into a configuration panel, starting with the iPhone Deployment Info tab:

iPhone-Bereitstellungs Informationen in Visual Studio

AndroidAndroid

Um die Ausrichtung auf Android zu steuern, öffnen Sie MainActivity.cs , und legen Sie die Ausrichtung mithilfe des Attributs fest, das die MainActivity Klasse schmückt:To control the orientation on Android, open MainActivity.cs and set the orientation using the attribute decorating the MainActivity class:

namespace MyRotatingApp.Droid
{
    [Activity (Label = "MyRotatingApp.Droid", Icon = "@drawable/icon", Theme = "@style/MainTheme", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation, ScreenOrientation = ScreenOrientation.Landscape)] //This is what controls orientation
    public class MainActivity : FormsAppCompatActivity
    {
        protected override void OnCreate (Bundle bundle)
...

Xamarin. Android unterstützt mehrere Optionen zum Angeben der Ausrichtung:Xamarin.Android supports several options for specifying orientation:

  • Quer – Format erzwingt, dass die Anwendungs Ausrichtung unabhängig von den Sensordaten Querformat ist.Landscape – forces the application orientation to be landscape, regardless of sensor data.
  • Hochformat Portrait – erzwingt, dass die Anwendungs Ausrichtung unabhängig von den Sensordaten Hochformat ist.Portrait – forces the application orientation to be portrait, regardless of sensor data.
  • Benutzer – bewirkt, dass die Anwendung mithilfe der bevorzugten Ausrichtung des Benutzers angezeigt wird.User – causes the application to be presented using the user's preferred orientation.
  • Hinter – bewirkt, dass die Ausrichtung der Anwendung mit der Ausrichtung der dahinter liegenden Aktivität identisch ist.Behind – causes the application's orientation to be the same as the orientation of the activity behind it.
  • Sensor – bewirkt, dass die Ausrichtung der Anwendung vom Sensor bestimmt wird, auch wenn der Benutzer die automatische Drehung deaktiviert hat.Sensor – causes the application's orientation to be determined by the sensor, even if the user has disabled automatic rotation.
  • Sensorlandscape – bewirkt, dass die Anwendung Querformat verwendet, während Sensordaten verwendet werden, um die Richtung zu ändern, mit der der Bildschirm angezeigt wird (sodass der Bildschirm nicht als aufwärts angezeigt wird).SensorLandscape – causes the application to use landscape orientation while using sensor data to change the direction the screen is facing (so that the screen isn't seen as upside down).
  • Sensorportrait – bewirkt, dass die Anwendung die Hochformat Ausrichtung verwendet, während Sensordaten verwendet werden, um die Richtung des Bildschirms zu ändern (sodass der Bildschirm nicht als aufwärts angezeigt wird).SensorPortrait – causes the application to use portrait orientation while using sensor data to change the direction the screen is facing (so that the screen isn't seen as upside down).
  • Reverselandscape – bewirkt, dass die Anwendung Querformat verwendet, wobei die entgegengesetzte Richtung von gewöhnlich aus angezeigt wird.ReverseLandscape – causes the application to use landscape orientation, facing the opposite direction from usual, so as to appear "upside down."
  • Reverum Hochformat – bewirkt, dass die Anwendung die Hochformat Ausrichtung verwendet, wobei die entgegengesetzte Richtung von gewöhnlich aus angezeigt wird.ReversePortrait – causes the application to use portrait orientation, facing the opposite direction from usual, so as to appear "upside down."
  • Fullsensor – bewirkt, dass die Anwendung Sensordaten nutzt, um die richtige Ausrichtung (aus der möglichen 4) auszuwählen.FullSensor – causes the application to rely on sensor data to select the correct orientation (out of the possible 4).
  • Fulluser – bewirkt, dass die Anwendung die Ausrichtungs Einstellungen des Benutzers verwendet.FullUser – causes the application to use the user's orientation preferences. Wenn die automatische Drehung aktiviert ist, können alle vier Ausrichtungen verwendet werden.If automatic rotation is enabled, then all 4 orientations can be used.
  • Userlandscape – _ [ Nicht unter ] stützt_ bewirkt, dass die Anwendung die quer Ausrichtung verwendet, es sei denn, für den Benutzer ist die automatische Rotation aktiviert. in diesem Fall wird der Sensor verwendet, um die Ausrichtung zu bestimmen.UserLandscape[Not Supported] causes the application to use landscape orientation, unless the user has automatic rotation enabled, in which case it will use the sensor to determine orientation. Diese Option wird die Kompilierung abbrechen.This option will break compilation.
  • Userportrait – _ [ Nicht unter ] stützt_ bewirkt, dass die Anwendung die Hochformat Ausrichtung verwendet, es sei denn, für den Benutzer ist die automatische Rotation aktiviert. in diesem Fall wird der Sensor zum Bestimmen der Ausrichtung verwendet.UserPortrait[Not Supported] causes the application to use portrait orientation, unless the user has automatic rotation enabled, in which case it will use the sensor to determine orientation. Diese Option wird die Kompilierung abbrechen.This option will break compilation.
  • Gesperrt – _ [ Nicht unter ] stützt_ bewirkt, dass die Anwendung die Bildschirm Ausrichtung verwendet, unabhängig davon, was beim Start erfolgt, ohne dass auf Änderungen der physischen Ausrichtung des Geräts reagiert wird.Locked[Not Supported] causes the application to use the screen orientation, whatever it is at launch, without responding to changes in the device's physical orientation. Diese Option wird die Kompilierung abbrechen.This option will break compilation.

Beachten Sie, dass die nativen Android-APIs eine große Kontrolle über die Verwaltung der Ausrichtung bieten, einschließlich Optionen, die den vom Benutzer angegebenen Einstellungen explizit widersprechen.Note that the native Android APIs provide a lot of control over how orientation is managed, including options that explicitly contradict the user's expressed preferences.

Universelle Windows-PlattformUniversal Windows platform

Beim universelle Windows-Plattform (UWP) werden unterstützte Ausrichtungen in der Datei " Package. appxmanifest " festgelegt.On the Universal Windows Platform (UWP), supported orientations are set in the Package.appxmanifest file. Wenn Sie das Manifest öffnen, wird ein Konfigurations Panel angezeigt, in dem unterstützte Ausrichtungen ausgewählt werden können.Opening the manifest will reveal a configuration panel where supported orientations can be selected.

Reagieren auf Änderungen der AusrichtungReacting to Changes in Orientation

Xamarin.Formsbietet keine nativen Ereignisse für die Benachrichtigung Ihrer APP mit Ausrichtungs Änderungen in frei gegebenem Code. does not offer any native events for notifying your app of orientation changes in shared code. Enthält jedoch Xamarin.Essentials eine [ DeviceDisplay ]-Klasse, die Benachrichtigungen über Orientierungsänderungen bereitstellt.However,Xamarin.Essentials contains a [DeviceDisplay] class that provides notifications of orientation changes.

Zum Erkennen von Ausrichtungen ohne Xamarin.Essentials Überwachen Sie das- SizeChanged Ereignis des Page , das ausgelöst wird, wenn die Breite oder Höhe der Page Änderungen geändert wird.To detect orientations without Xamarin.Essentials, monitor the SizeChanged event of the Page, which fires when either the width or height of the Page changes. Wenn die Breite von Page größer als die Höhe ist, befindet sich das Gerät im Querformat.When the width of the Page is greater than the height, the device is in landscape mode. Weitere Informationen finden Sie unter Anzeigen eines Bilds auf der Grundlage der Bildschirm Ausrichtung.For more information, see Display an Image based on Screen Orientation.

Alternativ ist es möglich, die- OnSizeAllocated Methode für einen zu überschreiben Page , wobei jede beliebige layoutänderungslogik eingefügt werden kann.Alternatively, it's possible to override the OnSizeAllocated method on a Page, inserting any layout change logic there. Die- OnSizeAllocated Methode wird immer dann aufgerufen, wenn eine Page neue Größe zugewiesen wird. Dies geschieht, wenn das Gerät gedreht wird.The OnSizeAllocated method is called whenever a Page is allocated a new size, which happens whenever the device is rotated. Beachten Sie, dass die Basis Implementierung von OnSizeAllocated wichtige Layoutfunktionen ausführt, daher ist es wichtig, die Basis Implementierung in der Überschreibung aufzurufen:Note that the base implementation of OnSizeAllocated performs important layout functions, so it is important to call the base implementation in the override:

protected override void OnSizeAllocated(double width, double height)
{
    base.OnSizeAllocated(width, height); //must be called
}

Wenn Sie diesen Schritt nicht ausführen, führt dies zu einer nicht funktionsfähigen Seite.Failure to take that step will result in a non-functioning page.

Beachten Sie, dass die- OnSizeAllocated Methode möglicherweise mehrmals aufgerufen wird, wenn ein Gerät gedreht wird.Note that the OnSizeAllocated method may be called many times when a device is rotated. Wenn Sie das Layout jedes Mal ändern, ist dies eine Verschwendung von Ressourcen und kann zu einem Flimmern führen.Changing your layout each time is wasteful of resources and can lead to flickering. Ziehen Sie in Erwägung, eine Instanzvariable auf der Seite zu verwenden, um zu verfolgen, ob sich die Ausrichtung im Querformat oder im Hochformat befindet, und zeichnen Sie nur bei einer ÄnderungConsider using an instance variable within your page to track whether the orientation is in landscape or portrait, and only redraw when there is a change:

private double width = 0;
private double height = 0;

protected override void OnSizeAllocated(double width, double height)
{
    base.OnSizeAllocated(width, height); //must be called
    if (this.width != width || this.height != height)
    {
        this.width = width;
        this.height = height;
        //reconfigure layout
    }
}

Nachdem eine Änderung der Geräte Orientierung erkannt wurde, können Sie der Benutzeroberfläche weitere Ansichten hinzufügen oder von ihr entfernen, um auf die Änderung des verfügbaren Speicherplatzes zu reagieren.Once a change in device orientation has been detected, you may want to add or remove additional views to/from your user interface to react to the change in available space. Sehen Sie sich beispielsweise den integrierten Rechner auf jeder Plattform im Hochformat an:For example, consider the built-in calculator on each platform in portrait:

Rechner Anwendung im Hochformat

und Querformat:and landscape:

Rechner Anwendung im Querformat

Beachten Sie, dass die apps den verfügbaren Speicherplatz nutzen, indem Sie mehr Funktionalität in Landscape hinzufügen.Notice that the apps take advantage of the available space by adding more functionality in landscape.

Reaktionsfähiges LayoutResponsive Layout

Es ist möglich, Schnittstellen mithilfe der integrierten Layouts zu entwerfen, damit Sie beim Drehen des Geräts ordnungsgemäß wechseln.It is possible to design interfaces using the built-in layouts so that they transition gracefully when the device is rotated. Beachten Sie beim Entwerfen von Schnittstellen, die bei der Reaktion auf Änderungen bei der Ausrichtung weiterhin ansprechend sind, die folgenden allgemeinen Regeln:When designing interfaces that will continue to be appealing when responding to changes in orientation consider the following general rules:

  • Achten Sie auf die Verhältnisse – . Änderungen an der Ausrichtung können Probleme verursachen, wenn bestimmte Annahmen hinsichtlich der Verhältnisse getroffen werden.Pay attention to ratios – changes in orientation can cause problems when certain assumptions are made with regards to ratios. Beispielsweise kann eine Sicht, die in 1/3 für den vertikalen Bereich eines Bildschirms im Hochformat viel Speicherplatz hätte, nicht in den Raum 1/3 des vertikalen Raums im Querformat passen.For example, a view that would have plenty of space in 1/3 of the vertical space of a screen in portrait may not fit into 1/3 of the vertical space in landscape.
  • Seien Sie vorsichtig mit absoluten Werten – . absolute (Pixel-) Werte, die im Hochformat sinnvoll sind, sind im Querformat möglicherweise nicht sinnvoll.Be careful with absolute values – absolute (pixel) values that make sense in portrait may not make sense in landscape. Wenn absolute Werte erforderlich sind, isolieren Sie Ihre Auswirkung mithilfe von "netsted Layouts".When absolute values are necessary, use nested layouts to isolate their impact. Beispielsweise wäre es sinnvoll, absolute Werte in einem zu verwenden, TableView ItemTemplate Wenn die Element Vorlage eine garantierte einheitliche Höhe aufweist.For example, it would be reasonable to use absolute values in a TableView ItemTemplate when the item template has a guaranteed uniform height.

Die oben genannten Regeln gelten auch für die Implementierung von Schnittstellen für mehrere Bildschirmgrößen und werden im Allgemeinen als bewährte Methoden betrachtet.The above rules also apply when implementing interfaces for multiple screen sizes and are generally considered best-practice. Im weiteren Verlauf dieses Handbuchs werden bestimmte Beispiele für reaktionsfähige Layouts erläutert, die die einzelnen primären Layouts von verwenden Xamarin.Forms .The rest of this guide will explain specific examples of responsive layouts using each of the primary layouts in Xamarin.Forms.

Hinweis

Aus Gründen der Übersichtlichkeit wird in den folgenden Abschnitten veranschaulicht, wie reaktionsfähige Layouts mit nur einem Typ von Layout gleichzeitig implementiert werden.For clarity, the following sections demonstrate how to implement responsive layouts using just one type of Layout at a time. In der Praxis ist es häufig einfacher, Layout s zu kombinieren, um ein gewünschtes Layout zu erzielen, indem die einfachere oder intuitivste Layout für jede Komponente verwendet wird.In practice, it is often simpler to mix Layouts to achieve a desired layout using the simpler or most intuitive Layout for each component.

StackLayoutStackLayout

Beachten Sie die folgende Anwendung, die im Hochformat angezeigt wird:Consider the following application, displayed in portrait:

Foto Anwendung im Hochformat

und Querformat:and landscape:

Foto Anwendung im Querformat

Dies wird mit dem folgenden XAML erreicht: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>

Einige c#-Informationen werden verwendet, um die Ausrichtung von outerStack basierend auf der Ausrichtung des Geräts zu ändern: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;
        }
    }
}

Beachten Sie Folgendes:Note the following:

  • outerStackwird angepasst, um das Bild und die Steuerelemente je nach Ausrichtung als horizontalen oder vertikalen Stapel darzustellen, um den verfügbaren Platz optimal zu nutzen.outerStack is adjusted to present the image and controls as a horizontal or vertical stack depending on orientation, to best take advantage of the available space.

AbsoluteLayoutAbsoluteLayout

Beachten Sie die folgende Anwendung, die im Hochformat angezeigt wird:Consider the following application, displayed in portrait:

Foto Anwendung im Hochformat

und Querformat:and landscape:

Foto Anwendung im Querformat

Dies wird mit dem folgenden XAML erreicht: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.AbsoluteLayoutPageXaml"
Title="AbsoluteLayout - XAML" BackgroundImageSource="deer.jpg">
    <ContentPage.Content>
        <AbsoluteLayout>
            <ScrollView AbsoluteLayout.LayoutBounds="0,0,1,1"
                AbsoluteLayout.LayoutFlags="PositionProportional,SizeProportional">
                <AbsoluteLayout>
                    <Image Source="deer.jpg"
                        AbsoluteLayout.LayoutBounds=".5,0,300,300"
                        AbsoluteLayout.LayoutFlags="PositionProportional" />
                    <BoxView Color="#CC1A7019" AbsoluteLayout.LayoutBounds=".5
                        300,.7,50" AbsoluteLayout.LayoutFlags="XProportional
                        WidthProportional" />
                    <Label Text="deer.jpg" AbsoluteLayout.LayoutBounds = ".5
                        310,1, 50" AbsoluteLayout.LayoutFlags="XProportional
                        WidthProportional" HorizontalTextAlignment="Center" TextColor="White" />
                </AbsoluteLayout>
            </ScrollView>
            <Button Text="Previous" AbsoluteLayout.LayoutBounds="0,1,.5,60"
                AbsoluteLayout.LayoutFlags="PositionProportional
                    WidthProportional"
                BackgroundColor="White" TextColor="Green" BorderRadius="0" />
            <Button Text="Next" AbsoluteLayout.LayoutBounds="1,1,.5,60"
                AbsoluteLayout.LayoutFlags="PositionProportional
                    WidthProportional" BackgroundColor="White"
                    TextColor="Green" BorderRadius="0" />
        </AbsoluteLayout>
    </ContentPage.Content>
</ContentPage>

Beachten Sie Folgendes:Note the following:

  • Aufgrund der Art und Weise, wie die Seite angelegt wurde, ist es nicht erforderlich, dass prozeduraler Code die Reaktionsfähigkeit einführt.Because of the way the page has been laid out, there is no need for procedural code to introduce responsiveness.
  • Wird ScrollView verwendet, um zuzulassen, dass die Bezeichnung sichtbar ist, auch wenn die Höhe des Bildschirms kleiner ist als die Summe der Höhen der Schaltflächen und des Bilds.The ScrollView is being used to allow the label to be visible even when the height of the screen is less than the sum of the fixed heights of the buttons and the image.

RelativeLayoutRelativeLayout

Beachten Sie die folgende Anwendung, die im Hochformat angezeigt wird:Consider the following application, displayed in portrait:

Foto Anwendung im Hochformat

und Querformat:and landscape:

Foto Anwendung im Querformat

Dies wird mit dem folgenden XAML erreicht: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.RelativeLayoutPageXaml"
Title="RelativeLayout - XAML"
BackgroundImageSource="deer.jpg">
    <ContentPage.Content>
        <RelativeLayout x:Name="outerLayout">
            <BoxView BackgroundColor="#AA1A7019"
                RelativeLayout.WidthConstraint="{ConstraintExpression
                    Type=RelativeToParent,Property=Width,Factor=1}"
                RelativeLayout.HeightConstraint="{ConstraintExpression
                    Type=RelativeToParent,Property=Height,Factor=1}"
                RelativeLayout.XConstraint="{ConstraintExpression
                    Type=RelativeToParent,Property=Width,Factor=0,Constant=0}"
                RelativeLayout.YConstraint="{ConstraintExpression
                    Type=RelativeToParent,Property=Height,Factor=0,Constant=0}" />
            <ScrollView
                RelativeLayout.WidthConstraint="{ConstraintExpression
                    Type=RelativeToParent,Property=Width,Factor=1}"
                RelativeLayout.HeightConstraint="{ConstraintExpression
                    Type=RelativeToParent,Property=Height,Factor=1,Constant=-60}"
                RelativeLayout.XConstraint="{ConstraintExpression
                    Type=RelativeToParent,Property=Width,Factor=0,Constant=0}"
                RelativeLayout.YConstraint="{ConstraintExpression
                    Type=RelativeToParent,Property=Height,Factor=0,Constant=0}">
                <RelativeLayout>
                    <Image Source="deer.jpg" x:Name="imageDeer"
                        RelativeLayout.WidthConstraint="{ConstraintExpression
                            Type=RelativeToParent,Property=Width,Factor=.8}"
                        RelativeLayout.XConstraint="{ConstraintExpression
                            Type=RelativeToParent,Property=Width,Factor=.1}"
                        RelativeLayout.YConstraint="{ConstraintExpression
                            Type=RelativeToParent,Property=Height,Factor=0,Constant=10}" />
                    <Label Text="deer.jpg" HorizontalTextAlignment="Center"
                        RelativeLayout.WidthConstraint="{ConstraintExpression
                            Type=RelativeToParent,Property=Width,Factor=1}"
                        RelativeLayout.HeightConstraint="{ConstraintExpression
                            Type=RelativeToParent,Property=Height,Factor=0,Constant=75}"
                        RelativeLayout.XConstraint="{ConstraintExpression
                            Type=RelativeToParent,Property=Width,Factor=0,Constant=0}"
                        RelativeLayout.YConstraint="{ConstraintExpression
                            Type=RelativeToView,ElementName=imageDeer,Property=Height,Factor=1,Constant=20}" />
                </RelativeLayout>

            </ScrollView>

            <Button Text="Previous" BackgroundColor="White" TextColor="Green" BorderRadius="0"
                RelativeLayout.YConstraint="{ConstraintExpression
                    Type=RelativeToParent,Property=Height,Factor=1,Constant=-60}"
                RelativeLayout.XConstraint="{ConstraintExpression
                    Type=RelativeToParent,Property=Width,Factor=0,Constant=0}"
                RelativeLayout.HeightConstraint="{ConstraintExpression
                    Type=RelativeToParent,Property=Width,Factor=0,Constant=60}"
                RelativeLayout.WidthConstraint="{ConstraintExpression
                    Type=RelativeToParent,Property=Width,Factor=.5}"
                 />
            <Button Text="Next" BackgroundColor="White" TextColor="Green" BorderRadius="0"
                RelativeLayout.XConstraint="{ConstraintExpression
                    Type=RelativeToParent,Property=Width,Factor=.5}"
                RelativeLayout.YConstraint="{ConstraintExpression
                    Type=RelativeToParent,Property=Height,Factor=1,Constant=-60}"
                RelativeLayout.HeightConstraint="{ConstraintExpression
                    Type=RelativeToParent,Property=Width,Factor=0,Constant=60}"
                RelativeLayout.WidthConstraint="{ConstraintExpression
                    Type=RelativeToParent,Property=Width,Factor=.5}"
                />
        </RelativeLayout>
    </ContentPage.Content>
</ContentPage>

Beachten Sie Folgendes:Note the following:

  • Aufgrund der Art und Weise, wie die Seite angelegt wurde, ist es nicht erforderlich, dass prozeduraler Code die Reaktionsfähigkeit einführt.Because of the way the page has been laid out, there is no need for procedural code to introduce responsiveness.
  • Wird ScrollView verwendet, um zuzulassen, dass die Bezeichnung sichtbar ist, auch wenn die Höhe des Bildschirms kleiner ist als die Summe der Höhen der Schaltflächen und des Bilds.The ScrollView is being used to allow the label to be visible even when the height of the screen is less than the sum of the fixed heights of the buttons and the image.

RasterGrid

Beachten Sie die folgende Anwendung, die im Hochformat angezeigt wird:Consider the following application, displayed in portrait:

Foto Anwendung im Hochformat

und Querformat:and landscape:

Foto Anwendung im Querformat

Dies wird mit dem folgenden XAML erreicht: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.GridPageXaml"
Title="Grid - XAML">
    <ContentPage.Content>
        <Grid x:Name="outerGrid">
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="60" />
            </Grid.RowDefinitions>
            <Grid x:Name="innerGrid" Grid.Row="0" Padding="10">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Image Source="deer.jpg" Grid.Row="0" Grid.Column="0" HeightRequest="300" WidthRequest="300" />
                <Grid x:Name="controlsGrid" Grid.Row="0" Grid.Column="1" >
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <Label Text="Name:" Grid.Row="0" Grid.Column="0" />
                    <Label Text="Date:" Grid.Row="1" Grid.Column="0" />
                    <Label Text="Tags:" Grid.Row="2" Grid.Column="0" />
                    <Entry Grid.Row="0" Grid.Column="1" />
                    <Entry Grid.Row="1" Grid.Column="1" />
                    <Entry Grid.Row="2" Grid.Column="1" />
                </Grid>
            </Grid>
            <Grid x:Name="buttonsGrid" Grid.Row="1">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Button Text="Previous" Grid.Column="0" />
                <Button Text="Save" Grid.Column="1" />
                <Button Text="Next" Grid.Column="2" />
            </Grid>
        </Grid>
    </ContentPage.Content>
</ContentPage>

Zusammen mit dem folgenden prozeduralen Code zum Behandeln von Rotations Änderungen:Along with the following procedural code to handle rotation changes:

private double width;
private double height;

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) {
            innerGrid.RowDefinitions.Clear();
            innerGrid.ColumnDefinitions.Clear ();
            innerGrid.RowDefinitions.Add (new RowDefinition{ Height = new GridLength (1, GridUnitType.Star) });
            innerGrid.ColumnDefinitions.Add (new ColumnDefinition { Width = new GridLength (1, GridUnitType.Star) });
            innerGrid.ColumnDefinitions.Add (new ColumnDefinition { Width = new GridLength (1, GridUnitType.Star) });
            innerGrid.Children.Remove (controlsGrid);
            innerGrid.Children.Add (controlsGrid, 1, 0);
        } else {
            innerGrid.RowDefinitions.Clear();
            innerGrid.ColumnDefinitions.Clear ();
            innerGrid.ColumnDefinitions.Add (new ColumnDefinition{ Width = new GridLength (1, GridUnitType.Star) });
            innerGrid.RowDefinitions.Add (new RowDefinition { Height = new GridLength (1, GridUnitType.Auto) });
            innerGrid.RowDefinitions.Add (new RowDefinition { Height = new GridLength (1, GridUnitType.Star) });
            innerGrid.Children.Remove (controlsGrid);
            innerGrid.Children.Add (controlsGrid, 0, 1);
        }
    }
}

Beachten Sie Folgendes:Note the following:

  • Aufgrund der Art und Weise, wie die Seite angelegt wurde, gibt es eine Methode, um die Raster Platzierung der Steuerelemente zu ändern.Because of the way the page has been laid out, there is a method to change the grid placement of the controls.