Simply enough, we'll have now a List(Of Articolo) global to the window and named prodotti that contains three products at first execution. That structure represents the data source we'll expose, using binding, in a DataGrid. Let's see how.
In our window we'll add a DataGrid control, named DataGrid1. Having our structure defined code-side, we must work on this side to link the control to its data source. The binding will be obtained using the control's ItemsSource property. Our Loaded event will be modified as follows.
Data Binding between controls: Datagrid on TextBox and DatePicker
As previously described, we are not interested in having a mere list of products. We want to be able to view the product's details scrolling that list. In realizing this kind of implementation, we'll use some TextBoxes, executing a binding between them (as recipients) and the DataGrid (the source), allowing recipient controls (TextBox, or DatePicker in case of expiration date) to modify their source in turn. Let's modify our window as follows.
The properties that expose the control's value in the TextBox and DatePicker are, respectively, Text and SelectedDate. It is therefore necessary to set the data binding on these properties. Essentially, after individuating the property that will receive a specific data, we must indicate its source, and other information (some of which are optional) that will determine how the data are exchanged. In our case, desiring to modify the content of DataGrid using the variation of recipient controls, we must use some kind of bidirectional approach.
As operations to be executed between controls, it is possible to intervene directly on XAML code, indicating how TextBoxes and the DatePicker must be linked to the DataGrid. The code pertinent to the three controls will be modified as follows.
- <TextBox HorizontalAlignment="Left" Height="23" Margin="445,42,0,0"
- TextWrapping="Wrap" VerticalAlignment="Top" Width="181"
- Text="{Binding SelectedItem.Codice,ElementName=DataGrid1 , Mode=OneWay }"/>
-
- <TextBox HorizontalAlignment="Left" Height="23" Margin="445,70,0,0"
- TextWrapping="Wrap" VerticalAlignment="Top" Width="181"
- Text="{Binding SelectedItem.Descrizione,ElementName=DataGrid1 , Mode=TwoWay }"/>
-
- <DatePicker HorizontalAlignment="Left" Margin="445,98,0,0"
- VerticalAlignment="Top" Width="181"
- SelectedDate="{Binding SelectedItem.DataScadenza,ElementName=DataGrid1 ,Mode=TwoWay }"/>
As mentioned, properties that expose a certain data must be set indicating the source of the data, and the mode in which the data must be retrieved. We take case #1 (TextBox that exposes a product's code, Codice) as an example.
In this case, we'll see the source control is set on DataGrid1, from which we read the Codice property (belonging to the Articolo class) of the currently SelectedItem. The Binding's mode is mono-directional, that is from the source (DataGrid1) to the destination (TextBox), and not vice versa. In fact, we defined the Codice property as read-only (see snippet 1) and any attempt to change its value will raise an exception.
Similarly, in the two remaining cases we'll have always DataGrid1 as source control, referenced properties will be Descrizione (description) and DataScadenza (expiration date), but the binding’s mode will be TwoWay, or bidirectional: modifying the control’s content will result in updating its source property/control, or DataGrid1 (and, for extension, the list connected to it).
Running our program, and trying to position ourselves on the second record (for example) and modifying the data, we can verify the proper update of linked control’s data:
Afterwords: Alternative method for DataGrid population
We saw here a method for populating a DataGrid that involves a List(Of <Our_Class>). Speaking of WPF binding flexibility, there are other methods using which we could populate the contents of a control. For example, our class Articolo could be referred directly into the XAML of our grid. If we desire to provide our DataGrid some records to start with, we could do that as follows.
- <DataGrid Name="DG1" HorizontalAlignment="Left" Height="153" Margin="10,10,0,0" VerticalAlignment="Top" Width="305" xmlns:local="clr-namespace:WinTest" >
- <DataGrid.Columns >
- <DataGridTextColumn Header="Codice" Binding="{Binding Codice}"/>
- <DataGridTextColumn Header="Descrizione" Binding="{Binding Descrizione}"/>
- <DataGridTextColumn Header="Data di scadenza" Binding="{Binding DataScadenza}"/>
- </DataGrid.Columns>
- <local:Articolo Codice="CODE_01" Descrizione="MSDN TEST" DataScadenza="2014-12-01" />
- </DataGrid>
We use the xmlns:local keyword to specify our class as a reference (in my case, WinTest). This way, we could use in the XAML each class defined within our namespace (in my case, Articolo). We then define three DataGridColumns, each one bound with a specific property of our class. Then, with the tag local, we could proceed in defining a variable number of records, setting each of its parameters. The code above will produce the following window.
From a situation like that, we could add other rows code-side, using the Item collection exposed by DataGrid. Assuming our DataGrid's name is DataGrid1, we could, for example, add a second row to it, using in the Loaded event something like that.
- DataGrid1.Items.Add( New Articolo("CODE_02", "MSDN TEST 2") )
Running now our program will result in the following window.
Please note: as far as there are dynamically or statically generated rows, in other words the Item collection is not empty, it's not possibile to use the ItemsSource property discussed above. In order to bind a structure to our DataGrid, we must first empty Item collection (for example, with something like: DataGrid1.Items.Clear()), and only then we'll be able to successfully set the ItemsSource property.
Conclusion
Obviously, we had discussed here a small example, compared to the potential offered by such technology: nonetheless, I hope it was useful for those approaching this method for the first time. Happy coding.