Windows Dev Center

Erstellen einer grundlegenden C++-Store-App (Lernprogramm 1 von 4)

In Visual Studio 2013 mit Update 2 können Sie C++ zum Entwickeln einer App verwenden, die unter Windows 8.1 und Windows Phone 8.1 läuft und über eine Benutzeroberfläche verfügt, die in der Extensible Application Markup Language (XAML) definiert ist.

In diesem Thema wird die Entwicklung für Windows 8.1 beschrieben. Ein einführendes Lernprogramm zur Entwicklung für Windows 10 Insider Preview in C++ finden Sie unterErstellen der App „Hello, world“ in C++ (Windows 10). Sie können für Windows 8.1 und Windows Phone 8.1 entwickelte Apps für Windows 10 Insider Preview neu zuweisen.

Informationen zu Lernprogrammen in anderen Programmiersprachen finden Sie unter:

Vorbereitung

  • Für dieses Lernprogramm benötigen Sie Microsoft Visual Studio Express 2013 für Windows mit Update 2 oder höher bzw. eine Version von Visual Studio 2013 mit Update 2 oder höher (ohne Express) auf einem Computer mit Windows 8.1 oder Windows 10 Insider Preview. Informationen zum Herunterladen finden Sie unter Herunterladen der Tools. Achten Sie in Ihrer Visual Studio-Edition darauf, die Visual C++-Entwicklungseinstellungen auszuwählen.
  • Außerdem benötigen Sie eine Entwicklerlizenz. Entsprechende Anweisungen finden Sie unter Anfordern einer Entwicklerlizenz.
  • Es wird vorausgesetzt, dass Sie über grundlegende Kenntnisse in standardmäßigem C++, XAML und den in der XAML-Übersicht erläuterten Konzepten verfügen.
  • Wir gehen davon aus, dass Sie das Standardfensterlayout in Visual Studio verwenden. Um das Layout auf das Standardlayout zurückzusetzen, klicken Sie auf der Menüleiste auf Fenster > Fensterlayout zurücksetzen.
  • Den vollständigen Code für dieses Lernprogramm finden Sie in der Codegalerie unter Hello, World (C++).

Der Visual C++-Compiler in Microsoft Visual Studio 2015 RC unterstützt keine Entwicklung von Windows-Runtime-Apps, die auf Windows 8 oder Windows 8.1 ausgerichtet sind. Stellen Sie zur Ausrichtung auf diese Plattformen sicher, dass Visual Studio 2013 Update 2 oder höher auf dem Computer installiert ist, und öffnen Sie dann in Ihrem Visual Studio 2015.Projekt Ihr Windows 8- oder Windows 8.1-Projekt. Wählen Sie im Hauptmenü Projekt > Eigenschaften aus, und legen Sie im Abschnitt Allgemein die Eigenschaft Plattformtoolset auf Visual Studio 2013 (v120) fest.

Vergleich zwischen C++-Desktop-Apps und Windows-Apps

Wenn Sie bereits Windows-Desktop-Apps mit C++ programmiert haben, werden Ihnen einige Aspekte der Programmierung von Windows Store- und Windows Phone-Apps bekannt sein, einiges aber auch nicht.

Gemeinsamkeiten

  • Sie können die STL-, CRT- (mit ein paar Ausnahmen) und jede andere C++-Bibliothek verwenden, solange der Code nicht versucht, Windows-Funktionen aufzurufen, die in der Windows-Runtime-Umgebung nicht zur Verfügung stehen.

  • Wenn Sie es gewohnt sind, visuelle Designer zu verwenden, können Sie immer noch den in Microsoft Visual Studio integrierten Designer verwenden, oder Sie können das Tool Blend für Microsoft Visual Studio 2013 nutzen, das einen umfassenderen Umfang an Features bietet. Wenn Sie es gewohnt sind, UI manuell zu codieren, können Sie Ihr XAML manuell programmieren.

  • Sie erstellen wie gehabt Apps, die Windows-Betriebssystemtypen und Ihre eigenen benutzerdefinierten Typen verwenden.

  • Sie verwenden weiterhin Debugger, Profiler und andere Entwicklungstools von Visual Studio.

  • Sie erstellen weiterhin Apps, die mit dem Visual C++-Compiler in systemeigenem Computercode kompiliert werden. Windows Store-Apps in C++ können in einer verwalteten Laufzeitumgebung nicht ausgeführt werden.

