WPF Short: Databinding Basics & DataTemplates (1)

In this WPF short we’ll take a look at databinding in WPF, a fundamental and big part of the WPF framework, and something I’ll expand more on in future WPF shorts. The majority of the stuff applies to Silverlight and Windows 8 development as well. The sample app we’ll be developing will be very, very small just do demonstrate the points and make the code easier to read.

In this introductory tutorial we’ll display employees in a listbox using databinding. Simple but essential. First the regular XAML UI, note the ItemsSource property of the listbox which is set to binding meaning the listbox’s data will be bound to a collection. This property is redundant as it will be set later in code, but it’s good practice.


<ListBox Height="232" HorizontalAlignment="Left" Margin="10,41,0,0" Name="lstEmployees"  VerticalAlignment="Top" Width="481" />

Let’s first be good boys and girls and wrap the employee structure in a class, and add it to a generic collection. We’ll set this collection as the ItemsSource of the listbox.


List<Employee> EmployeeList = new List<Employee>();

public MainWindow()
{
InitializeComponent();

EmployeeList.Add(new Employee() {  Name = "Nick", Role = Role.Admininstrator});
EmployeeList.Add(new Employee() { Name = "Nack", Role = Role.Employee });
lstEmployees.ItemsSource = EmployeeList;
}

public class Employee
{
public string Name { get; set; }
public Role Role { get; set; }
}

public enum Role
{
 Employee, Admininstrator
}

When you run the app, you’ll see something like the following:

The databinding clearly works, as we are clearly binding to two instances of the Employee class. The UI, however, doesn’t know how exactly to display this data and simply uses the ToString() method of the Employee instance.

For those coming from a WinForms/VBA background, the following might boggle your mind: the ListBox can display every possible control inside a ListBoxItem. A good example of this would be Twitter clients, which display a Twitter user’s profile picture, name, tweet, and sometimes additional buttons and commands, inside a single listbox item. This is all done with DataTemplates.

Datatemplates are a way of telling WPF of how to lay out items within a ListBoxItem. Remember that in the screenshot above, you see that each listbox item is an instance of Employee, a DataTemplate allows you to access the public properties of that class in XAML to make up your UI, like so:

<DataTemplate x:Key="lstEmployeeTemplate">

<StackPanel Margin="5">
<TextBlock Text="{Binding Name}" FontSize="24"/>
<TextBlock Text="{Binding Role}"/>
</StackPanel>
</DataTemplate>

Now we tell the listbox to use this DataTemplate by setting the ItemTemplate property.

<ListBox Height="232" HorizontalAlignment="Left" Margin="10,41,0,0" Name="lstEmployees" ItemTemplate="{StaticResource lstEmployeeTemplate}" VerticalAlignment="Top" Width="481" />

When you run the application now, you’ll see the ListBoxItems get displayed as we instructed to. You’ll also see I’ve added a subtle border at the bottom of each ListBoxItem, try to do that yourself 😉

For those experienced with WPF you’ve not seen anything new here, but it’s important to know that all of the above works on both Windows Phone and Windows 8, broadening your field of reach. For those new to WPF, please experiment with DataTemplates and DataBinding as they’re very powerful. I hope I didn’t overly explain things that might look normal to you.

In the next WPF shorts we’ll dig deeper in some other core WPF/XAML features, building on the small app we made here, and wiring up the Change/Add buttons. See you all, and if you’re on the Windows 8 Developer Preview, make sure to test the above with the ListView!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s