Windows Phone 7 Development : Building a Trial Application (part 1) - Building the User Interface

The trial software application that you will build in this section is a currency converter. It calls a web service to obtain the current exchange rate for the currencies a user specifies, and then tells users how much of the desired currency they will receive in exchange for the currency they wish to exchange. If the application is running with a trial license, users will be able to convert currencies for free.

However, as we all know, consumers never get the official market exchange rates. Various middlemen take a decent-size cut of foreign exchange transactions, so to calculate the actual amount of foreign currency you can expect to receive, the full application provides another screen, called the "More Stuff" screen. With "More Stuff," users can enter the actual exchange rate quoted by an exchange broker and see how much foreign currency they will receive after they have paid a commission. This "More Stuff" screen will be available only to those who have paid you $.99 and acquired the full version of the application. Future enhancements to this application could include maps, shared between all users of this application, that show the best places to exchange currency around town, with the commission rates as a percentage of the transaction charged by those places. Power to the consumers at last!

To create this application, you will employ several Windows Phone 7 techniques that we cover in this book. As we introduce such features, we will point to the location in the book that you can refer to for more in-depth coverage of the material. We will also emphasize the functionality that is available and disabled with an application running with a trial license, and we will utilize the approach that we have covered in this book to simulate both trial and full license modes and to ensure that our application functions correctly under both.

Now let's build and test the application.

1. Building the User Interface

The Currency Converter application includes three pages: one for the main application screen that performs currency conversions; one to prompt the user to upgrade to the full application license the application is running under a trial license; and one for additional options, such as determining how much money you actually lose on a conversion. In this section, you will create each of these pages. Follow these steps to create a Currency Converter project and add application pages:

1. Launch Visual Studio 2010 Express for Windows Phone, and create a new Windows Phone Application project. Name it "CurrencyConversion."

2. Make sure MainPage.xaml is open in Design view. For MainPage.xaml, the end goal is to have a screen with a layout similar to the one shown in Figure 1. The screen looks a little busy, so we will go over each screen element, one by one, to understand the type of the element and element's name. Element names and types will be referred to from code and, hence, are important to get right. Table 1 summarizes field names and types. A portion of the XAML code that creates the "Amount to Convert" text box, two list boxes, and the corresponding captions is shown here:

   Figure 1. Currency Converter MainPage.xaml page layout

   

   
   

   <TextBlock Height="30" HorizontalAlignment="Left" Margin="24,14,0,0"
   Name="textBlock1" Text="Amount to Convert" VerticalAlignment="Top" />
               <TextBox Height="68" HorizontalAlignment="Left" Margin="6,36,0,0"
   Name="txtAmountToConvert" Text="" VerticalAlignment="Top" Width="446" />
               <ListBox Height="93" HorizontalAlignment="Left" Margin="24,137,0,0"
   Name="lstConvertFrom" VerticalAlignment="Top" Width="220" />
               <TextBlock Height="30" HorizontalAlignment="Left" Margin="24,101,0,0"
   Name="textBlock2" Text="Convert from (currency)" VerticalAlignment="Top" Width="220" />
               <TextBlock Height="28" HorizontalAlignment="Left" Margin="262,101,0,0"
   Name="textBlock3" Text="Convert to (currency)" VerticalAlignment="Top" Width="190" />
               <ListBox Height="93" HorizontalAlignment="Left" Margin="263,137,0,0"
   Name="lstConvertTo" VerticalAlignment="Top" Width="205" />
   
   					  

   
   

   Table 1. User Controls for MainPage.xaml

   Application Field	Field Name	Field Type
   Amount to Convert	txtAmountToConvert	TextBox
   Convert from (currency)	lstConvertFrom	ListBox
   Convert to (currency)	lstConvertTo	ListBox
   Status	txtStatus	TextBlock
   Total Converted	txtTotalConverted	TextBlock
   Convert Button	btnConvert	Button
   More Stuff Button	btnMoreOptions	Button

   
   

Next, add the "nag" page, or the page that will try to get users to purchase the full version of our application if the user is executing our application under a trial license.

3. To do that, right-click the project name in Solution Explorer and select Add => New Item => Windows Phone Portrait Page. Name the page Upgrade.xaml and select OK.

4. Bring up the design surface of the Upgrade.xaml page, and make it look like Figure 2.

The page consists of a message and two buttons. The message prompts the user to upgrade. One of the buttons enables the user to purchase a full license, and the other one simply returns the user to the main application screen. Ensure that the buttons are properly named by verifying their names with Table 11-2:

Table 2. User Controls for Upgrade.xaml

Application Field	Field Name	Field Type
Yes, upgrade	btnUpgrade	Button
No, take me back	btnGoBack	Button

Figure 2. The "nag" screen layout

Finally, add the "More Stuff" page, or the page that will display features available only to paid users. Sadly, the users of our application will most likely feel cheated at the moment: our only feature available to them will be the calculation of the money they do not get as a result of using the currency conversion services.

5. To add the "More Stuff" page, right-click the project name in Solution Explorer and select Add => New Item => Windows Phone Portrait Page. Name the page MoreStuff.xaml and select OK.

6. Bring up the design surface of the MoreStuff.xaml page, and make it look like Figure 3. Refer to Table 3 field names and types:

   Figure 3. The "More Stuff" screen layout with functionality available to full-license users only

   

Table 3. User Controls for MoreStuff.xaml

Application Field	Field Name	Field Type
Exchange Rate Quoted	txtExchangeRateQuoted	TextBox
Calculate Damage	btnCalculateDamage	Button
Back to Main	btnBackToMain	Button
Total damage	txtDamageExplained	TextBlock

With design layout complete, you are now ready to add code to the application. In the next section, you will add code feature-by-feature, starting with a reference to the web service that supplies current exchange rates.