Home > Sivlerlight 3 > DataBinding in Nested Controls

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>

Here is what it looks like.

nestedbindings

About these ads
Categories: Sivlerlight 3
  1. Mike Greenway
    August 28, 2009 at 7:32 pm

    Simple.
    and, As it should be.

    Thanks

  2. Paul DeFrees
    August 31, 2009 at 4:30 pm

    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.

    • lee
      August 31, 2009 at 5:17 pm

      Hi,
      I did not thoroughly test it. let me know how it works or if it doenst work in all scenarios

  3. jv9
    September 11, 2009 at 10:15 pm

    Any sample code for this topic?

  4. lee
    September 11, 2009 at 10:21 pm

    All the code is in the post. just copy the classes and xaml into the page

    • jv9
      September 11, 2009 at 10:31 pm

      Thanks.

  1. October 2, 2010 at 7:49 pm

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

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: