uwp Tutorial
Erste Schritte mit uwp

Bemerkungen

Installation oder Setup

Detaillierte Anweisungen zum Einrichten oder Installieren von UWP.

Bedarf

1. Windows 10
2. Visual Studio 2015

Schritte

• Laden Sie Visual Studio 2015 herunter und passen Sie es an, und stellen Sie sicher, dass die Universal Windows App Development Tools zusammen mit den zugehörigen Unteroptionen ausgewählt sind: -
  a) Tools und Windows SDK
  b) Emulator für Windows Phone

• Stellen Sie sicher, dass der Entwicklermodus bei der Entwicklung und Bereitstellung des Geräts aktiviert ist.

• Wählen Sie die Vorlage basierend auf der Sprache aus, die Sie verwenden möchten:
  C # , Visual Basic , C ++ oder JavaScript .

• Als nächstes erstellen Sie eine leere App (Universal Windows).

• Wählen Sie die für Ihre Anwendung geeignete Ziel- und Mindestversion von Windows 10 aus.

  Klicken Sie hier, wenn Sie nicht sicher sind, welche Version Sie wählen sollen, oder belassen Sie die Optionen einfach bei ihren Standardwerten und klicken Sie auf 'OK', um zu beginnen!

Schnappschüsse

Installation    

Creating a new project

Selecting Target and minimum version for your Application

Erstellen Sie Ihre erste UWP-Anwendung

Dieses Beispiel zeigt, wie eine einfache UWP-Anwendung entwickelt wird.

Bei der Erstellung eines Projekts "Blank App (Universal Windows)" werden viele wichtige Dateien in Ihrer Projektmappe erstellt.

Alle Dateien in Ihrem Projekt können im Projektmappen- Explorer angezeigt werden .

Einige der wichtigsten Dateien in Ihrem Projekt sind:

• App.xaml und App.xaml.cs - App.xaml wird zum Deklarieren von Ressourcen verwendet, die in der gesamten Anwendung verfügbar sind. App.xaml.cs ist der Backend-Code dafür. App.xaml.cs ist der Standardeinstiegspunkt der Anwendung
• MainPage.xaml - Dies ist die Standardstart-UI-Seite für Ihre Anwendung (Sie können auch die Anwendungsstartseite in App.xaml.cs ändern.)
• Package.appxmanifest - Diese Datei enthält wichtige Informationen zu Ihrer Anwendung wie Anzeigename, Einstiegspunkt, visuelle Elemente, Liste der Funktionen, Verpackungsinformationen usw.

Fertig machen

• Eine Schaltfläche zu Ihrer Seite hinzufügen

  Um ein UI-Element oder ein Tool zu Ihrer Seite hinzuzufügen, ziehen Sie das Element einfach aus dem Toolbox-Fenster auf der linken Seite. Suchen Sie in der Toolbox nach einem "Button" -Tool und legen Sie es auf Ihrer App-Seite ab.

• Anpassen der Benutzeroberfläche

  Alle Eigenschaften für ein bestimmtes Werkzeug werden im Eigenschaftsfenster unten rechts angezeigt.

  Hier ändern wir den Text innerhalb der Schaltfläche in "Speak it!". Um dies zu tun, tippen Sie zuerst auf die Schaltfläche, um sie auszuwählen. Blättern Sie dann durch das Eigenschaftenfenster, um den Inhalt zu suchen, und ändern Sie den Text in die gewünschte Zeichenfolge ("Speak it!").

  Wir werden auch die Hintergrundfarbe für die Seite ändern. Jede Seite hat ein übergeordnetes Element (normalerweise ein Gitter), das alle anderen Elemente enthält. So ändern wir die Farbe des übergeordneten Rasters. Tippen Sie dazu auf das Raster und ändern Sie im Eigenschaftenfenster den Pinsel> Hintergrund in die gewünschte Farbe.

Die Benutzeroberfläche wird ungefähr so ​​aussehen, nachdem Sie sie angepasst haben.

