In this tutorial I will show you how to implement a tab view using Pivot Items in Windows Phone 8 or Windows Phone 8.1 Silverlight app using just a few lines of codes.
If you are developing for Windows Phone 8.1 or Windows 10 then follow this article.
https://windowsapptutorials.com/windows-phone-8-1/ui-windows-phone-8-1/implementing-tab-view-in-windows-phone-8-1-or-windows-10/
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
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.zip
Cheers to Chayan for sharing the source code. 😀
Recent Comments