Unterschiede

  • Die Designprinzipien für Windows Store- und universelle Windows-Apps unterscheiden sich erheblich von denen für Desktop-Apps. Der Schwerpunkt liegt nicht mehr auf Fensterrahmen, Bezeichnungen, Dialogfeldern usw. Der Inhalt steht im Vordergrund. Eindrucksvolle universelle Windows-Apps folgen diesen Prinzipien schon mit Beginn der Planungsphase.

  • Die gesamte UI wird in XAML definiert. Die Trennung zwischen UI und Kernprogrammlogik ist bei universellen Windows-Apps viel eindeutiger als bei einer MFC- oder Win32-App. Designer können in der XAML-Datei am Erscheinungsbild der UI feilen, während Sie sich mit dem Verhalten in der Codedatei beschäftigen.

  • Sie programmieren in erster Linie für die Windows-Runtime – eine neue, navigationsfreundliche, objektorientierte API. Auf Windows-Geräten ist für einige Funktionen aber auch weiterhin Win32 verfügbar.

  • Sie verwenden C++/CX zum Verwenden oder Erstellen von Windows-Runtime-Objekten. C++/CX ermöglicht die Behandlung von C++-Ausnahmen, die Verwendung von Delegaten und Ereignissen sowie die automatische Verweiszählung dynamisch erstellter Objekte. Bei Verwendung von C++/CX bleibt die zugrunde liegende COM- und Windows-Architektur vor dem Code der App verborgen. Weitere Informationen finden Sie in der Programmiersprachenreferenz für C++/CX.

  • Ihre App wird in ein Paket kompiliert, das auch Metadaten zu den in der App enthaltenen Typen, den verwendeten Ressourcen und den benötigten Funktionen (Datei-, Internet- und Kamerazugriff usw.) enthält.

  • Im Windows Store und dem Windows Phone Store wird die Sicherheit Ihrer App anhand eines Zertifizierungsprozesses geprüft, und die App kann von Millionen potenzieller Kunden entdeckt werden.

Store-App „Hello, world“ in C++

Unsere erste App ist „Hello, world“. Sie veranschaulicht einige grundlegende Interaktivitätsfunktionen, Layouts und Stile. Wir erstellen sowohl eine Windows Store 8.1- als auch eine Windows Phone 8.1-App aus einer Universal-App-Lösung, die ein Projekt für jede Version und ein drittes Projekt für den von ihnen freigegebenen Code enthält.

Wir beginnen mit den Grundlagen:

  • Erstellen einer Projektmappe für universelle Apps in Visual Studio Express 2013 für Windows mit Update 2 oder höher

  • Kennenlernen der erstellten Projekte und Dateien

  • Kennenlernen der Erweiterungen in Visual C++-Komponentenerweiterungen (C++/CX) und ihrer Verwendungsmöglichkeiten

Dn263168.wedge(de-de,WIN.10).gifErstellen einer Lösung in Visual Studio

  1. Klicken Sie in Visual Studio auf der Menüleiste auf Datei > Neu > Projekt.

  2. Erweitern Sie im Dialogfeld Neues Projekt im Bereich links Installiert > Visual C++ > Store-Apps > Universal-Apps.

  3. Wählen Sie im mittleren Bereich Leere App (Universelle Apps) aus.

  4. Geben Sie einen Namen für das Projekt ein. Wir nennen unser Projekt "HelloWorld".

    C++-Projektvorlagen im Dialogfeld „Neues Projekt“
  5. Klicken Sie auf die Schaltfläche OK. Ihre Projektdateien werden erstellt.

