Démarrer avec uwp

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 sont visibles dans l’Explorateur de solutions.

Certains des fichiers cruciaux 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 principal correspondant. App.xaml.cs est le point d’entrée par défaut de l’application
  • MainPage.xaml - Il s’agit de la page d’interface utilisateur de démarrage par défaut 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 d’interface utilisateur à votre page, faites simplement glisser et déposez l’élément depuis la fenêtre de la boîte à outils sur la gauche. 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 en bas à droite.

Ici, nous allons changer le texte à l’intérieur du bouton en “Parlez-le !”. 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 Contenu et remplacez le texte par la chaîne souhaitée (“Parlez-le !”).

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 . Ainsi, nous allons changer la couleur de la grille parent. Pour ce faire, appuyez sur la grille et modifiez le ** Pinceau> Arrière-plan ** de la fenêtre des propriétés à la couleur souhaitée.

L’interface utilisateur ressemblera à ceci après l’avoir personnalisée.

[![entrez la description de l’image ici][1]][1]

  • Code derrière

    Now lets do something on click of our button!

    Clicking on a button triggers an event and we need to handle the event to do something useful when the button is clicked.

    Adding event handler

Pour ajouter un gestionnaire d’événements de clic à votre bouton , sélectionnez le bouton aller à la fenêtre des propriétés et sélectionnez l’ icône représentant un éclair . Cette fenêtre se compose de 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 “Click” pour générer automatiquement le gestionnaire de l’événement de clic sur le bouton.

[![entrez la description de l’image ici][2]][2]

Après cela, vous serez redirigé vers une page c# (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 !

    Your application is ready to be launched. You can launch your application by pressing F5 or Select your device on which you want to deploy and debug your application and click on start button.

[![entrez la description de l’image ici][3]][3]

Une fois construite, votre application sera déployée sur votre appareil. En fonction de la résolution de votre appareil et de la taille de l’écran, l’application configurera automatiquement sa disposition. (Vous pouvez redimensionner la fenêtre pour voir à quel point cela fonctionne de manière transparente) [![entrez la description de l’image ici][4]][4]

  • Aller plus loin

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

Ajoutez une zone de texte à votre page et en cliquant sur le bouton, l’application prononcera tout ce qui est écrit dans la zone de texte.

Commencez par faire glisser et déposer 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 avons-nous besoin de spécifier un nom ? pour que nous puissions facilement utiliser ce contrôle)

Par défaut, Visual Studio 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 ma zone de texte - “* 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 d’énoncer n’importe quelle chaîne valide que vous lui fournissez !! [![stackoverflow est génial !][5]][5]

Félicitations ! Vous avez construit avec succès votre propre application UWP !!

[1] : https://i.stack.imgur.com/ERdyx.jpg [2] : https://i.stack.imgur.com/q7ySF.jpg [3] : https://i.stack.imgur.com/lrzTl.jpg [4] : https://i.stack.imgur.com/Y0FDo.jpg [5] : https://i.stack.imgur.com/cpveX.jpg

Instantanés 

Installation

[![Option UWP vérifiée][1]][1]

Creating a new project

[![Emplacement du modèle d’application vide][2]][2]

Selecting Target and minimum version for your Application

[![Sélecteur de version minimale et cible][3]][3]

[1] : http://i.stack.imgur.com/2e8lE.png [2] : http://i.stack.imgur.com/YXbdH.png [3] : https://i.stack.imgur.com/BgDPL.png

Installation ou configuration

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

Exigences

  1. Windows 10
  2. Visual Studio 2015

Étapes

  • Téléchargez et personnalisez l’installation de Visual Studio 2015, tout en vous assurant que Universal Windows App Development Tools est sélectionné avec ses sous-options :-
    a) Tools and Windows SDK
    b) Emulator for Windows Phone - Assurez-vous d’[Activer le mode développeur][1] sur l’appareil de développement et de déploiement.
  • Sélectionnez le modèle en fonction de la langue que vous souhaitez utiliser :
    C#, Visual Basic, C++ or JavaScript.
  • Créez ensuite une application vierge (Universal Windows).
  • Sélectionnez la version cible et minimale de Windows 10 adaptée à votre application.

Cliquez [ici][2] si vous n’êtes pas sûr des versions à choisir ou laissez simplement les options à leurs valeurs par défaut et cliquez sur “OK” pour commencer !

[1] : https://msdn.microsoft.com/en-us/windows/uwp/get-started/enable-your-device-for-development [2] : http://[4] :%20https://msdn.microsoft.com/windows/uwp/updates-and-versions/choose-a-uwp-version

Familles d'appareils →