Lo snippet di XAML presentato è più complesso dei precedenti e merita qualche considerazione a margine. Innanzi tutto, in fase di design, può risultare utile impostare a true la proprietà ShowGridLines, per visualizzare le linee di demarcazione delle celle, come è stato fatto nell'esempio in figura. Il primo passo per utilizzare il controllo Grid è descrivere la composizione della griglia che si vuole realizzare, popolando le collezioni ColumnDefinitions e RowDefinitions. Nel nostro esempio abbiamo realizzato una tabella di due colonne e tre righe, una delle quali presenta l'impostazione esplicita dell'altezza al valore 'Auto', che fa sì che essa adatti la propria altezza al proprio contenuto: normalmente, infatti, la Grid tende a suddividere equamente lo spazio del suo contenitore se le dimensioni degli elementi figli lo consentono. Una volta definita la struttura, è possibile popolarla con i vari controlli; anche in questo caso, come avviene con il Canvas, tornano in gioco le attached properties, nella fattispecie Grid.Row e Grid.Column per la selezione della cella, mentre Grid.RowSpan o GridColumnSpan possono essere utilizzati nel caso l'oggetto debba essere spalmato su più celle adiacenti.

Controlli di Input/output e multimediali

Con la prima versione di Silverlight costruire interfacce interattive, che accettassero cioè l'input dell'utente, non era una delle imprese più immediate; vista la totale mancanza di oggetti quali Textbox, Checkbox, Button e simili, l'alternativa più praticabile era quella di utilizzare i comuni tag HTML (o i controlli ASP.NET). Questa nuova versione, invece, presenta già praticamente la totalità degli oggetti 'standard' necessari per le esigenze più comuni, grazie ai quali costruire, ad esempio, una form per l'inserimento di parametri di ricerca come quella dell'immagine in basso è solo questione di avere un po' di dimistichezza con XAML:

Si tratta di una sostanziale evoluzione rispetto alla versione precedente per diverse ragioni. Sebbene ad una prima osservazione il risultato finale non sembri molto distante da ciò che è realizzabile con un po' di HTML e AJAX, in realtà la situazione è molto differente: i controlli di Silverlight supportano stili, trasparenze, animazioni, trasformazioni, e quant'altro, consentendo ad esempio di realizzare effetti tipo quello in figura:

Inoltre, l'interazione con questi controlli avviene direttamente da codice C#, esattamente come si farebbe in una normale applicazione WPF, utilizzando field generati dal designer:

private void Button_Click(object sender, RoutedEventArgs e) 
{ 
    var result = someSearchMethod( 
        this.txtKeyWords.Text, 
        this.lstAreas.SelectedItem, 
        this.dtpFrom.SelectedDate, 
        this.dtpTo.SelectedDate, 
        this.chkScripts.IsChecked); 
} 

I vantaggi sono a dir poco abissali rispetto alla prima versione, basata su Javascript: l'accesso è infatti fortemente tipizzato e guidato dall'Intellisense di Visual Studio, pertanto non si corre il rischio di referenziare metodi o proprietà non presenti; inoltre, una eventuale variazione ai nomi effettuata lato XAML, viene automaticamente aggiornata dal IDE, generando errori in compilazione, quindi semplici da localizzare e correggere.

DatePicker e Calendar

L'inserimento di date da parte dell'utente, in un'applicazione Web, non è facilmente gestibile con i controlli standard di ASP.NET e solo con AJAX Control Toolkit, grazie all'uso combinato di Calendar e MaskedEditExtender, è possibile presentare un'interfaccia evoluta e che consenta un minimo di inserimento guidato. Silverlight 2, invece, mette a disposizione due oggetti nativi, DatePicker e Calendar, per la gestione di questo tipo di input.

La differenza tra i due oggetti consiste nel fatto che il DatePicker permette anche la digitazione di una data, oltre alla selezione dal calendario a scomparsa. L'eventuale input dell'utente può essere ottenuto interrogando la proprietà SelectedDate.

ListBox

Il controllo ListBox può essere considerato come l'alter-ego dell'omonimo oggetto di ASP.NET e permette di selezionare un elemento all'interno di una lista. L'utilizzo più semplice della ListBox consiste nello specificarne manualmente il contenuto, tramite una lista di ListBoxItem, una classe che deriva da ContentControl e che, come tale, è in grado di visualizzare qualsiasi tipo di oggetto venga assegnato alla proprietà Content. Insomma, si tratta di uno strumento estremamente versatile che ad esempio, grazie allo snippet XAML seguente,

<ListBox Margin="10" Width="500" Height="250"> 
    <TextBlock Text="Un contenuto testuale" /> 
    <CheckBox Content="Una checkbox" /> 
    <StackPanel> 
        <TextBlock Text="Del testo e un'immagine" /> 
        <TextBlock Text="in un unico elemento all'interno" /> 
        <TextBlock Text="di uno StackPanel" /> 
        <Image Source="SampleImage.JPG" /> 
    </StackPanel> 
    <Button Content="E dopo un'immagine, un button!" /> 
</ListBox> 

produce un risultato di questo tipo:

Sicuramente la funzionalità più interessante della ListBox è però quella di poter essere collegata ad una fonte dati per essere poi popolata tramite databinding, assegnandone opportunamente una ItemsSource

this.lstStrings.ItemsSource = 
    new List<string>() {  
        "Item1", "Item2", "Item3", "Item4", "Item5", "Item6" 
    }; 

per ottenere in pagina qualcosa di simile a

Contenuti dell'articolo

• Pagina 1
  • Controlli di Layout
  • Canvas
  • StackPanel
  • Grid
• Pagina 2
  • Controlli di Input/output e multimediali
  • DatePicker e Calendar
  • ListBox
• Pagina 4
  • DataGrid
• Pagina 5
  • MediaElement
  • Conclusioni

• Deepzoom in Silverlight 2.0
• ADO.NET Data Service al servizio di Silverlight 2.0
• Accesso ai dati in Silverlight 2.0
• Hello Silverlight 2.0, again!
• Principi di programmazione in Silverlight 1.0
• 3, 2, 1: azione! Le animazioni in Silverlight
• XAML per Silverlight - Seconda parte
• XAML per Silverlight - Prima parte
• Hello World Silverlight!

Aggiungi un nuovo commento »»»
Per inserire un commento, devi registrarti alla nostra community.