• Code hinter

  Jetzt können wir etwas tun, wenn Sie unseren Button anklicken!

  Wenn Sie auf eine Schaltfläche klicken, wird ein Ereignis ausgelöst, und wir müssen das Ereignis bearbeiten, um beim Klicken auf die Schaltfläche etwas Nützliches zu tun.

  Eventhandler hinzufügen

  Um Ihrer Schaltfläche einen Click-Ereignishandler hinzuzufügen, wählen Sie die Schaltfläche. Wechseln Sie zum Eigenschaftenfenster und wählen Sie das Blitzsymbol . Dieses Fenster enthält alle Ereignisse, die für das ausgewählte Element (in unserem Fall die Schaltfläche) verfügbar sind. Doppelklicken Sie anschließend auf das Textfeld neben dem Ereignis "Click" , um den Handler für das Schaltflächenklickereignis automatisch zu generieren.

Danach werden Sie zur ac # -Seite (MainPage.xaml.cs) weitergeleitet. Fügen Sie der Ereignishandlermethode den folgenden Code hinzu:

 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();

Fügen Sie Ihrem Event-Handler anschließend ein asynchrones Schlüsselwort hinzu.

Nachdem Sie den Code oben hinzugefügt haben, sollte Ihre Klasse ungefähr so ​​aussehen:

public sealed partial class MainPage : Page
{
    string speakIt = "Hello, World!";
    public MainPage()
    {
        this.InitializeComponent();
    }

    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(speakIt);
        mediaElement.SetSource(stream, stream.ContentType);
        mediaElement.Play();

    }
}

• Starten Sie Ihre App!

  Ihre Anwendung kann jetzt gestartet werden. Sie können Ihre Anwendung starten, indem Sie die Taste F5 drücken oder Ihr Gerät auswählen, auf dem Sie Ihre Anwendung bereitstellen und debuggen möchten, und auf die Schaltfläche Start klicken.

Nach dem Erstellen wird Ihre Anwendung auf Ihrem Gerät bereitgestellt. Je nach Auflösung und Bildschirmgröße Ihres Geräts konfiguriert die Anwendung automatisch das Layout. (Sie können die Größe des Fensters ändern, um zu sehen, wie es nahtlos funktioniert.)

• Weitergehen

  Nun, da Sie Ihre erste Bewerbung gemacht haben, gehen wir noch einen Schritt weiter!

  Fügen Sie Ihrer Seite ein Textfeld hinzu. Wenn Sie auf die Schaltfläche klicken, spricht die App das an, was im Textfeld geschrieben ist.

  Ziehen Sie zunächst ein TextBox-Steuerelement aus der Toolbox in Ihr Layout. Als nächstes geben Sie Ihrem TextBox einen Namen aus dem Eigenschaftenmenü. (Warum müssen wir einen Namen angeben? damit wir dieses Steuerelement problemlos verwenden können.)

  Visual Studio gibt Ihrem Steuerelement standardmäßig einen Namen. Es ist jedoch eine gute Angewohnheit, Steuerelemente entsprechend ihrer Funktionsweise oder entsprechendem Inhalt zu benennen.

  Ich benenne mein Textfeld - " speakText ".

    private async void button_Click(object sender, RoutedEventArgs e)
    {
        //checking if the text provided in the textbox is null or whitespace
        if (!string.IsNullOrWhiteSpace(speakText.Text))
            speakIt = speakText.Text;
        else
            speakIt = "Please enter a valid string!";

        MediaElement mediaElement = new MediaElement();
        var synth = new Windows.Media.SpeechSynthesis.SpeechSynthesizer();
        Windows.Media.SpeechSynthesis.SpeechSynthesisStream stream = await synth.SynthesizeTextToStreamAsync(speakIt);
        mediaElement.SetSource(stream, stream.ContentType);
        mediaElement.Play();

    }

Stellen Sie jetzt Ihren Code bereit !!

Ihre Anwendung kann jetzt jede gültige Zeichenfolge aussprechen, die Sie ihr zur Verfügung stellen !!

Herzliche Glückwünsche ! Sie haben erfolgreich eine eigene UWP-Anwendung erstellt !!