A Simple Oxygene Windows Phone App

This series of steps requires the use of Oxygene within Visual Studio. You also need to install the Windows Phone SDK 8.0 on Windows 8. It takes some time to install but then does work quite speedily. Experience with WPF applications is a very helpful for getting started with Windows phone apps, and much of the code in this page is similar or identical to that on the preceding WPF page. See also our RemObjects C# version.

The result will be a program in which you can enter a forename, be greeted personally and use a button to clear the data. The following screenshot shows the program in action in the emulator (which is installed with the Windows Phone SDK). We captured and saved the screenshot using one of the additional tools of the emulator.

Phone App working in Emulator

Phone App working in Emulator

Tip: The emulator takes some time to start up, so when you have tested the current version of your code it is sensible to stop debugging with Shift+F5 or by clicking on the red square icon without closing the emulator.

The layout uses a StackPanel to place the other components immediately under each other.

  1. Select menu item File > New > Project (or type Ctrl+Shift+N), highlight the Windows Phone Application and name the project PhoneApp_Greeting. Click the OK button. Accept the default OS (Windows Phone OS 8.0).

  2. Delete all of the outer Grid and contents in MainPage.xaml.
  3. Double click on StackPanel in the Toolbox and put HorizontalAlignment="Stretch" XAML code instead of the height and width properties.
  4. Double click on TextBlock in the Toolbox and change the Text property from TextBlock to Greeting. Add to the properties in the XAML code these properties: HorizontalAlignment="Center" FontSize="36" FontWeight="Bold" Foreground="DarkOliveGreen"
  5. Double click on Button in the Toolbox, name it btnClear, change the Content property from Button to Clear. Manually add to its XAML properties Click="btnClear_Click"
  6. In the Oxygene code in MainPage.xaml.pas add this method declaration in the public section under the constructor: method btnClear_Click(sender: System.Object; e: System.Windows.RoutedEventArgs);. In the implementation section add the full method below.
    method MainPage.btnClear_Click(sender: System.Object; e: System.Windows.RoutedEventArgs);
    begin
      txtbGreeting.Text := '';
      tbForename.Text := '';
      btnClear.IsEnabled := False;
    end;
  7. Double click on TextBlock in the Toolbox and change the Text property from TextBlock to Please enter your forename in the box below..
  8. Double click on TextBox in the Toolbox, name the new TextBox tbForename and remove the Text property "TextBox". Manually add to the XAML properties KeyDown="tbForename_KeyDown".
  9. Add this method declaration under that of the button click: method tbForename_KeyDown(sender: System.Object; e: System.Windows.Input.KeyEventArgs);
  10. Add the full method code below to the implementation section.
    method MainPage.tbForename_KeyDown(sender: System.Object; e: System.Windows.Input.KeyEventArgs);
    begin
      btnClear.IsEnabled := True;
      if e.Key = e.Key.Enter then
        txtbGreeting.Text := 'Hello, ' + tbForename.Text + '!';
    end;
  11. Double click on TextBlock in the Toolbox, name it txtbGreeting and remove the Text property "TextBlock". Add to its properties: FontSize="36" Foreground="Blue"
  12. Try it!

The final Oxygene and XAML code follows.

Oxygene code

(We removed unnecessary comments and unneeded references in the uses clause).
namespace PhoneAppGreeting;

interface

uses
  Microsoft.Phone.Controls,
  Microsoft.Phone.Shell;

type
  MainPage = public partial class(PhoneApplicationPage)

  public
    constructor;
    method btnClear_Click(sender: System.Object; e: System.Windows.RoutedEventArgs);
    method tbForename_KeyDown(sender: System.Object; e: System.Windows.Input.KeyEventArgs);
  end;

implementation

constructor MainPage;
begin
  InitializeComponent();
end;

method MainPage.btnClear_Click(sender: System.Object; e: System.Windows.RoutedEventArgs);
begin
  txtbGreeting.Text := '';
  tbForename.Text := '';
  btnClear.IsEnabled := False;
end;

method MainPage.tbForename_KeyDown(sender: System.Object; e: System.Windows.Input.KeyEventArgs);
begin
  btnClear.IsEnabled := True;
  if e.Key = e.Key.Enter then
    txtbGreeting.Text := 'Hello, ' + tbForename.Text + '!';
end;

end.


XAML code

XAML Code
Programming - a skill for life!

How to write programs in the Oxygene for .Net dialect of Pascal