Send Email Task in Windows Phone 8.1

In this post I will show you how to compose and sent an email from you Windows Phone 8.1 app. If you are developing a Windows Phone 8 Silverlight application then you could refer to our other post.
Launchers and choosers – Email Tasks in Windows phone app

The APIs have changed for WinRT applications. Here’s the code that can be used to send email using a Windows Phone 8.1 WinRT application.

// Define Recipient
EmailRecipient sendTo = new EmailRecipient()
{
    Address = "maskaravivek@gmail.com"
};

// Create email object
EmailMessage mail = new EmailMessage();
mail.Subject = "Hello world";
mail.Body = "Email Body";

mail.To.Add(sendTo);
// Open the share contract with Mail only:
await EmailManager.ShowComposeNewEmailAsync(mail);

We are using an EmailRecipient object that contains the email address of the person to whom we wish to send an email. Then we create an object of EmailMessage class and set its Subject and Body. Also we add the all the recipients to the To list. Finally we call ShowComposeNewEmailAsync asyncronously to launch the email app.

Wrap Grid with Variable Sized Items for Windows Phone 8.1

In this tutorial I will show you how to wrap variable sized ListView Items in Windows Phone 8.1. This is how our end product looks.

.wrap_grid

Here are the steps:

Step 1: Create a custom WrapGrid

Firstly we would be creating a custom WrapGrid by overriding MeasureOverride and ArrangeOverride methods of Panel. So we have added a new class WrapPanel in our project under Controls folder.
controls_folder

The WrapGrid class to be added is as follows.

Step 2: Define ItemsPanelTemplate

We will be defining the ItemsPanelTemplate for the ListView to be used. Define this as local resources.

Step 3: Define DataTemplate for the ListView

Next we arbitrarily define a DataTemplate for the ListView which we are using. Define this as local resources.

Step 4: Define ListView Style

For our convenience and for allowing reusability we will be defining a Style for our ListView as local resource.

Step 5: Add a ListView in MainPage.xaml

Next, we add a ListView in our MainPage.

Step 6: Add a AddItems method to populate items.

We call this function in the OnNavigatedTo event handler to set the ItemSource of our ListView.

That’s it. Try running the app in the emulator and see the magic for yourself. Download the full source code for your reference.

Windows Phone 8.1/Windows 10 WinRT

Download full project Wrap Grid 8.1

Windows Phone 8.1 Silverlight

Code for implementing it in Windows Phone 8 is quite similar. You can grab the following project if you are working on Windows Phone 8 or Windows Phone 8.1 Silverlight.

Download full project Wrap Grid WP8

How to access Isolated or Local Storage Data of Windows phone App (Silverlight/WinRT)

Initially you guys have been using Isolated Storage Explorer (ISETool.exe) to access the Isolated/Local Storage data of your Windows phone applications. But that requires typing long commands into the command prompt with app id. You need to remember different commands in order to access different files and is a hectic procedure.

But now we have got a new tool which can make this access easier and provides a GUI interface with upload and download features.

The tool is called IsoStoreSpy. It is an open source project hosted under the Codeplex community.

The download link for the tool is given below. You can download the version that suits your environment.

 

Download IsoStoreSpty tool

 

Step 1:

Now to start with first you need to open the tool

 


 

Step 2:

Click on the Settings icon in the middle or the top-left side of the tool. Now you need to select the device.

 


 

Step 3:

If you are running on the device then select Device or else Emulator. If you are running on an emulator then please install the app in the emulator and be sure the App is Not Running. So that this tool can access your app’s settings file or correspondingly in the phone just install the app and be sure the app is not running.

In this case we are assuming the app is running on the emulator.

 


 

Step 4:

Now by default it will show all the files in the local folder of the application. To view the files under roaming settings select Roaming under the Directory section.

You can also import or export a file into the application through this tool.

 


 

I hope this post will be helpful to you.

Implementing Tab View in Windows Phone 8.1 or Windows 10

In this tutorial I will show you how to implement a tab view using Pivot Items in Windows Phone 8.1 WinRT app or Windows 10 app using just a few lines of codes.

first_tab

If you are developing for Windows Phone 8 or Windows Phone 8.1 Silverlight then follow this article:
http://windowsapptutorials.com/windows-phone/ui/how-to-implement-tab-view-in-windows-phone-8/

We will use a StackPanel for the tabs and bind its Background property to the SelectedIndex of the Pivot, converting it to a desired color using a Converter. Here are the steps:

Step 1: Add a Pivot in your MainPage.xaml

Firstly we add a Pivot with two Pivot Items.

Step 2: Add a StackPanel for the Tabs

Add a StackPanel for the tabs and bind its Background property to the SelectedIndex of the HomePagePivot.

