WPF TabControl DataBinding to another class

Question

I'm using MahApps for my first Wpf project, and more specifically tabControls . I tested it on a tiny test project. It worked well, until I tried to merge my code in my project.

Here's an example of my code behind :

public class Datas
{
    public ObservableCollection<string> titles { get; set; }

    public Datas()
    {
        init();
    }

    public void init()
    {
        titles = new ObservableCollection<string>()
        {
            "Title 1",
            "Title 2",
            "Title 3",
            "Title 4"
        };
    }
}

public partial class Window1 : MetroWindow
{
    private Datas datas;

    public Window1()
    {
        init();
    }

    private void init()
    {
        datas = new Datas();
        this.DataContext = this;
    }
}

And my Xaml code :

<TabControl DataContext="{Binding Datas}">
    <TabControl.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding titles}"/>
        </DataTemplate>
    </TabControl.ItemTemplate>
    <TabControl.ContentTemplate>
        <DataTemplate>
            <TextBlock Text="Content" />
        </DataTemplate>
    </TabControl.ContentTemplate>
</TabControl>

I've been searching for few days so far. I've found a topic about dataBinding to another class but it doesn't seem to work for me. Not sure if I can use both DataContexts in my Window1 class, even if I tried something like binding multiple controls to different dataContexts .

Do I really need something like that ? It seems to be bigger than what I need but I may be wrong. So, my problem is that I would like to have my tabs whose titles are those in my list, and it doesn't display anything (no error when running though).

Thanks for your help, and please be slow in your answers, I'm still new to Wpf :)

Answer 1

The Window:

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <TabControl ItemsSource="{Binding Titles}">
            <TabControl.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding}"/>
                </DataTemplate>
            </TabControl.ItemTemplate>
            <TabControl.ContentTemplate>
                <DataTemplate>
                    <TextBlock Text="Content" />
                </DataTemplate>
            </TabControl.ContentTemplate>
        </TabControl>
    </Grid>
</Window>

The Window's code behind:

    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            this.DataContext = new Datas();
            this.InitializeComponent();
        }
    }

    public class Datas
    {
        private ObservableCollection<String> titles;
        public ObservableCollection<String> Titles
        {
            get
            {
                if (this.titles == null)
                {
                    this.titles = new ObservableCollection<String>()
                    {
                        "Title 1",
                        "Title 2",
                        "Title 3",
                        "Title 4"
                    };
                }
                return this.titles;
            }
        }
    }

Some advices:

• Binding only works with public properties.

• Do not expose an ObservableCollection if you are not going to modify it, use IList instead (it is lighter).

• In WPF, at least for properties, lazy initialization is more natural than constructor initialization (see the Titles property).

• Take a look at the .NET capitalization conventions , prefer using Pascal Casing for properties.

Answer 2

Set ItemsSource of TabControl and defind public property Datas in your Window 's DataContext

 <TabControl ItemsSource="{Binding Datas.titles}">
   <TabControl.ItemTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding}"/>
            </DataTemplate>
        </TabControl.ItemTemplate>



 public partial class Window1 : MetroWindow
{


    public Window1()
    {
        init();
    }

    private void init()
    {
        Datas = new Datas();
        this.DataContext = this;
    }

     public Datas Datas{get;set;}
}