locked
How do you bind to a DataGrid ItemsSource dependency property within a user control? RRS feed

  • Question

  • All,

    I've looked at the many forum answers to this problem, but they are all inconsistent, incomplete, and confusing. Please can someone provide a simple complete solution to the example problem below?

    My problem is I am trying to encapsulate a DataGrid (WPFtoolbox) control within a usercontrol, and then externally try and update the user control using an observable collection. I just can't get the bindings right i.e. using a dependency property and having it update the usercontrol's ItemsSource.  All I want is a oneway update to the usercontrol.

    Simple Example of what I am trying accomplish:

    ObservableCollection<Person>

    class Person

    {

          string Firstname; // Grid 1st column

          string Lastname; // Grid 2nd column

    }

    I want to update the usercontrol (the DataGrid control within the usercontrol) when I add the Person to the ObservableCollection<Person> from within WPF main Window.xmal. code behind class.

    Your help is much appreciated.

    sawaii

     

    **************************************

    It's been 8 hrs and no replys .... wow this must be hard? ... Not one person knows how to do this?

    sawaii

     

     

     

     

     

     

     



    Friday, July 8, 2011 6:08 PM

Answers

  • Hi Sawaii,

    To resolve this problem, I recommend to expose a dependency property on the UserControl, and bind the DataGrid's ItemsSource property to that custom dependency property. Then you will be able to use that custom dependency property of the UserControl to update the DataGrid's ItemsSource.

    Here is a simple sample.

    <UserControl x:Class="Samples.UserControl1"
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
           xmlns:local="clr-namespace:Samples">
      <Grid>
        <DataGrid ItemsSource="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type local:UserControl1}}, Path=ItemsSource, Mode=OneWay}"/>
      </Grid>
    </UserControl>
    

     

    using System.Windows;
    using System.Windows.Controls;
    using System.Collections;
    
    namespace Samples
    {
      public partial class UserControl1 : UserControl
      {
        public UserControl1()
        {
          InitializeComponent();
        }
    
        public IEnumerable ItemsSource
        {
          get { return (IEnumerable)GetValue(ItemsSourceProperty); }
          set { SetValue(ItemsSourceProperty, value); }
        }
    
        public static readonly DependencyProperty ItemsSourceProperty =
          DependencyProperty.Register("ItemsSource", typeof(IEnumerable), typeof(UserControl1));
      }
    }
    

     

    Then you can just use UserControl1.ItemsSource property to update the nested DataGrid's ItemsSource property.

    Best regards,

     


    Min Zhu [MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    • Marked as answer by Min Zhu Thursday, July 14, 2011 2:42 AM
    Monday, July 11, 2011 5:14 AM
  • In the UserControl do this for datagrid-

     ItemsSource="{Binding ElementName=b,Path=DataContext }" where "b" is name of usercontrol.

     

    In main form do this for usercontrol-

    <y:UserControl1 x:Name="d" DataContext="{Binding ElementName=bb, Path=abc}" /> where bb is the name main window and abc is the observable collection at main window.

     

    • Marked as answer by Min Zhu Thursday, July 14, 2011 2:42 AM
    Sunday, July 10, 2011 4:48 PM

All replies

  • HI Sawaii,

               " I want to update the usercontrol (the DataGrid control within the usercontrol) when I add the Person to the ObservableCollection<Person> from within WPF main Window.xmal. code behind class."

     

                 i am not clear about your update...? is it like that when you will enter some data in main window it will add in datagrid?

     



    Regards atik sarker
    Saturday, July 9, 2011 5:22 AM
  • Thanks for replying,

    What I mean by update is by placing an object (Person) in th ObservableCollection that is instanciated in the windows.xaml.cs file. No user inputs to the DataGrid/window. I am receiving external data over a netwrk interface and want my application to comsume the data and display it to the user via the DataGrid control that is encapsulated as a user control. Right now all my window elememts (controls) are all combined in the same window.xaml.cs file where all the controls properties are exposed in the same scope, and I can reference them with the window.xaml.cs file. but  I would like to separate them out as usercontrols and reference them in the window.xaml.cs. file. That way I don't need to cut and past the markup for each control if I need to resue it again on the same window, or use it as a user control library for another applicattion. 

    Problem is, when I put the DataGrid control into a usercontrol, I lose the ability bind to DataGrid ItemsSource property, etc, with an observablecollection in the window.xmal.cs. I've tried to use a dependency property as some of the examples on this site and other sites have suggested, but they either don't work, are inconsistent, or not complete.

    I hope this helps,

    Sawaii

    Saturday, July 9, 2011 3:55 PM
  • In the UserControl do this for datagrid-

     ItemsSource="{Binding ElementName=b,Path=DataContext }" where "b" is name of usercontrol.

     

    In main form do this for usercontrol-

    <y:UserControl1 x:Name="d" DataContext="{Binding ElementName=bb, Path=abc}" /> where bb is the name main window and abc is the observable collection at main window.

     

    • Marked as answer by Min Zhu Thursday, July 14, 2011 2:42 AM
    Sunday, July 10, 2011 4:48 PM
  • Hi Sawaii,

    To resolve this problem, I recommend to expose a dependency property on the UserControl, and bind the DataGrid's ItemsSource property to that custom dependency property. Then you will be able to use that custom dependency property of the UserControl to update the DataGrid's ItemsSource.

    Here is a simple sample.

    <UserControl x:Class="Samples.UserControl1"
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
           xmlns:local="clr-namespace:Samples">
      <Grid>
        <DataGrid ItemsSource="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type local:UserControl1}}, Path=ItemsSource, Mode=OneWay}"/>
      </Grid>
    </UserControl>
    

     

    using System.Windows;
    using System.Windows.Controls;
    using System.Collections;
    
    namespace Samples
    {
      public partial class UserControl1 : UserControl
      {
        public UserControl1()
        {
          InitializeComponent();
        }
    
        public IEnumerable ItemsSource
        {
          get { return (IEnumerable)GetValue(ItemsSourceProperty); }
          set { SetValue(ItemsSourceProperty, value); }
        }
    
        public static readonly DependencyProperty ItemsSourceProperty =
          DependencyProperty.Register("ItemsSource", typeof(IEnumerable), typeof(UserControl1));
      }
    }
    

     

    Then you can just use UserControl1.ItemsSource property to update the nested DataGrid's ItemsSource property.

    Best regards,

     


    Min Zhu [MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    • Marked as answer by Min Zhu Thursday, July 14, 2011 2:42 AM
    Monday, July 11, 2011 5:14 AM