Creating a Windows Phone 7 Trial App: Advanced Buy Now Implementation

Creating a Windows Phone 7 Trial Application: Adding Buy Now Functionality

published on: 5/13/2011   | Views: N/A   | Tags: Trial

by WindowsPhoneGeek

This is the second post in the "Creating a Windows Phone 7 Trial Application" series of three posts in which I explain all about creating a trial app in Windows Phone 7:

• Creating a Windows Phone 7 Trial Application |Part1: Implementation and Best Practices
• Creating a Windows Phone 7 Trial Application |Part2: Adding Buy Now Functionality
• Creating a Windows Phone 7 Trial Application |Part3: Advanced Buy Now Implementation

In this post I am going to talk about building "Buy Now" functionality of a Windows Phone 7 trial app. I will give several different strategies/approaches with examples and source code.This post is also focused on some important thing that you need to consider when implementing the "Buy Now" option.

  To begin with, in short Trial mode gives you the option to allow users to try your application before buying it. The trial license does not expire, but is replaced by a full license when the customer purchases the application. That is why it is very important to provide a suitable and user friendly way for purchasing the full version of your WP7 app.

NOTE: Take a look at the first article from this series for reference: Creating a Windows Phone 7 Trial Application |Part1: Implementation and Best Practices

Implementing "Buy Now" functionality using the standard approach

The easies way to implement a "Buy Now" functionality is to use the standard approach with navigation between Pages using NavigationService. At first we will create  two separate WP7 Pages: FullFunctionPage.xaml and BuyPage.xaml.

FullFunctionPage.xaml - this is the page that users will see if using the Full version of your app.

BuyPage.xaml - this is the page that will appear when a user wants to buy your app

?

1 2 3 4 5 6 7 8 9

< Grid x:Name = "ContentPanel" Grid.Row = "1" Margin = "12,0,12,0" >      < Grid.RowDefinitions >          < RowDefinition Height = "*" />          < RowDefinition Height = "auto" />      </ Grid.RowDefinitions >      < TextBlock Grid.Row = "0" TextWrapping = "Wrap" FontSize = "40"                 Text = "This functionality is only available in the full version. Click the buy button bellow in order to purchase the full version." />      < Button Grid.Row = "1" Content = "Buy full version" Click = "Button_Click" /> </ Grid >

Here is how we can implement the actual purchasing process:

?

1	using Microsoft.Phone.Tasks;

?

1 2 3 4 5

private void Button_Click( object sender, RoutedEventArgs e) {      MarketplaceDetailTask marketplaceDetailTask = new MarketplaceDetailTask();      marketplaceDetailTask.Show(); }

In order to determine which page is visible we use the following code where App.IsTrial is a new static property that we have created and explained in Part1 of this article:

MaunPage.xaml.cs

?

1 2 3 4 5 6 7 8 9 10

