My First Windows Phone App (for Absolute Beginners)


I’ve been interested in beginning Windows Phone / Windows 8 development in my spare time. I have been looking at some excellent video tutorials presented by Bob Tabor on Channel 9:

As I am an absolute beginner I wanted to create a simple app that would be of use to me. I ended up just laying out information from a .pdf using the panorama template for Windows Phone 8.1. Essentially it is just a fancy “Hello World” kind of app with graphics created / edited using Inkscape …

I found that this was a good exercise for starting to learn the basics of working with grids and layouts – textblocks, stackpanels and simple text formatting. This is the the app as it stands right now:

Changing the application name is very simple – just change the Panorama Title in MainPage.xaml:

         <!--Panorama control-->

        <phone:Panorama Title="TheraTog Care">


Next I commented out the code for the longlistselector so that I could hard-code my own data:

<!--Panorama item one-->
            <phone:PanoramaItem Header="Caution">
                <!--Single line list with text wrapping-->
                <!--<phone:longlistselector margin="0,0,-22,0" itemssource="{binding items}">


Then I setup columns and rows inside my grid:

                        <ColumnDefinition Width="50" />
                        <ColumnDefinition Width="*" />

                        <RowDefinition Height="Auto" />

Note: There are actually multiple instances of line 61 – one for each line of data displayed.

 Images were positioned into Grid rows:

                    <Image Source="Assets/No.png"


Basic TextBlock formatting was straight-forward with margins, text-wrap and grid positions defined:

                        Text="Wash seperate from other items of clothing">


The white background with black text was achieved with a white Border around a TextBlock:

                   <Border Background ="White"         
                        Text="Remove tabs before washing">


For the About page I installed a NuGet package called YLAD (Your Last About Dialogue). I followed the documentation to add the text that I wanted to the About page. Then I just needed to add an Application Bar and link it to the About page:



        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True" Mode="Minimized">
                <shell:ApplicationBarMenuItem Click="MenuItem1_Click" Text="about"/>



As you can see the code for the Application Bar comes after the closing phone:Panorama and Grid tags. On line 715 I set the Mode to Minimized so that the Application Bar takes up as little space as possible. Line 717 is my first click event handler – below is the code behind in MainPage.xaml.cs:

        private void MenuItem1_Click(object sender, EventArgs e)
            NavigationService.Navigate(new Uri("/YourLastAboutDialog;component/AboutPage.xaml", UriKind.Relative));


Line 35 navigates to the YLAD About page.

While there is nothing complicated in this app I did already learn that I should be doing things differently. I should have defined a style to manage my textblocks. This would have really helped when i came to making changes to the formatting of my text and would have greatly reduced the amount of redundant code and copying and pasting that I did.

I used Inkscape to produce the graphics and a Windows Store app called Vector to produce the different size tiles that I needed for the start screen.

Other things to fix would be the size of the Panorama Title and a new Panorama background.

I have to say that I am surprised how much I have learned even from trying to produce something as simple as this. I’d like to have a go at a To-Do list for my next app …


One thought on “My First Windows Phone App (for Absolute Beginners)

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s