Data binding in WPF Tab Navigation

7 May 20216 minutes to read

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

Binding IEnumerable

XAML

<syncfusion:TabNavigationControl TransitionEffect="Slide" ItemsSource="{Binding MyCollection}"/>

C#

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

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

<?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

C#

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

C#

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

C#

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

XAML

<Window.DataContext>
	<local:ViewModel/>
</Window.DataContext>

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