Werfen wir einen Blick darauf, was sich in der Lösung befindet, bevor wir fortfahren. Beachten Sie zunächst, dass ein Windows 8.1-, ein Windows Phone 8.1- und ein freigegebenes Projekt bereitstehen. Das freigegebene Projekt generiert keine binäre Ausgabe. Es enthält Code, der von den beiden anderen Projekten verwendet wird. Jedes plattformspezifische Projekt enthält Code, der sich speziell auf seine UI bezieht.

Universal-App-Lösung mit reduzierten Knoten

Erweitern Sie nun diese Knoten, wählen Sie den Windows 8.1-Projektknoten aus, und klicken Sie auf das Symbol Alle Dateien anzeigen. Wiederholen Sie dies für das Windows Phone 8.1-Projekt. Das Projekt sollte – je nach verwendetem Projektnamen – in etwa wie folgt angezeigt werden:

Universal-App-Lösung mit beschriebenen Knoten

Informationen zu Projektdateien

Jede „.xaml“-Datei in einem Projektordner verfügt über eine zugehörige „.xaml.h“- und eine „.xaml.cpp“-Datei im selben Ordner und eine „.g“- und eine „.g.hpp“-Datei im Ordner „Generated Files“. Sie können die XAML-Dateien modifizieren, um UI-Elemente zu erstellen und sie mit Datenquellen zu verbinden (DataBinding). Sie können die „.h“- und „.cpp“-Dateien modifizieren, um benutzerdefinierte Logik für Ereignishandler hinzuzufügen. Die automatisch erstellten Dateien stellen die Umwandlung von XAML-Markup in C++ dar. Verändern Sie diese Dateien nicht, sehen Sie sich die Dateien jedoch genauer an, um den CodeBehind besser zu verstehen. Im Grunde genommen enthält die generierte Datei eine partielle Klassendefinition für ein XAML-Stammelement. Diese Klasse ist die gleiche Klasse, die Sie in den „.xaml.h“- und „.cpp“-Dateien modifizieren. Die generierten Dateien deklarieren die untergeordneten XAML-UI-Elemente als Klassenmember, sodass Sie sie in Ihrem Code referenzieren können. Beim Erstellen des Builds werden der generierte Code und Ihr Code zu einer vollständigen Klassendefinition zusammengeführt und anschließend kompiliert.

Befassen wir uns zuerst mit den Projektdateien.

  • App.xaml, App.xaml.h, App.xaml.cpp: Stellen das Application-Objekt dar, wobei es sich um den Einstiegspunkt einer App handelt. App.xaml enthält kein seitenspezifisches UI-Markup, Sie können jedoch UI-Formate und andere Elemente hinzufügen, auf die Zugriff auf allen Seiten bestehen soll. Die CodeBehind-Dateien enthalten Handler für die OnLaunched- und OnSuspending-Ereignisse. In der Regel können Sie hier benutzerdefinierten Code hinzufügen, um Ihre App zu initialisieren, wenn sie gestartet wird, und eine Bereinigung durchzuführen, wenn sie gestoppt oder beendet wird.
  • MainPage.xaml, MainPage.xaml.h, MainPage.xaml.cpp: Enthalten das XAML-Markup und den CodeBehind für die standardmäßige Startseite in einer App. Sie bietet keine Unterstützung für Navigation oder integrierte Steuerelemente.
  • pch.h, pch.cpp: Eine vorkompilierte Headerdatei und die Datei, die sie in Ihr Projekt einfügt. In „pch.h“ können Sie alle Header einfügen, die sich nur selten ändern und sich in anderen Dateien in der Lösung befinden.
  • package.appxmanifest: Eine XML-Datei, die die von Ihrer App benötigten Gerätefunktionen und die App-Versionsinformationen und andere Metadaten beschreibt. Doppelklicken Sie auf die Datei, um sie im Manifest-Designer zu öffnen.
  • HelloWorld.Windows_TemporaryKey.pfx: Ein Schlüssel von Visual Studio, der die Bereitstellung der App auf diesem Gerät ermöglicht.

