DataBinding in Nested Controls

Databinding can get tricky in a hurry depending on the layout we have and the model we are binding to. Dan Wahlin suggests a way in this post

Here is another way without any code or additional classes.

DataContext is setup to be a instance of data, which has list of customers(having name and city as properties) and an array of strings for cities. we would like to display customers in datagrid and display list of Cities in ComboBox and select the appropriate city for the customer

namespace SilverlightApplication2
    public partial class MainPage : UserControl
        public MainPage()
            this.DataContext = new Data();            
    public class Data
        public List<Customer> Customers { get; set; }
        public string[] Cities { get; set; }
        public Data()
            Customers = new List<Customer>();
            for (int i = 0; i < 10; i++)
                Customers.Add(new Customer { Name=”Customer..” + i.ToString(), City=”City..”+i.ToString() });

            Cities = new string[10];
            for (int i = 0; i < 10; i++)
                Cities[i] = “City..” + i.ToString();


    public class Customer
        public string Name { get; set; }
        public string City { get; set; }

the UI is set up like this. just a DataGrid with DataGridTextColumn for Name of the customer and ComboxBox for cities in a  DataGridTemplateColumn

Added a ContentControl( could be any control) to Resources which will have the same datacontext as the Root (Page/UserControl)

The ComboBox’s ItemsSource is set as shows in Bold, setting the source to the Resource and the path to its DataContext (in this case it will point to object of type “Data”) which has a property Cities. SelectedItem of the ComboBox is set to City of the customer

<UserControl xmlns:data=”clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data”  x:Class=”SilverlightApplication2.MainPage”
    mc:Ignorable=”d” d:DesignWidth=”640″ d:DesignHeight=”480″>
        <ContentControl x:Key=”cc1″ ></ContentControl>
    <Grid x:Name=”LayoutRoot”>
        <data:DataGrid AutoGenerateColumns=”False”
                       ItemsSource=”{Binding Path=Customers}” Name=”datagrid1″>
                <data:DataGridTextColumn Width=”150″ Header=”Name”  Binding=”{Binding Name}”/>
                <data:DataGridTemplateColumn Width=”150″ Header=”City”>
                            <ComboBox SelectedItem=”{Binding City}”
                                      ItemsSource=”{Binding Source={StaticResource cc1}, Path=DataContext.Cities}” ></ComboBox>

Here is what it looks like.



7 thoughts on “DataBinding in Nested Controls

  1. Sheesh. I spent way too much time wracking my brains over this for a large project I’m working on and came up with a solution similar to Dan’s. I’m going to give this a try and see if it works in all my scenarios. Thanks for the post.

Leave a Reply

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

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

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s