Erstellen von Seiten und Navigieren zwischen Seiten

Erstellen von und Navigieren zwischen Seiten in Hilo (Windows Store-Apps mit C++ und XAML)

[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation]

Aus : Umfassende Entwicklung einer Windows Store-App mit C++ und XAML: Hilo

Leitfaden-Logo

Vorherige Seite | Nächste Seite

Windows Store-Apps wie Hilo verfügen über eine Seite für jeden Bildschirm, zu dem ein Benutzer navigieren kann. Die erste Seite wird von der App beim Starten erstellt; alle weiteren Seiten werden später als Reaktion auf die Navigation des Benutzers erstellt.

Download

Herunterladen des Hilo-Beispiels
Buch herunterladen (PDF)

Anweisungen zu dem heruntergeladenen Code finden Sie unter Erste Schritte mit Hilo.

Im Einzelnen werden Sie Folgendes lernen:

  • Gestaltung der Seiten in der Hilo-App.
  • Erstellung der Seiten und ihrer Datenquellen zur Laufzeit durch die Hilo-App.
  • Unterstützung von Anwendungsansichtszuständen wie der angedockten Ansicht durch Hilo.

Betrifft

  • Windows-Runtime für Windows 8
  • Visual C++-Komponentenerweiterungen (C++/CX)
  • XAML

Grundlegendes zu den Tools

Für Hilo haben wir Blend für Visual Studio und den Visual Studio-XAML-Designer mit XAML verwendet, da mit diesen Tools das Seitenlayout schnell hinzugefügt und geändert werden kann. Blend war vor allem beim ursprünglichen Definieren der Seiten und Steuerelemente hilfreich, und Visual Studio wurde zur detaillierten Anpassung der jeweiligen Darstellung verwendet. Darüber hinaus bieten diese Tools ein unmittelbares visuelles Feedback. Sie ermöglichen uns daher, die zur Verfügung stehenden Gestaltungsmöglichkeiten ohne Zeitverlust zu durchlaufen.

Unserem UX-Designer war es in vielen Fällen möglich, parallel zu den Entwicklern zu arbeiten, da sich Änderungen der visuellen Darstellung einer Seite nicht auf ihr Verhalten auswirken.

Wir empfehlen, Visual Studio für die Arbeit mit den codespezifischen Aspekten Ihrer App zu verwenden. Visual Studio eignet sich am besten zum Schreiben von Code sowie zum Ausführen und Debuggen Ihrer App.

Tipp  

Visual Studio gruppiert XAML-Designdateien mithilfe von CodeBehind. Erweitern Sie die XML-Dateien im Projektmappen-Explorer, um die zugehörigen H- und CPP-Dateien anzuzeigen.

Erweitern einer XAML-Datei zum Anzeigen ihrer zugehörigen Dateien
 

Sie sollten Blend für Visual Studio verwenden, um am visuellen Erscheinungsbild Ihrer App zu arbeiten. Mit Blend können Sie Seiten und benutzerdefinierte Steuerelemente erstellen, Vorlagen und Stile ändern, und Sie können Animationen erstellen. Blend bietet eine minimale Unterstützung von CodeBehind.

Weitere Informationen über Tools zur Bearbeitung von XAML finden Sie unter Blend für Visual Studio und Erstellen einer Benutzeroberfläche mit dem XAML-Designer.

[Nach oben]

Hinzufügen neuer Seiten zum Projekt

In der Hilo-App sind sechs Seiten vorhanden. Im Einzelnen sind dies Folgende:

  • Zentrale Hubseite
  • Browserseite
  • Bildbetrachtungsseite
  • Seite für Bildzuschnitt
  • Seite für Bilddrehung
  • Seite für Comiceffekt

Die Seitenklassen entsprechen den Ansichten des MVVM-Musters:

  • MainHubView
  • ImageBrowserView
  • ImageView
  • CropImageView
  • RotateImageView
  • CartoonizerImageView

Beim Erstellen der App wurden die einzelnen Seiten dem Projekt mithilfe des Dialogfelds Neues Element hinzufügen in Visual Studio hinzugefügt. Für die Projektvorlage wurde die Vorlage für Visual C++/Windows Store/Grid App (XAML) verwendet. Jede Seite stellt eine eigene XAML-Struktur in einer eigenen Codedatei dar.

