Windows Phone App Basics - 1

In this article we are going to see the basics of Windows Phone. Normally today Mobile phones are more widely used technology which is present in the  every person home. Mobile which means we can handle anything related to internet or computing process can be done with out the presence of computer. but all the things cant be done in the mobile, like we doing in computer. so now we start the basics of windows phone.

For create a successful app, First we have to understand the architect of a app.To develop a app, we need to knew that Windows Phone offers App in Two version 7 and 8,  now most of them stopped the developing the app for Version 7. It is recommended to develop a app for version 8, basically Both the versions are differs in many things.

Difference between the Windows Phone 7 and 8.
                                       

	Windows Phone 7	Windows Phone 8
Screen size	800x480	800x480
		1280x720
		1280x768
orientation	Portrait	Portrait
Programming languages	C#, Visual Basic, F#	C#, Visual Basic
		C++/CX
	HTML5 + js	HTML5 + js
APIs	.NET	.NET
	XNA	XNA
		DirectX (sans Direct2D)
		WinRT

Now there is a announcement soon about releasing Windows Phone 10.

Features in windows Phone 8.

1. Customize size of start screen
2. Location API
3. Maps
4. Wallet
5. Speech API
6. VoIP
7. Screen resolution

First we have to understand about the structure of Windows Phone Application.

Project structure:
********************
1. App.Xaml :  
             which is the entry point of application. contains global resources, events, Life cycle.
2. WMAppManifest.Xaml : 
              which contains application deployment information - capabilities, icon, Task etc.
3. MainPage.Xaml :  
              which is the Design of application.


Application Structure:
******************
Phone have two types of Views.
1. Panoramic 
2. Pivot

Panoramic:
**********
It is view which offers a unique way of views in Horizontal way, which extends beyond the windows phone screen.

Pivot:
********
It is a view which offers a view in Vertical Way, looks like Tab options.


Windows Phone have a system where we can place controls in the two way 
1. Application Bar
2. Menu Items

In Application bar we can add a 4 buttons up to as maximum, in Menu items we can add up to 5 menu items.



Above image explains the place of application bars and menu items in the windows phone.

Sensors:
**********
Windows Phone supports multiple sensors, which can determine the motion of a device and orientation.Compass, Accelerometer, Gryoscope

Launchers and Choosers of  windows phone
************************************
Launcher and chooser are used to access the common device functionality, which is used to access the services of phone to use for there need , but there is a small difference in that. Launchers doesnt return the data, choosers return the data to the invoker.

some of the Launchers & Choosers
*****************************

CameraCaptureTask
PhotoChooserTask
PhoneNumberChooserTask
EmailAddressChooserTask
BingMapsTask
PhoneCallTask
SearchTask
MediaPlayerLauncher
SavePhoneNumberTask
SaveEmailAddressTask
SmsComposeTask
WebBrowserTask
MapsTask
MapsDirectionTask
MapsDownloaderTask
ShareMediaTask

Now let we see some of them, First add the reference to the following namepsace.

 using Microsoft.Phone.Tasks;

Launch Media Player
*********************
Use the MediaPlayer use the MediaPlayer Launcher.

MediaPlayerLauncher mediaPlayer = new MediaPlayerLauncher();
mediaPlayer.Media = new Uri(@"http://s.com/test.mp4", UriKind.Absolute);
mediaPlayer.Show();

                                   


Launch  camera Capture:
*********************
For Take a Photo we have to use the CameraCaptureTask, to set the result of the data in the Image use the Callback completed event.

CameraCaptureTask cameraCapture = new CameraCaptureTask();
cameraCapture.Completed += new EventHandler<PhotoResult>(cameraCapture_Completed);
cameraCapture.Show();

                                           

             

        void cameraCapture_Completed(object sender, PhotoResult e)
        {
            if (e.TaskResult == TaskResult.OK)
            {              
                BitmapImage bmp = new BitmapImage();
                bmp.SetSource(e.ChosenPhoto);
                image1.Source = bmp; 
            }
        }

Chooser PhotoChooser
*******************
For browse a photo from the Phone and place inside the application we have to use the PhotoChooserTask and bind the result an image control.

PhotoChooserTask PhotoChooser= new PhotoChooserTask();
PhotoChooser.Completed += PhotoChooser_Completed;

PhotoChooser.Show();

                                                             

  void  PhotoChooser_Completed(object sender, PhotoResult e)
        {
            if (e.TaskResult == TaskResult.OK)
            {              
                BitmapImage bmp = new BitmapImage();
                bmp.SetSource(e.ChosenPhoto);
                image1.Source = bmp; 
            }
        }

After choosen the photo
                                             

From the above you can learn some of the basics things in the Windows Phone apps.

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.