Erstellen einer „Hello, World“-Create a "Hello, World!" App (XAML)app (XAML)

In diesem Tutorial erfährst du, wie du XAML und C# zum Erstellen einer einfachen App vom Typ „Hello, world“ für die universelle Windows-Plattform (UWP) unter Windows 10 verwendest.This tutorial teaches you how to use XAML and C# to create a simple "Hello, world" app for the Universal Windows Platform (UWP) on Windows 10. Mit nur einem Projekt in Microsoft Visual Studio kannst du eine App erstellen, die auf allen Geräten mit Windows 10 ausgeführt werden kann.With a single project in Microsoft Visual Studio, you can build an app that runs on any Windows 10 device.

Hier erfahren Sie Folgendes:Here you'll learn how to:

  • Erstellen eines neuen Visual Studio-Projekts für Windows 10 und die UWPCreate a new Visual Studio project that targets Windows 10 and the UWP.
  • Schreiben Sie XAML zum Ändern der UI auf der Startseite.Write XAML to change the UI on your start page.
  • Ausführen des Projekts auf dem lokalen Desktop in Visual StudioRun the project on the local desktop in Visual Studio.
  • Verwenden Sie einen SpeechSynthesizer, um die App sprechen zu lassen, wenn Sie auf eine Schaltfläche klicken.Use a SpeechSynthesizer to make the app talk when you press a button.

VorbereitungBefore you start...

Hinweis

In diesem Tutorial wird Visual Studio Community 2017 verwendet.This tutorial is using Visual Studio Community 2017. Wenn du eine andere Version von Visual Studio verwendest, sieht die Oberfläche unter Umständen etwas anders aus.If you are using a different version of Visual Studio, it may look a little different for you.

VideozusammenfassungVideo summary

