Data-binding is often thought of as an advanced topic, but there really is no reason for that. data-binding is
Note to Silverlight, WPF and Windows Phone Programmers: Nothing Here Is New. Data-binding in Windows 8 works exactly as you expect.
The basic idea behind data-binding couldn’t be simpler: we are going to provide values to UIElements based on the values of objects or of other UIElements. In this first tutorial, we’ll keep it simple and bind the value of POCO (Plain Old CLR Objects) to UI elements.
For example, if I have an object that represents an Employee, and that Employee object has two public properties, Name and Title, I may want to bind those properties to TextBlocks so that I can display them easily without hard-coding the values. In that case, the Employee(POCO object) is the source and the TextBlocks (UIElements) are the targets of the binding.
We begin by creating a new Windows 8 project. Within that project, we create a new class Employee.cs
class Employee { public string Name { get; set; } public string Title { get; set; } public Employee( string name, string title ) { Name = name; Title = title; } public static Employee GetEmployee() { var emp = new Employee( "Tom", "Developer" ); return emp; } }
The Employee class has two public properties, Name and Title. We always bind to public properties. This class also has a static method, GetEmployee, which generates a new Employee instance. This substitutes for retrieving an Employee object from, e.g., a database.
Here is how we bind to these two properties in the XAML,
<StackPanel Name="xDisplay"> <StackPanel Orientation="Horizontal"> <TextBlock Text="Name:" /> <TextBlock Margin="5,0,0,0" Text="{Binding Name}" /> </StackPanel> <StackPanel Orientation="Horizontal"> <TextBlock Text="Title:" /> <TextBlock Margin="5,0,0,0" Text="{Binding Title}" /> </StackPanel> </StackPanel>
We bind to the Name and Title properties, but of which object? It may be that there are many Employee objects around at any given moment. The answer is found in the DataContext. This can be set in the XAML or in the code; here we set it in code behind file, MainPage.xaml.cs,
protected override void OnNavigatedTo(NavigationEventArgs e) { xDisplay.DataContext = Employee.GetEmployee(); }
The DataContext of the StackPanel is set to the result of calling the static method GetEmployee. The method returns a single Employee object whose properties we can now use to bind to the TextBlocks. Notice that the TextBlocks “inherit” the DataContext of any object higher in the visual tree, unless they override it with their own DataContext.
Next up, Windows 8 - Two-Way Data Binding.
If you are eager to start building your first Windows 8 app, make sure to check Telerik Windows 8 UI controls.
[This article is based in part on material from my forthcoming book XAML For Windows 8: Read Me First]
Jesse Liberty has three decades of experience writing and delivering software projects. He is the author of 2 dozen books and has been a Distinguished Software Engineer for AT&T and a VP for Information Services for Citibank and a Software Architect for PBS. You can read more on his personal blog or follow him on twitter