Die Grid App (XAML)-Vorlage erstellt Seiten auf Basis der LayoutAwarePage-Klasse von Visual Studio. Diese Klasse stellt Navigations-, Zustands- und Ansichtsverwaltungsfunktionen bereit.

In Hilo wurde die Funktionalität der LayoutAwarePage-Vorlage von Visual Studio mit der HiloPage-Klasse für spezielle Zwecke konfiguriert. Diese Klasse passt das Navigationsverhalten und die Zustandsverwaltung für die Ansichtsmodelle von Hilo an. Hilo-Seiten werden von HiloPage abgeleitet.

Eine schrittweise Einführung in das Erstellen von Seiten in einer Windows Store-App finden Sie unter Lernprogramm: Erstellen Ihrer ersten Windows Store-App mit C++. Weitere Informationen über die LayoutAwarePage-Klasse finden Sie unter Teil 1: Erstellen der App 'Hello, world' (Windows Store-Apps mit C#/VB und XAML).

[Nach oben]

Erstellen von Seiten in der Entwurfsansicht

Seiten in Windows Store-Apps entsprechen Benutzersteuerelementen, die die Navigation unterstützen. Jedes Seitenobjekt stellt Inhalt dar, zu dem der Benutzer navigieren kann. Seiten enthalten andere Steuerelemente. Seitenklassen werden im Designer visuell dargestellt. Alle Seitenklassen sind untergeordnete Typen der Windows::UI::Xaml::Page-Klasse. In Hilo werden die Seitenklassen darüber hinaus von der HiloPage-Klasse abgeleitet, die wiederum von der LayoutAwarePage-Klasse abgeleitet wird.

Nachstehend finden Sie ein Beispiel für eine Bildbrowserseite im Visual Studio-Designer.

Bildbrowserseite im Designer

Jede Seite ist mit einer XAML-Datei verknüpft, die von Visual Studio erstellt wird. Darüber hinaus sind die einzelnen Seiten mit einer H- und einer CPP-Datei für Code verknüpft, der sich auf die Seite bezieht und vom App-Entwickler geschrieben wurde.

Visual Studio verwendet das partial-Schlüsselwort, das Teil der C++/CX-Spracherweiterungen ist, um die Deklaration einer Seitenklasse in mehrere Dateien aufzuteilen. Beispielsweise wird die MainHubView-Klasse für die Hubseite in vier Dateien aufgeteilt.

  • MainHubView.xaml. Diese Datei enthält das XAML-Markup zur Beschreibung der Steuerelemente der Seite sowie ihres visuellen Layouts.
  • MainHubView.g.h. Diese Headerdatei enthält Deklarationen, die von Visual Studio auf Basis der XAML-Quelle erstellt werden. Der Inhalt dieser Datei sollte nicht verändert werden. (Das Suffix "g" im Dateinamen steht für "generiert".)
  • MainHubView.xaml.h. Die Headerdatei enthält Deklarationen von Memberfunktionen, deren Implementierungen Sie anpassen können. Sie können dieser Datei auch eigene Deklarationen von Memberfunktionen und Membervariablen hinzufügen.
  • MainHubView.xaml.cpp. Dies ist die CodeBehind-Datei. Aufgrund der Verwendung des Model-View-ViewModel (MVVM)-Musters enthält diese Datei nur Ereignishandlercode, mit dem Vorgänge an die Ansichtsmodellklasse der Seite (MainHubViewModel) delegiert werden.

Tipp  Hilo verwendet das MVVM-Muster, mit dem die Benutzeroberfläche für die Anwendung abstrahiert wird. Dank MVVM ist die Anpassung der CCP-CodeBehind-Dateien nur in Ausnahmefällen erforderlich. Stattdessen werden die Steuerelemente der Benutzeroberfläche an die Eigenschaften eines Ansichtsmodellobjekts gebunden. Falls Code für die Seite erforderlich ist, sollte dieser auf den Austausch von Daten mit dem Ansichtsmodellobjekt der Seite begrenzt sein.
 

Wenn Sie mehr über das Interaktionsmodell von Hilo und über das Entwerfen der UX in Hilo erfahren möchten, können Sie sich unter Entwerfen der UX für Windows Store-Apps informieren.

[Nach oben]

Herstellen der Datenbindung

Datenbindungen verknüpfen die einzelnen Seiten mit einem Ansichtsmodell, das Teil der Hilo-Implementierung ist. Über das Ansichtsmodell erhält die Seite Zugriff auf die zugrunde liegende App-Logik, indem sie die Konventionen des MVVM-Musters nutzt. Weitere Informationen finden Sie in diesem Leitfaden unter Verwenden des MVVM-Musters.

Der Datenkontext der einzelnen Seitenklassen in der Hilo-App wird auf die ViewModelLocator-Klasse der Hilo-App festgelegt. Die Datenbindung gibt den Lokator des Ansichtsmodells als statische Ressource an. Dies bedeutet, dass die Ressource bereits definiert wurde. In diesem Fall handelt es sich bei der Ressource um eine der ViewModelLocator-Klasse.

Der Datenkontext der Hubseite von Hilo wird wie folgt mit einer Datenbindung aus der Datei MainHubView.xaml festgelegt:


DataContext="{Binding Source={StaticResource ViewModelLocator}, Path=MainHubVM}"

Beim Erstellen einer Hilo-Seite durch die Windows-Runtime wird eine Bindung mit der Eigenschaft hergestellt, die im Path-Feld des Datenkontexts angegeben wurde. Die get-Methode der Eigenschaft ist eine Methode der ViewModelLocator-Klasse von Hilo. Darüber hinaus erstellt die Methode ein neues Ansichtsmodellobjekt. Beispielsweise erstellt die MainHubVM-Methode der ViewModelLocator-Klasse eine Instanz der MainHubViewModel-Klasse.

ViewModelLocator.cpp


MainHubViewModel^ ViewModelLocator::MainHubVM::get()
{
    auto vector = ref new Vector<HubPhotoGroup^>();
    // Pictures Group
    auto loader = ref new ResourceLoader();
    auto title = loader->GetString("PicturesTitle");
    auto emptyTitle = loader->GetString("EmptyPicturesTitle");
    auto picturesGroup = ref new HubPhotoGroup(title, emptyTitle, m_repository, m_exceptionPolicy);
    vector->Append(picturesGroup);
    return ref new MainHubViewModel(vector, m_exceptionPolicy);
}


Das MainHubViewModel-Objekt macht außerdem weitere Eigenschaften verfügbar, die von der Klasse für die Hubseite verwendet werden kann.

Nachfolgend finden Sie eine Übersicht über die Seiten, Bindungspfade und Ansichtsmodellklassen in der Hilo-App:

App-SeiteSeitenklasseDatenbindungspfadAnsichtsmodellklasse
HubMainHubViewMainHubVMMainHubViewModel
DurchsuchenImageBrowserViewImageBrowserVMImageBrowserViewModel
ImageImageViewImageVMImageViewModel
CropCropImageViewCropImageVMCropImageViewModel
DrehenRotateImageViewRotateImageVMRotateImageViewModel
CartoonEffectCartoonizerImageViewCartoonizerImageVMCartoonizerImageViewModel

 

[Nach oben]

Hinzufügen von Entwurfszeitdaten

Beim Erstellen einer datengebundenen Benutzeroberfläche mit einem Visual Designer können Sie Beispieldaten anzeigen, um sich einen Eindruck der Formatierungsergebnisse und Layoutgrößen zu verschaffen. Wenn Sie Daten im Designer anzeigen möchten, ist eine entsprechende Deklaration in XAML erforderlich. Dies ist notwendig, weil der Designer das XAML für eine Seite analysiert, jedoch nicht deren CodeBehind ausführt. In Hilo sollen die Entwurfszeitdaten zur Unterstützung des Designer-Entwickler-Workflows angezeigt werden.

Beispieldaten können während der Entwurfszeit durch Deklarieren in XAML mit den unterschiedlichen Datenattributen aus dem XML-Namespace des Designers angezeigt werden. Dieser XML-Namespace wird üblicherweise mit einem d:-Präfix deklariert.


xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

Attribute mit d:-Präfixen werden dann nur während der Entwurfszeit interpretiert; während der Laufzeit werden sie ignoriert. Beispielsweise wird das d:Source-Attribut in einer CollectionViewSource für Entwurfszeit-Beispieldaten verwendet, und das Source-Attribut wird für Laufzeitdaten verwendet.

ImageBrowserView.xaml


<CollectionViewSource
    x:Name="MonthGroupedItemsViewSource"
    d:Source="{Binding MonthGroups, Source={d:DesignInstance Type=local:DesignTimeData, IsDesignTimeCreatable=True}}"
    Source="{Binding MonthGroups}"
    IsSourceGrouped="true"
    ItemsPath="Items"/>


Das d:DesignInstance-Attribut gibt an, dass die Entwurfszeitquelle eine vom Designer erstellte Instanz ist, die auf dem DesignTimeData-Typ basiert. Die IsDesignTimeCreateable-Einstellung zeigt an, dass der Designer den Typ direkt instanziiert, was zur Anzeige der durch den Typ-Konstruktor erzeugten Beispieldaten notwendig ist.

Weitere Informationen finden Sie unter Übersicht Datenbindung.

Erstellen der zentralen Hubseite

Das XAML-Benutzeroberflächenframework verfügt über ein integriertes Navigationsmodell mit dem Frame- und dem Page-Element. Die Navigation funktioniert wie in einem Webbrowser. Das Frame-Steuerelement stellt Page-Elemente bereit. Mithilfe des Navigationsverlaufs können Sie außerdem zwischen den besuchten Seiten vor und zurück wechseln. Bei der Navigation können auch Daten zwischen den Seiten übergeben werden. In den Projektvorlagen von Visual Studio ist als Inhalt des App-Fensters ein Frame namens rootFrame festgelegt.

Wenn die Hilo-App gestartet wird, navigiert die OnLaunched-Methode der Hilo::App-Klasse zur Hubseite der App.

Hubseite

Die App-Klasse wird von der Windows::UI:Xaml::Application-Klasse abgeleitet und überschreibt die OnLaunched-Methode. Hier finden Sie den entsprechenden Code aus der OnLaunched-Methode.

App.xaml.cpp


if (rootFrame->Content == nullptr)
{
    // When the navigation stack isn't restored navigate to the first page,
    // configuring the new page by passing required information as a navigation
    // parameter.  See http://go.microsoft.com/fwlink/?LinkId=267278 for a walkthrough of how 
    // Hilo creates pages and navigates to pages.
    if (!rootFrame->Navigate(TypeName(MainHubView::typeid)))
    {
        throw ref new FailureException((ref new LocalResourceLoader())->GetString("ErrorFailedToCreateInitialPage"));
    }
}


Dieser Code veranschaulicht das Aufrufen der Navigate-Methode eines Windows::UI::Xaml::Controls::Frame- Objekts durch Hilo, um Inhalte zu laden, die durch den Datentyp angegeben wurden (hier: die MainHubView-Klasse). Das Frame-Steuerelement unterstützt die Verwaltung des Anwendungskontexts. Der Code testet, ob die Content-Eigenschaft des Objekts null ist, um zu ermitteln, ob die App aus einem früheren Zustand fortgesetzt oder mit dem Standardnavigationszustand gestartet wurde. (Weitere Informationen zum Fortsetzen aus einem früheren Zustand finden Sie in diesem Leitfaden unter Behandeln von Vorgängen zum Anhalten, Fortsetzen und Aktivieren.)

Weitere Informationen und Codebeispiele zum Erstellen von Seiten finden Sie unter Lernprogramm: Erstellen Ihrer ersten Windows Store-App mit C++.

[Nach oben]

Navigation zwischen Seiten

Die LayoutAwarePage-Klasse stellt Methoden bereit, die die Navigation der App zwischen Seiten mit Frames unterstützen. Dabei handelt es sich um die folgende Methoden: GoHome, GoForward und GoBack. Hilo ruft diese Methoden, um die Seitennavigation zu initiieren.

Beispielsweise ruft die Zurück-Schaltfläche für das Steuerelement des Filmstreifens auf der Bildansichtsseite die GoBack-Methode auf.

ImageView.xaml


<Button x:Name="FilmStripBackButton" 
        AutomationProperties.AutomationId="FilmStripBackButton" 
        Click="GoBack" 
        IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}"
        Margin="26,53,36,36"
        Style="{StaticResource BackButtonStyle}"
        VerticalAlignment="Top"/>