Schritt 1: Erstellen eines neuen Projekts in Visual StudioStep 1: Create a new project in Visual Studio.

  1. Starten Sie Visual Studio.Launch Visual Studio.

  2. Wähle im Menü Datei die Optionen Neu > Projekt aus, um das Dialogfeld Neues Projekt zu öffnen.From the File menu, select New > Project to open the New Project dialog.

  3. Wähle in der Liste der Vorlagen auf der linken Seite Installiert > Visual C# > Windows Universal aus, um eine Liste der UWP-Projektvorlagen anzuzeigen.From the list of templates on the left, choose Installed > Visual C# > Windows Universal to see the list of UWP project templates.

    (Werden keine universellen Vorlagen angezeigt, fehlen möglicherweise die Komponenten zum Erstellen von UWP-Apps.(If you don't see any Universal templates, you might be missing the components for creating UWP apps. Du kannst die Installation wiederholen und UWP-Unterstützung hinzufügen, indem du im Dialogfeld Neues Projekt auf Visual Studio-Installer öffnen klickst.You can repeat the installation process and add UWP support by clicking Open Visual Studio installer on the New Project dialog. Siehe Vorbereiten)See Get set up.)

    So wiederholst du den Installationsvorgang

  4. Wählen Sie die Vorlage Leere App (universelle Windows-App) aus, und geben Sie „HelloWorld“ als Name ein.Choose the Blank App (Universal Windows) template, and enter "HelloWorld" as the Name. Wählen Sie OK aus.Select OK.

    Das Fenster für ein neues Projekt

Hinweis

Wenn du Visual Studio zum ersten Mal verwendest, wird möglicherweise das Dialogfeld „Einstellungen“ angezeigt, in dem du zur Aktivierung von Entwicklermodus aufgefordert wirst.If this is the first time you have used Visual Studio, you might see a Settings dialog asking you to enable Developer mode. Der Entwicklermodus ist eine spezielle Einstellung, die bestimmte Features unterstützt, z. B. die direkte Ausführung von Apps und nicht nur die Ausführung aus dem Store.Developer mode is a special setting that enables certain features, such as permission to run apps directly, rather than only from the Store. Weitere Informationen findest du unter Aktivieren deines Geräts für die Entwicklung.For more information, please read Enable your device for development. Wähle Entwicklermodus aus, klicke auf Ja, und schließe das Dialogfeld, um mit dem Tutorial fortzufahren.To continue with this guide, select Developer mode, click Yes, and close the dialog.

Dialogfeld zum Aktivieren des Entwicklermodus

  1. Das Dialogfeld für die Zielversion/mindestens erforderliche Version wird angezeigt.The target version/minimum version dialog appears. Da die Standardeinstellungen für dieses Tutorial geeignet sind, wähle OK aus, um das Projekt zu erstellen.The default settings are fine for this tutorial, so select OK to create the project.

    Das Fenster „Projektmappen-Explorer“

  2. Wenn das neue Projekt geöffnet wird, werden die Dateien im Bereich Projektmappen-Explorer auf der rechten Seite angezeigt.When your new project opens, its files are displayed in the Solution Explorer pane on the right. Möglicherweise müssen Sie die Registerkarte Projektmappen-Explorer anstelle der Registerkarte Eigenschaften auswählen, um die Dateien anzuzeigen.You may need to choose the Solution Explorer tab instead of the Properties tab to see your files.

    Das Fenster „Projektmappen-Explorer“

Leere App (universelle Windows-App) ist zwar nur eine Minimalvorlage, umfasst aber trotzdem eine Reihe von Dateien.Although the Blank App (Universal Window) is a minimal template, it still contains a lot of files. Diese Dateien werden für alle UWP-Apps mit C# benötigt.These files are essential to all UWP apps using C#. Sie sind Teil jedes Projekts, das Sie mit Visual Studio erstellen.Every project that you create in Visual Studio contains them.

Inhalt der DateienWhat's in the files?

Doppelklicken Sie zum Anzeigen und Bearbeiten einer Datei im Projekt im Projektmappen-Explorer auf die gewünschte Datei.To view and edit a file in your project, double-click the file in the Solution Explorer. Erweitern Sie eine XAML-Datei genau wie einen Ordner, um die zugeordnete Codedatei anzuzeigen.Expand a XAML file just like a folder to see its associated code file. XAML-Dateien werden in einer geteilten Ansicht geöffnet, die sowohl die Entwurfsoberfläche als auch den XAML-Editor enthält.XAML files open in a split view that shows both the design surface and the XAML editor.

Hinweis

Was ist XAML?What is XAML? Extensible Application Markup Language (XAML) ist die Sprache, die zum Definieren der Benutzeroberfläche Ihrer App verwendet wird.Extensible Application Markup Language (XAML) is the language used to define your app's user interface. Sie kann manuell eingegeben oder mit den Visual Studio-Entwicklungstools erstellt wurden.It can be entered manually, or created using the Visual Studio design tools. Eine XAML-Datei verfügt über eine CodeBehind-Datei („.xaml.cs“), die die Logik enthält.A .xaml file has a .xaml.cs code-behind file which contains the logic. Zusammen bilden XAML und CodeBehind eine vollständige Klasse.Together, the XAML and code-behind make a complete class. Weitere Informationen finden Sie in der XAML-Übersicht.For more information, see XAML overview.

„App.xaml“ und „App.xaml.cs“App.xaml and App.xaml.cs

  • In „App.xaml“ deklarieren Sie Ressourcen, die in der gesamten App zur Anwendung kommen.App.xaml is where you declare resources that are used across the app.
  • „App.xaml.cs“ ist die CodeBehind-Datei für „App.xaml“.App.xaml.cs is the code-behind file for App.xaml. Sie enthält wie alle CodeBehind-Seiten einen Konstruktor, der die InitializeComponent-Methode aufruft.Like all code-behind pages, it contains a constructor that calls the InitializeComponent method. Die InitializeComponent-Methode wird nicht von Ihnen geschrieben.You don't write the InitializeComponent method. Sie wird von Visual Studio generiert und dient in erster Linie dazu, die in der XAML-Datei deklarierten Elemente zu initialisieren.It's generated by Visual Studio, and its main purpose is to initialize the elements declared in the XAML file.
  • „App.xaml.cs“ ist der Einstiegspunkt für Ihre App.App.xaml.cs is the entry point for your app.
  • „App.xaml.cs“ enthält außerdem Methoden zum Behandeln der Aktivierung und Unterbrechung der App.App.xaml.cs also contains methods to handle activation and suspension of the app.

MainPage.xamlMainPage.xaml

  • In „MainPage.xaml“ definieren Sie die Benutzeroberfläche für Ihre App.MainPage.xaml is where you define the UI for your app. Sie können Elemente direkt per XAML-Markup hinzufügen oder die Designtools von Visual Studio verwenden.You can add elements directly using XAML markup, or you can use the design tools provided by Visual Studio.
  • „MainPage.xaml.cs“ ist die CodeBehind-Seite für „MainPage.xaml“.MainPage.xaml.cs is the code-behind page for MainPage.xaml. Hier fügen Sie Ihre App-Logik und Ereignishandler hinzu.It's where you add your app logic and event handlers.
  • Zusammen definieren diese beiden Dateien im HelloWorld-Namespace eine neue Klasse mit dem Namen MainPage, die von Page erbt.Together these two files define a new class called MainPage, which inherits from Page, in the HelloWorld namespace.

Package.appxmanifestPackage.appxmanifest

  • Eine Manifestdatei, die Ihre App beschreibt (Name, Beschreibung, Kachel, Startseite usw.)A manifest file that describes your app: its name, description, tile, start page, etc.
  • Sie enthält eine Liste mit in deiner App enthaltenen Abhängigkeiten, Ressourcen und Dateien.Includes a list of dependencies, resources and files that your app contains.

Ein Satz mit LogobildernA set of logo images

  • Mit „Assets/Square150x150Logo.scale-200.png“ und „Wide310x150Logo.scale-200.png“ wird deine App (in mittlerer Größe oder breit) im Startmenü dargestellt.Assets/Square150x150Logo.scale-200.png and Wide310x150Logo.scale-200.png represent your app (either Medium or Wide size) in the start menu.
  • Mit „Assets/Square44x44Logo.png“ wird deine App in der App-Liste des Startmenüs, auf der Taskleiste und im Task-Manager dargestellt.Assets/Square44x44Logo.png represents your app in the app list of the start menu, task bar and task manager.
  • „Assets/StoreLogo.png“ stellt deine App im Microsoft Store dar.Assets/StoreLogo.png represents your app in the Microsoft Store.
  • „Assets/SplashScreen.scale-200.png“ ist der Begrüßungsbildschirm, der beim Start der App angezeigt wird.Assets/SplashScreen.scale-200.png is the splash screen that appears when your app starts.
  • „Assets/LockScreenLogo.scale-200.png“ kann zum Darstellen der App auf dem Sperrbildschirm verwendet werden, wenn das System gesperrt ist.Assets/LockScreenLogo.scale-200.png can be used to represent the app on the lock screen, when the system is locked.

Schritt 2: Hinzufügen einer SchaltflächeStep 2: Adding a button

Mithilfe der EntwurfsansichtUsing the designer view

Fügen wir nun der Seite eine Schaltfläche hinzu.Let's add a button to our page. In diesem Tutorial verwendest du lediglich einige der zuvor aufgeführten Dateien: „App.xaml“, „MainPage.xaml“ und „MainPage.xaml.cs“.In this tutorial, you work with just a few of the files listed previously: App.xaml, MainPage.xaml, and MainPage.xaml.cs.

  1. Doppelklicken Sie auf die Datei MainPage.xaml, um sie in der Entwurfsansicht zu öffnen.Double-click on MainPage.xaml to open it in the Design view.

    Sie werden feststellen, dass eine grafische Ansicht im oberen Teil des Bildschirms und die XAML-Codeansicht darunter vorhanden ist.You'll notice there is a graphical view on the top part of the screen, and the XAML code view underneath. Sie können jeweils Änderungen vornehmen, wir verwenden jetzt jedoch die grafische Ansicht.You can make changes to either, but for now we'll use the graphical view.

    Das Fenster „Projektmappen-Explorer“

  2. Klicken Sie auf die vertikale Registerkarte Toolbox auf der linken Seite, um die Liste der UI-Steuerelemente zu öffnen.Click on the vertical Toolbox tab on the left to open the list of UI controls. (Sie können auf das Reißzweckensymbol in der Titelleiste klicken, damit sie sichtbar bleibt.)(You can click the pin icon in its title bar to keep it visible.)

    Das Fenster „Projektmappen-Explorer“

  3. Erweitern Sie Häufig verwendete XAML-Steuerelemente, und ziehen Sie die Schaltfläche in die Mitte der Design-Canvas.Expand Common XAML Controls, and drag the Button out to the middle of the design canvas.

    Das Fenster „Projektmappen-Explorer“

    Wenn Sie das Fenster mit dem XAML-Code betrachten, sehen Sie, dass die Schaltfläche auch dort hinzugefügt wurde:If you look at the XAML code window, you'll see that the Button has been added there too:

<Button x:Name="button" Content="Button" HorizontalAlignment="Left" Margin = "152,293,0,0" VerticalAlignment="Top"/>
  1. Ändern Sie den Text der Schaltfläche.Change the button's text.

    Klicken Sie in der XAML-Codeansicht, und ändern Sie den Inhalt von „Schaltfläche“ in „Hello, World!“.Click in the XAML code view, and change the Content from "Button" to "Hello, world!".

<Button x:Name="button" Content="Hello, world!" HorizontalAlignment="Left" Margin = "152,293,0,0" VerticalAlignment="Top"/>

Beachten Sie, wie die in der Design-Canvas angezeigte Schaltfläche aktualisiert wird, um den neuen Text anzuzeigen.Notice how the button displayed in the design canvas updates to display the new text.

Das Fenster „Projektmappen-Explorer“

Schritt 3: Starten der AppStep 3: Start the app

Sie haben nun eine sehr einfache App erstellt.At this point, you've created a very simple app. Dies ist ein guter Zeitpunkt zum Erstellen, Bereitstellen und Starten Ihrer App, um sie in Aktion zu sehen.This is a good time to build, deploy, and launch your app and see what it looks like. Sie können Ihre App auf dem lokalen Computer, in einem Simulator oder Emulator oder auf einem Remotegerät debuggen.You can debug your app on the local machine, in a simulator or emulator, or on a remote device. Dies ist das Zielgerätmenü in Visual Studio.Here's the target device menu in Visual Studio.

Dropdownliste mit Zielgeräten zum Debuggen Ihrer App

Starten der App auf einem Desktop-GerätStart the app on a Desktop device

Standardmäßig wird die App auf dem lokalen Computer ausgeführt.By default, the app runs on the local machine. Das Menü mit den Zielgeräten enthält mehrere Optionen zum Debuggen Ihrer App auf Geräten der Desktopfamilie.The target device menu provides several options for debugging your app on devices from the desktop device family.

  • SimulatorSimulator
  • Lokaler ComputerLocal Machine
  • RemotecomputerRemote Machine

So beginnst du mit dem Debuggen auf dem lokalen ComputerTo start debugging on the local machine

  1. Stellen Sie sicher, dass auf der Standardsymbolleiste im Menü mit den Zielgeräten (Menü „Debuggen starten“) die Option Lokaler Computer ausgewählt ist.In the target device menu (Start debugging menu) on the Standard toolbar, make sure that Local Machine is selected. (Dies ist die Standardeinstellung.)(It's the default selection.)
  2. Klicken Sie auf der Symbolleiste auf die Schaltfläche Debuggen starten (Schaltfläche „Debuggen starten“).Click the Start Debugging button (Start debugging button) on the toolbar.

– oder ––or–

Klicken Sie im Menü Debuggen auf Debuggen starten.From the Debug menu, click Start Debugging.

– oder ––or–

Drücken Sie F5.Press F5.

Die App wird in einem Fenster geöffnet. Zuerst wird ein standardmäßiger Begrüßungsbildschirm angezeigt.The app opens in a window, and a default splash screen appears first. Der Begrüßungsbildschirm setzt sich aus einem Bild (SplashScreen.png) und einer Hintergrundfarbe (in der Manifestdatei der App angegeben) zusammen.The splash screen is defined by an image (SplashScreen.png) and a background color (specified in your app's manifest file).

Nach dem Ausblenden des Begrüßungsbildschirms wird Ihre App angezeigt.The splash screen disappears, and then your app appears. Das sieht ungefähr wie folgt aus.It looks like this.

Erster App-Bildschirm

Drücken Sie die WINDOWS-TASTE, um das Menü Start zu öffnen, und zeigen Sie alle Apps an.Press the Windows key to open the Start menu, then show all apps. Beachten Sie, dass beim lokalen Bereitstellen der App dem Menü Start die dazugehörige Kachel hinzugefügt wird.Notice that deploying the app locally adds its tile to the Start menu. Wenn Sie die App später erneut ausführen möchten (nicht im Debugmodus), tippen oder klicken Sie im Menü Start auf die Kachel.To run the app again later (not in debugging mode), tap or click its tile in the Start menu.

Viel zu bieten hat die App zwar noch nicht, aber trotzdem: Herzlichen Glückwunsch! Sie haben Ihre erste UWP-App erstellt!It doesn't do much—yet—but congratulations, you've built your first UWP app!

So beendest du das DebuggenTo stop debugging

Klicken Sie auf der Symbolleiste auf die Schaltfläche Debuggen beenden (Schaltfläche „Debuggen beenden“).Click the Stop Debugging button (Stop debugging button) in the toolbar.

– oder ––or–

Klicken Sie im Menü Debuggen auf Debuggen beenden.From the Debug menu, click Stop debugging.

– oder ––or–

Schließen Sie das App-Fenster.Close the app window.

Schritt 4: EreignishandlerStep 4: Event handlers

„Ereignishandler“ klingt kompliziert, dies ist jedoch nur ein anderer Namen für den Code, der aufgerufen wird, wenn ein Ereignis auftritt (z. B. wenn der Benutzer auf die Schaltfläche klickt).An "event handler" sounds complicated, but it's just another name for the code that is called when an event happens (such as the user clicking on your button).

  1. Beenden Sie die Ausführung der App, sofern nicht bereits geschehen.Stop the app from running, if you haven't already.

  2. Doppelklicken Sie auf das Schaltflächen-Steuerelement auf die Design-Canvas, damit Visual Studio einen Ereignishandler für die Schaltfläche erstellt.Double-click on the button control on the design canvas to make Visual Studio create an event handler for your button.

Natürlich können Sie den gesamten Code auch manuell erstellen.You can of course, create all the code manually too. Oder Sie klicken zum Auswählen auf die Schaltfläche und suchen im Bereich Eigenschaften unten rechts.Or you can click on the button to select it, and look in the Properties pane on the lower right. Wenn Sie zu Ereignisse (kleiner Gewitterblitz) wechseln, können Sie den Namen des Ereignishandlers hinzufügen.If you switch to Events (the little lightning bolt) you can add the name of your event handler.

  1. Bearbeiten Sie den Ereignishandlercode in MainPage.xaml.cs, der CodeBehind-Seite.Edit the event handler code in MainPage.xaml.cs, the code-behind page. An dieser Stelle wird die Sache interessant.This is where things get interesting. Der Standard-Ereignishandler sieht wie folgt aus:The default event handler looks like this:
private void Button_Click(object sender, RoutedEventArgs e)
{

}

Wir ändern ihn, damit er wie folgt aussieht:Let's change it, so it looks like this:

private async void Button_Click(object sender, RoutedEventArgs e)
{
    MediaElement mediaElement = new MediaElement();
    var synth = new Windows.Media.SpeechSynthesis.SpeechSynthesizer();
    Windows.Media.SpeechSynthesis.SpeechSynthesisStream stream = await synth.SynthesizeTextToStreamAsync("Hello, World!");
    mediaElement.SetSource(stream, stream.ContentType);
    mediaElement.Play();
}

Gib nun unbedingt das async-Schlüsselwort in der Methodensignatur an, oder du erhältst beim Ausführen der App einen Fehler.Make sure the method signature now includes the async keyword, or you'll get an error when you try to run the app.

Was haben wir gerade gemacht?What did we just do?

Dieser Code verwendet Windows-APIs zum Erstellen eines Sprachsyntheseobjekts und gibt dann zu sprechenden Text an.This code uses some Windows APIs to create a speech synthesis object, and then gives it some text to say. (Weitere Informationen zur Verwendung von SpeechSynthesis finden Sie in den Dokumenten zum SpeechSynthesis-Namespace.)(For more information on using SpeechSynthesis, see the SpeechSynthesis namespace docs.)

Wenn Sie die App ausführen und auf die Schaltfläche klicken, sagt Ihr Computer (oder das Handy) wörtlich „Hello, World!“.When you run the app and click on the button, your computer (or phone) will literally say "Hello, World!".

ZusammenfassungSummary

Herzlichen Glückwunsch, du hast deine erste App für Windows 10 und die UWP erstellt!Congratulations, you've created your first app for Windows 10 and the UWP!

Informationen dazu, wie du XAML für die Gestaltung der Steuerelemente in deiner App verwendest, findest du im Tutorial zu Rastern. Du kannst auch direkt mit den nächsten Schritten fortfahren.To learn how to use XAML for laying out the controls your app will use, try the grid tutorial, or jump straight to next steps?

Weitere InformationenSee Also