Databinding in XAML for newbies (like me)

I never worked before with XAML and WPF, so I am looking to master the fundamentals concepts as soon I can to avoid stopper on the project I am working on; if you are a newbie on MVVM and XAML is a good idea to be familiar with the inspiring concept behind the separation of concerns.

XAML is a markup language where that uses controls and panels. The controls can contain others controls without changing
the behaviour of the controls itself. What does it mean? It means the behaviour of what the parent control can do is kept whatever it contains; controls behaviours doesn’t change when we change the layout, with a clear separation of them. The hierarchical structure defines the so-called visual tree, made up of controls and panels; the latter to define the layout of the XAML view. To make possible this, we need to change the idea of how bind data to the Presentation layer, the link between the View and the Model is done through the Binding in the XAML file, defining where to bind the Model and what to bind (Property of the Business Objects for example). Defining a “signpost” where to place the data at runtime, it make possible to change the layout/view without writing specific code… this is separation of concerns

Ex

My view is a rectangle and in the middle I want to show the Name of an object of the type Person

My view is a ellipse and in the middle I want to show the Name of an object of the type Person

Defining things with signpost (Binding) make this easier whatever the View is at runtime:

The concepts of Binding together with the Visual Tree makes possible to define a DataContext that will be inherited in the visual tree by each controls in it; this is very powerful you can refer to the Model anywhere you want and plus there is no type checking at compile time; the advantage is that the View doesn’t care to know which Model is used at runtime, the Model needs only to expose the property with the name in the XAML

<Ellipse Fill=”{Binding Color}”></Ellipse>

<Rectangle Fill=”{Binding Color}”></Rectangle>

So never so again something like

textBox1.Text = MyObject.Prop1;

but

<TextBox Text=”{Binding Prop1}”></TextBox>

+

this.DataContext = MyObjects // of anytype having at least Prop1 in the property defintion…

A very good starting point I found on the web are:

NYC DevReady: MVVM Content

	Title	Speaker	Content Links
Session 1	Demystifying XAML: Achieving Your Moment Of Clarity	Miguel Castro	Video Recording Presentation Slides Demo Code
Session 2	Programming with MVVM – Part 1	Miguel Castro	Video Recording Presentation Slides Demo Code
Session 3	Programming with MVVM – Part 2	Miguel Castro	Video Recording Presentation Slides Demo Code
Session 4	How Using MVVM Saved My Butt and How Laziness Came Back To Bite Me	Danilo Diaz	Video Recording Presentation Slides
Session 5	Leveraging MVVM Inside PRISM	Seth Juarez	Video Recording Presentation Slides

I suggest spending some time watching the recording, it will save a lot of time and it will help you to put on track (the right one) from the beginning

In attachment a VS2010 example that shows a Binding example in a listbox defining a template, note the behaviour of the listbox doesn’t change even the listboxitem are quite complex…

The Model is given by the class NationsRepository : List<Nation>

All the magic happens here

In the code behind (but not only here) we define the DataContext, where the data comes from at runtime,

NationsRepository.NationsRepository nationsRepository = new NationsRepository.NationsRepository();
this.DataContext = nationsRepository.GetSomePersistenData();

The XAML where we define Layout using Controls and Panels; note the ListBox Items are defined as a complex control, but still the behaviour is the change, check the screenshots:

<ListBox ItemsSource="{Binding}" >
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel  Orientation="Horizontal" >
                        <Rectangle  Height="16" Width="16" Margin="1,1,1,1" Fill="Red"></Rectangle>
                        <Label Content="{Binding Name}" FontStyle="Italic"></Label>
                        <TextBox Text="{Binding Population, StringFormat=Population: {0:N}}" />
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

Ex:

You can click on the listbox items as expected)

You can click in the textbox in the listbox item

Tags: databinding, example, newbie, wpf, xaml