The PK blog

• ·         .Net Framework 3.0/2.0
• ·         Windows Forms
• ·         Visual Studio 2005
• ·         Windows Presentation Foundation (WPF)
• ·         XAML
• ·         C#

Σύνοψη

Πριν λίγες ημέρες η Microsoft παρουσίασε την τελική έκδοση του .Net 3.0. Ως οπαδός του User Interface ασχολήθηκα απο νωρίς με την XAML και το WPF (Windows Presentation Foundation) και πως αυτά μπορούσαν να με βοηθήσουν, όχι τόσο στο να φτιάξω εντυπωσιακά UI αλλά το πόσο εύκολα μπορώ να τα φτιάξω και πόσο ακόμη πιο εύκολο είναι να παρουσιάσω τα δεδομένα μου χωρίς πολύ κόπο.Το .Net 3.0 τρέχει και σε Windows Vista και σε Windows XP SP2 αλλά και σε Windows 2003 Server.

Τι είναι όμως το WPF;

Το WPF είναι μια «βιβλιοθήκη» θα έλεγε κανείς, η οποία βοηθάει πολύ τον προγραμματιστή να ασχοληθεί με UI και το πως αυτό αλληλεπιδρά με τον κώδικα του εύκολα, αλλά ταυτόχρονα βοηθάει πολύ και τον σχεδιαστή (designer) που μέσω της XAML μπορεί να δημιουργήσει εντυπωσιακά UI, χωρίς να έχει την παραμικρή ιδέα απο κώδικα και χρησιμοποιώντας εργαλεία όπως ο Graphic Designer και o Interactive Designer.Τα εργαλεία αυτά δημιουργούν XAML Code απλά ζωγραφίζοντας. Το ίδιο ισχύει κι αν κάνουμε δημιουργία μιας φόρμας μέσα απο το Visual Studio. Μπορούμε απλά να «ζωγραφίσουμε» τα elements επάνω στο Canvas της φόρμας.Και μπορούμε να «ζωγραφίσουμε» είτε με κώδικα, είτε με drag and drop, stretch and skew κλπ κλπ. Προσωπική μου άποψη, για να το κάνω πιο κατανοητό, είναι οτι πλέον «ζωγραφίζουμε» επάνω σε Canvas τα elements και τα controls ή οτιδήποτε άλλο θέλουμε.

Δηλαδή απλά ζωγραφίζω ότι θέλω;

Ανάλογα με το content το οποίο θέλουμε να παρουσιάσουμε, υπάρχουν και τα αντίστοιχα controls. Για παράδειγμα, για να δείξουμε ένα video μέσα στην εφαρμογή, το μόνο που έχουμε να κάνουμε, είναι να «ζωγραφίσουμε» ένα MediaElement επάνω στην φόρμα, να θέσουμε το Source του file που θα παίζει (είτε είναι ήχος , είτε video κλπ) και τέλος να πούμε το default behavior που έχει, δηλάδη εάν θα ξεκινάει αυτόματα να παίζει ή θα πρέπει να το ξεκινήσει ο χρήστης. Τόσο απλά! O παρακάτω κώδικας κάνει αυτό ακριβώς που περιέγραψα παραπάνω.

<MediaElement Margin="139,148,182,148" x:Name="MediaElement" Source="C:\myvideo.wmv" LoadedBehavior="Manual"/>

Το Visual Studio προσφέρει IntelliSense στα properties και στα Tags τα οποία υποστηρίζονται. Μερικά απο αυτά, όπως το MediaElement, δεν είναι άμεσα διαθέσιμα στον Form Designer οπότε θα σας πρότεινα να κατεβάσε τον Expression Interactive Designer όπου εμφανίζοντια όλα στο Library.

Αν υποθέσουμε ότι θέλαμε αυτό το κομμάτι κώδικα να παίζει μέσα σε ένα κελί απο ένα μεγάλο grid, μπορούμε να το φτιάξουμε πάρα πολύ απλά. Μπορούμε να ζωγραφίσουμε ένα grid και με Point and Click να φτιάξουμε Colums και Rows όπου μέσα θα τοποθετήσουμε Elements.

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="0.5*"/>
    <ColumnDefinition Width="0.5*"/>
  </Grid.ColumnDefinitions>

  <Grid.RowDefinitions>
    <RowDefinition Height="0.33*"/>
    <RowDefinition Height="0.33*"/>
    <RowDefinition Height="0.33*"/>
  </Grid.RowDefinitions>

  <MediaElement VerticalAlignment="Stretch" Margin="0,0,0,0" Height="Auto" x:Name="MediaElement" Grid.RowSpan="1" Source="C:\myvideo.wmv" LoadedBehavior="Manual" Grid.Row="1" Grid.ColumnSpan="1"/>

