Entwerfen der App mit XAML: Größenänderung

Applies to Windows only

Entwerfen Sie die C#/XAML-App so, dass sie bei Größenänderungen erwartungsgemäß reagiert.

Ein nützliches Feature von Windows 8 ist das gleichzeitige Anzeigen von zwei oder mehr Apps auf dem Bildschirm. Wenn Benutzer einen Ziehvorgang vom oberen Bildschirmrand durchführen, können sie eine App an den linken oder rechten Rand des Bildschirms verschieben und Platz für die Anzeige einer neuen App schaffen. Darauf muss Ihre App vorbereitet sein und bei Bedarf anpassen, wie bzw. welche Bildschirminhalte auf dem Bildschirm angezeigt werden.

Bildschirm mit einer angezeigten App und Platz für das Öffnen und Anzeigen einer zweiten App

Wenn Sie zum Positionieren der Steuerelemente ein XAML-Raster verwendet haben, sieht alles wahrscheinlich schon gut aus. Es ist jedoch ratsam, einige Dinge speziell anzupassen. Die bestmögliche Vorgehensweise besteht darin, auf die gleichen Meldungen zu reagieren und den Visual State-Manager zu verwenden, wie unter Entwerfen der App mit XAML: Ausrichtung erläutert. Beispielsweise können Sie einen neuen Ansichtszustand mit dem Namen Narrow (Schmal) erstellen, um einige Steuerelemente auszublenden, damit mehr Platz für die verbleibenden Steuerelemente vorhanden ist. Gehen Sie dazu wie folgt vor:

Erkennen der Änderung der Fenstergröße

Zuerst fügen wir der CS-CodeBehind-Seite einen Handler für Ausrichtungsänderungen hinzu (falls noch nicht geschehen):


        public MyPage()
        {
            this.InitializeComponent();
           
            // Add the handler
            Window.Current.SizeChanged += Current_SizeChanged;
         }
        
        void Current_SizeChanged(object sender, Windows.UI.Core.WindowSizeChangedEventArgs e)
        {
            double width = e.Size.Width;

            // Obtain the orientation - Landscape or Portait
            string CurrentViewState = ApplicationView.GetForCurrentView().Orientation.ToString();

            // Test to see if the app is fullscreen or not
            if (ApplicationView.GetForCurrentView().IsFullScreen)
            {
                // It is, so handle Landscape or Portrait visual states as before
                VisualStateManager.GoToState(this, CurrentViewState, false);
                return;
            }

            // At this point, the screen is split, so decide if it's narrow enough
            // to require a new visual state

            if (width < 800)
                VisualStateManager.GoToState(this, "Narrow", false);
        }



Wir nutzen eine zweite Eigenschaft in diesem Handler, und zwar ApplicationView.GetForCurrentView().IsFullScreen. Mit dieser Eigenschaft wird angegeben, ob für die App gerade die Vollbildansicht aktiv ist. Falls nicht, muss sie geteilt werden. Dann können wir entscheiden, ob der neue Ansichtszustand aktiviert werden soll, falls die Breite stark verringert wurde.

Unterstützen des neuen Ansichtszustands

Wir definieren den neuen Ansichtszustand genauso wie bisher mit den Hoch- und Querformatzuständen. In diesem Beispiel wird eine der angezeigten Spalten mit Informationen ausgeblendet, um etwas mehr Platz zu schaffen.


       <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="ApplicationViewStates">

                <VisualState x:Name="Portrait"/>
                <VisualState x:Name="Landscape"/>
                <VisualState x:Name="Narrow">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames
          Storyboard.TargetName="TheSuperfluousColumn"
          Storyboard.TargetProperty="Width">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
  

Zur Veranschaulichung ist hier die App vor dem Teilen des Bildschirms dargestellt:

Drei Spalten, normale Größe

Dies ist nun die App, nachdem der Benutzer den Bildschirm in zwei Hälften geteilt hat, und zwar ohne spezielle Unterstützung für den schmaleren Bildschirm. Beachten Sie, dass derselbe Inhalt in eine kleinere Fläche gezwängt ist.

Drei Spalten, gezwängte Ansicht

Hier ist alles deutlich weniger eingezwängt, weil nur die wichtigsten Informationen angezeigt werden.

Eine Spalte, nicht gezwängt

Mindestbreite

Sie können für die App einen Wert für die Mindestbreite angeben. Der Standardwert beträgt 500. Wenn Ihre Ansicht kleiner als die Mindestgröße ist, stellt die App aufgrund der Einschränkungen praktisch den Betrieb ein und wird angehalten. Sie können den Wert auf ein Minimum von 320 reduzieren, damit die App in einer schmalen Spalte am Rand des Bildschirms als nützliches Hilfsprogramm für Benutzer sichtbar bleiben kann.

Wichtig  Die Größenanpassung der App-Breite wird vom Benutzer initiiert. Sie können dies nicht programmgesteuert erzwingen.

Verwandte Themen

Entwerfen der App mit XAML: Raster
Entwerfen der App mit XAML: Ausrichtung
Richtlinien für Fenstergrößen und das Skalieren auf Bildschirme (Windows Store-Apps)
Schnellstart: Entwerfen von Apps für verschiedene Fenstergrößen
Richtlinien für das Ändern der Fenstergröße für hohe und schmale Layouts
Schnellstart: Definieren von App-Layouts (Windows Store-Apps mit JavaScript und HTML)

 

 

Anzeigen:
© 2014 Microsoft