Adding controls to an ItemsControl that is placed into a UserControl when we use UserControl?

Question

I need to make a Usercontrol and add it's Controls in the Window that i use it,so i've defined an ItemsControl inside it as shown below:

<UserControl x:Class="MySystem.Controls.DropDownPanel"
      x:Name="this"   ....>
  <Grid>
    <Popup x:Name="popup" ...>
       <Grid>
           <ItemsControl ItemsControl.ItemsSource="{Binding ElementName=this, Path=PanelItems}">
              <ItemsControl.ItemsPanel>
                 <ItemsPanelTemplate>
                    <Grid>

                    </Grid>
                 </ItemsPanelTemplate>
              </ItemsControl.ItemsPanel>
           </ItemsControl>
       </Grid>
     </Popup>
  </Grid>

And i've also created an DependencyProprty(PanelsItem) in the code behind:

  public static readonly DependencyProperty PanelItemsProperty = DependencyProperty.Register("PanelItems"
        , typeof(ObservableCollection<UIElement>)
        , typeof(DropDownPanel));
    public ObservableCollection<UIElement> PanelItems
    {
        get
        {
            return (ObservableCollection<UIElement>)GetValue(PanelItemsProperty);
        }
        set
        {
            SetValue(PanelItemsProperty, value);
        }
    }

And now i wanna add controls like below:

<Windowx:Class="MySystem.UI.View.PeopleView"
         ...
         x:Name="this"
         xmlns:controls="clr-namespace:MySystem.Controls;assembly=MySystem.Controls">
  <Grid>
    <controls:DropDownPanel>
       <commonControls:DropDownPanel.PanelItems>
          //??How to add controls Here??
        </commonControls:DropDownPanel.PanelItems>
    </commonControls:DropDownPanel>
  </Grid>
</Window>

If i add Controls directly in the PanelsItem i'll get this error: {"'Collection property 'MySystem.Controls.DropDownPanel'.'PanelItems' is null'"}

Any Ideas?

Rafal · Accepted Answer · 2013-05-25T11:04:22.760

To solve error {"'Collection property 'MySystem.Controls.DropDownPanel'.'PanelItems' is null'"} just add default value for your dependency property. Replace:

public static readonly DependencyProperty PanelItemsProperty = DependencyProperty.Register("PanelItems"
        , typeof(ObservableCollection<UIElement>)
        , typeof(DropDownPanel));

to:

public static readonly DependencyProperty PanelItemsProperty = DependencyProperty.Register("PanelItems"
    , typeof(ObservableCollection<UIElement>)
    , typeof(DropDownPanel)
    , new PropertyMetadata(new ObservableCollection<UIElement>()));

EDIT: Items are added to PanelItems but they aren't binded with ItemsControl. Instead of:

<ItemsControl ItemsControl.ItemsSource="{Binding ElementName=this, Path=PanelItems}">

use:

<ItemsControl ItemsControl.ItemsSource="{Binding RelativeSource={RelativeSource AncestorLevel=1, AncestorType=UserControl, Mode=FindAncestor}, Path=PanelItems}">

Also, you use Popup control for your ItemsControl. So if you want see added items, you have to set a IsOpen property of Popup to true. After doing that you will be able to do this:

<controls:DropDownPanel DataContext="{Binding DataContext, ElementName=this}">
   <commonControls:DropDownPanel.PanelItems>
      <TextBlock Text="some text" Width="100" Height="25" />
    </commonControls:DropDownPanel.PanelItems>
</commonControls:DropDownPanel>

BTW DataContext="{Binding DataContext, ElementName=this}" isn't necessary here. You just bind DataContext to itself.

It doesn't show the error anymore,but nothing has been solved yet!In the fact nothing will be added to the `ItemsControl`!! — mahboub_mo, May 25 '13 at 08:57
Thankyou so much,It works now,and actually it works with `ElementName` too,so i think your first answer was complete and maybe i did something wrong that i couldn't make it work!Thank you again:) — mahboub_mo, May 25 '13 at 12:03

Adding controls to an ItemsControl that is placed into a UserControl when we use UserControl?

1 Answers1