Εφαρμογή ύφος και το θέμα των πόρων τους ελέγχους: Windows Phone Εφαρμογές Ανάπτυξης Tutorial - Μέρος 20

Στο τελευταίο σεμινάριο μάθαμε πώς να εφαρμόζουμε πόρους στυλ και θέμα στους ελέγχους μας. Τώρα σε αυτό το μέρος της σειρά μαθημάτων μας , θα συνεχίσουμε να εργαζόμαστε με στυλ και πόρους και θα μάθουμε πώς να εφαρμόζουμε τους πόρους χρώματος της επιλογής μας.

Ας αρχίσουμε να εργαζόμαστε με το ίδιο έργο που δημιουργήσαμε στο τελευταίο tutorial με ένα κουμπί. Επιλέξτε αυτό το κουμπί και κατευθυνθείτε προς το παράθυρο ιδιοτήτων. Όταν κάνετε κλικ στο μικρό βέλος που βρίσκεται δίπλα στην ιδιότητα Foreground θα παρατηρήσετε ότι ένα άλλο μικρό παράθυρο ανοίγει με διαφορετικά πλακάκια χρωμάτων και καρτέλες σε αυτό. Υπάρχουν τέσσερις μικρές καρτέλες σε αυτό το μικρό παράθυρο, δηλαδή το Null Brush, το Solid Brush Color, το Brush Gradient και το Brush Image. Από προεπιλογή, έχει οριστεί στερεό πινέλο με λευκό χρώμα (RGB: 0,0,0 και άλφα κανάλι διαφάνειας που έχει οριστεί σε 255). Μπορείτε να επιλέξετε το χρώμα που θέλετε μετακινώντας το ρυθμιστικό κατά μήκος της κάθετης ράβδου και μετά τον κυκλικό δρομέα για να επιλέξετε την ακριβή απόχρωση. Μπορείτε επίσης να επιλέξετε το iDropper με το οποίο μπορείτε να υιοθετήσετε το χρώμα ενός από τα διαθέσιμα εργαλεία. Υπάρχουν πολλοί τρόποι για να τροποποιήσετε το χρώμα σε αυτό το συμπαγές χρωματικό πινέλο.

Το ίδιο συμβαίνει με το Brush Gradient. Εκτελεί παρόμοια εργασία με το στερεό έγχρωμο πινέλο αλλά με λίγες πρόσθετες επιλογές. Σας δίνει μια σειρά στάσεων. Μπορείτε να χρησιμοποιήσετε αυτές τις στάσεις δημιουργικά για να έχετε διαφορετικές αποχρώσεις ανάμεσα στο επιλεγμένο χρώμα. Μπορείτε επίσης να αλλάξετε την υφή του χρώματος χρησιμοποιώντας επιλογές όπως οριζόντια κλίση και κατακόρυφη κλίση. Το πινέλο εικόνας σας επιτρέπει να επιλέξετε μια εικόνα ως πόρο μας. Μπορείτε να προσθέσετε μια εικόνα ακριβώς όπως προσθέσαμε μια εικόνα στον έλεγχο εικόνας.

Προς το παρόν, χρησιμοποιήστε το πινέλο χρωματισμού χρησιμοποιώντας ένα σταμάτημα όπως το έχω κάνει (βλέπε εικόνα). Τώρα, αν δείτε το παράθυρο XAML, θα δείτε ότι κάποιος κώδικας προστίθεται στο παράθυρο XAML για το κουμπί.

Ας υποθέσουμε τώρα ότι αν θέλουμε να προσθέσουμε το ίδιο χρώμα κλίσης που προσθέσαμε για το κουμπί μας σε όλους τους άλλους ελέγχους της σελίδας μας, Πώς να το κάνουμε? Για αυτό πηγαίνετε στην ιδιοκτησία του προσκηνίου όπου βάζουμε το funky gradient brush χρώμα και κάντε δεξί κλικ πάνω του και επιλέξτε "Extract value to resource". Θα ανοίξει ένα μικρό αναδυόμενο παράθυρο "Δημιουργία πόρων". Μπορείτε να ονομάσετε τον πόρο όπως θέλετε ή μπορείτε να φύγετε όπως είναι. Στη συνέχεια, μπορείτε να επιλέξετε το σημείο όπου θέλετε να το αποθηκεύσετε, ανάλογα με το πού θέλετε να χρησιμοποιήσετε αυτόν τον πόρο. Εάν θέλετε να το χρησιμοποιήσετε σε μία σελίδα, επιλέξτε MainPage.xaml αλλιώς επιλέξτε App.xaml και κάντε κλικ στο Ok.

Τώρα σύρετε ένα άλλο κουμπί στην επιφάνεια του σχεδιαστή και μεταβείτε στην ιδιοκτησία του προσκηνίου. Τώρα θα βρείτε τον προσαρμοσμένο μας πόρο με την επωνυμία τοπικούς πόρους. Αφού κάνετε κλικ σε αυτό, θα δείτε το δεύτερο κουμπί που φέρει το ίδιο χρώμα με το πρώτο. Τι γίνεται αν υπάρχουν πολλές ιδιότητες που θέλουμε να εφαρμόσουμε στον έλεγχό μας; Μπορούμε να το κάνουμε χρησιμοποιώντας στυλ. Ένα στυλ είναι μια συλλογή ρυθμιστών ιδιοκτησίας. Ας δημιουργήσουμε ένα νέο στυλ τώρα. Καταργήστε πρώτα όλες τις τροποποιήσεις που κάναμε στο τελευταίο παράδειγμα και λάβετε ένα νέο κουμπί για νέα εκκίνηση. Επικολλήστε τον ακόλουθο κώδικα κάτω από τις δηλώσεις xmlsns

Στον κώδικα αυτό δημιουργήσαμε δύο ιδιότητες ρύθμισης για να αλλάξουμε το χρώμα των συνόρων και του προσκηνίου. Μετά από αυτό πηγαίνετε στον κωδικό του κουμπιού και προσθέστε αυτό το κομμάτι του κώδικα:

Style = "{StaticResource myStyle}".

Θα παρατηρήσετε ότι το χρώμα του κουμπιού του κουμπιού μας και το χρώμα του προσκηνίου μετατρέπονται σε κόκκινο. για να εφαρμόσετε αυτό το στυλ σε ολόκληρη την εφαρμογή σας, κόψτε τον κώδικα μεταξύ του. Ανοίξτε το αρχείο App.xaml και επικολλήστε το μεταξύ των ετικετών πόρων των εφαρμογών. Τώρα, αν επιστρέψετε και ελέγξετε το κουμπί, θα δείτε ότι το πλήκτρο εξακολουθεί να εμφανίζει κόκκινο χρώμα.

Έτσι, όλα αυτά αφορούν τα Στυλ και τους πόρους στο Windows Phone 7.5. Στο επόμενο κεφάλαιο θα μάθουμε για την πλοήγηση μεταξύ των σελίδων xaml