Geräteausrichtung

  • Artikel

Beispiel herunterladen Das Beispiel herunterladen

Es ist wichtig zu berücksichtigen, wie Ihre Anwendung verwendet wird und wie die Querformatausrichtung integriert werden kann, um die Benutzerfreundlichkeit zu verbessern. Individuelle Layouts können so gestaltet werden, dass sie mehrere Ausrichtungen aufnehmen und den verfügbaren Raum optimal nutzen. Auf Anwendungsebene kann die Rotation deaktiviert oder aktiviert werden.

Steuern der Ausrichtung

Bei verwendung Xamarin.Formswird die unterstützte Methode zur Steuerung der Geräteausrichtung darin verwendet, die Einstellungen für jedes einzelne Projekt zu verwenden.

iOS

Unter iOS wird die Geräteausrichtung für Anwendungen konfiguriert, die die Datei Info.plist verwenden. Verwenden Sie die IDE-Optionen am Anfang dieses Dokuments, um auszuwählen, welche Anweisungen Angezeigt werden sollen:

Öffnen Sie in Visual Studio das iOS-Projekt, und öffnen Sie Info.plist. Die Datei wird in einem Konfigurationsbereich geöffnet, beginnend mit der Registerkarte iPhone-Bereitstellungsinformationen:

iPhone-Bereitstellungsinformationen in Visual Studio

Android

Um die Ausrichtung unter Android zu steuern, öffnen Sie MainActivity.cs , und legen Sie die Ausrichtung mithilfe des Attributs fest, das die MainActivity Klasse schmückt:

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 Festlegen der Ausrichtung:

  • Querformat : Die Anwendungsausrichtung wird unabhängig von Sensordaten als Querformat erzwungen.
  • Hochformat : Erzwingt, dass die Anwendungsausrichtung ein Hochformat ist, unabhängig von Sensordaten.
  • Benutzer : Bewirkt, dass die Anwendung in der bevorzugten Ausrichtung des Benutzers angezeigt wird.
  • Hinter – bewirkt, dass die Ausrichtung der Anwendung mit der Ausrichtung der aktivität dahinter identisch ist.
  • Sensor : Bewirkt, dass die Ausrichtung der Anwendung vom Sensor bestimmt wird, auch wenn der Benutzer die automatische Drehung deaktiviert hat.
  • SensorLandscape : Bewirkt, dass die Anwendung die Querausrichtung verwendet, während sensorische Daten verwendet werden, um die Richtung des Bildschirms zu ändern (sodass der Bildschirm nicht als auf dem Kopf steht).
  • SensorPortrait : Bewirkt, dass die Anwendung die Hochformatausrichtung verwendet, während sensorische Daten verwendet werden, um die Richtung des Bildschirms zu ändern (sodass der Bildschirm nicht als auf dem Kopf steht).
  • ReverseLandscape – bewirkt, dass die Anwendung querformatiert und in die entgegengesetzte Richtung ausgerichtet ist, um "kopfüber" zu erscheinen.
  • ReversePortrait – bewirkt, dass die Anwendung eine Hochformatausrichtung verwendet, die entgegengesetzte Richtung als üblich ausgerichtet ist, um "auf dem Kopf" zu erscheinen.
  • FullSensor – bewirkt, dass die Anwendung auf Sensordaten angewiesen ist, um die richtige Ausrichtung (aus den möglichen 4) auszuwählen.
  • FullUser : Bewirkt, dass die Anwendung die Ausrichtungseinstellungen des Benutzers verwendet. Wenn die automatische Drehung aktiviert ist, können alle 4 Ausrichtungen verwendet werden.
  • UserLandscape – [Nicht unterstützt] bewirkt, dass die Anwendung querformatiert wird, es sei denn, der Benutzer hat die automatische Drehung aktiviert. In diesem Fall wird der Sensor verwendet, um die Ausrichtung zu bestimmen. Mit dieser Option wird die Kompilierung unterbrochen.
  • UserPortrait – [Nicht unterstützt] bewirkt, dass die Anwendung die Hochformatausrichtung verwendet, es sei denn, der Benutzer hat die automatische Drehung aktiviert. In diesem Fall wird der Sensor verwendet, um die Ausrichtung zu bestimmen. Mit dieser Option wird die Kompilierung unterbrochen.
  • Gesperrt : [Nicht unterstützt] bewirkt, dass die Anwendung die Bildschirmausrichtung verwendet, unabhängig davon, wie sie sich beim Start befindet, ohne auf Änderungen in der physischen Ausrichtung des Geräts zu reagieren. Mit dieser Option wird die Kompilierung unterbrochen.