Next, we will define the converter which we are using to convert the SelectedIndex to a corresponding color. Also we pass the tab number(0, 1, 2…) as a converter parameter.

Step 3: Define a Index to Color Converter

We will use this converter to changed the selected tab’s background to a different color.

If the selected index matches with the tab index then the background is set to DarkGray otherwise we set it to Gray.

Step 4: Add a Reference to the Converter in MainPage.xaml

Next we add a reference to the converter in our MainPage.xaml and use it.

Step 5: Add Tap Event Handler to the StackPanels

We need to add a Tap event handler to change the selected PivotItem when one of the tabs are tapped. This can be done by using the following code.

Try running the app in the emulator and it should work perfectly.

Download the full project source for your reference.

Download full project TabViewWP8-1.zip

Cheers to Chayan for sharing the source code. 😀

How to Implement Tab View in Windows Phone 8

In this tutorial I will show you how to implement a tab view using Pivot Items in Windows Phone 8 or Windows Phone 8.1 Silverlight app using just a few lines of codes.

first_tab

If you are developing for Windows Phone 8.1 or Windows 10 then follow this article.
http://windowsapptutorials.com/windows-phone-8-1/ui-windows-phone-8-1/implementing-tab-view-in-windows-phone-8-1-or-windows-10/

We will use a StackPanel for the tabs and bind its Background property to the SelectedIndex of the Pivot, converting it to a desired color using a Converter. Here are the steps:

Step 1: Add a Pivot in your MainPage.xaml

Step 2: Add a StackPanel for the Tabs

Add a StackPanel for the tabs and bind its Background property to the SelectedIndex of the HomePagePivot.

Next, we will define the converter which we are using to convert the SelectedIndex to a corresponding color. Also we pass the tab number(0, 1, 2…) as a converter parameter.

Step 3: Define a Index to Color Converter

We will use this converter to changed the selected tab’s background to a different color.

If the selected index matches with the tab index then the background is set to DarkGray otherwise we set it to Gray.

Step 4: Add a Reference to the Converter in MainPage.xaml

Next we add a reference to the converter in our MainPage.xaml and use it.

Step 5: Add Tap Event Handler to the StackPanels

We need to add a Tap event handler to change the selected PivotItem when one of the tabs are tapped. This can be done by using the following code.

Try running the app in the emulator and it should work perfectly.

Download the full project source for your reference.

Download full project TabViewWP8.zip

Cheers to Chayan for sharing the source code. 😀

How to use Converters in Windows phone app (Silverlight/WinRT)

ValueConverters can be used whenever we need to present data in an easy and controllable way such that it doesn’t interfere with other layers of the application.

Converters are called by the Data Binding mechanism whenever binding actually occurs (for example, when a control is notified about the change in the underlying property).

 

ValueConverters need to implement IValueConverter, a simple two-method interface. The two methods are

1) Convert – Modifies the source data before passing it to the target for display in the UI.

2) ConvertBack – Modifies the target data before passing it to the source object. This method is called only in TwoWay bindings.

For more reference you can see this link.

In this following blog post I shall be demonstrating you how to create an indexvalue
converter for your Windows phone app. The different steps you need to follow are

 

Step 1:

First create a class having the name IndexToColorConverter in your Project.

 

 

And add the following code to it as shown below.

 


 

Silverlight

WinRT  
Note: The only difference between Silverlight and WinRT is that the data type of parameter culture has been changed to string in WinRT.

 

Step 2:

Open the XAML page where you need to use this converter and add the following code in the namespace of the XAML page.


Note: Here Tips8 is the name of the Project. You need to replace it with your own project name.

 

Step 3:

Add the following code into PhoneApplicationPage page resources section in the XAML. It will create a Static resource within the XAML page with a specific key which will be used by the UI elements further.

 



  Note: The name of the key can be same as the Class name of color converter or something else. In order to avoid confusion we have kept both names as same.   Step 4: Now in the UI element just bind the property you wish to do so. For example in our project we have binded the Background Property and have assigned the IndexToColorConverter to it. The code for the following is

Note: Here index is the object property to which button is binded.

 

If you have any doubts regarding data binding you can refer to the following blog post.

http://windowsapptutorials.com/windows-phone/data-binding/data-binding-in-windows-phone-app-one-way-binding/


Reading and Writing in an Existing text file in Windows phone app (Silverlight / WinRT)

This is a small blog post in which I shall be explaining you how to read and write to an existing text file which is present locally in your project.

Let us suppose the text file is having the name myfile.text and is present under main root directory.

 


 

Step 1:

