DataGrid

Un altro controllo utilizzabile per visualizzare elenchi a video è la DataGrid. Si tratta di un'esclusiva di Silverlight 2 (essendone sprovvisto anche Windows Presentation Foundation) e, a differenza della ListBox, a fronte di un layout leggermente più rigido, consente nativamente anche funzionalità di modifica dei dati ad essa collegati. Quando la proprietà ItemsSource è impostata ad una collection di oggetti complessi, come ad esempio la classe Book dell'esempio precedente, è possibile far sì che le colonne siano automaticamente generate impostando la proprietà AutoGenerateColumn. In questo caso è sufficiente istanziare l'oggetto nello XAML della pagina, dopo averne referenziato il namespace

<UserControl x:Class="AspitaliaSilverlight.DataGridSample" 
    xmlns:grid="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"   
    xmlns="http://schemas.microsoft.com/client/2007"  
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
    Width="400" Height="300"> 
    <Grid x:Name="LayoutRoot" Background="White"> 
        <grid:DataGrid x:Name="theGrid" AutoGenerateColumns="True" /> 
    </Grid> 
</UserControl> 

e settarne opportunamente la sorgente dati

public DataGridSample() 
{ 
    InitializeComponent(); 
 
    this.theGrid.ItemsSource = Book.GetSomeBooks(); 
} 

per presentare un'interfaccia già immediatamente utilizzabile:

Questo approccio, però, pone dei vincoli piuttosto rigidi; non è infatti possibile scegliere quali campi visualizzare, specificare una particolare formattazione per un dato o permettere la modifica di un tipo data tramite un ben più adeguato DatePicker, piuttosto che con una TextBox. Nei casi in cui sia necessario operare queste personalizzazioni, è comunque possibile specificare manualmente l'elenco delle colonne, scegliendo di volta in volta la tipologia più adeguata tra le tre disponibili:

- DataGridTextBoxColumn è utile per gestire campi testuali, dato che visualizza il dato come testo piano e, come si evince dal nome, ne consente la modifica tramite una TextBox;
- DataGridCheckBoxColumn utilizza invece una CheckBox per rappresentare un dato booleano;
- DataGridTemplateColumn invece è l'alternativa più versatile, visto che consente di specificare un template completamente personalizzato per la visualizzazione e l'editing del dato in binding.

Nel nostro caso, allora, una rappresentazione più "consona" dell'elenco di libri precedente si ottiene con il seguente XAML:

<grid:DataGrid x:Name="theGrid" RowHeight="80"> 
    <grid:DataGrid.Columns> 
        <grid:DataGridTextBoxColumn Width="150"  
                                    DisplayMemberBinding="{Binding Title}" Header="Title" /> 
        <grid:DataGridTextBoxColumn Width="100"  
                                    DisplayMemberBinding="{Binding Author}" Header="Author"/> 
        <grid:DataGridTemplateColumn Width="80" Header="Image"> 
            <grid:DataGridTemplateColumn.CellTemplate> 
                <DataTemplate> 
                    <Image Source="{Binding ImageUrl}" Margin="5" Height="60" Width="60" /> 
                </DataTemplate> 
            </grid:DataGridTemplateColumn.CellTemplate> 
        </grid:DataGridTemplateColumn> 
        <grid:DataGridCheckBoxColumn DisplayMemberBinding="{Binding Published}" Header="Published" /> 
        <grid:DataGridTemplateColumn Width="150" Header="Date"> 
            <grid:DataGridTemplateColumn.CellTemplate> 
                <DataTemplate> 
                    <DatePicker SelectedDate="{Binding PublishDate}" VerticalAlignment="Center"/> 
                </DataTemplate> 
            </grid:DataGridTemplateColumn.CellTemplate> 
        </grid:DataGridTemplateColumn> 
    </grid:DataGrid.Columns> 
</grid:DataGrid> 

Si noti come sia possibile definire un testo personalizzato da visualizzare in testa alla colonna e soprattutto l'utilizzo del markup extension Binding per correlare, di volta in volta, una proprietà della classe Book con una proprietà di un controllo visuale, sia in modalità OneWay (e quindi in sola lettura, come nel caso di Image.Source), sia in modalità TwoWays, come avviene per la data di pubblicazione, che può essere modificata tramite un DatePicker. Il risultato sullo schermo è di tutt'altra levatura rispetto a quanto ottenuto in precedenza dal punto di vista del look and feel:

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.