XAML: when binding TabControl, content of TabItem doesn't display

Question

I have following piece of XAML code:

  <TabControl x:Name="MainTabControl" ItemsSource="{Binding Projects}" Grid.Row="1">
        <TabControl.ItemTemplate>
            <DataTemplate>
                <TabItem x:Name="ProjectTabItem" Header="{Binding ProjectName}">
                    <TextBox>This text doesn't get displayed.</TextBox>
                </TabItem>
            </DataTemplate>
        </TabControl.ItemTemplate>
    </TabControl>

And C# code that I am binding to:

public IList<SharedProject> GetDummyData()
{
    IList<SharedProject> projects = new List<SharedProject>();

    SharedProject project1 = new SharedProject();
    project1.Id = 1;
    project1.ProjectName = "ProjectOne";
    project1.ProjectDescription = "DescriptionOne";
    project1.ProjectStartDate = DateTime.Now;
    project1.ProjectEndDate = DateTime.Now.AddDays(30);
    projects.Add(project1);

    SharedProject project2 = new SharedProject();
    project2.Id = 2;
    project2.ProjectName = "ProjectTwo";
    project2.ProjectDescription = "DesciptionTwo";
    project2.ProjectStartDate = DateTime.Now;
    project2.ProjectEndDate = DateTime.Now.AddDays(30);
    projects.Add(project2);

    return projects;
}

Binding Projects and ProjectName works, data gets displayed. The problem is, the content of the TabItem is not displayed, no matter what content I have (In this example just a TextBox). I noticed this problem only persist when I do Binding. If I remove binding from the TabControl and hardcode Header of the TabItem, everything works fine.

Check the Output tab in the debugger while your program is running. If there are any data binding errors, they get displayed there. It would also help if you posted the definition of the SharedProject class as we can't tell if there are any errors in that class that might cause the problem without it. — Tony Vitabile
What Type is your Projects property used to bind to the TabControl? — Stefano Bafaro

lerner1225 lerner1225 · Accepted Answer · 2015-11-18T14:26:25

Define Templates for Header and Content:

Updated:

<TabControl Name="TabControl">
        <TabControl.ItemTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding Name}" />
            </DataTemplate>
        </TabControl.ItemTemplate>
        <TabControl.ContentTemplate>
            <DataTemplate>
                <TextBox Text="{Binding Content}"></TextBox>
            </DataTemplate>
        </TabControl.ContentTemplate>
    </TabControl>

public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            Projects = new List<Test>();
            Projects.Add(new Test("Tab1", "Content1"));
            Projects.Add(new Test("Tab2", "Content2"));
            Projects.Add(new Test("Tab3", "Content3"));
            TabControl.ItemsSource = Projects;
        }

        public List<Test> Projects
        {
            get;
            set;
        }
    }

    public class Test
    {
        public Test(string name, string content)
        {
            this.Name = name;
            this.Content = content;
        }

        public string Name { get; set; }
        public string Content { get; set; }
    }

XAML: when binding TabControl, content of TabItem doesn't display

1 Answers