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, Nov 18 '15 at 13:40
What Type is your Projects property used to bind to the TabControl? — Stefano Bafaro, Nov 18 '15 at 13:42

lerner1225 · Accepted Answer · 2015-11-19T11:24:35.230

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; }
    }

Hi, Thanks for your solution. It works, in a sense that the something is finally displayed on the screen. But unfortunately it's the same content for all tabs (TabItem). — Matthew C, Nov 18 '15 at 23:19
Then something wrong in your code. I have added my sample code in above answer, please go through it. — lerner1225, Nov 19 '15 at 11:25
Sorry, my bad, the code actually worked perfectly. The problem was that the state of content wasn't preserved because WPF is recycling controls. Well known issues http://stackoverflow.com/questions/2080764/how-to-preserve-control-state-within-tab-items-in-a-tabcontrol — Matthew C, Nov 20 '15 at 11:38

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

1 Answers1