Ein erster Blick auf den Code

Wenn Sie sich den Code in "App.xaml.h", "App.xaml.cpp" im freigegebenen Projekt und "MainPage.xaml.h" sowie "MainPage.xaml.cpp" in den einzelnen plattformspezifischen Projekten ansehen, werden Sie feststellen, dass es sich vornehmlich um bekannten ISO C++-Code handelt. Einige der Syntaxelemente könnten jedoch neu sein. Die häufigsten nicht standardmäßigen Syntaxelemente, die in C++/CX auftauchen, sind die folgenden:

  • Referenzklassen

    Beinahe alle Windows-Runtime-Klassen, zu denen alle Typen in der Windows-API zählen – XAML-Steuerelemente, die Seiten in Ihrer App, die App-Klasse selbst, alle Geräte- und Netzwerkobjekte, alle Containertypen –, werden als ref class deklariert. (Ein paar Windows-Typen sind value class oder value struct.) Eine Referenzklasse kann von beliebigen Sprachen verwendet werden. In C++ wird der Lebenszyklus dieser Typen von der automatischen Verweiszählung (nicht Garbage Collection) bestimmt, sodass Sie diese Objekte niemals explizit löschen. Sie können auch Ihre eigenen Referenzklassen erstellen.

    
    
    namespace HelloWorld
        public ref class MainPage sealed
        {
          public:
              MainPage();
            ...
        };
    }
    
    

    Alle Windows-Runtime-Typen müssen innerhalb eines Namespace deklariert sein, und anders als bei ISO C++ haben die Typen selbst einen Zugriffsmodifikator. Der public-Modifikator macht die Klasse für Windows-Runtime-Komponenten außerhalb des Namespace sichtbar. Das sealed-Schlüsselwort bedeutet, dass die Klasse nicht als Basisklasse dienen kann. Beinahe alle Referenzklassen sind versiegelt. Klassenvererbung wird nicht umfassend unterstützt, da JavaScript sie nicht versteht.

  • ref new und ^ (hats)

    Sie können eine Variable einer Referenzklasse deklarieren, indem Sie den Operator ^ (Hütchen) verwenden, und Sie instanziieren das Objekt mit dem neuen Referenzschlüsselwort. Danach greifen Sie auf die Instanzmethoden des Objekts mit dem Operator -> zu, wie bei einem C++-Zeiger. Auf statische Methoden kann mit dem Operator :: zugegriffen werden, genau wie in ISO C++.

    Im folgenden Code verwenden wir den vollständig qualifizierten Namen, um ein Objekt zu instanziieren, und verwenden den Operator -> zum Aufrufen einer Instanzmethode.

    
    
    Windows::UI::Xaml::Media::Imaging::BitmapImage^ bitmapImage =
        ref new Windows::UI::Xaml::Media::Imaging::BitmapImage();
      
    bitmapImage->SetSource(fileStream);
    
    
    

    In einer CPP-Datei würden wir in der Regel eine using namespace Windows::UI::Xaml::Media::Imaging-Direktive und das automatische Schlüsselwort hinzufügen, sodass derselbe Code wie folgt aussieht:

    
    
    auto bitmapImage = ref new BitmapImage();
    bitmapImage->SetSource(fileStream);
    
    
    
  • Eigenschaften

    Eine Referenzklasse kann Eigenschaften haben, die, ebenso wie bei verwalteten Sprachen, spezielle Memberfunktionen darstellen, die für verwendenden Code als Felder erscheinen.

    
    public ref class SaveStateEventArgs sealed
    		{
    		public:
    
    			// Declare the property
    			property Windows::Foundation::Collections::IMap<Platform::String^, Platform::Object^>^ PageState
    			{
    				Windows::Foundation::Collections::IMap<Platform::String^, Platform::Object^>^ get();
    			}
    ...
    };
    
    ...
    // consume the property like a public field
    void PhotoPage::SaveState(Object^ sender, Common::SaveStateEventArgs^ e)
    {    
        if (mruToken != nullptr && !mruToken->IsEmpty())
        {
            e->PageState->Insert("mruToken", mruToken);
        }
    }
    
    
    
  • Delegaten

    Ebenso wie bei verwalteten Sprachen stellt ein Delegat einen Referenztyp dar, der eine Funktion mit einer bestimmten Signatur umschließt. Sie kommen meistens mit Ereignissen und Ereignishandlern zum Einsatz.

    
    // Delegate declaration (within namespace scope)
    public delegate void LoadStateEventHandler(Platform::Object^ sender, LoadStateEventArgs^ e);
    
    // Event declaration (class scope)
    public ref class NavigationHelper sealed
    {
      public:
        event LoadStateEventHandler^ LoadState;
    };
    
    // Create the event handler in consuming class
    MainPage::MainPage()
    {
        auto navigationHelper = ref new Common::NavigationHelper(this);
        navigationHelper->LoadState += ref new Common::LoadStateEventHandler(this, &MainPage::LoadState);
    }
    
    
    
    

