Silverlight 3 – Binding POCO objects to XAML

Obvious, really, but I spent ages chasing down how to bind some kind of POCO to a XAML display;

  <Grid x:Name="LayoutRoot">

        <Grid.RowDefinitions>
            <RowDefinition Height="300" />
            <RowDefinition Height="auto" />
            <RowDefinition Height="auto" />
            <RowDefinition Height="auto"/>
            <RowDefinition Height="auto"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="300"/>
            <ColumnDefinition Width="100"/>
            <ColumnDefinition Width="auto"/>
        </Grid.ColumnDefinitions>
            <TextBlock Text="Name" Grid.Row="1" Grid.Column="1"/>
            <TextBlock Text="Gender" Grid.Row="2" Grid.Column="1"/>
            <TextBlock Text="Age" Grid.Row="3" Grid.Column="1"/>
            <TextBlock Text="DOB" Grid.Row="4" Grid.Column="1"/>

        <Border BorderThickness="1" BorderBrush="Black" Background="AliceBlue" CornerRadius="10" Grid.Row="1" Grid.Column="2">
            <TextBlock x:Name="name" Text="{Binding Name}" Margin="5,5,5,5" />
            </Border>
        <Border BorderThickness="1" BorderBrush="Black" Background="AliceBlue" CornerRadius="10" Grid.Row="2" Grid.Column="2">
            <TextBlock x:Name="gender" Text="{Binding Gender}" Margin="5,5,5,5" />
        </Border>

        <Border BorderThickness="1" BorderBrush="Black" Background="AliceBlue" CornerRadius="10" Grid.Row="3" Grid.Column="2">
            <TextBlock x:Name="age" Text="{Binding Age}" Margin="5,5,5,5" />
        </Border>

      <Border BorderThickness="1" BorderBrush="Black" Background="AliceBlue" CornerRadius="10" Grid.Row="4" Grid.Column="2">
            <controls:DatePicker x:Name="dob" Text="{Binding DOB}" IsEnabled="False" Margin="5,5,5,5" />
        </Border>

    </Grid>

And I could not figure out why it was refusing to recognise the object I was passing to it. Then I found that it is impossible to bind to a data source in XAML. You need to bind the data context in code;

    public partial class MainPage : UserControl
    {
        Person person = new Person { Name = "Scott", Gender = 'M', Age = 43, DOB=new DateTime(1966, 7, 12) };

        public MainPage()
        {
            InitializeComponent();

            LayoutRoot.DataContext = person;
        }
    }

 

Ho hum. Three hours down the drain…

Leave a Reply

 

 

 

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <font color="" face="" size=""> <span style="">