Windows

Appliquer le style et la ressource thématique aux contrôles: Didacticiel de développement des applications Windows Phone - Partie 20

Advisory Council Meeting, 9 September 2014, Madrid

Advisory Council Meeting, 9 September 2014, Madrid
Anonim

Dans le dernier tutoriel, nous avons appris à appliquer des styles et des ressources à nos contrôles. Maintenant, dans cette partie de notre série de tutoriels , nous continuerons à travailler avec les styles et les ressources et apprendrons comment appliquer les ressources de couleur de notre choix.

Commençons avec le même projet que nous avons créé dans le dernier tutoriel avec un bouton. Sélectionnez ce bouton et dirigez-vous vers la fenêtre de propriétés. Lorsque vous cliquez sur la petite flèche située à côté de la propriété Foreground, vous remarquerez qu`une autre petite fenêtre s`ouvre avec des carreaux de couleur et des onglets différents. Il y a quatre petits onglets sur cette petite fenêtre à savoir Null Brush, Solid Color Brush, Gradient Brush et Image Brush. Par défaut, il est réglé sur un pinceau plein avec une couleur blanche (RVB: 0,0,0 et canal de transparence alpha réglé sur 255). Vous pouvez choisir la couleur que vous voulez en déplaçant le curseur le long de la barre verticale, puis le curseur circulaire pour sélectionner la teinte exacte. Vous pouvez également choisir iDropper à l`aide duquel vous pouvez adopter la couleur de n`importe quel outil disponible. Il y a beaucoup de façons de modifier la couleur de ce pinceau de couleur unie.

Il en va de même avec Gradient Brush. Il effectue une tâche similaire à celle de la brosse de couleur unie mais ne propose que peu d`options supplémentaires. Il vous donne une série d`arrêts. Vous pouvez utiliser ces arrêts de manière créative pour obtenir différentes nuances parmi la couleur choisie. Vous pouvez également modifier la texture de la couleur en utilisant des options telles que le dégradé horizontal et le dégradé vertical. Le pinceau d`image vous permet de choisir une image comme ressource. Vous pouvez ajouter une image comme nous avons ajouté une image dans le contrôle de l`image

Pour l`instant, utilisez un pinceau de dégradé de couleur en utilisant un arrêt comme je l`ai fait (Voir image). Maintenant, si vous voyez la fenêtre XAML, vous verrez que du code est ajouté à la fenêtre XAML pour le bouton

Supposons maintenant, si nous voulons ajouter la même couleur de dégradé que celle ajoutée à tous les autres contrôles de notre page, Comment faisons-nous ça? Pour cela aller à la propriété de premier plan où nous définissons le pinceau de couleur dégradé funky et faites un clic droit dessus et sélectionnez "Extraire la valeur de la ressource". Il va ouvrir une petite fenêtre popup "Créer une ressource". Vous pouvez nommer la ressource comme vous voulez ou vous pouvez la laisser telle quelle. Ensuite, vous pouvez choisir où vous voulez l`enregistrer, en fonction de l`endroit où vous voulez utiliser cette ressource. Si vous voulez l`utiliser sur une seule page, sélectionnez MainPage.xaml sinon choisissez App.xaml et cliquez sur Ok.

Faites maintenant glisser un autre bouton sur la surface du concepteur et accédez à la propriété de premier plan. Vous trouverez maintenant notre ressource personnalisée sous le nom de ressources locales. Une fois que vous cliquez dessus, vous verrez le deuxième bouton portant la même couleur que le premier. Et s`il y a plusieurs propriétés que nous voulons appliquer à notre contrôle? Nous pouvons le faire en utilisant des styles. Un style est une collection de setters de propriété. Laissez-nous créer un nouveau style maintenant. Supprimez d`abord toutes les modifications que nous avons faites dans le dernier exemple et obtenez un nouveau bouton pour un nouveau départ. Collez le code suivant sous les déclarations xmlsns







Dans ce code, nous avons créé deux propriétés de setter pour modifier la couleur de la bordure et du premier plan. Après cela, allez au code du bouton et ajoutez ce morceau de code:

Style = "{StaticResource myStyle}".

Vous remarquerez que la couleur de la bordure et la couleur du premier plan deviennent rouges

Maintenant, si vous voulez pour appliquer ce style à l`ensemble de votre application, coupez le code entre les. Ouvrez le fichier App.xaml et collez-le entre les balises de ressource d`application. Maintenant, si vous revenez en arrière et vérifiez le bouton, vous verrez que le bouton affiche toujours la couleur rouge.

Il s`agit donc de Styles et de ressources dans Windows Phone 7.5. Dans le prochain chapitre, nous apprendrons à naviguer entre les pages xaml.