Développez votre première application Windows Phone 10

crytex

مراقب سابق
إنضم
5 أوت 2009
المشاركات
16.932
مستوى التفاعل
25.371
fKPQ5.png


أهلا و سهلا بكافّة الإخوة الأعضاء والزوار في منتديات تونيزيا سات

Grâce à ce tutoriel on va voir ensemble comment développer une application mobile pour la plateforme Windows phone 10

Ce tutoriel est divisé en plusieurs parties, dans chacune d'eux on va s’intéresser à une tache particulière


On doit d'abord préparer notre environnement de travail, on installe Visual Studio 2015

Microsoft Visual Studio 2015 Professional

Par la suite on va activer Microsoft Hyper-V virtualization technology pour pouvoir lancer l'émulateur windows phone

Windows Phone system requirements

Et on va aussi activer le mode développeur dans windows 10 et c'est l'OS que j'ai utilisé pour créer ce tutoriel


 
التعديل الأخير:
fKPQ5.png


Dans l'explorateur Windows on sélectionne désinstaller ou modifier un programme

21.png


A gauche on choisit activer ou désactiver des fonctionnalité Windows

22.png


Dans cette fenêtre on doit cocher la case Hyper-V
Windows va demander un redémarrage système pour installer les nouvelles fonctionnalités

23.png


Après le redémarrage on lance le Gestionnaire Hyper-V qui vient d’être installé

24.png


Dans cette fenêtre tout les émulateur Windows phone créés seront affichés
Vous pouvez cliquer sur paramètres pour avoir plus d'informations sur l'émulateur choisit


25.png


Maintenant on va activer le mode développeur sous Windows 10

Sous windows 10 accédez aux paramètres puis mise à jour et sécurité puis activer le mode développeur


702343


On arrive à la fin de la première étape
 
fKPQ5.png


Pendant cette partie on va commencer à programmer notre application

Comme premier test j'ai créer un formulaire qui contient 2 champs Nom d'utilisateur et mot de passe
et un bouton pour vérifier si les données saisies sont correctes ou pas en affichant la fenêtre de dialog de Windows Phone


On commence par créer un nouveau projet Windows 10

1.png


On choisit Windows Phone puis Blank app (application vide) puis on donne un nom à notre projet

2.png


Visual Studio va lancer le projet, j'ai commenté les parties les plus importantes de cet IDE pour développer les applications Windows Phone

3.png


Pour créer l'interface graphique il faut ouvrir le fichier loginPage.xaml et tapez le code suivant
XML:
<Page
    x:Class="myApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:myApp"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <StackPanel Grid.Row="0" Margin="12,17,0,28">
            <!--Titre-->
            <TextBlock Text="Tunisia-Sat" Foreground="Black" FontSize="40" TextAlignment="Center"/>

            <!--champs 1-->
            <TextBlock Text="Nom d'utilisateur" Foreground="Black" FontSize="20"/>
            <TextBox  BorderBrush="LightGray" Name="UserName"/>

            <!--champs 2-->
            <TextBlock  Foreground="Black" Text="Mot de passe" Margin="9,-7,0,0" FontSize="20"/>
            <PasswordBox BorderBrush="LightGray" Name="PassWord"/>

            <!--bouton login-->
            <Button Content="Se connecter" Background="blue" Name="Login" Click="Login_Click" Width="378" />

        </StackPanel>

    </Grid>
</Page>

L'interface créée sera affichée dans l’émulateur à gauche de l'écran

4.png


On lance la classe LoginPage.xaml.cs pour écrire le code c# liée à cette page

5.png
كود:
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Popups;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=391641

namespace myApp
{
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();

            this.NavigationCacheMode = NavigationCacheMode.Required;
        }

            public async void Login_Click(object sender, RoutedEventArgs e)

        {

            if ((UserName.Text == "tunisia-sat") && (PassWord.Password== "tunisia-sat")){

                MessageDialog msgbox = new MessageDialog("login correcte");
                await msgbox.ShowAsync();
            }
            else
            {

                MessageDialog msgbox = new MessageDialog("login incorrecte");
                await msgbox.ShowAsync();
            }

        }
    }
}


6.png


On ouvre maintenant appxmanifest pour définir le logo de l'application ainsi que la page de démarrage: splash screen

7.png


Dans l'anglet Application on définit le nom de l'application, la langue ainsi que la description

8.png


Dans l'anglet Visual Assets on définit le logo de l'application avec les différentes dimensions

9.png


On fait la même chose pour Store Logo

10.png
 
fKPQ5.png


On continue avec le splash screen qui est l'image qui sera affichée dès l'ouverture de l'application

On ajoute les images avec les résolutions données en bas

11.png


Toutes les images ajoutées sont dans le dossier Assets

En haut on choisit l'émulateur avec lequel on veut lancer l'application développée
Si vous voulez tester sur votre smartphone vous devez choisir Device



13.png


On lance l'application Deploy solution

14.png


L'émulateur sera lancé, Le système que j'utilise est Windows Phone 10

20.png


L'application sera installée


15.png


On appui sur l'application, le splash screen sera affiché

16.png


Voici la page qu'on vient de créer

17.png


Le message affiché si on remplit les champs correctement

18.png


Le message affiché si on remplit les champs incorrectement

19.png


J’espère que j'ai bien expliqué les étapes pour développer votre première application Windows Phone, vous trouvez l'application qu'on vient de créer aux pièces jointes

;)


 

المرفقات

  • tunisia-sat_WindowsPhone10.rar
    166,3 KB · المشاهدات: 23
شرح رائع أخي أحسنت واصل ;)


702369


 
!! un excellent tuto boss
:emot134:
 
أعلى