This project has moved. For the latest updates, please go here.

Multiple ItemsControl Regions in same XAML view?

Mar 26, 2012 at 6:21 PM

Is it possible to use more than one Region (ItemsControl) on the same XAML page?

I'm getting an "Element is already the child of another element" error using multiple ItemsContol Region Management in Jounce 2.0 / Silverlight 5 and I would greatly appreciate some help.

I have two views (ViewA and ViewB) and two regions (Region A and Region B).  One my MainPage.xaml, I have two ItemsControl objects (one bound to Region A, the other to Region B).   I've exported ViewA => Region, ViewB => RegionB.  Also on MainPage.xaml, I have two buttons, one with a NavigationTrigger to ViewA, and the other to ViewB.

If I click either button, the correct View shows up in the correct region.  But when I click the other button, I get the error "Element is already the child of another element" and the application crashes.  It doesn't matter which button I click first.  As soon as I click the second button, it blows up.

I've tried both exporting and fluently binding the Region-View Mappings and the View-ViewModel mappings.  Still no luck.   It only seems to happen with ItemsControl Region, and not with a ContentControl Region (I assume because the child item view is getting replaced each time). 

Any ideas?

My Views:

  [ExportAsView("ViewA")]
  [ExportViewToRegion("ViewA""RegionA")]
  public partial class ViewA
  {
    public ViewA()
    {
      InitializeComponent();
    }
  }
 
  [ExportAsView("ViewB")]  
  [ExportViewToRegion("ViewB","RegionB")]
  public partial class ViewB
  {
    public ViewB()
    {
      InitializeComponent();
    }
  }

Bootstrapping Module does the following:
      Router.RouteViewModelForView("MainViewModel""MainPage");
      Router.RouteViewModelForView("ViewModelA""ViewA");
      Router.RouteViewModelForView("ViewModelB""ViewB");

My MainPage.xaml:

    <Grid x:Name="LayoutRoot" Background="White">
 
      
    <StackPanel>
 
    <ItemsControl x:Name="Test1" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" Regions:ExportAsRegion.RegionName="RegionA" HorizontalAlignment="Center" VerticalAlignment="Center">
      <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
          <Grid/>
        </ItemsPanelTemplate>
      </ItemsControl.ItemsPanel>
    </ItemsControl>
 
      <ItemsControl x:Name="Test2" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Bottom" Regions:ExportAsRegion.RegionName="RegionB" HorizontalAlignment="Right" VerticalAlignment="Bottom">
      <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Grid/>
          </ItemsPanelTemplate>
      </ItemsControl.ItemsPanel>
    </ItemsControl>
    </StackPanel>
      
    <Button x:Name="GoToB" Content="GoToB" VerticalAlignment="Bottom" Margin="0,0,8,17" HorizontalAlignment="Right" Width="75">
      <i:Interaction.Triggers>
        <i:EventTrigger EventName="Click">
          <JounceNav:NavigationTrigger Target="ViewB"/>
        </i:EventTrigger>
      </i:Interaction.Triggers>
    </Button>
    <Button x:Name="GoToA" Content="GoToA" HorizontalAlignment="Left" VerticalAlignment="Bottom" Width="75" Margin="0,0,0,17">
      <i:Interaction.Triggers>
        <i:EventTrigger EventName="Click">
          <JounceNav:NavigationTrigger Target="ViewA"/>
        </i:EventTrigger>
      </i:Interaction.Triggers>
    </Button>
  </Grid>
 

 

Coordinator
Mar 26, 2012 at 6:38 PM

That definitely should be supported. The code looks correct at a glance as far as exports, etc. so not sure what is going on. One thing I'd do first is change the Grid to a StackPanel and see if for some reason both views are being routed into the control when you click the button - that would explain the child element error. It may be in the grid one is just overlaying the other. That will at least help narrow down that piece, everything you show looks fine to me though and that is a common scenario to have multiple regions on the same page. If you arent' able to figure it out with some more troubleshooting, let me know here and I'll see what I can do to take a look at it.

Thanks.

Mar 26, 2012 at 7:46 PM

Thanks for the quick reply.  I tried changing it to a stackpanel but still not working.  I also tried moving the ItemsControls into their own separate views instead of putting them into the MainPage.xaml, but that didn't work either.  I have a VS2010 Solution zipped up if you'd like me to send it along.

 

Mar 26, 2012 at 8:00 PM

Jeremy, I tried converting my test project back to Silverlight 4 using Jounce 1.0 and multiple regions work there.  My real project is in Silverlight 5 however and I can't convert back.

Any ideas on where to look?

Thanks!

Mar 26, 2012 at 8:40 PM

Jeremy, I dove into the source and I think I tracked it down to the following statement in ItemsRegion.cs around line 45.

            if (!_boundRegions.Contains(targetRegion))
            {
                region.ItemsSource = _views;
                _boundRegions.Add(targetRegion);
            }
Haven't quite pinpointed the cause, but I'm close.
Coordinator
Mar 26, 2012 at 9:08 PM

I just duplicated the problem on my end. This is definitely a bug. I'll look into it.

Coordinator
Mar 26, 2012 at 9:42 PM

This is fixed. You can either uninstall/reinstall via NuGet (2.0.3) or download the latest source and integrate that way.

Mar 26, 2012 at 10:20 PM

Thanks Jeremy, you da man!