Beachten Sie, dass die nativen Android-APIs eine große Kontrolle darüber bieten, wie die Ausrichtung verwaltet wird, einschließlich Optionen, die explizit den geäußerten Einstellungen des Benutzers widersprechen.

Universelle Windows-Plattform

Auf der Universelle Windows-Plattform (UWP) werden unterstützte Ausrichtungen in der Datei Package.appxmanifest festgelegt. Wenn Sie das Manifest öffnen, wird ein Konfigurationsbereich angezeigt, in dem unterstützte Ausrichtungen ausgewählt werden können.

Reagieren auf Ausrichtungsänderungen

Xamarin.Forms bietet keine nativen Ereignisse zur Benachrichtigung Ihrer App über Ausrichtungsänderungen im freigegebenen Code. Xamarin.Essentials Enthält jedoch eine [DeviceDisplay]-Klasse, die Benachrichtigungen über Orientierungsänderungen bereitstellt.

Um Ausrichtungen ohne Xamarin.Essentialszu erkennen, überwachen Sie das SizeChanged Ereignis von , das Pageausgelöst wird, wenn sich die Breite oder Höhe der Page Änderungen ändert. Wenn die Breite größer Page als die Höhe ist, befindet sich das Gerät im Querformatmodus. Weitere Informationen finden Sie unter Anzeigen eines Bilds basierend auf der Bildschirmausrichtung.

Alternativ ist es möglich, die OnSizeAllocated -Methode in einer Page-Methode zu überschreiben, indem Sie dort eine beliebige Layoutänderungslogik einfügen. Die OnSizeAllocated -Methode wird aufgerufen, wenn eine Page neue Größe zugewiesen wird. Dies geschieht immer dann, wenn das Gerät gedreht wird. Beachten Sie, dass die Basisimplementierung von OnSizeAllocated wichtige Layoutfunktionen ausführt, daher ist es wichtig, die Basisimplementierung in der Überschreibung aufzurufen:

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

Wenn dieser Schritt nicht ausgeführt wird, führt dies zu einer nicht funktionierenden Seite.

Beachten Sie, dass die OnSizeAllocated Methode häufig aufgerufen werden kann, wenn ein Gerät gedreht wird. Das ändern Ihres Layouts jedes Mal ist Ressourcenverschwendung und kann zu Flackern führen. Erwägen Sie, eine instance Variable auf Ihrer Seite zu verwenden, um nachzuverfolgen, ob sich die Ausrichtung im Quer- oder Hochformat befindet, und nur dann neu zeichnen, wenn eine Änderung vorliegt:

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

Sobald eine Änderung der Geräteausrichtung erkannt wurde, können Sie ihrer Benutzeroberfläche zusätzliche Ansichten hinzufügen oder entfernen, um auf die Änderung des verfügbaren Speicherplatzes zu reagieren. Betrachten Sie beispielsweise den integrierten Rechner auf jeder Plattform im Hochformat:

Rechneranwendung im Hochformat

und Landschaft:

Rechneranwendung im Querformat

Beachten Sie, dass die Apps den verfügbaren Speicherplatz nutzen, indem sie mehr Funktionen im Querformat hinzufügen.

Reaktionsfähiges Layout

