Après avoir appris comment créer et déployer une application dans la version Silverlight des outils CTP, dans le cadre de cette série de didacticiels Windows Phone, nous passons à Expression Blend. Expression Blend est un système de création permettant aux concepteurs professionnels de créer des expériences utilisateur ciblant la plate-forme.NET 3.0 +, et plus particulièrement WPF ou Windows Presentation Foundation.
En général, les contrôles Silverlight ont une logique distincte de leur apparence visuelle à l'aide de modèles. UNE ControlTemplate spécifie la structure visuelle et le comportement visuel d'un contrôle. Vous pouvez personnaliser l’apparence de la plupart des contrôles en modifiant leurs valeurs par défaut. ControlTemplate réglages. Cela vous permet de modifier l'apparence du contrôle sans modifier ses fonctionnalités. Par exemple, vous pouvez arrondir les boutons de votre application plutôt que la forme carrée par défaut, mais le bouton augmentera le Cliquez sur un événement.
Dans ce didacticiel, vous ouvrez le projet Visual Studio que vous avez créé lors de l’exercice précédent dans Expression Blend et remplacez le ControlTemplate du bouton pour modifier son apparence. Parce que vous créez un ControlTemplate en XAML, vous pouvez modifier l’apparence d’un contrôle sans écrire de code.
2. Si vous avez suivi les étapes de l'exercice précédent, vous pouvez continuer avec la solution que vous avez créée pour cet exercice..
3. Ouvrez la solution actuelle dans Expression Blend. Pour ce faire à partir de Visual Studio, cliquez avec le bouton droit de la souris sur MainPage.xaml dans l'Explorateur de solutions, puis sélectionnez Ouvrir dans Expression Blend. Si cette option est indisponible-La raison la plus probable est que votre version actuelle d'Expression Blend ne prend pas en charge le type de projet nécessaire - suivez les étapes suivantes pour créer un projet temporaire que vous pouvez modifier à l'aide d'Expression Blend.
4. Ouvrez Microsoft Expression Blend.
5. Créez un nouveau projet d'application pour conserver temporairement vos actifs de conception. Pour ce faire, ouvrez le Fichier menu puis choisissez Nouveau projet
6. Dans le Nouveau projet dialogue, sélectionnez le Silverlight type de projet, puis choisissez le Application Silverlight 3 modèle. Définissez le nom sur DesignHelloPhone, choisissez un emplacement approprié et conservez la langue Visual C #, puis cliquez sur D'accord.
7. Dans Visual Studio, double-cliquez sur App.xaml dans Explorateur de solution pour ouvrir ce fichier dans l'éditeur. Maintenant, ouvrez la vue XAML, puis sélectionnez et copiez l’ensemble du Ressources.application section dans le presse-papier
8. Ouvrez à nouveau Expression Blend, développez le DesignHelloPhone projet dans le Projets panneau, et double-cliquez App.xaml ouvrir le fichier
9. Pointez sur Vue active du document dans le Vue menu et sélectionnez XAML Voir.
10. Trouver le Ressources.application section de ce fichier - elle devrait être vide - puis collez le contenu du presse-papiers pour le remplacer.
11. Maintenant, localisez la section dans le texte nouvellement inséré et délimité par le commentaire “ ***** MODÈLES DE LISTBOX / LISTBOXITEM ***** ; il contient des styles non compatibles avec un projet Silverlight 3. Supprimez la section entière entre les délimiteurs de début et de fin.
12.Maintenant localiser le Application élément en haut du fichier et insérez une nouvelle déclaration d’espace de nom pour référencer le Système espace de noms dans le Mscorlib assemblage, comme indiqué ci-dessous.
xmlns:system='clr-namespace:System;assembly=mscorlib' > # FF1F1F1F Noir ?> var13 ->
13. Maintenant, enregistrez les modifications App.xaml dans Expression Blend.
14. Ensuite, ouvrez à nouveau Visual Studio et ouvrez le MainPage.xaml fichier en vue XAML. Ensuite, sélectionnez et copiez le la grille élément nommé LayoutRoot y compris ses enfants au presse-papiers.
15. Retour à Expression Blend, ouvrez le MainPage.xaml fichier en vue XAML, puis collez le contenu du presse-papiers pour remplacer le contenu vide. LayoutRootla grille élément dans ce fichier.
16. Dans le MainPage.xaml fichier, localisez la racine UserControl élément et changer les valeurs du la taille attribuer à 800 et le Largeur attribuer à 480.
17. Retournez dans Visual Studio, cliquez avec le bouton droit de la souris. MainPage.xaml.cs dans Explorateur de solution et sélectionnez Voir le code. Ensuite, copiez le ClickMeButton_Click gestionnaire d'événements dans le presse-papiers.
18. Enfin, retournez à Expression Blend, développez le MainPage.xaml noeud dans le Projets panneau, double-cliquez sur le MainPage.xaml.cs pour ouvrir le fichier dans l'éditeur et coller le code dans le presse-papier dans le Page d'accueil classe.
Maintenant, nous avons réussi à reproduire notre projet en mélange d’expression. Pour créer un design pour le bouton personnalisé, veuillez lire le prochain tutoriel qui sera publié demain.
