Introduzione
Continuano i tutorial sul controllo datagrid, questa volta vedremo alcuni aspetti delle colonne e delle singole celle.
In particolare, verrà illustrata una tecnica di come riportare un dettaglio al click di una colonna, utile nel caso si vuole effettuare una griglia contabile.
Inoltre vedremo come in una colonna, possiamo impostare la grandezza del testo.
Creazione del progetto
Come progetto, prendiamo in considerazione quello già utilizzato negli articoli precedenti, visto che avremo una classe per il caricamento dei dati, e la griglia già configurata.
Vediamo come rendere il carattere delle celle di una determinata colonna di una certa grandezza, come illustrato in figura 1.
Figura 1
Nella colonna, relativa a quella che riporta i dati della proprietà “Nome” impostiamo, nel file XAML, l’attributo FontSize a 20, qui di seguito si riporta il codice relativo a quanto spiegato.
XAML
<sdk:DataGridTextColumn CanUserReorder="True" CanUserResize="True" FontSize="20" CanUserSort="True" Binding="{Binding Nome}" Header="Nome" Width="Auto" />
In questo modo, la sola colonna, avrà la formattazione del carattere impostato a 20, mentre le restanti colonne, rimangono con il valore di default.
Vediamo come impostare il dettaglio di un record, dopo aver fatto click su una colonna.
Supponiamo, che vogliamo visualizzare una riga di dettaglio, nella parte in cui si fa click sul dato di una determinata cella, il tutto come mostrato in figura 2.
Figura 2
Come si vede dalla figura 2, non appena, l’utente fa click su una riga della griglia, nella parte inferiore della griglia vengono visualizzate determinate informazioni.
Sarà nostra cura, visualizzare le informazioni.
Questo comportamento è possibile, impostando la proprietà RowDetailsVisibilityMode a “VisibleWhenSelected”, del controllo datagrid.
Qui di seguito si riporta l’esempio di codice XAML.
XAML
RowDetailsVisibilityMode="VisibleWhenSelected"
Ma non solo dobbiamo impostare tale proprietà, dobbiamo anche aggiungere una colonna, con dei controlli all’interno per visualizzare il testo.
Prima del tag “<sdk:DataGrid.Columns>” dobbiamo aggiungere il tag “<sdk:DataGrid.RowDetailsTemplate>” il quale ci permette di creare una colonna di dettaglio.
Qui di seguito si riporta il codice completo, relativo alla colonna Datagrid.RowDetailsTemplate.
In cui sono presenti i controlli textblock, che avranno il compito di visualizzare il testo non appena viene selezionata la riga.
XAML relativo alle colonne di dettaglio
<sdk:DataGrid.RowDetailsTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Dettaglio del record:" ></TextBlock>
<TextBlock Text=" Nome: " ></TextBlock>
<TextBlock Text="{Binding Nome}" ></TextBlock>
<TextBlock Text=" Data: " ></TextBlock>
<TextBlock Text="{Binding Data}" ></TextBlock>
<TextBlock Text=" Adulto: " ></TextBlock>
<TextBlock Text="{Binding Adulto}" ></TextBlock>
</StackPanel>
</DataTemplate>
</sdk:DataGrid.RowDetailsTemplate>
Mentre qui di seguito, riportiamo il codice completo relativo alla parte XAML del controllo Datagrid.
<sdk:DataGrid AutoGenerateColumns="False" Height="182" HorizontalAlignment="Left" Margin="20,80,0,0" RowDetailsVisibilityMode="VisibleWhenSelected" Name="DataGrid1" VerticalAlignment="Top" Width="358" >
<sdk:DataGrid.RowDetailsTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Dettaglio del record:" ></TextBlock>
<TextBlock Text=" Nome: " ></TextBlock>
<TextBlock Text="{Binding Nome}" ></TextBlock>
<TextBlock Text=" Data: " ></TextBlock>
<TextBlock Text="{Binding Data}" ></TextBlock>
<TextBlock Text=" Adulto: " ></TextBlock>
<TextBlock Text="{Binding Adulto}" ></TextBlock>
</StackPanel>
</DataTemplate>
</sdk:DataGrid.RowDetailsTemplate>
<sdk:DataGrid.Columns>
<sdk:DataGridTextColumn CanUserReorder="True" CanUserResize="True" FontSize="20" CanUserSort="True" Binding="{Binding Nome}" Header="Nome" Width="Auto" />
<sdk:DataGridTemplateColumn CanUserReorder="True" CanUserResize="True" CanUserSort="True" Header="Data" Width="Auto" >
<sdk:DataGridTemplateColumn.CellTemplate >
<DataTemplate>
<TextBlock Text="{Binding Data}"></TextBlock>
</DataTemplate>
</sdk:DataGridTemplateColumn.CellTemplate>
<sdk:DataGridTemplateColumn.CellEditingTemplate >
<DataTemplate>
<sdk:DatePicker SelectedDate="{Binding Data, Mode=TwoWay}" CalendarClosed="DatePicker_CalendarClosed" ></sdk:DatePicker>
</DataTemplate>
</sdk:DataGridTemplateColumn.CellEditingTemplate>
</sdk:DataGridTemplateColumn>
<sdk:DataGridCheckBoxColumn CanUserReorder="True" Binding="{Binding Adulto}" CanUserResize="True" CanUserSort="True" IsThreeState="True" Header="Adulto" Width="auto" />
</sdk:DataGrid.Columns>
</sdk:DataGrid>
Conclusioni
In questo esempio, abbiamo visto come personalizzare il controllo datagrid, con una determinata colonna.
In particolare, abbiamo fornito la possibilità di visualizzare un dettaglio relativo alla riga selezionata.
Qui
https://www.iprogrammatori.it/articoli/programmazione/art_tutorial-datagrid-di-silverlight-parte-p_1105.aspx la parte prima del tutorial
Qui
https://www.iprogrammatori.it/articoli/programmazione/art_tutorial-controllo-datagrid-di-silverlig_1079.aspx la parte seconda, mentre qui
https://www.iprogrammatori.it/articoli/programmazione/art_tutorial-datagrid-in-silverlight-tramite_1080.aspx la terza parte.