WINAPI_FAMILY-Makro

In einer universellen Windows-App werden einige Codedateien von Phone- und Windows-Projekten gemeinsam genutzt. In diesen Dateien sehen Sie manchmal den Einsatz einer bedingten Kompilierungsdirektive oder müssen eine solche verwenden, um Code auszuschließen, der nur auf der einen oder der anderen Plattform zur Verfügung steht. So ist in „app.xaml.cpp“ die RootFrame_FirstNavigated-Methode nur für Phone-Projekte relevant:

In app.xaml.cpp:


#if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP
/// <summary>
/// Restores the content transitions after the app is started.
/// </summary>
void App::RootFrame_FirstNavigated(Object^ sender, NavigationEventArgs^ e)
{
    ...
}
#endif


Hinzufügen von Inhalt zur App

Lassen Sie uns der App einige Inhalte hinzufügen. Wir arbeiten dabei sowohl im Windows 8.1- als auch im Windows Phone 8.1-Projekt und verfügen am Ende über zwei laufende Apps.

Dn263168.wedge(de-de,WIN.10).gifSchritt 1: Anpassen der Startseite

  1. Öffnen Sie im Projektmappen-Explorer im Windows 8.1-Projekt MainPage.xaml.
  2. Erstellen Sie Steuerelemente für die UI, indem Sie den folgenden XAML-Code zum Stamm-Grid direkt vor dem schließenden Tag hinzufügen. Er enthält ein StackPanel mit einem TextBlock, in dem der Benutzer zur Eingabe seines Namens aufgefordert wird, ein TextBox-Element, in das der Name eingegeben wird, sowie einen Button und ein weiteres TextBlock-Element.
    
    
    <StackPanel  Margin="120,30,0,0">
        <TextBlock HorizontalAlignment="Left" Text="Hello World" FontSize="36"/>
        <TextBlock Text="What's your name?"/>
        <StackPanel Orientation="Horizontal" Margin="0,20,0,20">
            <TextBox x:Name="nameInput" Width="300" HorizontalAlignment="Left"/>
            <Button Content="Say &quot;Hello&quot;"/>
        </StackPanel>
        <TextBlock x:Name="greetingOutput"/>
    </StackPanel>
    
    
    

    Auf das XAML-Layout gehen wir im Artikel Navigation, Layout und Ansichten noch genauer ein.

  3. Sie haben nun eine sehr einfache Windows Store-App erstellt. (Als Nächstes arbeiten wir an der Windows Phone-App. Die Konzepte sind sich sehr ähnlich.) Sie können sich ansehen, wie die Windows Store-App aussieht, indem Sie das Windows 8.1-Projekt mit der rechten Maustaste anklicken, Als Startprojekt festlegen auswählen und anschließend F5 drücken, um einen Build zu erstellen, die App bereitzustellen und sie im Debugmodus auszuführen.

    Zunächst erscheint der standardmäßige Begrüßungsbildschirm. Er setzt sich aus einem Bild (Assets\SplashScreen.scale-100.png) und einer Hintergrundfarbe zusammen, die in der Manifestdatei der App angegeben sind. Weitere Informationen zur Anpassung des Begrüßungsbildschirms finden Sie unter Hinzufügen eines Begrüßungsbildschirms.

    Wenn der Begrüßungsbildschirm verschwindet, wird Ihre App angezeigt. Sie zeigt einen schwarzen Bildschirm und den Titel "My Application" an.

    Es gibt keine Schaltfläche und keinen Befehl zum Schließen der App. Sie können die App zwar mithilfe der Geste zum Schließen oder mit Alt+F4 schließen, Windows Store-Apps werden in der Regel jedoch nicht geschlossen. (Dies wird in Teil 2: Verwalten von App-Lebenszyklus und -Zustand weiter erläutert.) Drücken Sie die Windows-Taste, um zur Startseite zu wechseln. Beachten Sie, dass durch die Bereitstellung der App die App-Kachel auf der Startseite hinzugefügt wird. Wenn Sie die App erneut ausführen möchten, tippen oder klicken Sie einfach auf die Kachel, oder drücken Sie in Visual Studio F5, um die App im Debugmodus auszuführen.

    Windows Store-App-Bildschirm mit Steuerelementen

    Viel zu bieten hat sie zwar noch nicht, aber trotzdem: Herzlichen Glückwunsch! Sie haben Ihre erste Windows Store-App erstellt!

    Kehren Sie zu Visual Studio zurück, und drücken Sie Umschalt+F5, um den Debugmodus zu beenden und die App zu schließen.

    Weitere Informationen finden Sie unter Ausführen von Windows Store-Apps über Visual Studio.

    In der App können Sie etwas in die TextBox eingeben, das Anklicken von Button hat jedoch keinerlei Auswirkung. In späteren Schritten erstellen wir daher einen Ereignishandler für das Click-Ereignis der Schaltfläche, um eine personalisierte Begrüßung einzublenden. Fügen Sie den Ereignishandlercode den Dateien MainPage.xaml.h und MainPage.xaml.cpp hinzu.

  4. Öffnen Sie nun im Windows Phone 8.1-Projekt MainPage.xaml und fügen Sie den gleichen XAML-Code hinzu, den Sie zuvor zur Windows Store-App hinzugefügt haben.
  5. Da die Anzeige des Telefons kleiner ist, nehmen wir zwei Änderungen am XAML-Code vor: Als Erstes reduzieren wir den linken Rand des StackPanel auf „20“. Anschließend ändern wir die Ausrichtung des inneren StackPanel zu vertikal, sodass die Schaltfläche unter dem Textfeld erscheint. Der gesamte XAML-Code sieht nun so aus:

    
    <StackPanel  Margin="20,30,0,0">
        <TextBlock HorizontalAlignment="Left" Text="Hello World" FontSize="36"/>
        <TextBlock Text="What's your name?"/>
        <StackPanel Orientation="Vertical" Margin="0,20,0,20">
            <TextBox x:Name="nameInput" Width="300" HorizontalAlignment="Left"/>
            <Button Content="Say &quot;Hello&quot;"/>
        </StackPanel>
        <TextBlock x:Name="greetingOutput"/>
    </StackPanel>
    
    
  6. Klicken Sie das Windows Phone 8.1-Projekt mit der rechten Maustaste an, wählen Sie Als Startprojekt festlegen aus, und drücken Sie anschließend F5, um die App im Windows Phone Emulator auszuführen. Sie sollten nun Folgendes sehen:

    Windows Phone Store-App-Bildschirm mit Steuerelementen