Ο παραπάνω κώδικας σπάει την φόρμα στην μέση, σε δύο στήλες δηλαδή, και δημιουργεί 3 κελία σε κάθε στήλη, έξη σε σύνολο. Στο δεύτερο κελί, της πρώτης στήλης έχω τοποθετήσει το MediaElement και έχω ορίσει το Margin του σε 0 δηλαδή να καταλαμβάνει όλο το χώρο του κελιού. Τόσο εύκολα δημιούργησα ένα απλό Grid στο οποίο έβαλα τα Elements τα οποία ήθελα.

Κάτι που θα μας γλυτώσει πολύ χρόνο

Πλέον , στο WPF μπορείς να ορίσεις Styles και Templates για τα Controls σου. Τι σημαίνει αυτό;Οτι πολύ απλά μπορείς να δημιουργήσεις ένα Template για όλα τα Buttons σου, τα οποία θα μοιάζουν πάντοτε έτσι, άσχετα εάν βάζεις καινούργια buttons σε runtime ή σε Code Time.Επίσης μπορείς να φτιάξεις διάφορα Templates για τον ίδιο τύπο Control και σε κάθε ένα να χρησιμοποιείς διαφορετικό. Μπορείς επίσης να πειράξεις κατα το Runtime με πιο Template θέλεις να «ζωγραφιστεί» το Element το οποίο φτιάχνεις, εάν φυσικά δεν θέλεις να χρησιμοποιήσει το default. Με τα Styles μπορείς να δημιουργήσεις διαφορετικά «χρώματα» κλπ επάνω σε Controls αλλά δεν μπορείς να ορίσεις «συμπεριφορά». Δηλαδή, μπορείς να αλλάξεις το χρώμα του Control στο MouseOver Event αλλά δεν μπορείς να πεις στο Control να κάνει μια συγκεκριμένη ενέργεια, όπως μπορείς με τα templates. Έτσι μπορούμε να φτιάξουμε διάφορα styles για διάφορα controls και να τα χρησιμοποιούμε ανάλογα.Τα styles υποστηρίζουν inheritance βοηθώντας έτσι εμάς, εάν θέλουμε να φτιάξουμε ενα base style το οποίο κάνουν Inherit άλλα styles και το κάνουν extend. Ακόμη είναι εφικτό να κάνουμε override ένα property του style σε ένα συγκεκριμένο Control.

WPF και .Net 2.0 Forms μαζί;

Ναι, μπορούμε να έχουμε Windows Forms (.Net 2.0) και WPF Windows/Scenes (.Net 3.0) μαζί και λογικό άλλωστε εφόσον το .Net 3.0 «κάθεται» επάνω στο .Net 2.0, σαν να το κάνει extend δηλαδή. Μπορούμε να έχουμε συνδιασμό Windows Forms και WPF Windows/Scenes και αντίστοιχα ενα Windows Form να εμφανίζει και να αλληλεπιδρά με WPF Scene.

XAML και Favorite Lanaguage Code μαζί

Μπορούμε μέσα απο την XAML να καλέσουμε methods ή να κάνουμε instanciate classes κλπ, χρησιμοποιώντας τα αντίστοιχα events των Elements και ορίζοντας ποιος κώδικας θα εκτελεστεί σε ένα συγκεκριμένο fire ενός Event.
Στο παράδειγμα, ανοίγω την Windows Form (.Net 2.0) αφού πατηθεί ένα κουμπί (button) στο Scene που δουλεύω (WPF).

<ToolBar Margin="0,0,0,39" Name="toolBar1">
      <Button x:Name="btnOpenNet2Form" Click="OnClick">
        <TextBlock>Open .Net 2 Form</TextBlock>
      </Button>
</ToolBar>

Προσέξτε το Click="OnClick">. Εδώ ακριβώς ορίζω το ότι όταν το κουμπί το οποίο βρίσκεται μέσα στο toolBar1 πατηθεί, τότε θα καλέσεις το OnClick method απο το namespace και το class το οποίο βρίσκεσαι.

   void OnClick(object sender, EventArgs e)
   {
        frmMain nMain = new frmMain();
        nMain.Show();
   }

Ο παραπάνω κώδικας (C#) θα εμφανίσει το frmMain (Windows Form) επάνω απο το Scene1 (WPF). Σε περίπτωση που το method βρισκότανε είτε σε διαφορετικό class , είτε σε διαφορετικό namespace ο τρόπος με τον οποίο θα το καλούσα θα ήτανε διαφορετικός.

Sample Application

Έχω φτιάξει ενα μικρό sample application το οποίο κάνει demostrate όλες τις παραπάνω λειτουργίες κλπ. Κατεβάστε το και τρέξτε το μέσα απο το Visual Studio αφού έχετε εγκαταστήσει το τελευταίο CTP (November) απο τα  Visual Studio Extensions (WPF Extensions) και το .Net Framework 3.0 RTM.Επίσης καλό θα ήτανε να εγκαταστήσετε και τα extensions για το Windows Workflow Foundation. Μην ξεχάσετε να τοποθετήσετε τα 2 images (bg.jpg και image1.jpg) στο ίδιο directory με το executable. Έαν θέλετε φυσικά μπορείτε να τα αλλάξετε.
Μπορείτε να το κατεβάσετε απο εδώ -> Download Sample Application