In this tutorial I will show you how to implement a tab view using Pivot Items in Windows Phone 8.1 WinRT app or Windows 10 app using just a few lines of codes.
If you are developing for Windows Phone 8 or Windows Phone 8.1 Silverlight then follow this article:http://windowsapptutorials.com/windows-phone/ui/how-to-implement-tab-view-in-windows-phone-8/
We will use a StackPanel for the tabs and bind its Background property to the SelectedIndex of the Pivot, converting it to a desired color using a Converter. Here are the steps:Step 1: Add a Pivot in your MainPage.xaml
Firstly we add a Pivot with two Pivot Items.Step 2: Add a StackPanel for the Tabs
Add a StackPanel for the tabs and bind its Background property to the SelectedIndex of the HomePagePivot .
Next, we will define the converter which we are using to convert the SelectedIndex to a corresponding color. Also we pass the tab number(0, 1, 2…) as a converter parameter.Step 3: Define a Index to Color Converter
We will use this converter to changed the selected tab’s background to a different color.If the selected index matches with the tab index then the background is set to DarkGray otherwise we set it to Gray
.Step 4: Add a Reference to the Converter in MainPage.xaml
Next we add a reference to the converter in our MainPage.xaml and use it.Step 5: Add Tap Event Handler to the StackPanels
We need to add a Tap event handler to change the selected PivotItem when one of the tabs are tapped. This can be done by using the following code.
Try running the app in the emulator and it should work perfectly.
Download the full project source for your reference.
Download full project TabViewWP8-1.zip
Cheers to Chayan for sharing the source code.