Schritt 2: Erstellen eines Ereignishandlers

  1. (Führen Sie diese Schritte im Windows-Projekt und im Windows Phone-Projekt durch.) Wählen Sie in MainPage.xaml entweder in der XAML- oder in der Designansicht die Schaltfläche "Say Hello" Button aus, die Sie zuvor in StackPanel hinzugefügt haben.
  2. Öffnen Sie das Eigenschaftenfenster, indem Sie Alt+Eingabe drücken, und wählen Sie anschließend die Ereignisschaltfläche aus (Ereignisschaltfläche).
  3. Suchen Sie das Click-Ereignis. Geben Sie im Textfeld den Namen der Funktion ein, die das Click-Ereignis behandelt. Geben Sie für dieses Beispiel die Zeichenfolge "Button_Click" ein.

    Eigenschaftenfenster, Ereignisansicht

  4. Drücken Sie die EINGABETASTE. Die Ereignishandlermethode wird in MainPage.xaml.cpp erstellt und geöffnet, sodass Sie den Code hinzufügen können, der beim Auftreten des Ereignisses ausgeführt werden soll.

    Gleichzeitig wird in MainPage.xaml die XAML für das Button-Steuerelement aktualisiert, um den Click-Ereignishandler wie folgt zu deklarieren:

    
    <Button Content="Say &quot;Hello&quot;" Click="Button_Click"/>
    
    
  5. Fügen Sie in MainPage.xaml.cpp dem Button_Click-Ereignishandler, den Sie eben erstellt haben, den folgenden Code hinzu. Dieser Code ruft den Namen des Benutzers aus dem nameInput-TextBox-Steuerelement ab und erstellt damit eine Begrüßung. Der greetingOutput-TextBlock zeigt das Ergebnis an.
    
    void HelloWorld::MainPage::Button_Clicked(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)
    {
        greetingOutput->Text = "Hello, " + nameInput->Text + "!";
    }
    
    
  6. Legen Sie das Projekt als Startprojekt fest, und drücken Sie anschließend F5, um die App zu erstellen und auszuführen. Wenn Sie einen Namen in das Textfeld eingeben und anschließend auf die Schaltfläche klicken, zeigt die App eine personalisierte Begrüßung an.

    App-Bildschirm mit angezeigter Meldung

