Χρησιμοποιώντας το Silverlight SDK
Για την τρέχουσα έκδοση 1.0 του Silverlight έχει κυκλοφορήσει Software Development Kit, το οποίο περιλαμβάνει αρκετά controls (κουμπιά, λίστες κτλ), που το Silverlight δεν μπορεί με μόλις την πρώτη του έκδοση να προσφέρει. Πολύ σύντομα, δε, κυκλοφορεί το Silverlight 2.0 σε beta, το οποίο από controls είναι full extra απ' όσο έχω διαβάσει. Παρ' όλ αυτά, σκέφτηκα να κάνω post για το Silverlight SDK καθώς, για τους δυνητικούς χρήστες του, δεν είναι και πολύ ξεκάθαρο, πώς το εφαρμόζεις στο application σου, όσο και πώς το μορφοποιείς.
H τελευταία έκδοση του Silverlight Software Development Kit είναι η 1.1 Aplha September Refresh και την κατεβάζουμε δωρεάν από εδώ. Στο αρχείο zip που κατεβάζουμε υπάρχει Documentation που περιέχει 2 help files, ένα για Silverlight development με Javascript και το άλλο για development με .ΝΕΤ, τα οποία αναφέρονται στις εφαρμογές Silverlight, δίνουν παραδείγματα, resources, κ.ά. Για να δούμε τα controls, που προσφέρει το SDK ανοίγουμε από Visual Studio 2008 το TespApp.csproj (βρίσκεται εδώ "\Microsoft Silverlight 1.1 SDK Alpha Refresh Sept 2007\Tools\SilverlightControlsStarterKit\TestApp\TespApp.csproj") και το τρέχουμε. Το θέαμα από αισθητικής άποψης είναι αποκαρδιωτικό οπότε πριν τα χρησιμοποιήσουμε είναι μάλλον απαραίτητο το customize.
Μορφοποίηση
Μέσα από το Expression Blend ανοίγουμε το project SilverlightUIControls. Στο δεξί panel επιλέγουμε το tab Ρroject (εάν δεν υπάρχει δεξί panel ή Project tab, πατήστε Window > Design Workspace) και έπειτα ανοίγουμε το φάκελο Buttons. Κάνοντας δεξί κλικ στο αρχείο Button.xaml εμφανίζονται στο workarea το κουμπί! Στο αριστερό panel Objects & Timeline βλέπουμε σε μορφή δένδρου τα layers Rectangles, Textboxes που απαρτίζουν το button. Να σημειώσω ότι πιο υψηλότερα στο αντικείμενο μας είναι αυτό που βρίσκεται στη λίστα τελευταίο πχ. το layer text στο κουμπί. Αυτά, μπορούμε είτε να τα μορφοποιήσουμε έιτε να τα διαγράψουμε και να τα αντικαταστήσουμε με δικά μας. Όμοια, πράττουμε και για τα υπόλοιπα controls:
- GripThumb.xaml
- RepeatButton.xaml
- Thumb.xaml
- ListBox.xaml (φάκελος ListSelection)
- ScrollBar.xaml (φάκελος Navigation)
- ScrollBarTrack.xaml (φάκελος Navigation)
- ScrollViewer.xaml (φάκελος Navigation)
- Slider.xaml (φάκελος RangeSelection)
Στο συγκεκριμένο SDK τα controls έχουν και storyboard για την περίπτωση MouseOver. Για να δούμε και να επεξεργαστούμε το animation που έχει το κάθε control επιλέγουμε αρχικά Window > Animation Workspace κι έπειτα πατάμε στα βελάκια της φωτογραφίας. Αν αυτά είναι disabled σημαίνει ότι δεν υπάρχει storyboard στο συγκεκριμένο control.
Προσθέτοντας τα Silverlight UI Controls στην εφαρμογή μας
Όταν τελειώσουμε κάνουμε Project > Test Solution και κλείνουμε το Blend. Από το Visual Studio και ανοίγουμε το project στο οποίο θέλουμε να χρησιμοποιήσουμε τα controls και στο παράθυρο Solution Explorer, κάνουμε δεξί κλικ στα References > Add Reference > Browse στο φάκελο που έχουμε το project Silverlight UI Controls και βρίσκουμε το αρχείο: "..\SilverlightUIControls\ClientBin\Silverlight.Samples.Controls.dll". Μετά το μόνο που μένει είναι για όποιο control θέλουμε να χρησιμοποιήσουμε να γράφουμε στο xaml αρχείο της εφαρμογής μας το αντίστοιχο tag.
ex.
<uicontrol:ScrollViewer x:Name="scrollViewer" ScrollableHeight="60" ScrollableWidth="2"/>
<uicontrol:Button Canvas.Top="0" Canvas.Left="260" Text="Button3" Click="ClickHandler"/>
<uicontrol:Slider x:Name="hSlider" Canvas.Top="60" Canvas.Left="450" />
Ελπίζω να ήμουν κατατοπιστική..
Καλή τύχη! :)