Die direkte Navigation durch den Benutzer stellt nicht die einzige Möglichkeit dar. So wird beim Laden der Seite zum Drehen von Bildern das Bild im Dateisystem gesucht. Wenn das Bild nicht mehr vorhanden ist, weil sich das Dateisystem außerhalb der Hilo-App geändert hat, navigiert der Vorgang zum Drehen programmgesteuert zurück zur zentralen Hubseite. Hier ist der Code.

RotateImageViewModel.cpp


void RotateImageViewModel::Initialize(String^ photoPath)
{
    assert(IsMainThread());
    m_photo = nullptr;
    m_photoPath = photoPath;

    GetImagePhotoAsync().then([this](IPhotoImage^ photo)
    {
        assert(IsMainThread());
        // Return to the hub page if the photo is no longer present
        if (photo == nullptr)
        {
            GoHome();
        }
    });
}


Weitere Informationen zum Navigieren zwischen Seiten finden Sie unter Lernprogramm: Erstellen Ihrer ersten Windows Store-App mit C++.

[Nach oben]

Unterstützen von Hochformatlayouts sowie angedockten und gefüllten Layouts

Hilo wurde für die Anzeige im Querformat und im Vollbildmodus entwickelt. Windows Store-Apps wie Hilo müssen sich an andere Ansichtszustände von Anwendungen wie Quer- und Hochformat anpassen können. Hilo unterstützt folgende Layouts: FullScreenLandscape, Filled, FullScreenPortrait und Snapped. Änderungen an der visuellen Anzeige werden von Hilo mit der VisualState-Klasse angegeben. Dies ermöglicht die Unterstützung der einzelnen Layouts. Die VisualStateManager-Klasse wird von der LayoutAwarePage-Klasse verwendet und verwaltet die Zustände und die Logik für den Übergang zwischen Steuerelementzuständen. Nachfolgend finden Sie beispielsweise die XAML-Spezifikation für die Layoutänderungen der Seite zum Zuschneiden von Bildern.

