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

3 thoughts on “Databinding in XAML for newbies (like me)

  1. Pingback: Link Resource # 33 : DESC 03-DESC 08 « Dactylonomy of Web Resource

  2. Pingback: Link Resource # 34 : DESC 08 – DESC 11 « Dactylonomy of Web Resource

  3. Pingback: Link Resource # 34 : Desc 08-Desc 11 « Dactylonomy of Web Resource

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