if (App.IsTrial) {      // show buy now page      this .NavigationService.Navigate( new Uri( "/BuyPage.xaml" , UriKind.Relative)); } else {      // show full function page      this .NavigationService.Navigate( new Uri( "/FullFunctionPage.xaml" , UriKind.Relative)); }

Here is how the navigation and the UI of the pages should look like:

     

Although it is it a good solution it is not suitable in all  cases, moreover if your app has a cool UI, for example with lots of animations in a particular style then users will expect the "Buy Now" functionality to be just so attractive or at least in the same style.

Implementing "Buy Now" functionality using PopUp

In this approach we use PopUp instead of PageNavigation. We will use the Coding4Fun MessagePrompt control because it is fully customizable and has a lot of benefits in comparison with the standard Popup or Message Box. Like for example we can add composite content as a body, we can add customized Image buttons, etc.  (You will have to add references to : Coding4Fun.Phone.Controls.dll and Microsoft.Phone.Controls.Toolkit)

NOTE: For more information about the Coding4Fun MessagePrompt take a look at our in depth article: Coding4Fun WP7 Message Prompt in depth

• Option1:Using WP7 Page

In this example we will use the previously created  BuyPage.xaml  WP7 Page as a content of the Message Prompt. We will also remove the default popup buttons and will change the color of the Overlay. Here is how we determine which page is visible and how the "Buy Now" popup should look like:

MaunPage.xaml.cs

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

if (App.IsTrial) {      // show buy now popup      MessagePrompt prompt = new MessagePrompt();      prompt.Body = new BuyPage();      prompt.ActionPopUpButtons.Clear();      prompt.Overlay = new SolidColorBrush(Color.FromArgb(155,41, 41, 41));        prompt.Show(); } else {      // show full function page      this .NavigationService.Navigate( new Uri( "/FullFunctionPage.xaml" , UriKind.Relative)); }

   

• Option2: Using UserControl

In this example we will create a new WP7 UserControl and will name it BuyNowUserControl.xaml. After that I will demonstrate several different scenarios.

Case1: We will add a "Buy Now" Image inside BuyNowUserControl.xaml UserControl:

BuyNowUserControl.xaml

?

1 2 3 4 5 6 7 8 9 10 11

< Grid >      < Grid.RowDefinitions >          < RowDefinition Height = "300" />          < RowDefinition Height = "*" />      </ Grid.RowDefinitions >      < Border Grid.Row = "0" Background = "YellowGreen" >      < TextBlock   TextWrapping = "Wrap" FontSize = "32" Padding = "10"                     Text = "This functionality is only available in the full version. Click the buy button bellow in order to purchase the full version." />      </ Border >      < Image Grid.Row = "1" Source = "buy_now1.png" Stretch = "None" MouseLeftButtonDown = "Image_MouseLeftButtonDown" /> </ Grid >

BuyNowUserControl.xaml.cs

?

1 2 3 4 5 6 7 8 9 10 11 12 13

public partial class BuyNowUserControl : UserControl {      public BuyNowUserControl()      {          InitializeComponent();      }        private void Image_MouseLeftButtonDown( object sender, MouseButtonEventArgs e)      {          MarketplaceDetailTask marketplaceDetailTask = new MarketplaceDetailTask();          marketplaceDetailTask.Show();      } }

Here is how we implement the relationship between our new UserControl and the rest of our:

MaunPage.xaml.cs

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

if (App.IsTrial) {      // show buy now page      MessagePrompt prompt = new MessagePrompt();      prompt.Body = new BuyNowUserControl();      prompt.ActionPopUpButtons.Clear();      prompt.Background = new SolidColorBrush(Colors.White);      prompt.Overlay = new SolidColorBrush(Color.FromArgb(155,41, 41, 41));            prompt.Show(); } else {      // show full function page      this .NavigationService.Navigate( new Uri( "/FullFunctionPage.xaml" , UriKind.Relative)); }

  

Case2: We will add a "Buy Now" button inside the MessagePrompt. Here is the code:

MaunPage.xaml.cs

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

if (App.IsTrial) {      // show buy now popup      MessagePrompt prompt = new MessagePrompt();      prompt.Body = new BuyNowUserControl();      prompt.IsCancelVisible = true ;      prompt.ActionPopUpButtons.RemoveAt(0);      Button button = new Button();      button.Margin = new Thickness(0, -10, 0, 0);      button.Click += new RoutedEventHandler(button_Click);      Image img = new Image();      img.Source = new BitmapImage( new Uri( "buy_now.png" , UriKind.RelativeOrAbsolute));      button.Content = img;      prompt.ActionPopUpButtons.Add(button);      prompt.Overlay = new SolidColorBrush(Color.FromArgb(155,41, 41, 41));            prompt.Show(); } else {      // show full function page      this .NavigationService.Navigate( new Uri( "/FullFunctionPage.xaml" , UriKind.Relative)); } <pre class = "brush: csharp;" > void button_Click( object sender, RoutedEventArgs e) {      MarketplaceDetailTask marketplaceDetailTask = new MarketplaceDetailTask();      marketplaceDetailTask.Show(); } </pre>

In this example I used Button but if you prefer you can use the Coding4Fun RoundButton as well.

NOTE: UPDATE: When you test Trial application Buy Now for a real application you must seta a valid ContentIdentifier (the unique Marketplace ID of your app)

?

1 2 3 4

MarketplaceDetailTask task = new MarketplaceDetailTask(); task.ContentType = MarketplaceContentType.Applications; task.ContentIdentifier = "82a23635-5bd9-df11-a844-00237de2db9e" ; task.Show();

That was all about how to implement "Buy Now" functionality for your WP7 Trial application using different techniques. Stay tuned with the rest of the content and Part 3 of this series: Creating a Windows Phone 7 Trial Application |Part3: Advanced Buy Now implementation where I will demonstrate a "Buy Now" implementation with automatically show/hide message depending on the calculated time since the Trial first launch date.

WP7TrialAppBuyNowSample

I hope that the article was helpful.