The DataSource for a DataBoundRow needs to provide all the data for that row. Usually
the object will have different properties for each cell to use in binding display
data. The list below shows how an object with StartDate, DrugDetails and Reason
properties might be used by the cell templates for three columns:
- Column1 might use : <TextBlock> Text="{Binding StartDate}" ...
- Column2 might use : <TextBlock> Text="{Binding DrugDetails}" ...
- Column3 might use : <TextBlock> Text="{Binding Reason}" ...
The data can be converted if needed; for example, if a DataSource for a row is an
object that consists of Name / Value pairs, like a dictionary, you may wish to convert
the data as it is rendered.
The sample uses a dictionary to store its data as it allows other data values to
be added without the need to create strongly typed properties for them. The list
below shows how the same three values could be shown using a converter for a cell
that has a DataSource of type dictionary:
- Column1 might use : <TextBlock> Text="{Binding Converter={StaticResource
dictionaryToStringConverter}, ConverterParameter='StartDate'}" ...
- Column2 might use : <TextBlock> Text="{Binding Converter={StaticResource
dictionaryToStringConverter}, ConverterParameter='DrugDetails'}" ...
- Column3 might use : <TextBlock> Text="{Binding Converter={StaticResource
dictionaryToStringConverter}, ConverterParameter='Reason'}" ...
If you require a cell to have more than a single layout, you can use this approach
to allow data in the DataSource to specify a layout. The WrapDataGrid above uses
this to provide different layouts for the cells in the Drug Details column.
Below is the XAML code that uses a converter which finds and loads a DataTemplate
per row. The TemplateName is provided in a dictionary in this example. This gives
the flexibility of allowing every row in this column (that is to say, each cell
in that column) to provide a custom layout. The DataTemplate must be defined within
the application at the correct scope so that it can be found by the converter.
<WrapDataGridColumn.CellTemplate>
<DataTemplate>
<ContentControl
Content="{Binding Converter={StaticResource dictionaryToDataTemplateConverter},
ConverterParameter='TemplateName'}" />
</DataTemplate>
</WrapDataGridColumn.CellTemplate>
Using this approach, the columns cells can be rendered with different templates.
Below are two Microsoft Health CUI compliant templates for the MedicationsListView
control Drug Details column, as used on this page.
<DataTemplate x:Key="NameStrengthFrequency">
<Grid Grid.Column="0" Grid.Row="1" Height="Auto" Width="Auto">
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" Grid.Row="1" VerticalAlignment="Top">
<ctl:WrapPanel >
<TextBlock FontWeight="Bold" Text="{Binding Converter={StaticResource
dictionaryToStringConverter}, ConverterParameter='DrugName'}"/>
<TextBlock Text="{Binding Converter={StaticResource
dictionaryToStringConverter}, ConverterParameter='StrengthSeparator'}"/>
<TextBlock Text="{Binding Converter={StaticResource
dictionaryToStringConverter}, ConverterParameter='Strength'}"/>
<TextBlock Text="{Binding Converter={StaticResource
dictionaryToStringConverter}, ConverterParameter='FormNameSeparator'}"/>
<TextBlock Text="{Binding Converter={StaticResource
dictionaryToStringConverter}, ConverterParameter='FormName'}"/>
</ctl:WrapPanel>
</Grid>
<Grid Grid.Column="0" Grid.Row="2" VerticalAlignment="Top">
<ctl:WrapPanel >
<StackPanel Orientation="Horizontal" VerticalAlignment="Bottom">
<TextBlock FontFamily="Courier New" FontSize="16"
Margin="0,2,0,0" Text="{Binding
Converter={StaticResource dictionaryToStringConverter},
ConverterParameter='DoseLabel'}" Foreground="#336699"/>
<TextBlock Text="{Binding Converter={StaticResource dictionaryToStringConverter},
ConverterParameter='DOSEQTY'}"/>
</StackPanel>
<TextBlock Text="{Binding Converter={StaticResource
dictionaryToStringConverter}, ConverterParameter='DOSEQTYSeparator'}"/>
<TextBlock Text="{Binding Converter={StaticResource
dictionaryToStringConverter}, ConverterParameter='RouteName'}"/>
<TextBlock Text="{Binding Converter={StaticResource
dictionaryToStringConverter}, ConverterParameter='RouteNameSeparator'}"/>
<TextBlock Text="{Binding Converter={StaticResource
dictionaryToStringConverter}, ConverterParameter='Frequency'}"/>
</ctl:WrapPanel>
</Grid>
</Grid>
</DataTemplate>
<DataTemplate x:Key="NameFormFrequency">
<Grid Grid.Column="0" Grid.Row="1" Height="Auto" Width="Auto">
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" Grid.Row="1" VerticalAlignment="Top">
<ctl:WrapPanel>
<TextBlock TextWrapping="Wrap" Text="{Binding Converter={StaticResource
dictionaryToStringConverter}, ConverterParameter='DrugName'}"/>
<TextBlock Text="{Binding Converter={StaticResource
dictionaryToStringConverter}, ConverterParameter='FormNameSeparator'}"/>
<TextBlock Text="{Binding Converter={StaticResource
dictionaryToStringConverter}, ConverterParameter='FormName'}"/>
</ctl:WrapPanel>
</Grid>
<Grid Grid.Column="0" Grid.Row="2" VerticalAlignment="Top">
<ctl:WrapPanel>
<StackPanel Orientation="Horizontal" VerticalAlignment="Bottom">
<TextBlock FontFamily="Courier New" Margin="0,2,0,0"
FontSize="16" Text="{Binding
Converter={StaticResource dictionaryToStringConverter},
ConverterParameter='DoseLabel'}" Foreground="#336699"/>
<TextBlock Text="{Binding Converter={StaticResource
dictionaryToStringConverter}, ConverterParameter='DOSEQTY'}"/>
</StackPanel>
<TextBlock Text="{Binding Converter={StaticResource dictionaryToStringConverter},
ConverterParameter='DOSEQTYSeparator'}"/>
<TextBlock Text="{Binding Converter={StaticResource
dictionaryToStringConverter}, ConverterParameter='RouteName'}"/>
<TextBlock Text="{Binding Converter={StaticResource
dictionaryToStringConverter}, ConverterParameter='RouteNameSeparator'}"/>
<TextBlock Text="{Binding Converter={StaticResource
dictionaryToStringConverter}, ConverterParameter='Frequency'}"/>
</ctl:WrapPanel>
</Grid>
</Grid>
</DataTemplate>