Schritt 3: Gestalten der Startseite

Auswählen eines Designs

Das Erscheinungsbild Ihrer App lässt sich ganz einfach anpassen. Standardmäßig verwendet die App Ressourcen mit dunklem Design. Die Systemressourcen enthalten auch ein helles Design. Probieren wir doch einmal aus, wie das aussieht.

Dn263168.wedge(de-de,WIN.10).gifSo wechseln Sie zum hellen Design

  1. Öffnen Sie im freigegebenen Projekt App.xaml.
  2. Fügen Sie im öffnenden Application-Tag die RequestedTheme-Eigenschaft hinzu, und legen Sie ihren Wert auf Light fest:
    
    RequestedTheme="Light"
    
    

    Hier sehen Sie das gesamte Application-Tag mit hellem Design:

    
    <Application
        x:Class="HelloWorld.App"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:HelloWorld" 
        RequestedTheme="Light">
    
    
  3. Legen Sie eines der Plattformprojekte als Startprojekt fest, und drücken Sie F5, um es zu erstellen und auszuführen. Beachten Sie, dass es nun das helle Design verwendet. Richten Sie nun das andere Plattformprojekt als Startprojekt ein, und drücken Sie F5. Beachten Sie, dass es ebenfalls das helle Design verwendet. Das liegt daran, dass App.xaml von beiden Projekten gemeinsam genutzt wird.

    App-Bildschirm mit hellem Design

Welches Design sollten Sie verwenden? Das bleibt ganz Ihnen überlassen. Hier unsere Empfehlung: Bei Apps, die hauptsächlich Bilder oder Videos anzeigen, sollten Sie das dunkle Design verwenden, während sich bei Apps mit viel Text die Verwendung des hellen Designs empfiehlt. Falls Sie ein benutzerdefiniertes Farbschema verwenden, verwenden Sie das Design, das am besten zum Erscheinungsbild Ihrer App passt.

