Adding TabItems dynamically

Sami Abdelgadir Mohammed picture Sami Abdelgadir Mohammed · Jan 18, 2011 · Viewed 18.4k times · Source

I have a TabControl control

<TabControl Name="Farms_myVillages"
            ItemsSource="{Binding Villages}">
</TabControl/>

In the code behind I add some tabs dynamically to the TabControl as follows:

foreach (Village vill in Villages)
{
    TabItem tab = new TabItem();
    tab.Header = vill.Name;
    VillageUserControl c = new VillageUserControl();
    c.DataContext = vill;
    tab.Content = c;
    Farms_myVillages.Items.Add(tab);
}

where VillageUserControl is a UserControl that deal with the specified village. This code works fine and it gets the expected results...

The problem is that I don't want this to be in the code behind but just in the xaml itself.

I try this:

<TabControl Name="Farms_myVillages"
            ItemsSource="{Binding Villages}">
      <TabControl.ItemContainerStyle>
          <Style TargetType="TabItem">
              <Setter Property="Header" Value="{Binding Name}"/>
              <Setter Property="Content">
                 <Setter.Value>
                    <u:VillageUserControl DataContext="{Binding}"/>
                 </Setter.Value>
              </Setter>
          </Style>
      </TabControl.ItemContainerStyle>
</TabControl>

After I run it, it throws an exception: "Specified element is already the logical child of another element. Disconnect it first."

Did I miss something? Please help me here...

Answer

H.B. picture H.B. · Jan 18, 2011

You set the wrong thing, you should not modify the ItemContainerStyle but the TabControl.ItemTemplate for the header and TabControl.ContentTemplate for the content.

(The exception may have to do with the fact that in the style only one VillageUserControl is created, but the style applies to multiple tab items.)