CropImageView.xaml


<VisualStateManager.VisualStateGroups>
    <!-- Visual states reflect the application's view state -->
    <VisualStateGroup x:Name="ApplicationViewStates">
        <VisualState x:Name="FullScreenLandscape"/>
        <VisualState x:Name="Filled"/>
        <VisualState x:Name="FullScreenPortrait">
            <Storyboard>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CancelButton"
                                               Storyboard.TargetProperty="Visibility">
                    <DiscreteObjectKeyFrame KeyTime="0"
                                            Value="Collapsed"/>
                </ObjectAnimationUsingKeyFrames>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CancelButtonNoLabel"
                                               Storyboard.TargetProperty="Visibility">
                    <DiscreteObjectKeyFrame KeyTime="0"
                                            Value="Visible"/>
                </ObjectAnimationUsingKeyFrames>       
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SaveButton"
                                               Storyboard.TargetProperty="Visibility">
                    <DiscreteObjectKeyFrame KeyTime="0"
                                            Value="Collapsed"/>
                </ObjectAnimationUsingKeyFrames>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SaveButtonNoLabel"
                                               Storyboard.TargetProperty="Visibility">
                    <DiscreteObjectKeyFrame KeyTime="0"
                                            Value="Visible"/>
                </ObjectAnimationUsingKeyFrames>
          </Storyboard>
        </VisualState>
        <VisualState x:Name="Snapped">
            <Storyboard>                  
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CancelButton"
                                               Storyboard.TargetProperty="Visibility">
                    <DiscreteObjectKeyFrame KeyTime="0"
                                            Value="Collapsed"/>
                </ObjectAnimationUsingKeyFrames>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CancelButtonNoLabel"
                                               Storyboard.TargetProperty="Visibility">
                    <DiscreteObjectKeyFrame KeyTime="0"
                                            Value="Visible"/>
                </ObjectAnimationUsingKeyFrames>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SaveButton"
                                               Storyboard.TargetProperty="Visibility">
                    <DiscreteObjectKeyFrame KeyTime="0"
                                            Value="Collapsed"/>
                </ObjectAnimationUsingKeyFrames>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ResumeCropStackPanel"
                                               Storyboard.TargetProperty="Visibility">
                    <DiscreteObjectKeyFrame KeyTime="0"
                                            Value="Visible"/>
                </ObjectAnimationUsingKeyFrames>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CropCanvas"
                                               Storyboard.TargetProperty="Visibility">
                    <DiscreteObjectKeyFrame KeyTime="0"
                                            Value="Collapsed"/>
                </ObjectAnimationUsingKeyFrames>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CropImageGrid"
                                               Storyboard.TargetProperty="Margin">
                    <DiscreteObjectKeyFrame KeyTime="0"
                                            Value="20,50,20,0"/>
                </ObjectAnimationUsingKeyFrames>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PageTitle"
                                               Storyboard.TargetProperty="Visibility">
                    <DiscreteObjectKeyFrame KeyTime="0"
                                            Value="Visible"/>
                </ObjectAnimationUsingKeyFrames>
            </Storyboard>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>


