Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

Revision as of 11:00, 23 September 2013 by chintandave_er (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

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

From 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 11:00.
613 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×