uwp Zelfstudie
Aan de slag met uwp

Opmerkingen

Installatie of instellingen

Gedetailleerde instructies voor het installeren of installeren van UWP.

Voorwaarden

1. Windows 10
2. Visual Studio 2015

Stappen

• Download en installeer Visual Studio 2015, terwijl u ervoor zorgt dat de ontwikkelingstools van Universal Windows App Development Tools is geselecteerd, samen met de subopties: -
  a) Tools en Windows SDK
  b) Emulator voor Windows Phone

• Zorg ervoor dat u de ontwikkelaarsmodus inschakelt bij het ontwikkelen en implementeren van het apparaat.

• Selecteer de sjabloon op basis van de taal die u wilt gebruiken:
  C # , Visual Basic , C ++ of JavaScript .

• Maak vervolgens een lege app (universele Windows).

• Selecteer de doel- en minimumversie van Windows 10 die geschikt is voor uw toepassing.

  Klik hier als u niet zeker weet welke versies u moet kiezen of laat de opties gewoon op hun standaardwaarden en klik op 'OK' om te beginnen!

snapshots

Installation    

Creating a new project

Selecting Target and minimum version for your Application

Uw eerste UWP-applicatie maken

Dit voorbeeld laat zien hoe u een eenvoudige UWP-applicatie kunt ontwikkelen.

Bij het maken van een "Blank App (Universal Windows)" -project zijn er veel essentiële bestanden die in uw oplossing zijn gemaakt.

Alle bestanden in uw project zijn te zien in Solution Explorer .

Enkele van de cruciale bestanden in uw project zijn:

• App.xaml en App.xaml.cs - App.xaml wordt gebruikt om bronnen aan te geven die beschikbaar zijn in de hele applicatie en App.xaml.cs is de backendcode daarvoor. App.xaml.cs is het standaardinvoerpunt van de toepassing
• MainPage.xaml - Dit is de standaard opstart-UI-pagina voor uw toepassing (u kunt ook de opstartpagina van uw toepassing wijzigen in App.xaml.cs)
• Package.appxmanifest - Dit bestand bevat belangrijke informatie over uw toepassing, zoals weergavenaam, toegangspunt, visuele elementen, lijst met mogelijkheden, verpakkingsinformatie, enz.

Ermee beginnen

• Een knop toevoegen aan uw pagina

  Om een gebruikersinterface-element of -gereedschap aan uw pagina toe te voegen, sleept u het element eenvoudigweg vanuit het gereedschapskistvenster aan de linkerkant. Zoek naar een 'Button'-tool in de toolbox en zet deze neer op uw app-pagina.

• De gebruikersinterface aanpassen

  Alle eigenschappen voor een bepaald gereedschap worden weergegeven in het eigenschappenvenster rechtsonder.

  Hier zullen we de tekst binnen de knop veranderen in "Spreek het!". Om dit te doen, tikt u eerst op de knop om het te selecteren en bladert u vervolgens door het eigenschappenvenster om Inhoud te vinden en de tekst in de gewenste tekenreeks te wijzigen ("Spreek het!").

  We zullen ook de achtergrondkleur voor de pagina wijzigen. Elke pagina heeft een bovenliggend element (meestal een raster) dat alle andere elementen bevat. Zo zullen we de kleur van het bovenliggende raster wijzigen. Tik hiervoor op het raster en verander het penseel> Achtergrond in het eigenschappenvenster in de gewenste kleur.

De gebruikersinterface ziet er ongeveer zo uit nadat u deze hebt aangepast.

• Code achter

  Laten we nu iets doen met een klik op onze knop!

  Als u op een knop klikt, wordt een gebeurtenis geactiveerd en moeten we de gebeurtenis afhandelen om iets nuttigs te doen wanneer op de knop wordt geklikt.

  Gebeurtenishandler toevoegen

  Om een klikgebeurtenishandler aan uw knop toe te voegen, selecteert u de knop naar het eigenschappenvenster en selecteert u het bliksemschichtpictogram . Dit venster bestaat uit alle gebeurtenissen die beschikbaar zijn voor het element dat we hebben geselecteerd (in ons geval de knop). Dubbelklik vervolgens op het tekstvak naast "Click" -gebeurtenis om de handler automatisch te genereren voor de knop click-gebeurtenis.

Hierna wordt u doorgestuurd naar ac # -pagina (MainPage.xaml.cs). Voeg de volgende code toe aan uw gebeurtenishandler-methode:

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

Voeg vervolgens een async- sleutelwoord toe aan uw gebeurtenishandler.

Na het toevoegen van de bovenstaande code ziet uw klas er ongeveer zo uit:

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

    }
}

• Start uw app!

  Uw applicatie is klaar om te worden gestart. U kunt uw applicatie starten door op F5 te drukken of Selecteer uw apparaat waarop u uw applicatie wilt implementeren en debuggen en klik op de startknop.

Nadat uw app is gebouwd, wordt deze op uw apparaat geïmplementeerd. Afhankelijk van de resolutie en schermgrootte van uw apparaat zal de applicatie automatisch de lay-out configureren. (U kunt het formaat van het venster wijzigen om te zien hoe naadloos het werkt)

• Verder gaan

  Nu u uw eerste aanvraag hebt gedaan, gaan we nog een stap verder!

  Voeg een tekstvak toe aan uw pagina en klik op de knop om de app uit te spreken wat er in het tekstvak staat.

  Begin met het slepen en neerzetten van een TextBox-besturingselement vanuit de Werkset naar uw lay-out. Geef vervolgens een naam aan uw TextBox vanuit het eigenschappenmenu. (waarom moeten we een naam opgeven? zodat we dit besturingselement gemakkelijk kunnen gebruiken)

  Standaard geeft Visual Studio uw besturingselement een naam, maar het is een goede gewoonte om besturingselementen een naam te geven op basis van wat ze doen of iets relevants.

  Ik noem mijn tekstvak - " 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();

    }

Implementeer nu uw code !!

Uw applicatie kan nu elke geldige string uitspreken die u eraan geeft !!

Gefeliciteerd! U hebt met succes uw eigen UWP-applicatie gebouwd !!