uwp Tutoriel
Démarrer avec uwp

Remarques

Installation ou configuration

Instructions détaillées sur la configuration ou l’installation de UWP.

Exigences

1. Windows 10
2. Visual Studio 2015

Pas

• Téléchargez et installez Visual Studio 2015 de manière personnalisée, tout en vous assurant que Universal Windows App Development Tools sont sélectionnés avec leurs sous-options: -
  a) Outils et Windows SDK
  b) Emulateur pour Windows Phone

• Assurez-vous d' activer le mode développeur sur le développement et le déploiement du périphérique.

• Sélectionnez le modèle en fonction de la langue que vous souhaitez utiliser:
  C # , Visual Basic , C ++ ou JavaScript .

• Ensuite, créez une application vierge (Universal Windows).

• Sélectionnez la version cible et minimale de Windows 10 adaptée à votre application.

  Cliquez ici si vous ne savez pas quelles versions choisir ou laissez simplement les options à leurs valeurs par défaut et cliquez sur "OK" pour commencer!

Des instantanés

Installation    

Creating a new project

Selecting Target and minimum version for your Application

Création de votre première application UWP

Cet exemple montre comment développer une application UWP simple.

Lors de la création d'un projet "Blank App (Universal Windows)", de nombreux fichiers essentiels sont créés dans votre solution.

Tous les fichiers de votre projet peuvent être vus dans l' Explorateur de solutions .

Certains des fichiers essentiels de votre projet sont:

• App.xaml et App.xaml.cs - App.xaml est utilisé pour déclarer les ressources disponibles dans l’application et App.xaml.cs est le code backend correspondant. App.xaml.cs est le point d'entrée par défaut de l'application
• MainPage.xaml - Il s'agit de la page par défaut de l'interface utilisateur de démarrage de votre application (vous pouvez également modifier la page de démarrage de votre application dans App.xaml.cs)
• Package.appxmanifest - Ce fichier contient des informations importantes sur votre application, telles que le nom d'affichage, le point d'entrée, les éléments visuels, la liste des fonctionnalités, les informations sur l'emballage, etc.

Commencer

• Ajouter un bouton à votre page

  Pour ajouter un élément ou un outil de l'interface utilisateur à votre page, faites simplement glisser l'élément de la fenêtre de la boîte à outils sur la gauche et déposez-le. Recherchez un outil "bouton" dans la boîte à outils et déposez-le dans la page de votre application.

• Personnalisation de l'interface utilisateur

  Toutes les propriétés d'un outil particulier sont affichées dans la fenêtre des propriétés du côté inférieur droit.

  Ici, nous allons changer le texte à l'intérieur du bouton pour "Speak it!". Pour ce faire, appuyez d'abord sur le bouton pour le sélectionner, puis faites défiler la fenêtre des propriétés pour trouver le contenu et changez le texte en votre chaîne souhaitée ("Speak it!").

  Nous allons également changer la couleur de fond de la page. Chaque page a un élément parent (généralement une grille) qui contient tous les autres éléments. Nous allons donc changer la couleur de la grille parente. Pour ce faire, appuyez sur la grille et changez le style Pinceau> Arrière-plan de la fenêtre des propriétés en fonction de la couleur souhaitée.

L'interface utilisateur ressemblera à ceci après que vous l'ayez personnalisé.

• Code derrière

  Maintenant, faisons quelque chose en cliquant sur notre bouton!

  Cliquer sur un bouton déclenche un événement et nous devons gérer l'événement pour faire quelque chose d'utile lorsque le bouton est cliqué.

  Ajout du gestionnaire d'événement

  Pour ajouter un gestionnaire d'événements de clic à votre bouton, sélectionnez le bouton dans la fenêtre des propriétés et sélectionnez l' icône représentant un éclair . Cette fenêtre comprend tous les événements disponibles pour l'élément que nous avons sélectionné (le bouton dans notre cas). Ensuite, double-cliquez sur la zone de texte à côté de l'événement "Clic" pour générer automatiquement le gestionnaire de l'événement de clic sur le bouton.

Après cela, vous serez redirigé vers la page ac # (MainPage.xaml.cs). Ajoutez le code suivant à votre méthode de gestionnaire d'événements:

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

Ensuite, ajoutez le mot-clé async à votre gestionnaire d'événements.

Après avoir ajouté le code ci-dessus, votre classe devrait ressembler à ceci:

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

    }
}

• Lancez votre application!

  Votre application est prête à être lancée. Vous pouvez lancer votre application en appuyant sur F5 ou Sélectionner votre appareil sur lequel vous souhaitez déployer et déboguer votre application et cliquer sur le bouton Démarrer.

Après avoir été construit, votre application sera déployée sur votre appareil. Selon la résolution de votre appareil et la taille de l'écran, l'application configure automatiquement sa mise en page. (Vous pouvez redimensionner la fenêtre pour voir comment cela fonctionne)

• Aller plus loin

  Maintenant que vous avez fait votre première application, allons plus loin!

  Ajouter une zone de texte à votre page et en cliquant sur le bouton, l'application s'exprimera tout ce qui est écrit dans la zone de texte.

  Commencez par faire glisser un contrôle TextBox de la boîte à outils vers votre mise en page. Ensuite, donnez un nom à votre TextBox dans le menu des propriétés. (pourquoi faut-il spécifier un nom? pour pouvoir utiliser facilement ce contrôle)

  Visual Studio par défaut donne un nom à votre contrôle, mais c'est une bonne habitude de nommer les contrôles en fonction de ce qu'ils font ou de quelque chose de pertinent.

  Je nomme mon textbox - " 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();

    }

Maintenant déployez votre code !!

Votre application est maintenant capable de communiquer toute chaîne valide que vous lui fournissez !!

Toutes nos félicitations ! Vous avez construit avec succès votre propre application UWP !!