Saturday 5 April 2014

How to Create a sample windows phone pivot application

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.

    <!--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.