Creating a line of business (LOB) application usually deals with data, controls that show data, controls that manipulate data, and so on. So far in this chapter, we have dealt with templates and styling of controls. But, there is another aspect of styling and templating, and that is styling and templating of data. When displaying a collection of items in Silverlight, using controls like ListBox or ComboBox, the data is rendered using data template. A data template is used to define how raw data will be presented to a user. To demonstrate the idea of data template, think about a menu hung on the wall of a donut shop. While it is easy to just have prices and names, a better visualization of the menu would be, each donut having a small image next to it. Appetite does start with the eyes after all. This visual organization of data is what data template is all about. Data templates are most commonly used with a control based on ItemsControl, and while it is possible to use data templates with ContentControl as well, we won't deal with it in this book as it's hardly used.
Open Visual Studio 2010, and load the Chapter3-DataTemplates project from the downloadable content of the book at www.packtpub.com. The application is a small menu for a cakes factory and its content is quite simple—you have a Grid control with a background as the host of the application, a TextBox control for the header, a ListBox control for the content, and another TextBox control for the footer. The ListBox control is bound to ObservableCollection of CakeEntities, which contains a title, an image URL, and a price. If you run the application right now, you'll get the result, as shown in the following screenshot:
As the ListBox control doesn't have a template, it uses its default ToString method, and the result is the name of the entity we are binding to ListBox. As this is obviously not what we are after, it's time to define a data template for this application.
As we don't have any other ListBox controls in this application, we will define the data template on the element level. Open the MainPage.xaml file and look for opening the ListBox element. Add the following code snippet below it:
<ListBox.ItemTemplate> <DataTemplate> <StackPanel Orientation="Horizontal"> </StackPanel> </DataTemplate> </ListBox.ItemTemplate>
By using the ItemTemplate attached property, we are telling the ListBox element that it has a data template to look into before it renders the items in ListBox. As with every template, we have to define the root element for the template, and in our case we are using a horizontally-oriented StackPanel. If you run the application right now, you'll notice that ListBox doesn't show anything. The reason for that is that we defined a data template for ListBox that is currently empty. No binding has been done for the content and, thus, Silverlight has got nothing to show. Let's add some content to our template by adding the following code snippet inside the template's root StackPanel:
<Image Source="{Binding ImageUrl}" Width="17" Height="17" Margin="0,0,4,0"/>
<StackPanel>
<TextBlock Text="{Binding Name}" Style="{StaticResource CakeName}"/>
<TextBlock Text="{Binding Price,StringFormat='Price: {0}$'}" Style="{StaticResource CakePrice}"/>
</StackPanel>
The template contains an image, which is bound to the ImageUrl property of the CakeEntity class, a TextBlock element bound to the CakeName property, and another TextBlock element bound to the CakePrice property.
Always remember that the most important thing in a data template is binding. Without binding, you have no way of showing any kind of data. We will dive deep into binding in a later chapter of this book, so don't worry if the concept isn't familiar to you.
Build and run your application, and you should get the result, as shown in the following screenshot:
This is the true power of data templates—taking textual properties, and using binding and XAML, transforming them into a rich graphical representation.
The DataForm control was introduced to Silverlight in order to allow easy creation and manipulation of rich data forms. The DataForm control enables you to display, edit, and update data by using different data templates for each operation. While we are going to focus on templating DataForm in this chapter, we will discuss it in more detail later in this book. In order to use the DataForm control, you have to drag it from the toolbox.
Open the Chapter3-DataForm project from the companion downloadable projects of this book at www.packtpub.com.
Within the project, we have a simple DataForm control that is bounded using code behind the collection of the NewFormEntity objects.
Build and run the project, and you should get the result, as shown in the following screenshot:
This is the default look of the data template. It can also be called NewItemTemplate or CreateTemplate, because it is used when a user wishes to add a new item using DataForm. Let's make some changes to CreateTemplate. Open MainPage.xaml, and look for the DataForm element. Under that element, add the following code snippet:
<toolkit:DataForm.NewItemTemplate> <DataTemplate> </DataTemplate> </toolkit:DataForm.NewItemTemplate>
By using the attached property of NewItemTemplate, we are adding that new template to the DataForm element. Other templates you may use are EditTemplate, which is the template used when the form is in editing mode, and ReadOnlyTemplate, which is used when the item that is displayed is set to read-only. Now that we have specified to DataForm that we wish to have a new item template, it's time to define it. Add the following code snippet under the DataTemplate element:
<StackPanel>
<StackPanel Orientation="Horizontal">
<toolkit:DataField>
<TextBox Text="{Binding FirstName, Mode=TwoWay}" MinWidth="200"/>
</toolkit:DataField>
<toolkit:DataField>
<TextBox Text="{Binding LastName, Mode=TwoWay}" MinWidth="200"/>
</toolkit:DataField>
</StackPanel>
<toolkit:DataField>
<TextBox Text="{Binding EmailAddress, Mode=TwoWay}" />
</toolkit:DataField>
</StackPanel>
The template is quite simple—we have a root StackPanel element, then we have another StackPanel, which has its Orientation property set to Horizontal. Then, for each field we wish to display in the form, we will use the DataField element and TextBox inside of it.
You're not limited to use only the TextBox control. If you have a property that is better suited for another control, such as a CheckBox, you can use it in the template as well.
Note
You may notice that unlike other bindings we used so far in this book, the DataForm binding is a bit different. The use of Mode=TwoWay means that the binding goes bidirectional from the entity to TextBox and also from TextBox back to the entity. We will discuss binding and all its modes later in this book.
If you build and run your application now, you will see that the form looks quite different:
Remember, your template is only as wild as you imagine it, and by using Silverlight, you have the complete freedom of design for it. I would highly recommend you to read Shawn Wildermuth's excellent post on DataForm Templates at http://wildermuth.com/2009/05/25/DataForm_Templates.
A nice trick you can do in Silverlight is to use UserControl as your data template. This can be helpful if you are working with designers, who use Microsoft Blend 4 to create their data templates. Using this method, you can work on the code and wire up the control while the designer works on the UI and graphics.
To demonstrate the process, open the Chapter3-UserControlDataTemplate project in Visual Studio 2010. The project contains an entity with a single property of the SolidColorBrush type, which we will use as the bound property for a rectangle's fill.
Right-click on the Silverlight project, and select Add and then New Item. Select Silverlight User Control, and name it DataTemplateControl. Open the Datatemplatecontrol.xaml file, and add the following line of code between the opening and closing Grid elements:
<Rectangle Fill="{Binding Brush}" Height="20" Width="20"/>
We defined a 20x20 pixels Rectangle element with the Fill property bound to the Brush property. This property comes from the entity class that we will create later.
Build your application so that Silverlight will recognize your new user control and open up MainPage.xaml.
To add a user control to the page, first we have to add its namespace, as we discussed in the previous chapter. Add the following line of code at the top of your UserControl element:
xmlns:local="clr-namespace:Chapter3_UserControlDataTemplate"
Now let's add ListBox to this page. Add the following code snippet under the Grid element:
<ListBox Height="200" Width="200" x:Name="colorsListBox"> <ListBox.ItemTemplate> <DataTemplate> </DataTemplate> </ListBox.ItemTemplate> </ListBox>
There's nothing that we haven't seen so far. We've added ListBox and defined the schema for the data template. All we need to do now is add the user control to act as our data template!
Add the following line of code between the DataTemplate elements:
<local:DataTempalteControl/>
Build and run your application, and you should get the following result:
We've just created a ListBox control with UserControl as its data template. The way it works is pretty straightforward—the UserControl contains a rectangle of a specific size that has its Fill property bound to a property named Brush. When the UserControl is added as the data template of the ListBox, it receives the Brush property from the collection of the EntityClass items that the ListBox control has set as its data source.