×
Namespaces

Variants
Actions

How to Add Pivot Item in a pivot dynamically in Windows Phone 8

From Nokia Developer Wiki
Jump to: navigation, search

This article explains how to add Pivot Item in a pivot dynamically in Windows Phone.

WP Metro Icon UI.png
SignpostIcon XAML 40.png
WP Metro Icon WP8.png
SignpostIcon WP7 70px.png
Article Metadata
Code ExampleCompatibilityArticle
Created: munjalrohit (16 Sep 2013)
Last edited: chintandave_er (23 Sep 2013)

Introduction

This code example demonstrates how to add pivot item dynamically. The special thing in this article is that I have added a user control as pivot item. All the event of user control(pivot Item) handled at page level.

Code Functionality:

The first Pivot item of Pivot is bind to a list collection of user control named (MyPivotItem). Pivotname, PivotValue and PivotType areproperties defined in usercontrol.

List<MyPivotItem> listPivotItems = null;
 
private void BindPivotData()
{
listPivotItems = new List<MyPivotItem>() {
new MyPivotItem {PivotName="Item1(type1)",PivotValue="None",Pivottype="PivotName1" },
new MyPivotItem {PivotName="Item2(type2)",PivotValue="None",Pivottype="PivotName2" },
new MyPivotItem {PivotName="Item3(type1)",PivotValue="None",Pivottype="PivotName1" },
new MyPivotItem {PivotName="Item4(type1)",PivotValue="None",Pivottype="PivotName1" },
new MyPivotItem {PivotName="Item5(type2)",PivotValue="None",Pivottype="PivotName2" },
new MyPivotItem {PivotName="Item6(type1)",PivotValue="None",Pivottype="PivotName1" },
new MyPivotItem {PivotName="Item7(type2)",PivotValue="None",Pivottype="PivotName2",IsLastItem=true }
};
foreach (MyPivotItem item in listPivotItems)
{
item.SelectedItem += new MyPivotItem.delgSelectedItem(item_SelectedItem);
listBox1.Items.Add(item);
}
}

On the basis of PivotType, on List itemselected I bind another pivot item to Pivot control. Please see the pivot item itself is user control.

UCPivotItem1 _UCPivotItem1 = new UCPivotItem1();
UCPivotItem2 _UCPivotItem2 = new UCPivotItem2();
void item_SelectedItem(string alertName, string alertValue, string actionType)
{
PivotItem item = null;
switch (actionType.ToLower())
{
 
case "pivotname1":
item = new PivotItem();
 
item.Content = _UCPivotItem1;
 
myPivot.Items.Add(item);
myPivot.SelectedIndex = 1;
break;
case "pivotname2":
item = new PivotItem();
 
item.Content = _UCPivotItem2;
myPivot.Items.Add(item);
myPivot.SelectedIndex = 1;
break;
}
}

Handled Tap event of back button in usercontrol at mainpage

_UCPivotItem1.btnCancel.Tap += btnCancel_Tap;


Complete Code :

MainPage.xaml (Layout)

<Grid x:Name="LayoutRoot"  >
<Grid.Background>
<ImageBrush ImageSource="/Images/bg-grey.png" Stretch="Fill" />
</Grid.Background>
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="99*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"></ColumnDefinition>
<ColumnDefinition Width="96*"></ColumnDefinition>
<ColumnDefinition Width="2*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid Grid.Row="1" Grid.Column="1" >
 
 
<phone:Pivot Name="myPivot" SelectionChanged="myPivot_SelectionChanged">
<phone:PivotItem >
<Grid >
<Grid.RowDefinitions>
<RowDefinition Height="8*"></RowDefinition>
<RowDefinition Height="1*"></RowDefinition>
<RowDefinition Height="91*"></RowDefinition>
</Grid.RowDefinitions>
 
<Grid Margin="0,-50,0,0">
<TextBlock TextWrapping="Wrap" VerticalAlignment="Center" Grid.Column="1" Text="Dynamic Pivot Sample" HorizontalAlignment="Center" FontSize="26.667" Foreground="#FF121111" FontWeight="Bold" />
</Grid>
 
