Search code examples
silverlightmvvmdata-bindinguielement

Silverlight: setting data context for a grid or UIElement not working


I am missing something on what should be a straight forward binding and I'm hoping someone can point me in the right direction.

I have a SL app which has a view model named PeopleView Model which contains a number or properties for a person ( name address etc) the page is comprised of a usercontrol , a text box and a gridview

The user control code

        <frm:LabelFieldContainer Width="145" 
                             Height="42"
                             Margin="12,12,0,0"
                             HorizontalAlignment="Left"
                             VerticalAlignment="Top"
                             MyContent="{Binding FirstName}"
                             MyLabel="{StaticResource lblFirstName}" />
    <frm:LabelFieldContainer Width="178" 
                             Height="42"
                             Margin="166,12,0,0"
                             HorizontalAlignment="Left"
                             VerticalAlignment="Top"
                             MyContent="{Binding LastName}"
                             MyLabel="{StaticResource lblLastName}"  />
</Grid>

this container is made up of another user control which binds to a resource dictionary to pull the label name and then a content field which is to be bound to the property returned from my view model (MyContent). the goal here was to create a generic control that displayed the label name and value from the collection. ie. First Name: John Currently the label works in binding to the resource dictionary but the binding for the value ( MyContent) returns nothing.

Here is the xaml for the MainPage.xaml

<Grid x:Name="LayoutRoot" Background="White">
    <uc:AddressContainer />
    <TextBlock Width="200" 
               Height="50"
               Margin="101,71,99,179"
               FontSize="12"
               Foreground="Black"
               Text="{Binding LastName}" />
    <telerik:RadGridView Name="GridView1" Margin="0,140,0,6"
                         HorizontalAlignment="Stretch"
                         VerticalAlignment="Stretch"
                         AutoGenerateColumns="True"
                         IsFilteringAllowed="True">
    </telerik:RadGridView>

and the code behind for mainpage.xaml is

    public partial class MainPage : UserControl
{
    //binding of view model to user control
    public PeopleViewModel PeopleView
    {
        get { return (PeopleViewModel)GetValue(PeopleViewProperty); }
        set { SetValue(PeopleViewProperty, value); }
    }

    // Using a DependencyProperty as the backing store for PeopleView.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty PeopleViewProperty =
        DependencyProperty.Register("PeopleView", typeof(PeopleViewModel), typeof(MainPage), new PropertyMetadata(new PeopleViewModel()));


    public MainPage()
    {
        InitializeComponent();
        this.LayoutRoot.DataContext = PeopleView.AllPeople;  //tried this but no luck
        this.GridView1.ItemsSource = PeopleView.AllPeople; //bound to a grid view for testing returns 

    }

I inserted a grid just for testing and it returns the values fine. However, I have tried to bind the DataContext of the main view to the collection so that I could then populate the bound fields in either the usercontrol or the test textblock I have added within the main page.

Can someone point me in the right direction as to how to properly bind UIElements to a collection outside of ItemsSource. I have always done this for grids or list box items with no issue but now in trying to represent something (a single field in the UI) I am getting stuck. UPDATE:

After a short mental lapse I relaized since I was binding a collection I would place the usercontrol into a listbox here is the updated mainpage xaml

    <Grid x:Name="LayoutRoot" Background="White">
    <ListBox ItemsSource="{Binding}" Margin="0,0,0,166">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <uc:AddressContainer />
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
    <telerik:RadGridView Name="GridView1" Margin="0,140,0,6"
                         HorizontalAlignment="Stretch"
                         VerticalAlignment="Stretch"
                         AutoGenerateColumns="True"
                         IsFilteringAllowed="True">
    </telerik:RadGridView>

and I updated the data context within the mainpage.xaml.cs file to

        public MainPage()
    {
        InitializeComponent();
        this.DataContext = PeopleView.AllPeople;  //updated here  
    }

I am getting an accurate return of records (2) within the list box however binding is still not taking place within the user control (content fields) to display the values returned within the collection

Any pointers would still be appreciated.


Solution

  • Found the answer. In previous testing I had a datasource set within the UserControl to the base Model. Don't ask why... butt that binding was overriding the binding being set from the main page. After removing that data reference the UI now properly binds of the user control to the collection.