Problem with TabControl Template and Binding in WPF.

Question

I would like to put image in TabControl header using binding, but below code doesn't work. I would like to know why, and how to do it? Thanks in advance :)

1、MainWindow.xaml

2、MainWindow.xaml.cs

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

        private WindowVM vm;

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            vm.Init();
        }
    }

3、WindowVM

 public class WindowVM : INotifyPropertyChanged
    {
        #region Fields & Properties

        public event PropertyChangedEventHandler PropertyChanged;

        public ObservableCollection TabCollection { get; } = new ObservableCollection();

        #endregion

        public void Init()
        {
            List list = new List()
            {
                new Test1View(),
                // new Test2View()...
            };

            foreach (ITestView test in list)
            {
                TabCollection.Add(test);
            }
        }
    }

4、Interface

 public interface ITestView
    {
        IContentTest ContentObject { get; set; }
        int DisplayIndex { get; set; }
    }

    public interface IContentTest
    {
        string ShowContent { get; set; }
        ImageSource BackgroundImageSource { get; set; }
    }

5、Test1View.xaml & Test1View.xaml.cs & ContentTest1


    

    



public partial class Test1View : UserControl,ITestView
    {
        public Test1View()
        {
            InitializeComponent();
        }

        #region ITestView Members

        public IContentTest ContentObject { get; set; } = new ContentTest1();

        public int DisplayIndex { get; set; } = 1;

        #endregion

    }


 public class ContentTest1 : IContentTest, INotifyPropertyChanged
    {
        public ContentTest1()
        {
            ShowContent = "TestAAA";

            // in ResourceDictionary: aaa.png
            BackgroundImageSource = Application.Current.TryFindResource("Image111") as ImageSource;
        }

        #region IContentTest Members

        private string _showContent;
        public string ShowContent
        {
            get => _showContent;
            set
            {
                _showContent = value;
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(ShowContent)));
            }
        }

        private ImageSource _backgroundImageSource;
        public ImageSource BackgroundImageSource
        {
            get => _backgroundImageSource;
            set
            {
                _backgroundImageSource = value;
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(BackgroundImageSource)));
            }
        }

        #endregion

        #region INotifyPropertyChanged Members

        public event PropertyChangedEventHandler PropertyChanged;

        #endregion

    }

Accepted Answer

Hi,@Sherry Shi. Welcome to Microsoft Q&A. Based on the problem description that you want to use binding to put an image into the TabControl header, I completed the example below. If you want to achieve the following effect, you could refer to its code. If I misunderstood, please let me know.
MainWinow.xaml:

MainWindow.xaml.cs:

using System;  
using System.Collections.Generic;  
using System.Collections.ObjectModel;  
using System.ComponentModel;  
using System.Runtime.CompilerServices;  
using System.Windows;  
using System.Windows.Media.Imaging;  

  
namespace TabControlDemo  
{  
  public partial class MainWindow : Window  
  {  
    public MainWindow()  
    {  
      vm = new WindowVM();  
      this.DataContext = vm;  
      InitializeComponent();  
    }  
    private WindowVM vm;  

  
    private void Button_Click(object sender, RoutedEventArgs e)  
    {  
      vm.Init();  
    }  
  }  
  public class WindowVM : INotifyPropertyChanged  
  {  

      
    public ObservableCollection TabCollection { get; } = new ObservableCollection();  

  
    public void Init()  
    {  
      List list = new List();  
      list.Add(new MyContent(){ MyHeader="Tab 1" , ImageHeader= new BitmapImage(new Uri("spring.jpg", UriKind.Relative)), MyContents="Content 1" });  
      list.Add(new MyContent(){ MyHeader="Tab 2" , ImageHeader= new BitmapImage(new Uri("images.jpg", UriKind.Relative)), MyContents="Content 2" });  
      list.Add(new MyContent(){ MyHeader="Tab 3" , ImageHeader= new BitmapImage(new Uri("spring1.jpg", UriKind.Relative)), MyContents="Content 3" });  

  
      foreach (MyContent test in list)  
      {  
        TabCollection.Add(test);  
      }  
    }  
    public event PropertyChangedEventHandler PropertyChanged;  
  }  
  public class MyContent : INotifyPropertyChanged  

    
  {  
    public string myHeader;  
    public string MyHeader  
    {  
      get { return myHeader; }  
      set  
      {  
        myHeader = value;  
        OnPropertyChanged();  
      }  
    }  
    public BitmapImage imageHeader;  
    public BitmapImage ImageHeader  
    {  
      get { return imageHeader; }  
      set  
      {  
        imageHeader = value;  
        OnPropertyChanged();  
      }  
    }  
    public string myContents ;  
    public string MyContents  
    {  
      get { return myContents; }  
      set  
      {  
        myContents = value;  
        OnPropertyChanged();  
      }  
    }  
    protected void OnPropertyChanged([CallerMemberName] string name = null)  
    {  
      PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));  
    }  
    public event PropertyChangedEventHandler PropertyChanged;  
  }  
}

The result:

Update:

I defined two interfaces: ITestView and IContentTest, as well as concrete classes that implement these interfaces. These classes define the content and properties of the tabs in the TabControl.

MainWindow.xaml:

MainWindow.xaml.cs:

using System;  
using System.Collections.Generic;  
using System.Collections.ObjectModel;  
using System.Windows;  
using System.Windows.Media.Imaging;  

  
namespace TabControlInerface  
{  
    public partial class MainWindow : Window  
    {  
        public MainWindow()  
        {  
            vm = new WindowVM();  
            this.DataContext = vm;  
            InitializeComponent();  
        }  
        private WindowVM vm;  
        private void Button_Click(object sender, RoutedEventArgs e)  
        {  
            vm.Init();  
        }  
    }  
    public class WindowVM   
    {  
        public ObservableCollection TabCollection { get; } = new ObservableCollection();  

  
        public void Init()  
        {  
            List list = new List() { new Con()  };  
            foreach (Con test in list)  
            {  
                TabCollection.Add(test);  
            }  
        }  
    }  
    public interface ITestView  
    {  
        IContentTest ContentObject { get; set; }  
        int DisplayIndex { get; set; }  
    }  
    public interface IContentTest  
    {  
        string ShowContent { get; set; }  
        BitmapImage BackgroundImageSource { get; set; }  
    }  
    public class MyContent :IContentTest  
    {  
        public string ShowContent { get; set; }  
        public BitmapImage BackgroundImageSource { get; set; }  
        public MyContent()  
        {  
            ShowContent = "header1";  
            BackgroundImageSource = new BitmapImage(new Uri("spring.jpg", UriKind.Relative));  
        }  
    }  
    public class Con : ITestView  
    {  
        public IContentTest ContentObject { get; set; } = new MyContent();  
        public int DisplayIndex { get; set; } = 1;  
    }  
}

The result:

If the response is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Problem with TabControl Template and Binding in WPF.

0 additional answers