<Grid Grid.Row="2" Margin="0,-25,0,0" >
<Grid.RowDefinitions>
<RowDefinition Height="90*"></RowDefinition>
<RowDefinition Height="10*"></RowDefinition>
</Grid.RowDefinitions>
<Border BorderBrush="#FF837A7A" BorderThickness="1" HorizontalAlignment="Center" CornerRadius="10" Name="brdrList" VerticalAlignment="Top" >
<ListBox HorizontalAlignment="Left" Name="listBox1" Margin="0,10,0,10" />
</Border>
</Grid>
 
</Grid>
 
</phone:PivotItem>
 
</phone:Pivot>
</Grid>
</Grid>

MainPage.cs (CodeBehind)

public partial class MainPage : PhoneApplicationPage
{
// Constructor
List<MyPivotItem> listPivotItems = null;
 
private void BindPivotData()
{
listPivotItems = new List<MyPivotItem>() {
new MyPivotItem {PivotName="Item1(type1)",PivotValue="None",Pivottype="PivotName1" },
new MyPivotItem {PivotName="Item2(type2)",PivotValue="None",Pivottype="PivotName2" },
new MyPivotItem {PivotName="Item3(type1)",PivotValue="None",Pivottype="PivotName1" },
new MyPivotItem {PivotName="Item4(type1)",PivotValue="None",Pivottype="PivotName1" },
new MyPivotItem {PivotName="Item5(type2)",PivotValue="None",Pivottype="PivotName2" },
new MyPivotItem {PivotName="Item6(type1)",PivotValue="None",Pivottype="PivotName1" },
new MyPivotItem {PivotName="Item7(type2)",PivotValue="None",Pivottype="PivotName2",IsLastItem=true }
};
foreach (MyPivotItem item in listPivotItems)
{
item.SelectedItem += new MyPivotItem.delgSelectedItem(item_SelectedItem);
listBox1.Items.Add(item);
}
}
 
UCPivotItem1 _UCPivotItem1 = new UCPivotItem1();
UCPivotItem2 _UCPivotItem2 = new UCPivotItem2();
 
public MainPage()
{
InitializeComponent();
 
_UCPivotItem1.btnCancel.Tap += btnCancel_Tap;
_UCPivotItem2.btnCancel.Tap+=btnCancel_Tap;
BindPivotData();
 
// Sample code to localize the ApplicationBar
//BuildLocalizedApplicationBar();
}
 
void btnCancel_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
RemoveLastPivotItem();
}
private void RemoveLastPivotItem()
{
PivotItem pItem = (PivotItem)myPivot.Items[1];
pItem.Content = null;
myPivot.Items.RemoveAt(1);
}
private void myPivot_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
if (myPivot.SelectedIndex == 0 && myPivot.Items.Count > 1)
{
RemoveLastPivotItem();
}
}
 
void item_SelectedItem(string alertName, string alertValue, string actionType)
{
PivotItem item = null;
switch (actionType.ToLower())
{
 
case "pivotname1":
item = new PivotItem();
 
item.Content = _UCPivotItem1;
 
myPivot.Items.Add(item);
myPivot.SelectedIndex = 1;
break;
case "pivotname2":
item = new PivotItem();
 
item.Content = _UCPivotItem2;
myPivot.Items.Add(item);
myPivot.SelectedIndex = 1;
break;
 
 
}
}
// Sample code for building a localized ApplicationBar
//private void BuildLocalizedApplicationBar()
//{
// // Set the page's ApplicationBar to a new instance of ApplicationBar.
// ApplicationBar = new ApplicationBar();
 
// // Create a new button and set the text value to the localized string from AppResources.
// ApplicationBarIconButton appBarButton = new ApplicationBarIconButton(new Uri("/Assets/AppBar/appbar.add.rest.png", UriKind.Relative));
// appBarButton.Text = AppResources.AppBarButtonText;
// ApplicationBar.Buttons.Add(appBarButton);
 
// // Create a new menu item with the localized string from AppResources.
// ApplicationBarMenuItem appBarMenuItem = new ApplicationBarMenuItem(AppResources.AppBarMenuItemText);
// ApplicationBar.MenuItems.Add(appBarMenuItem);
//}
}

