Βασική XAML

Στο προηγούμενο κεφάλαιο, μιλήσαμε για το τι είναι η XAML και για τι μπορείτε να την xρησιμοποιήσετε, αλλά πώς δημιουργείτε ένα control στην XAML; Όπως θα δείτε από το επόμενο παράδειγμα, η δημιουργία ενός control στην XAML είναι τόσο εύκολη όσο το γράψιμο του ονόματος του, περιβαλλόμενο από γωνιακές αγκύλες (angle brackets). Για παράδειγμα, ένα κουμπί (Button) μοιάζει με αυτό:

<Button>

Τα XAML tags (ετικέτες) πρέπει να κλείσουν είτε γράφοντας ένα καταληκτικό tag είτε τοποθετώντας μια κάθετο που γέρνει προς τα εμπρος (forward slash) μετά το τέλος του tag έναρξης:

<Button></Button>

H

<Button />

Πολλά controls σάς επιτρέπουν να τοποθετήσετε περιεχόμενο ανάμεσα στα tags έναρξης και λήξης, το οποίο είναι το περιεχόμενο του contol. Για παράδειγμα, το Button control σάς επιτρέπει να καθορίσετε το κείμενο που εμφανίζεται σε αυτό, τοποθετόντας ανάμεσα στα tags έναρξης και λήξης:

<Button>A button</Button>

Η HTML δεν κάνει διάκριση πεζών-κεφαλαίων, αλλά η XAML κάνει, επειδή το όνομα του control πρέπει να αντιστοιχεί σε ένα τύπο του πλαισίου .NET. Το ίδιο ισχύει και για τα ονόματα χαρακτηριστικών (attributes), τα οποία αντιστοιχούν στις ιδιότητες του control. Δείτε παρακάτω ένα κουμπί (Button) για το οποίο ορίζουμε δύο ιδιότητες, προσθέτοντας attributes στo tag:

<Button FontWeight="Bold" Content="A button" />

Ορίσαμε την ιδιότητα FontWeight, η οποία μας δίνει ένα έντονο κείμενο, και στη συνέχεια ορίσαμε την ιδιότητα Content, πράγμα που είναι το ίδιο σαν να γράφουμε κείμενο μεταξύ του tag έναρξης και λήξης. Ωστόσο, όλα τα χαρακτηριστικά ενός control μπορούν επίσης να οριστούν και με αυτό τον τρόπο, σαν παράγωγα (child) tags του βασικού control, χρησιμοποιώντας την σημειογραφία Control-Dot-Property:

<Button>
    <Button.FontWeight>Bold</Button.FontWeight>
    <Button.Content>A button</Button.Content>
</Button>

Το αποτέλεσμα είναι ακριβώς το ίδιο όπως και παραπάνω, έτσι σε αυτή την περίπτωση, είναι όλα θέμα σύνταξης και τίποτα άλλο. Ωστόσο, πολλά controls επιτρέπουν περιεχόμενο διαφορετικό από κείμενο, όπως για παράδειγμα άλλα controls. Στην συνέχεια παρουσιάζουμε ένα παράδειγμα όπου έχουμε κείμενο με διαφορετικά χρώματα στο ίδιο κουμπί, χρησιμοποιώντας κάμποσα controls κειμένου στο εσωτερικό ενός Button:

<Button>
    <Button.FontWeight>Bold</Button.FontWeight>
    <Button.Content>
        <WrapPanel>
            <TextBlock Foreground="Blue">Multi</TextBlock>
            <TextBlock Foreground="Red">Color</TextBlock>
            <TextBlock>Button</TextBlock>
        </WrapPanel>
    </Button.Content>
</Button>

Η ιδιότητα Content επιτρέπει ένα μόνο παράγωγο (child) στοιχείο, έτσι χρησιμοποιούμε ένα WrapPanel το οποίο περιέχει χρωματιστά μπλοκ κειμένου. Τα panels, οπως το WrapPanel, παίζουν σημαντικό ρόλο στο WPF και θα τα συζητήσουμε με πολυ περισσότερες λεπτομέρειες αργότερα - προς το παρόν θεώρησέ τα σαν περιέκτες για άλλα controls.

Το ίδιο αποτέλεσμα μπορεί να επιτευχθεί με τον κώδικα που ακολουθεί, ο οποίος είνα απλά ένα άλλος τρόπος για να γραφτεί το ίδιο πράγμα:

<Button FontWeight="Bold">
    <WrapPanel>
        <TextBlock Foreground="Blue">Multi</TextBlock>
        <TextBlock Foreground="Red">Color</TextBlock>
        <TextBlock>Button</TextBlock>
    </WrapPanel>
</Button>

Κώδικας έναντι XAML

Ας ελπίσουμε ότι τα παραπάνω παραδείγματα σας δείχνουν ότι είναι αρκετά εύκολο να γράψετε XAML, και να το κάνετε με πολλούς διαφορετικούς τρόπους, και αν νομίζετε ότι χρειάζεται πολύς κώδικας για να έχετε ένα κουμπί με κείμενο σε διαφορετικά χρώματα, τότε δοκιμάστε να κάνετε το ίδιο πράγμα στην C#:

Button btn = new Button();
btn.FontWeight = FontWeights.Bold;

WrapPanel pnl = new WrapPanel();

TextBlock txt = new TextBlock();
txt.Text = "Multi";
txt.Foreground = Brushes.Blue;
pnl.Children.Add(txt);

txt = new TextBlock();
txt.Text = "Color";
txt.Foreground = Brushes.Red;
pnl.Children.Add(txt);

txt = new TextBlock();
txt.Text = "Button";
pnl.Children.Add(txt);

btn.Content = pnl;
pnlMain.Children.Add(btn);

Φυσικά το παραπάνω παράδειγμα θα μπορούσε να γραφτεί περισσότερο περιεκτικά και χρησιμοποιόντας μεγαλύτερη συντακτική τεχνοτροπία, αλλά νομίζω ότι το επιχείρημα συνεχίζει να στέκει: H XAML είναι αρκετά σύντομη και ακριβής όταν χρησιμοποιείτε για την περιγραφή διεπαφών.