Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
A Tab Control is a staple in UI development. It allows you to create sub-pages within your main UI. For this demo I am going to use a project called UsingTabControl, and I've already opened MainPage.xaml. This UI contains one Tab Control with two Tab items. You can see them here in the Designer. If I click on the items in the Designer it switches my view. It also switches the XML view on the bottom-half of the screen, watch there. I'm on line 37, I am going to click on this first Tab and it moves me to line 25.
Here is the actual Tab Control; it contains two children items, tabItem1 and tabItem2. Tab items can contain any valid UI. In this first tab item I have a StackPanel with two images, and in the second tab item I have a DockPanel with some buttons docked to the different sides. The Tab Control itself has one interesting property I want to show you, which is called the TabStripPlacement. It does what you'd expect, right now the TabStrip is at the top. If I choose bottom it moves it to the bottom side of the screen.
There are also left and right alignments. I just showed you that you could put any valid content in a tab item. You can also put any valid content you want in the tab item's header. Let me show you an example of that. I am going to switch this AnimatedTabHeader and while I am switching I am also going to go over to App.xaml.cs and change my Startup object Now back to AnimatedTabHeader.
On this second tab item I have modified the header using a property element. On line 34, I say, I would like to modify the Header and inside that I have put a StackPanel and a TextBlock. I am going to add an image to this and if you see in at the top at the Designer now you can see my image showing up in the header. For the last demo I am going to show you an animation running inside the header. Press F5 to run the application, and there you can see it.
What this shows you is how flexible the layout is in both the header and the content for Tab Control. When you need a sub-page consider using the Tab Control.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 99976 Viewers
56 Video lessons · 113060 Viewers
71 Video lessons · 81904 Viewers
131 Video lessons · 39302 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.