(Usercontrol)MyPivotItem.xaml(Layout)

<StackPanel Orientation="Vertical">
<Grid x:Name="LayoutRoot" Background="White" Width="430" MinHeight="60" Loaded="LayoutRoot_Loaded" Tap="LayoutRoot_Tap">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40*"></ColumnDefinition>
<ColumnDefinition Width="48*"></ColumnDefinition>
<ColumnDefinition Width="12*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock HorizontalAlignment="Left" FontSize="25" Margin="10,0,0,0" VerticalAlignment="Center" Grid.Column="0" Name="txtName" Text="{Binding PivotName,ElementName=cntrl}" Foreground="#FF403E3E" />
<TextBlock HorizontalAlignment="Right" TextTrimming="WordEllipsis" VerticalAlignment="Center" Margin="0,0,10,0" Grid.Column="1" Name="txtValue" Text="{Binding AlertValue,ElementName=cntrl}" Foreground="Gray" />
<!--<TextBlock HorizontalAlignment="Right" FontWeight="Bold" FontSize="30" VerticalAlignment="Center" Margin="0,0,10,0" Grid.Column="2" Text=">" Foreground="Gray" />-->
<Image Grid.Column="2" Grid.Row="0" Width="40" Margin="0,0,10,0" VerticalAlignment="Center" Source="/Images/icons-arrow.png" HorizontalAlignment="Left" />
 
 
</Grid>
<StackPanel Height="2"></StackPanel>
<Line X1="0" X2="430" StrokeThickness="1" Stroke="#FF837A7A" Name="line1"></Line>
 
</StackPanel>

(Usercontrol) MyPivotItem.xaml (CodeBehind)

public partial class MyPivotItem : UserControl
{
public MyPivotItem()
{
InitializeComponent();
}
 
public delegate void delgSelectedItem(string PivotName, string PivotValue, string PivotType);
public event delgSelectedItem SelectedItem;
private string name;
 
public string PivotName
{
get { return name; }
set { name = value; }
}
 
private string value;
 
public string PivotValue
{
get { return this.value; }
set { this.value = value; }
}
private string actiontype;
 
public string Pivottype
{
get { return actiontype; }
set { actiontype = value; }
}
private bool isLastItem=false;
 
public bool IsLastItem
{
get { return isLastItem; }
set { isLastItem = value; }
}
 
 
private void LayoutRoot_Loaded(object sender, RoutedEventArgs e)
{
line1.Width = this.ActualWidth;
if (isLastItem)
{
line1.Visibility = Visibility.Collapsed;
}
}
 
private void LayoutRoot_Tap(object sender, GestureEventArgs e)
{
SelectedItem(PivotName, PivotValue, Pivottype);
}
}

(Usercontrol) UCPivotItem1.xaml (Layout)

<Grid Margin="0,-50,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="10*"/>
<RowDefinition Height="3*"/>
<RowDefinition Height="87*"/>
</Grid.RowDefinitions>
<Grid>
 
<TextBlock TextWrapping="Wrap" VerticalAlignment="Center" Grid.Column="1" Text="Pivot Name1" HorizontalAlignment="Center" FontSize="26.667" Foreground="#FF121111" FontWeight="Bold" />
<Button Name="btnCancel" Height="80" Content="Back" Foreground="#FF0C0B0B" Grid.Column="0" HorizontalAlignment="Right" BorderThickness="0" VerticalAlignment="Center" Margin="5" >
<Button.Background>
<ImageBrush ImageSource="/Images/buttons-small.png" />
</Button.Background>
</Button>
 
 
</Grid>
<StackPanel Grid.Row="2" x:Name="LayoutRoot" Orientation="Vertical" Background="White">
<TextBlock Name="txtAlertName" TextWrapping="Wrap" Text="This is pivot Item of type 1" Foreground="#FF403E3E" FontSize="48">
</TextBlock>
</StackPanel>
</Grid>


Summary

This code example shows how to add pivot item dynamically in your Windows Phone applications.

You can download source code from here: File:DynamicPivotSample.zip

This page was last modified on 23 September 2013, at 14:00.
585 page views in the last 30 days.
×