My First Windows Phone App (for Absolute Beginners)


Windows8-Phone-Logo

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}">
                    <phone:longlistselector.itemtemplate>-->
                        <!--<DataTemplate>-->

 

Then I setup columns and rows inside my grid:

                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="50" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>

                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>

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"
                           Grid.Row="1"
                           Height="30"
                           VerticalAlignment="Center"
                           HorizontalAlignment="Right">
                    </Image>

 

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

                    <TextBlock
                        Margin="18,5,0,0"
                        TextWrapping="Wrap"
                        Grid.Row="5"
                        Grid.Column="1"
                        Text="Wash seperate from other items of clothing">
                    </TextBlock>

 

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

                   <Border Background ="White"         
                            Grid.Row="7"
                            Grid.Column="1"
                            Margin="18,25,0,0">
                        <TextBlock
                        Margin="0,5,0,5"
                        TextWrapping="Wrap"
                        Grid.Row="8"
                        Grid.Column="1"
                        Foreground="Black"
                        TextAlignment="Center"                       
                        Text="Remove tabs before washing">
                        </TextBlock>
                    </Border>

 

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:

        </phone:Panorama>

    </Grid>

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

</phone:PhoneApplicationPage>

 

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:

WordPress.com Logo

You are commenting using your WordPress.com 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