Hinweis  Das Design wird bei Aktivierung der App angewendet und kann nicht geändert werden, während die App ausgeführt wird.

Verwenden von Systemstilen

Momentan ist der Text in der Windows-App ziemlich klein und nur schwer lesbar. Lassen Sie uns dies ändern, indem wir einen Systemstil anwenden.

Dn263168.wedge(de-de,WIN.10).gifSo ändern Sie den Stil eines Elements

  1. Öffnen Sie im Windows-Projekt MainPage.xaml.
  2. Wählen Sie in der XAML- oder Designansicht das von Ihnen zuvor hinzugefügte TextBlock-Steuerelement "What’s your name?" aus.
  3. Wählen Sie im Fenster Eigenschaften (F4) oben rechts die Schaltfläche "Eigenschaften" (Schaltfläche "Eigenschaften").
  4. Erweitern Sie die Gruppe Text, und legen Sie für den Schriftgrad 18 px fest.
  5. Erweitern Sie die Gruppe Sonstiges, und suchen Sie dort nach der Eigenschaft Style.
  6. Klicken Sie auf den Eigenschaftenmarker (das grüne Feld rechts neben der Eigenschaft Style), und wählen Sie anschließend im Menü Systemressource > BaseTextBlockStyle.

    BaseTextBlockStyle ist eine Ressource, die im ResourceDictionary in <root>\Program Files\Windows Kits\8.1\Include\winrt\xaml\design\generic.xaml definiert ist.

    Eigenschaftenfenster, Eigenschaftenansicht

    Auf der XAML-Entwurfsoberfläche ändert sich die Textdarstellung. Im XAML-Editor wird das XAML für den TextBlock aktualisiert.

    
    <TextBlock Text="What's your name?" Style="{StaticResource BasicTextStyle}"/>
    
    
  7. Wiederholen Sie den Vorgang, um den Schriftgrad festzulegen und BaseTextBlockStyle dem greetingOutputTextBlock-Element zuzuweisen.
    Tipp  Obwohl sich in diesem TextBlock kein Text befindet, zeigt eine blaue Umrandung seine Position an, wenn Sie den Mauszeiger über die XAML-Entwurfsoberfläche bewegen, sodass Sie ihn auswählen können.

    Ihr XAML sieht nun so aus:

    
    <StackPanel Margin="120,30,0,0">
        <TextBlock Style="{ThemeResource BaseTextBlockStyle}" FontSize="16" Text="What's your name?"/>
        <StackPanel Orientation="Horizontal" Margin="0,20,0,20">
            <TextBox x:Name="nameInput" Width="300" HorizontalAlignment="Left"/>
            <Button Content="Say &quot;Hello&quot;" Click="Button_Click"/>
        </StackPanel>
        <TextBlock Style="{ThemeResource BaseTextBlockStyle}" FontSize="16" x:Name="greetingOutput"/>
    </StackPanel>
    
    
  8. Drücken Sie F5, um die App zu erstellen und auszuführen. Sie sieht jetzt so aus:

    App-Bildschirm mit größerem Text

  9. Sie können diese Schritte für das Windows Phone-Projekt wiederholen.

Zusammenfassung

Herzlichen Glückwunsch! Sie haben das erste Lernprogramm abgeschlossen! Darin haben Sie gelernt, wie Sie Inhalte zu Universal-Windows-Apps hinzufügen, wie Sie sie interaktiv machen und wie Sie ihr Erscheinungsbild ändern.

Siehe Code

Kommen Sie nicht voran, oder möchten Sie Ihre Arbeit überprüfen? Falls ja, informieren Sie sich anhand des Beispiels Hello, World (C++) in der Codegalerie.

Nächste Schritte

Im nächsten Lernprogramm dieser Reihe – Verwalten von App-Lebenszyklus und -Zustand – erfahren Sie, wie der App-Lebenszyklus funktioniert und wie Sie den Zustand Ihrer App speichern.

 

 

Anzeigen:
© 2015 Microsoft