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.



Alignment of label in Dataform

One of the forum users was looking to align the label in the Datafield of DataForm with the following code

        <TextBlock Text=”Categories” VerticalAlignment=”Top” />
        <StackPanel x:Name=”listCategories” />

sure enough, it doesnt work. I am not sure if there is  easier way, but styling the Label does work, changes made to the default style in bold


<Style x:Key=”LabelStyle1″ TargetType=”dataInput:Label”>
         <Setter Property=”IsTabStop” Value=”False”/>
         <Setter Property=”Template”>
           <ControlTemplate TargetType=”dataInput:Label”>
            <StackPanel Orientation=”Horizontal”>
              <VisualStateGroup x:Name=”CommonStates”>
               <VisualState x:Name=”Normal”/>
               <VisualState x:Name=”Disabled”/>
              <VisualStateGroup x:Name=”ValidationStates”>
               <VisualState x:Name=”Valid”/>
               <VisualState x:Name=”Invalid”/>
              <VisualStateGroup x:Name=”RequiredStates”>
               <VisualState x:Name=”NotRequired”/>
               <VisualState x:Name=”Required”>
                 <ObjectAnimationUsingKeyFrames Duration=”0″ Storyboard.TargetName=”ContentControl” Storyboard.TargetProperty=”FontWeight”>
                  <DiscreteObjectKeyFrame KeyTime=”0″ Value=”SemiBold”/>
             <Border Background=”{TemplateBinding Background}” BorderBrush=”{TemplateBinding BorderBrush}”
       BorderThickness=”{TemplateBinding BorderThickness}” CornerRadius=”2″ Padding=”{TemplateBinding Padding}” VerticalAlignment=”Top”>
              <ContentControl x:Name=”ContentControl” FontFamily=”{TemplateBinding FontFamily}”
        FontSize=”{TemplateBinding FontSize}” FontStretch=”{TemplateBinding FontStretch}” FontWeight=”{TemplateBinding FontWeight}”
        HorizontalContentAlignment=”{TemplateBinding HorizontalContentAlignment}”
        IsTabStop=”False” VerticalContentAlignment=”{TemplateBinding VerticalContentAlignment}”
        Cursor=”{TemplateBinding Cursor}” HorizontalAlignment=”{TemplateBinding HorizontalAlignment}”
        VerticalAlignment=”{TemplateBinding VerticalAlignment}” Content=”{TemplateBinding Content}”
        ContentTemplate=”{TemplateBinding ContentTemplate}” Foreground=”{TemplateBinding Foreground}”/>

<dataFormToolkit:DataField   LabelStyle=”{StaticResource LabelStyle1}”  >
                    <TextBlock Text=”Categories”  />                               
              <StackPanel x:Name=”listCategories”>
                 <CheckBox Content=”Checkbox1″/>
                 <CheckBox Content=”Checkbox2″/>
                 <CheckBox Content=”Checkbox3″/>
                 <CheckBox Content=”Checkbox4″/>
                 <CheckBox Content=”Checkbox5″/>