Hinweis  Die Style-Eigenschaft wird i. d. R. festgelegt, wenn mehrere Eigenschaften aktualisiert werden müssen oder ein definierter Stil verwendet werden soll. Wenn nur eine Eigenschaft aktualisiert werden muss, werden einzelne Eigenschaften häufig auch direkt angepasst. Mit Stilen können Sie mehrere Eigenschaften steuern und erreichen eine einheitliche Darstellung in der gesamten App. Sie sollten jedoch darauf achten, nicht zu viele Stile zu verwenden. Andernfalls wird die Verwaltung der App erschwert. Verwenden Sie Stile nur, wenn dies angebracht ist. Weitere Informationen zur Formatierung von Steuerelementen finden Sie unter Schnellstart: Formatieren von Steuerelementen.
 

In aller Regel können Sie mit XAML uneingeschränkte Unterstützung für die Ansichtszustände der App leisten. In Hilo muss der C++-Code nur an einer Stelle geändert werden, um das Layout zu unterstützen. Dabei handelt es sich um das Ansichtsmodell für den Bildzuschnitt. In diesem Modell passt die App die Position der entsprechenden Überlagerungen an das neue Layout an. Dazu stellt die App einen Handler für das SizeChanged-Ereignis bereit.

CropImageView.xaml


