In this article we are going to see how to create a sample windows phone pivot application, for our sample we are consider to display some information related to social network, but this is only a sample so data are created in view model collection and directly bind to the View.
so now we can see how to create a sample app.
Output: sample screen
xaml:
Styles are defined in one place and create a data template from the code bind the data to the view.
C#:
Model Class
Model class which have google+ and Facebook sample model data to bind to the view which follows the MVVM pattern.
I hope this article will make you to understand about what is an pivot application and how to create it.
so now we can see how to create a sample app.
Output: sample screen
xaml:
Styles are defined in one place and create a data template from the code bind the data to the view.
<!--LayoutRoot
is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot"
Background="Transparent">
<!--Pivot
Control-->
<phone:Pivot Title="{Binding LocalizedResources.AppName,Source={StaticResource
LocalizedStrings}}">
<!--Pivot
item one-->
<phone:PivotItem Header="{Binding LocalizedResources.Facebook,Source={StaticResource
LocalizedStrings}}">
<!--Double
line list with text wrapping-->
<phone:LongListSelector Margin="0,0,-12,0"
ItemsSource="{Binding FacebookData}">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,0,17">
<StackPanel Orientation="Horizontal">
<Border BorderBrush="PowderBlue" Background="PowderBlue" CornerRadius="5" Margin="3">
<Image Margin="4" Source="{Binding Image}" Stretch="UniformToFill"
Width="100" Height="100"
/>
</Border>
<StackPanel Orientation="Vertical">
<TextBlock FontSize="30" Foreground="CornflowerBlue" FontWeight="Medium" Text="{Binding UserName}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
<TextBlock TextTrimming="WordEllipsis" MaxWidth="300" Text="{Binding About}" TextWrapping="Wrap" Height="70"
Margin="3"/>
</StackPanel>
</StackPanel>
</StackPanel>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
</phone:PivotItem>
<!--Pivot
item two-->
<phone:PivotItem Header="{Binding LocalizedResources.Google,Source={StaticResource
LocalizedStrings}}">
<phone:LongListSelector Margin="0,0,-12,0"
ItemsSource="{Binding GoogleData}">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,0,17">
<StackPanel Orientation="Horizontal">
<Border BorderBrush="Yellow" Background="OrangeRed" CornerRadius="5" Margin="3">
<Image Margin="4" Source="{Binding Image}" Stretch="UniformToFill"
Width="100" Height="100"
/>
</Border>
<TextBlock TextTrimming="WordEllipsis" MaxWidth="300" Text="{Binding About}" TextWrapping="Wrap" Height="70"
Margin="3"/>
</StackPanel>
<TextBlock FontSize="30" Foreground="Orange" FontWeight="Medium"
Text="{Binding UserName}" TextWrapping="Wrap"
Style="{StaticResource PhoneTextExtraLargeStyle}"/>
</StackPanel>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
</phone:PivotItem>
</phone:Pivot>
</Grid>
C#:
public
MainPage()
{
InitializeComponent();
SocialNetworkData data = new SocialNetworkData();
DataContext = data;
}
Model Class
Model class which have google+ and Facebook sample model data to bind to the view which follows the MVVM pattern.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.ComponentModel;
using System.Threading.Tasks;
using System.Runtime.CompilerServices;
using System.Collections.ObjectModel;
using SocialNetworkSample.ViewModels;
namespace SocialNetworkSample
{
class SocialNetworkData
{
private FacebookCollection _facebookdata = new FacebookCollection();
public FacebookCollection FacebookData
{
set
{
_facebookdata = value;
}
get {
return _facebookdata;
}
}
private GoogleCollection _googledata = new GoogleCollection();
public GoogleCollection GoogleData
{
set { _googledata = value; }
get { return _googledata; }
}
public SocialNetworkData()
{
PopulateFaceBookData();
PopulateGoogleData();
}
private void PopulateGoogleData()
{
_googledata.Add(new Google() { Image = "Content/Google/Images/3.jpg", UserName = "Kaswikuy", About = "Technology
passionate person, Social network user, Blogger, article reader" });
_googledata.Add(new Google() { Image = "Content/Google/Images/4.jpg", UserName = "Cologdjk", About = "Cool,sample
text about m , useful information regarding .this" });
_googledata.Add(new Google() { Image = "Content/Google/Images/1.jpg", UserName = "Steve", About = "This is a
sample text regarding information about me , i am a cool person" });
_googledata.Add(new Google() { Image = "Content/Google/Images/2.jpg", UserName = "Lisa", About = "Cool, very
straight forward, Social network user,Blogger" });
}
private void PopulateFaceBookData()
{
_facebookdata.Add(new Facebook() { Image = "Content/Facebook/Images/1.jpg", UserName = "Steve", About = "This is a
sample text regarding information about me , i am a cool person" });
_facebookdata.Add(new Facebook() { Image = "Content/Facebook/Images/2.jpg", UserName = "Lisa", About = "Cool, very
straight forward, Social network user,Blogger" });
_facebookdata.Add(new Facebook() { Image = "Content/Facebook/Images/3.jpg", UserName = "Kaswikuy", About = "Technology
passionate person, Social network user, Blogger, article reader" });
_facebookdata.Add(new Facebook() { Image = "Content/Facebook/Images/4.jpg", UserName = "Cologdjk", About = "Cool,sample
text about m , useful information regarding .this" });
}
}
class FacebookCollection:ObservableCollection<Facebook>
{
public FacebookCollection()
{
}
}
class Facebook :SocialBase
{
}
class SocialBase : INotifyPropertyChanged
{
private string image;
private string username;
private string about;
public string Image
{
set
{
if (image != value)
{
image = value;
NotifyPropertyChange();
}
}
get { return image; }
}
public string UserName
{
set
{
if (username != value)
{
username = value;
NotifyPropertyChange();
}
}
get { return username; }
}
public string About
{
set
{
if (about != value)
{
about = value;
NotifyPropertyChange();
}
}
get { return about; }
}
private void NotifyPropertyChange([CallerMemberName]string propertyname = "")
{
if (PropertyChanged != null && propertyname != "")
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyname));
}
}
public event PropertyChangedEventHandler PropertyChanged;
}
}
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace SocialNetworkSample.ViewModels
{
class Google:SocialBase
{
}
class GoogleCollection : ObservableCollection<Google>
{
public GoogleCollection()
{
}
}
}
I hope this article will make you to understand about what is an pivot application and how to create it.