WPF

Καλώς ορίσατε στο 1ο μέρος του tutorial “WPF για αρχάριους”, αν είστε παλιός και έχετε ήδη δουλέψει σε windows forms, τότε δώστε μία ευκαιρία στο WPF, μπορεί και να σας αρέσει, αν πάλι είστε καινούργιος, τότε καλώς ορίσατε στον κόσμο του WPF !!

Το WPF (Windows Presentation Foundation) είναι ένα “εργαλείο” για την κατασκευή παραθυρικών εφαρμογών, αποτελεί τον απόγονο των windows forms, και τα πλεονεκτήματα που διαθέτει έναντι του πρόγονου του είναι ότι πλέον η δουλειά του designer μπορεί να γίνει ξεχωριστά από τη δουλειά του developer, συμβάλλοντας στην καλύτερη συνεργασία τους, και προσφέρει δυνατότητες για πλούσια γραφικά.

Σε αυτό το μέρος θα δούμε πως μπορούμε να φτιάξουμε ένα WPF project και μια πρώτη εφαρμογή. Σε αυτή την εφαρμογή το μόνο που θα κάνουμε είναι να έχουμε ένα παράθυρο στο οποίο περιέχονται ένα textbox, ένα label κι ένα button και θέλουμε όταν το button πατηθεί να μεταφέρεται το κείμενο του textbox στο label.

Για τη δημιουργία της πρώτης μας εφαρμογής θα χρησιμοποιήσουμε το, γνωστό σε όλους μας IDE, Visual Studio και ως γλώσσα την C#. Ας πάμε να ξεκινήσουμε:

Ανοίγουμε το visual studio και μας βγάζει στην αρχική του σελίδα:

Ύστερα πατάμε File –> New –> Project, διαλέγουμε Visual C# –> Windows –> WPF Application, δίνουμε ένα όνομα στο project μας (έστω MyFirstWpfProject) και πατάμε OK:

Όταν ολοκληρώσουμε αυτή τη διαδικασία, μας εμφανίζεται μια οθόνη που περιέχει διάφορα tabs, όπως toolbox, solution explorer, properties, server explorer, στη μέση μια φόρμα παραθύρου και κάτω ένα μέρος κώδικα που ονομάζεται xaml.

Αν κοιτάξετε το solution explorer tab θα παρατηρήσετε πως περιέχει όλα τα αρχεία της εφαρμογής, καθώς και το Window1.xaml που είναι το αρχικό παράθυρο (και το οποίο επεξεργαζόμαστε αυτή τη στιγμή). Αν πατήσετε στο + που έχει, θα εμφανιστεί ένα αρχείο με όνομα Window1.xaml.cs, ανοίξτε το. Αυτό περιέχει τον κώδικα που χρησιμοποιεί το παράθυρο (code behind).

Η xaml (eXtensible Application Markup Language) είναι ένα απο τα καινούργια features του WPF. Χρησιμοποιείται για την κατασκευή και αρχικοποίηση αντικειμένων του παραθύρου και εντείνει την ευελιξία στην κατασκευή του UI (User Interface).

Στη φόρμα του παραθύρου μπορούμε να κάνουμε drag ‘n drop αντικείμενα απο το toolbox και να τα τοποθετήσουμε σε όποιο σημείο θέλουμε, επίσης μπορούμε να αυξομειώσουμε το μέγεθος της φόρμας και κατ’ επέκταση του παραθύρου που δημιουργούμε. Πατήστε στο toolbox tab και παρατηρήστε τα διάφορα αντικείμενα που έχει.

Όταν είστε έτοιμοι πατήστε πάνω στο αντικείμενο label και μετά πατήστε πάνω στη φόρμα για να το τοποθετήσετε, ύστερα μπορείτε να το μετακινήσετε όπου θέλετε. Μόλις τοποθετηθεί εμφανίζονται κάποια βελάκια, αυτά καθορίζουν τις πλευρές από τις οποίες εξαρτάται το μήκος και το πλάτος του αντικειμένου, δηλαδή το μέγεθος του αντικειμένου αλλάζει ανάλογα με την αυξομείωση του μεγέθους των πλευρών του παραθύρου που φτιάχνουμε. Μπορείτε να ορίσετε εσείς τα βελάκια. Κάντε το ίδιο για το textbox και το button.

Όταν τα τοποθετήσετε όπως θέλετε, παρατηρήστε στη xaml ότι αυτά τα 3 αντικείμενα έχουν δημιουργηθεί εκεί και έχουν attributes όπως Name, Margin, Height, κ.τ.λ, που αποτελούν την αρχικοποίση μερικών properties του εκάστοτε αντικειμένου, και στο button και το label περιέχεται κάποιο κείμενο στο τέλος πριν κλείσουν τα tags, το οποίο αποτελεί το περιεχόμενο τους (π.χ το button έχει περιεχόμενο Button).

Κάντε διπλό κλικ στο κουμπί πάνω στη φόρμα για να μεταφερθείτε στο .cs αρχείο όπου τώρα υπάρχει μια καινούργια συνάρτηση button1_Click η οποία υλοποιεί τη λειτουργία που εκτελείται όταν πατηθεί το κουμπί.

Τώρα η φόρμα και το τμήμα της xaml θα πρέπει να είναι κάπως έτσι:

Για να μεταφέρεται το κείμενο του textbox στο label όταν πατιέται το κουμπί προσθέστε τον παρακάτω κώδικα στη συνάρτηση:

Τέλος, πατήστε F6 για να γίνει build το project και μετά F5 για να το τρέξετε.

Συγχαρητήρια, μόλις ολοκληρώσατε την πρώτη σας εφαρμογή σε WPF ! Καλή συνέχεια και τα λέμε στο επόμενο μέρος !!