<Image x:Name="Photo" 
       AutomationProperties.AutomationId="ImageControl"
       HorizontalAlignment="Center" 
       VerticalAlignment="Center" 
       SizeChanged="OnSizeChanged"
       Source="{Binding Image}"/>


Hilo bindet das SizeChanged-Ereignis an die CropImageView::OnSizeChanged-Memberfunktion.

CropImageView.cpp


void CropImageView::OnSizeChanged(Object^ sender, SizeChangedEventArgs^ e)
{
    m_cropImageViewModel->CalculateInitialCropOverlayPosition(
        Photo->TransformToVisual(CropImageGrid), 
        Photo->RenderSize.Width, Photo->RenderSize.Height);

    if (!m_sizeChangedAttached)
    {
        SizeChanged += ref new SizeChangedEventHandler(this, &CropImageView::OnSizeChanged);
        m_sizeChangedAttached = true;
    }
}


Wenn sich die Bildgröße durch das Zuschneiden ändern, ruft der Handler die CalculateInitialCropOverlayPosition-Methode des Ansichtsmodells für den Bildzuschnitt auf, um die Überlagerung des Zuschnitts an das neue Layout anzupassen. Auch wenn sich die Größe der Seite ändert, beispielsweise bei einem Wechsel vom Ansichtszustand FullScreenLandscape zum Ansichtszustand Filled, passt der Handler die Überlagerung des Zuschnitts an das neue Layout an.

Tipp  Beim Entwickeln einer App in Visual Studio können Sie den Simulatordebugger verwenden, um Layouts zu testen. Drücken Sie dazu F5, und verwenden Sie die Debugger-Symbolleiste zum Debuggen mit dem Simulator.
 

Weitere Informationen sowie eine exemplarische Vorgehensweise für eine Beispiel-App, die auf Layoutänderungen reagiert, finden Sie unter Anpassung an verschiedene Layouts.

[Nach oben]

 

 

Anzeigen:
© 2017 Microsoft