#3 – Creating Your First App (Part 2)

Hello again, today we’re going to be finishing off our app.
If you haven;t already done part one go back and do it:
https://roncontech.wordpress.com/2014/03/11/2-creating-your-first-app-part-1/

Otherwise let us continue 🙂

Today we’ll be covering:

  • Navigation between pages (C# code)
  • Pivot Pages/Items/Controls
  • Fields/Attributes
  • More on TextBlocks
  • ScrollViewers
  • Images
  • Testing
  • App Store Information

Lets get goin’!

Linking pages with “Real” code (C#)

XAML isn’t really code, it’s called a mark up language (Extensible Application Markup Language), it just shows where elements go, it’s all about presentation, very shallow really.

C# is real, tough, programming code, and you can bend it to your will and make it do all sorts of cool things.

We’re going to make it do something when we click a button.
As at the moment the buttons do nothing when we click on them.
Each button has its own method, a method is just a container that holds instructions together, these instructions happen one after the other from top to bottom.

Each button is going to have its own method and all these methods will be inside a class.
The class we’ll go into first is called….. “MainPage.xaml.cs”.
Just click on the arrow beside the “MainPage.xaml” file in your solution explorer to open it up and you’ll see your beautiful .cs file.

It’s already created for you, how nice.
Double click on this file to view it.

The first method you’ll see is: public MainPage(){}
This method starts whenever the page is loaded.
It’s handy for setting up variables and the such.

Other then that the class is empty.

I want you to go back into your HomePage.xaml page and double click the “Leinster” button in the design view.

You’ll be brought back into the c sharp file where you’ll see a new method for that button was created.
We didn’t name the button, it automatically names the method after the button name + “_Click.
Just makes it easier to read!

Go back to the xaml view for the homepage and you’ll see a new field has been added to the first button element: Click=”Button_Click_1″

I want you to add a name field to the second button, call it: Name=”ulster”.

Now double click on that button in the design view, the method created will be ulster_Click which is way more intuitive!

9-ButtonNameClick

10-csharpMethods

These methods are empty, we need to add some functionality.

type the following in between the curly brackets of the Button_Click method:

NavigationService.Navigate(new Uri(“/Leinster.xaml”, UriKind.RelativeOrAbsolute));

What this statement does is navigate to the Leinster.xaml page.

11-NavigationService

Windows Phone automatically has a back button built in so you don’t have to worry about that.

Now you can navigate!

Pivot Page (swiping)

Next we’ll create a Pivot Page for Dublin which will hold all it’s data.

Right click on the name of your project in the solution explorer, the folder directly above all your pages (not the solution).
And add a new item, when the windows pops up select “Windows Phone Pivot Page” and call it “Dublin”.

12-PivotPageSelect

Once selected you’ll see the following:

13-PivotXAML

Instead of having a title panel container you have a pivot control container, this can hold as many pivot items as you want, just copy and paste the pivot item element.

Each PivotItem element is like it’s own content panel.
All you have to do is change:
<Grid/>
TO
<Grid>

</Grid>

and add your stuff into the middle of the grid element there.
There’s nothing else to it really.

Change the Title field of the Pivot Control to “Dublin”.
Change the Header for the two Pivot items to “Info” and “Facts” in that order.
When you land on this page it will show the first pivot item then you can swipe to the right to get the second pivot items info and so on.

I’m going to change the layoutRoot Grid background field from transparent to “Dark Grey”
You can specify different colors for each pivot item, so when the user swipes the color will change.
I’ll add a Background field to each pivot item element, Info will be “AliceBlue”, Facts will be “BlanchedAlmond”.

Next we’ll copy the first pivot item element (info) and paste it after the second pivot item (facts):
We’ll rename the header “History”, you can change the comment as well to <!–Pivot item three–> for aesthetic purposes.
I’ll take the background field out of this element, the default is transparent.

Make sure your XAML code is looking like this:

14-PivotItems

Adding in Information

Now all we need to do is add in some information, Hmmm… to Google!

I need to get text for the three different pivot items; Info, Facts & History.
I’m going to go to Wikipedia to get this information (http://en.wikipedia.org/wiki/Dublin).

First of all we need to add a a TextBlock element into our grid element to hold the text.
To do this add in <TextBlock>, Once you add in the last angle bracket(>) it will add the closing tag for you.
Paste your information between the TextBlock tags.
You may want to edit this information so it look okay, you’re going to have the entire paragraph on one line, to add a line break add in the tag <LineBreak/>, this skips a line.
This is what mine looks like:
<TextBlock TextWrapping=”Wrap”>Dublin; Irish: Baile Átha Cliath, meaning “town of the hurdled ford”, is the capital and most populous city of Ireland. The English name for the city is derived from the Irish name Dubhlinn, meaning “black pool”.<LineBreak/>Dublin is situated in the province of Leinster near the midpoint of Ireland’s east coast, at the mouth of the River Liffey and the centre of the Dublin Region.<LineBreak/></TextBlock>

That is all on one line.

15-TextBlock

As you can see I added in three TextBlock elements, the reason for this is to keep each section nice and tidy.
It also allows me to add different elements between the text.
Like I have done so with an Image element.
I didn’t use the toolbox for adding these, I just typed it in, some elements have multiple fields/attributes that you need to have and using the toolbox adds these all in for you.
The Image, StackPanel, ScrollViewer, Grid and TextBlock elements are all pretty simple.
They’re just basic containers really.

The reason they are all inside a stack panel, is that the stack panel keeps everything in order.
If the stack panel wasn’t there, then all the elements would b on top of each other and it would be a big mess.
The text would be on top of the image.
The other reason I used a stack panel is that I wanted to be able to scroll this page down, due to the text coming off the screen, if you don’t use a scroll viewer than the page is static, you can’t move it.
A scroll viewer can only contain one element; I couldn’t add in 3 text blocks and an image element but I can add in one stack panel element. This stack panel element can hold as many elements as it likes.

The text block element nearly always needs to have the TextWrapping field/attribute. Without this field, the text goes off the screen and you can’t view it.
The Image element always needs a Source field, this just specifies where the image is located.
I added a folder called “Images” into our project by right clicking on “IrelandCounties” in the Solution Explorer, then clicking on Add -> New Folder and named it “Images”
I then right clicked on our new Images folder and clicked Add -> “Existing Item…”.
Search for your file and add it. I added three images of Dublin, one for each pivot item. (Just Google “Dublin”)

I changed the background color for this pivot item from AliceBlue to Blue, as it was to hard to read the white text.
Two other really useful Image element Fields are Width and Height.

Here’s what my page looks like at the moment.

16-PivotItemDesignView

Next you can copy everything inside the first pivot items grid and paste it into the other two pivot items.
Mine is ready for the next bit of info:

17-PivotItemPaste

I’m going to add the source for the two images and then add in some more text into the text blocks.

Got my history info from” http://www.dublin.info/history/” and my facts from “http://www.ireland-information.com/blog/?p=198&#8221;

XAML Code Review

This is my entire XML page code:

<phone:PhoneApplicationPage x:Class="IrelandCounties.Dublin" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone" xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" FontFamily="{StaticResource PhoneFontFamilyNormal}" FontSize="{StaticResource PhoneFontSizeNormal}" Foreground="{StaticResource PhoneForegroundBrush}" SupportedOrientations="Portrait" Orientation="Portrait" shell:SystemTray.IsVisible="True">

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="DarkGray">
        <!--Pivot Control-->
        <phone:Pivot Title="Dublin">
            <!--Pivot item one-->
            <phone:PivotItem Header="Info">
                <Grid>
                    <ScrollViewer>
                        <StackPanel>
                            <TextBlock TextWrapping="Wrap">Dublin; Irish: Baile Átha Cliath, meaning "town of the hurdled ford", is the capital and most populous city of Ireland. The English name for the city is derived from the Irish name Dubhlinn, meaning "black pool".<LineBreak/>Dublin is situated in the province of Leinster near the midpoint of Ireland's east coast, at the mouth of the River Liffey and the centre of the Dublin Region.<LineBreak/></TextBlock>
                            <Image Source="Images/Dublin1.jpg" />
                            <TextBlock TextWrapping="Wrap">Founded as a Viking settlement, it evolved into the Kingdom of Dublin and became the island's principal city following the Norman invasion.<LineBreak/>The city expanded rapidly from the 17th century; it was briefly the second largest city in the British Empire and the fifth largest in Europe.<LineBreak/>Dublin entered a period of stagnation following the Act of Union of 1800, but it remained the economic centre for most of the island.<LineBreak/>Following the partition of Ireland in 1922, the new parliament, the Oireachtas, was located in Leinster House.<LineBreak/>Dublin became the capital of the Irish Free State and later the Republic of Ireland.<LineBreak/></TextBlock>
                            <TextBlock TextWrapping="Wrap">Like the cities of Cork, Limerick, Galway and Waterford, Dublin is administered separately from its respective County with its own City Council.<LineBreak/>The city is listed by the Globalization and World Cities Research Network (GaWC) as a global city, with a ranking of "Alpha-", placing Dublin among the top 30 cities in the world.<LineBreak/>It is a historical and contemporary cultural centre for the country, as well as a modern centre of education, the arts, administration, economy, and industry.</TextBlock>
                        </StackPanel>
                    </ScrollViewer>
                </Grid>
            </phone:PivotItem>

            <!--Pivot item two-->
            <phone:PivotItem Header="Facts">
                <Grid>
                    <ScrollViewer>
                        <StackPanel>
                            <Image Source="Images/DublinFact.png" Height="330"/>
                            <TextBlock TextWrapping="Wrap">1. Dublin’s O’Connell Bridge was originally made of rope and could only carry one man and a donkey at a time. It was replaced with a wooden structure in 1801. The current concrete bridge was built in 1863 and was first called ‘Carlisle Bridge’.<LineBreak/></TextBlock>
                            <TextBlock TextWrapping="Wrap">2. O’Connell Bridge is the only traffic bridge in Europe which is wider than it is long and Dublin’s second O’Connell Bridge is across the pond in St. Stephen’s Green.<LineBreak/></TextBlock>
                            <Image Source="Images/oconnellbridge.jpg"/>
                            <TextBlock TextWrapping="Wrap"><LineBreak/>3. Dublin Corporation planted 43,765 deciduous trees in the Greater Dublin area in 1998.<LineBreak/></TextBlock>
                            <TextBlock TextWrapping="Wrap">4. Dublin’s oldest workhouse closed its doors for the last time in July 1969. Based in Smithfield, the premises housed 10,037 orphan children during the one hundred and seventy years it operated.<LineBreak/></TextBlock>
                            <TextBlock TextWrapping="Wrap">5. Dublin was originally called ‘Dubh Linn’ meaning ‘Black Pool’. The pool to which the name referred is the oldest known natural treacle lake in Northern Europe and currently forms the centrepiece of the penguin enclosure in Dublin Zoo<LineBreak/></TextBlock>
                            <TextBlock TextWrapping="Wrap">6. None of the so-called Dublin Mountains are high enough to meet the criteria required to claim mountain status. The Sugarloaf is the tallest ‘Dublin Mountain’ yet measures a mere 1389 feet above sea level. <LineBreak/></TextBlock>
                            <TextBlock TextWrapping="Wrap">7. The headquarters of the national television broadcaster, RTE, in Montrose, was originally built for use as an abattoir.<LineBreak/></TextBlock>
                            <TextBlock TextWrapping="Wrap">8. Dublin’s oldest traffic lights are situated beside the Renault garage in Clontarf. The lights, which are still in full working order, were installed in 1893 outside the home of Fergus Mitchell who was the owner of the first car in Ireland. <LineBreak/></TextBlock>
                            <TextBlock TextWrapping="Wrap">9. The Temple Bar area is so called because it housed the first Jewish temple built in Ireland. The word ‘bar’ refers to the refusal of Catholics to allow the Jewish community to enter any of the adjoining commercial premises.<LineBreak/></TextBlock>
                            <TextBlock TextWrapping="Wrap">10. Tiny Coliemore Harbour beside the Dalkey Island Hotel was the main harbour for Dublin from the fifteenth to the seventeenth centur<LineBreak/></TextBlock>
                        </StackPanel>
                    </ScrollViewer>
                </Grid>
            </phone:PivotItem>

            <!--Pivot item three-->
            <phone:PivotItem Header="History" >
                <Grid>
                    <ScrollViewer>
                        <StackPanel>
                            <TextBlock TextWrapping="Wrap">The first documented history of Dublin begins with the Viking raids in the 8th and 9th century. These led to the establishment of a settlement on the southside of the mouth of the Liffey, named Dubh Linn (Black Pool) after the lake where the Danes first moored their boats.Despite stone fortifications, Dublin town was sacked many times over the next two centuries but always recovered. By the 11th Century, Dublin prospered, mainly due to close trading links with the English towns of Chester and Bristol and soon became the most important town in Ireland with a population of about 4,000.<LineBreak/></TextBlock>
                            <Image Source="Images/DublinHistory.jpg"/>
                            <TextBlock TextWrapping="Wrap"><Bold>Dublin in the Middle Ages</Bold><LineBreak/>1169 marked the beginning of 700 years of Norman rule. The King of Leinster, Mac Murrough, enlisted the help of Strongbow, the Earl of Pembroke, to conquer Dublin. After Mac Murrough’s death, Strongbow declared himself King of Leinster, defeating both the Vikings and the High King of Ireland to win control of the city. However, the king of England, afraid Strongbow might become too powerful, pronounced himself Lord of Ireland and gave Dublin to the merchants of Bristol.<LineBreak/>Dublin was devastated by fire in 1190 and a stone fortress built sometime in the 13th century. The first mayor was appointed in 1220. Following this, the city grew fast and had a population of 8,000 by the end of the 13th century, prospering as a trade centre, despite an attack by the Scots in 1317.<LineBreak/>From the 14th to 18th centuries, Dublin was incorporated into the English Crown as The Pale and, for a time, became the second city of the British Empire. In 1537, a revolt occurred when the Lord Deputy of Ireland was executed in London. His son renounced English sovereignty and set about gathering an army to attack Dublin. However, he was defeated and subsequently executed.<LineBreak/>Dublin continued to prosper in the 16th Century and boasts one of the oldest universities in the British isles, Trinity College, which was founded by Queen Elizabeth I. The city had a population of 20,000 in 1640 before plague in 1650 wiped out almost half of the inhabitants. But the city prospered again soon after as a result of the wool and linen trade with England, reaching a population of 60,000 in 1700.<LineBreak/><LineBreak/></TextBlock>
                            <TextBlock TextWrapping="Wrap"><Bold>The History of Modern Dublin</Bold><LineBreak/>The city grew even more rapidly during the 18th century with many famous districts and buildings added, such as Merrion Square, Parliament House and the Royal Exchange, later to become City Hall. The beginnings of the City Corporation was created in 1757 with a body of men formed to widen, pave, light and clean the streets. Ireland's famous Guinness stout was first brewed in 1759 and a stagecoach service to other towns began. The Grand Canal was built in 1779 and a police force established in 1786. Towards the end of the century O’Connell Bridge and Kilmainham Gaol had been built and by 1800 the population had swollen to 180,000. However, this overpopulation brought with it great poverty and disease<LineBreak/>The 19th Century brought the construction of the Gasworks and introduction of street lighting, but overall Dublin suffered a steep political and economical decline with the seat of government moving to Westminster in 1800 under the Act Of Union.<LineBreak/>Things were to change dramatically in the 20th Century with the 1916 Easter Rising, the War For Independence and the subsequent Civil War which eventually led to the establishment of the Republic of Ireland.<LineBreak/>As the seat of English administration, Dublin was the setting for many key events during the Irish struggle for independence and you will find a number of historic buildings, such as the General Post Office on O'Connell Street, Dublin Castle and Kilmainham Gaol, where history comes alive.<LineBreak/>Since the mid-1990s, an economic boom christened the ‘Celtic Tiger’ brought massive expansion and development to the city, including the creation of Dublin’s newest landmark, the Spire monument on O'Connel Street. Fuelled by the boom years, Dublin has grown to be the single largest conurbation in Ireland. Some 1.2m people live in the greater Dublin area, that equals 28% of the country's total population of 4.2m.<LineBreak/>The boom brought many new ethnic groups into the city and created a more international feel, particularly in the north inner city. Ireland has fallen on harder times in recent months, but Dublin is, if anything, more vibrant than ever.<LineBreak/></TextBlock>
                        </StackPanel>
                    </ScrollViewer>
                </Grid>
            </phone:PivotItem>

        </phone:Pivot>
    </Grid>

</phone:PhoneApplicationPage>

As you can see I got rid of the BackGround attributes from the pivot items completely, the default is transparent, but I left the PivotControl Background to gray which is what we’re seeing:

18-Facts

Now that we have Dublin finished we need to add information in for all the other counties and create the province pages.

Once you have that information filled out you should give your app a test.

Testing Your App

Click on the play button at the top bar of visual studio, you can click on the arrow beside this button to specify to either test on a device or an emulator.

19-Test

As I said before, you need an i3 or newer processor to run the emulator, otherwise you can use a device, you’ll need to unlock your device to use as a developer phone, visual studio comes with the application, just type into your windows start menu: “Windows Phone Developer Registration” and run that, it is very easy to do.

I should mention that it’s good to test your application throughout creation, every time you add a new feature, just to make sure it works.

App Store Information

Next in your solution explorer right click on properties and open.

In the application tab you’ll see “Assembly Information”.
Click on it. From here you can change the information about your application.
I would recommend changing the title, description and company.

20-AssemblyInfo

In the properties folder in your solution explorer windows double click on “WMAppManifest.xml”.
This page is really important.

21-Manifest

You need to change the display name (usually just needs a space added in between the words), the description and out icons and images.

The easiest way to edit these images is not on this page but in the Assets folder.
First fill out your app info here, leaving the icons/images alone.

Click on capabilities and uncheck everything, we’re not using any of these capabilities, our app will fail to get on the store as the person certifying it will state that we don’t need these capabilities.

Once our app is on the store anybody downloading it will get a prompt to ask for these capabilities, they must accept in order to download our app.

Conclusion

So now we have a fully functioning tested app ready for the store!

You should be proud! 🙂

In this part 2 tutorial we covered:

  • Navigation between pages (C# code)
  • Pivot Pages/Items/Controls
  • Fields/Attributes
  • More on TextBlocks
  • ScrollViewers
  • Images
  • Testing
  • App Store Information

In the next post we’ll be covering adding images to your app.
The images will be used to display your app as different sized tiles on the mobile.

The main items we’ll be covering next are:

  • About/Using GIMP
  • Scaling
  • Layers
  • Transparency
  • Saving
  • VS Manifest File

Happy coding! 🙂

Advertisements

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