Now first thing you need to do is to set Build Action to Content. And, change Copy to Output Directory to Copy Always. This will ensure the file itself ships with your application. If it doesn’t, you won’t have a file to read.

 


 

Step 2:

Now you can read and write your text files easily as shown in the code below

 

Windows Phone Silverlight

Reading

 

 

Writing

 

 

WinRT

In WinRT you can access files in the local app data store using the “ms-appdata:///local/” protocol. To access files in the app package, use Windows. ApplicationModel. Package. Current. InstalledLocation.

Reading

 

 

Writing

 

 

Note: Suppose your file is not located in main directory and is located under the root folder Files as shown below.

 


 

Then file name would be


Note: You can use the same technique for an xml or json file.


Navigation in Windows Phone 8 and 8.1

In this post we will discuss how to navigate between different pages in Windows Phone 8.1 and Windows Phone 8 apps.

Silverlight

To navigate to another page in a WP Silverlight app, using the following code.
To pass information between pages, save an object in a state like so,

On the navigated page in the constructor, use the following code to retrieve the object.
To view the pages in the back stack, use the following code.

To remove the previous page from the stack, which is useful after a user has logged in & you don’t want them going back to the login page. Use the following method.
It’s best to use the above method in the OnNavigatedTo method in the page code behind.

WinRT

To navigate to another page in a WP WinRT app, using the following code.

To pass information, pass the object as a parameter.
In the navigated page code behind, in the OnNavigatedTo method use the following code to retrieve the object.

To go back, use this simple method,
To remove the previous page from the stack, which is useful after a user has logged in & you don’t want them going back to the login page. Use the following method.

It’s best to use the above method in the OnNavigatedTo method in the page code behind.

Download Navigation in Silverlight

Download Navigation in WinRT

Using FileOpenPicker in Windows Phone 8.1 to choose picture from Picture Gallery

In this tutorial I will show you how you could use Windows Phone 8.1’s FileOpenPicker API to access the picture gallery. It is quite simple to implement but I couldn’t find good resources which showed how it can be done. This tutorial will let you to either click or choose an image from the picture gallery and display it in your app. Here are the steps,

Step 1: Add Picture Library Capability in your Windows Phone 8.1 app

Open the Package.appmanifest file in your project and tick Picture Library under the Capabilities tab.

Step 2: Add File Open Picker as a declaration

Navigate to the Declarations tab and add File Open Picker as a supported declaration. Also under the Properties section of the declaration choose all the supported file types for your application. In our case we have added .jpg, .png, .bmp and .jpeg. You may tick the Supports any file type checkbox if you wish.

Step 3: Add a button and image to MainPage.xaml

For the purpose of demonstration, we have added an image and button control in our MainPage.xaml.

Step 4: Add global variables view and ImagePath

The variable view is of type CoreApplicationView and holds the current application view. ImagePath is a string which holds the path of the image.
Also initialize the view in the page’s default constructor.

Step 5: Add the code to call the File Open Picker on Button Click event

We call the File Open Picker API on Button click event and add the subset of supported file types to the call.

Step 6: On View activated event set the image to the MainPage

The picked file is saved to storageFile and it is then decoded to a Bitmap image before displaying it in the UI.

Download MediaGallery

How to change the Windows phone Panorama Background image dynamically with Animation

In this blog post I will show you how to change the Background image of Panorama page in windows phone app dynamically using smooth fade in animation.


 

To add this animation in your app you need to follow the certain steps given below

 

1. Create a new Project having the name PanormaBackground.

 


 

2. Then add a new Panorama Page to the project having the name PanoramaPage.xaml.

 


 

3. Add a button on the MainPage.xaml having the content Panorama Page. On the click event handler of the button add the following code given below.

 

 

4. Now open the Page PanoramaPage.xaml

a) Change the name property of Panorama control to mypanorama.

 


 

b) Add the following code in Panorma control of the Page as shown in the image given below.

 

 


 

5. Now open the PanoramaPage.xaml.cs

a) Our first step would be to switch the background images. We will create a FadeIn/FadeOut animation effect with the help of following code given below.

 

 

b) Next we need to add the trigger function to change the background image.

The main calling function to trigger the animation

 

 

The function to start the Storyboard animation

 

 

The Storyboard Complete Event handler function

 

 

c) As every time we need to change the uri of background image of Panorama Page. So we will be using the following function given below to return a new uri every time.

 

 

d) Last thing we need to do is to call the trigger function in Constructor of the PanoramaPage.xaml.cs.

 


 

6. Now run the Application on emulator. And open the Panorama Page to see the effect of animation.

 

Before animation:


 

After animation:


 

7. I hope this post will be helpful to you. You can download the full source project file from the link given below.

 
Download Full Project PanoramaBackground