DataBinding in Nested Controls

 

Ref: http://leeontech.wordpress.com/2009/08/27/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()
        {
            InitializeComponent();
            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”
    xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation“
    xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml“
    xmlns:d=”http://schemas.microsoft.com/expression/blend/2008“
             xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006“
    mc:Ignorable=”d” d:DesignWidth=”640″ d:DesignHeight=”480″>
<UserControl.Resources>
        <ContentControl x:Key=”cc1″ ></ContentControl>
    </UserControl.Resources>
    <Grid x:Name=”LayoutRoot”>
        <data:DataGrid AutoGenerateColumns=”False”
                       ItemsSource=”{Binding Path=Customers}” Name=”datagrid1″>
            <data:DataGrid.Columns>
                <data:DataGridTextColumn Width=”150″ Header=”Name”  Binding=”{Binding Name}”/>
                <data:DataGridTemplateColumn Width=”150″ Header=”City”>
                    <data:DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
<ComboBox SelectedItem=”{Binding City}”
                                      ItemsSource=”{Binding Source={StaticResource cc1}, Path=DataContext.Cities}” ></ComboBox>
                        </DataTemplate>
                    </data:DataGridTemplateColumn.CellTemplate>
                </data:DataGridTemplateColumn>
            </data:DataGrid.Columns>
        </data:DataGrid>
    </Grid>
</UserControl>