Es ist möglich, Schnittstellen mit den integrierten Layouts so zu entwerfen, dass sie beim Drehen des Geräts ordnungsgemäß übergehen. Berücksichtigen Sie beim Entwerfen von Schnittstellen, die weiterhin attraktiv sind, wenn Sie auf Änderungen in der Ausrichtung reagieren, die folgenden allgemeinen Regeln:

  • Achten Sie auf Verhältnisse – Orientierungsänderungen können Probleme verursachen, wenn bestimmte Annahmen in Bezug auf Verhältnisse getroffen werden. Beispielsweise passt eine Ansicht, die viel Platz in 1/3 des vertikalen Raums eines Bildschirms im Hochformat hätte, möglicherweise nicht in 1/3 des vertikalen Raums im Querformat.
  • Seien Sie bei absoluten Werten vorsichtig : Absolute (Pixel)-Werte, die im Hochformat sinnvoll sind, sind im Querformat möglicherweise nicht sinnvoll. Wenn absolute Werte erforderlich sind, verwenden Sie geschachtelte Layouts, um deren Auswirkungen zu isolieren. Beispielsweise wäre es sinnvoll, absolute Werte in einem TableViewItemTemplate zu verwenden, wenn die Elementvorlage eine garantierte einheitliche Höhe aufweist.

Die oben genannten Regeln gelten auch bei der Implementierung von Schnittstellen für mehrere Bildschirmgrößen und gelten allgemein als bewährte Methoden. Im Rest dieses Leitfadens werden spezifische Beispiele für reaktionsfähige Layouts erläutert, die jedes der primären Layouts in Xamarin.Formsverwenden.

Hinweis

Zur Übersichtlichkeit wird in den folgenden Abschnitten veranschaulicht, wie Reaktionsfähige Layouts jeweils mit jeweils nur einem Typ implementiert Layout werden. In der Praxis ist es oft einfacher, s zu mischen Layout, um ein gewünschtes Layout mit dem einfacheren oder intuitivsten Layout für jede Komponente zu erzielen.

StackLayout

Betrachten Sie die folgende Anwendung, die im Hochformat angezeigt wird:

Screenshot: Fotoanwendung StackLayout im Hochformat

und Landschaft:

Screenshot: Fotoanwendung StackLayout im Querformat

Dies wird mit dem folgenden XAML-Code erreicht:

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

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:

  • outerStack wird angepasst, um das Bild und die Steuerelemente je nach Ausrichtung als horizontaler oder vertikaler Stapel darzustellen, um den verfügbaren Platz optimal zu nutzen.

AbsoluteLayout

Betrachten Sie die folgende Anwendung, die im Hochformat angezeigt wird:

Screenshot: AbsoluteLayout der Fotoanwendung im Hochformat

und Landschaft:

Screenshot: AbsoluteLayout der Fotoanwendung im Querformat

Dies wird mit dem folgenden XAML-Code erreicht:

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

  • Aufgrund der Art und Weise, wie die Seite gestaltet wurde, ist es nicht erforderlich, dass ein prozeduraler Code reaktionsfähig ist.
  • Die ScrollView wird verwendet, um die Bezeichnung sichtbar zu machen, auch wenn die Höhe des Bildschirms kleiner ist als die Summe der festen Höhen der Schaltflächen und des Bilds.

RelativeLayout

Betrachten Sie die folgende Anwendung, die im Hochformat angezeigt wird:

Screenshot: RelativeLayout der Fotoanwendung im Hochformat

und Landschaft:

Screenshot: RelativeLayout der Fotoanwendung im Querformat

Dies wird mit dem folgenden XAML-Code erreicht:

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

  • Aufgrund der Art und Weise, wie die Seite gestaltet wurde, ist es nicht erforderlich, dass ein prozeduraler Code reaktionsfähig ist.
  • Die ScrollView wird verwendet, um die Bezeichnung sichtbar zu machen, auch wenn die Höhe des Bildschirms kleiner ist als die Summe der festen Höhen der Schaltflächen und des Bilds.

Raster

Betrachten Sie die folgende Anwendung, die im Hochformat angezeigt wird:

Screenshot: Fotoanwendungsraster im Hochformat

und Landschaft:

Screenshot: Fotoanwendungsraster im Querformat

Dies wird mit dem folgenden XAML-Code erreicht:

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

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:

  • Aufgrund der Art und Weise, wie die Seite angelegt wurde, gibt es eine Methode zum Ändern der Rasterplatzierung der Steuerelemente.