Data binding in WPF Tab Navigation

31 Oct 20226 minutes to read

Business object collections can be easily bound to the TabNavigation control using ItemsSource property.

Binding IEnumerable

<syncfusion:TabNavigationControl TransitionEffect="Slide" ItemsSource="{Binding MyCollection}"/>
namespace TabNavigationSample
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    { 
		TabNavigationItem temp;
        public MainWindow()
        {
            InitializeComponent();
			MyCollection = new ObservableCollection<TabNavigationItem>();
			for (int i = 0; i < 10; i++)
			{
				temp = new TabNavigationItem();
				temp.Header = i;
				temp.Content= "Item " + i.ToString();
				MyCollection.Add(temp);
			}
			this.DataContext = this;
		}
		public ObservableCollection<TabNavigationItem> MyCollection 
		{
			get { return (ObservableCollection<TabNavigationItem>)GetValue(MyCollectionProperty); }
			set { SetValue(MyCollectionProperty, value); }
	    }
		// Using a DependencyProperty as the backing store for MyCollection.  This enables animation, styling, binding and so on
		public static readonly DependencyProperty MyCollectionProperty = DependencyProperty.Register("MyCollection", typeof(ObservableCollection<TabNavigationItem>), typeof(MainWindow), new PropertyMetadata(null));
	}
}

wpf tabnavigation control supports data binding

Binding data from XML

To bind XML data to a TabNavigation control, convert the XML data to a collection like Observable collection or ILIST collection, and then bind the collection by using the ItemsSource property of the TabNavigation control.

  • Create a xml file

    <?xml version="1.0" encoding="utf-8" ?>
    <Books>
      <book>
        <title>XML Developer's Guide</title>
        <description>An indent look at creating applications with XML.</description>
      </book>
      <book>
        <title>Midnight Rain</title>
        <description>A former architect battles corporate zombies, an evil sorceress, and her own childhood to become queen of the world.</description>
      </book>
      <book>
        <title>Oberon's Legacy</title>
        <description>In post apocalypse England, the mysterious agent known only as Oberon helps to create a new life for the inhabitants of London. Sequel to Mae Ascendant.</description>
      </book>
      <book>
        <title>Lover Birds</title>
        <description>When Carla meets Paul at an ornithology conference, tempers fly as feathers get ruffled.</description>
      </book>
      <book>
        <title>Split Splash</title>
        <description>A deep sea diver finds true love twenty thousand leagues beneath the sea.</description>
      </book>
    </Books>
  • Model.cs

    namespace TabNavigationXMLBinding
    {
    	public class Model : NotificationObject
    	{
    		public Model()
    		{
      
    		}
    	}
    	public class BookModel : NotificationObject
    	{
    		public BookModel()
    		{
      
    		}
      
    		private string bookName;
    		public string BookName
    		{
    			get
    			{
    				return bookName;
    			}
    			set
    			{
    				bookName = value;
    				this.RaisePropertyChanged("BookName");
    			}
    		}
      
    		private string description;
    		public string Description
    		{
    			get
    			{
    				return description;
    			}
    			set
    			{
    				description = value;
    				this.RaisePropertyChanged("Description");
    			}
    		}
    	}
    }
  • ViewModel.cs

    namespace TabNavigationXMLBinding
    {
    	public class ViewModel : NotificationObject
    	{
      
    		private ObservableCollection<Model> modelItems;
    		public ObservableCollection<Model> ModelItems
    		{
    			get
    			{
    				return modelItems;
    			}
      
    			set
    			{
    				modelItems = value;
    			}
    		}
    		private ObservableCollection<BookModel> bookModelItems;
    		public ObservableCollection<BookModel> BookModelItems
    		{
    			get
    			{
    				return bookModelItems;
    			}
      
    			set
    			{
    				bookModelItems = value;
    			}
    		}
    		public  ViewModel()
    		{
    			modelItems = new ObservableCollection<Model>();
    			bookModelItems = new ObservableCollection<BookModel>();
    			XDocument xDocument = XDocument.Load(@"assets\Books.xml");
    			IEnumerable<XElement> query = from xElement in xDocument.Descendants("book")
    										  select xElement;
    			foreach (XElement xElement in query)
    			{
    				BookModel bookModel = new BookModel
    				{
    					BookName = xElement.Element("title").Value,
    					Description = xElement.Element("description").Value
    				};
    				bookModelItems.Add(bookModel);
    			}
    		}
    	}
    }
  • MainWindow.Xaml.cs

    namespace TabNavigationXMLBinding
    {
    	/// <summary>
    	/// Interaction logic for MainWindow.xaml
    	/// </summary>
    	public partial class MainWindow : ChromelessWindow
    	{
    		public MainWindow()
    		{
    			InitializeComponent();
    			TabNavigationItem tab;
    			ViewModel view = new ViewModel();
    			BookCollection = new ObservableCollection<TabNavigationItem>();
    			for (int i = 0; i < view.BookModelItems.Count; i++)
    			{
    				tab = new TabNavigationItem();
    				tab.Header = view.BookModelItems[i].BookName;
    				tab.Content = view.BookModelItems[i].Description;
    				BookCollection.Add(tab);
    			}
    			this.DataContext = this;
    		}
      
    		public ObservableCollection<TabNavigationItem> BookCollection
    		{
    			get { return (ObservableCollection<TabNavigationItem>)GetValue(BookCollectionProperty); }
    			set
    			{
    				SetValue(BookCollectionProperty, value);
    			}
    		}
    		// Using a DependencyProperty as the backing store for MyCollection.  This enables animation, styling, binding and so on
    		public static readonly DependencyProperty BookCollectionProperty =
    		DependencyProperty.Register("BookCollection", typeof(ObservableCollection<TabNavigationItem>), typeof(MainWindow), new PropertyMetadata(null));
    	}	
    }
  • MainWindow.Xaml

    <Window.DataContext>
    	<local:ViewModel/>
    </Window.DataContext>
      
    <!--TabNavigationControl-->
    <syncfusion:TabNavigationControl x:Name="TabNavigation" Grid.Column="1" Grid.Row="1"  ItemsSource="{Binding BookCollection}"/>