Posts Tagged ‘How To’

If I can build a phone app anyone can: Controls, and more controls…

In this blog I create my project and have to learn the different controls I can choose from to build my app

As I continue my series on building my first phone app, I have chosen the Windows Phone application template and I am ready to start adding controls to my first page. If you missed any of the earlier posts in the series, you can access them here.

As I look at the Toolbox, I realize there are a lot of different controls to choose from, so in this post I’ll try to figure out what they do. There are so many controls I broke them into three groups for my quick description of each control just scroll down, I’ve also tried to hyperlink to documentation on the controls as I researched what each control is for.

Controls for entering and displaying data

  • Checkbox
  • ListBox
  • Map
  • PasswordBox
  • RadioButton
  • Slider
  • TextBlock
  • TextBox

Controls that do stuff

  • AdControl
  • Button
  • HyperlinkButton
  • MediaElement
  • WebBrowser

Controls to make things look pretty

  • Border
  • Canvas
  • Ellipse
  • Grid
  • Image
  • Rectangle
  • StackPanel

Controls for entering and displaying data

CheckBox

A Checkbox is a great way to let a user enter a Yes or No | True or False value. You’ll need to set the Content property to change the text that appears beside the textbox. The IsChecked property tells you whether the checkbox is checked or unchecked. There is also a IsThreeState property which allows you to have a checkbox represent something 3 different values like Yes/No/Unknown. IsChecked will be true if the checkbox is checked, false if the value is unchecked. If you enable the IsThreeState the unknown/undetermined state of the checkbox will return a value of Nothing for IsChecked.

imageListBox

Allows you to give the user a list of items to choose from. Specify the values to show in the list using the Items property, or I am sure you can set up data binding as well to read the data to display from some form of data source. This is the sort of list that takes up a lot of space on the screen, it’s not a drop down list. When you select one of the values it will be highlighted. I don’t see an option for allowing multiple selections, and it’s really hard to select the listbox after you create it, whenever I click on the listbox, it keeps selecting the Listbox items instead which is kind of annoying.

image

Map

I guess you use maps to display data, data such as where you are, or where something is located! Looks like using this control is a bit more involved! There is all sorts of extra stuff they talk about like if you want to use a Bing Maps Silverlight Control you need a Bing Maps key which you get from the Bing Maps Account Center. I get the feeling the map control would be a blog unto itself! So for now I’ll just say, yes you can display a map and highlight locations on a map or directions on a map. I know the Where’s Timmy app from Tim Hortons has a map!

PasswordBox

This is like a text box where you can enter data, but no-one can see what you are typing, perfect for entering passwords! Instead a character appears on the screen. You can control what character appears with the PasswordChar property.

image

RadioButton

Great to give a user selection between 2-5 choices on the screen and only one can be selected at a time. Use the Content property to change the text displayed beside the radio button. The IsChecked Property will tell you if a particular radio button is selected. When you add multiple radio buttons to a screen by default they all become part of one group, so as soon as you choose one radio button, all the others are deselected.

imageSlider

A slider is great for getting a user to choose a value in a range. You specify the highest and lowest values for the slider control with the Minimum and Maximum properties and then the Value property will tell you the value selected by the user.image

TextBlock

This is your label control for displaying text. You specify the text to display with the Text property.

image

TextBox

This is your control for letting users type in data with the on screen keyboard, the Text property will tell you the value entered by the user or can be used to set a default value.

image

Controls that do stuff

AdControl

This is the new control that came out which allows you to include advertising in your applications. Adding the control is pretty straightforward, drag and drop. You can set the height and width properties to resize it. But it takes more than just dropping the control on your form to get advertising working according to this site. You have to register your mobile app using Microsoft pubCenter and then you have to set the Application Id and Ad Unit ID properties in the ad control then you will have an ad enabled app in the marketplace to make money.

Button

Buttons are what you expect, buttons a user can tap to do something. You’ll want to set the Content property because that controls the text that appears on the button. At some point you will create Click event handlers for the button as well where you can write the code that makes stuff happen when a button is pressed. One thing I noticed about the button control on the phone is the buffer around it. It turns out this is deliberate so you don’t accidentally put buttons really close together and make it hard for someone with fat fingers to tap the right button.

image

HyperlinkButton

Is exactly what it sounds like: it’s a button that looks and acts as a hyperlink. You will want to set the NavigateUri property to specify where to go when someone clicks it, and the Content property to change the text that appears for the button.

image

MediaElement

This control lets you add audio or video. You specify the audio or video to play in the Source property. I found a little article here that describes how to use this control.

WebBrowser

This control could display HTML content you generate in your code if you want to get fancy, or you can use it to display content from a website specified by the Source property.

image

 

 

Controls to make things look pretty

Border

Allows you to draw a pretty border around other controls on your form. You can set the properties you would expect like BorderThickness and BorderBrush to control the color and thickness of the line around the border, Background to change the background color within the border. CornerRadius is kind of cool so I can make rounded corners. Wow, I could make some really ugly apps with this. Check out my green and red border with rounded corners! Did I mention, I am not known for making elegant looking pages.

imageCanvas

According to MSDN: “A canvas defines an area within which you can explicitly position child objects by using coordinates relative to that area.” Okay then I guess I would use a canvas if I want to be able to move something around on the screen with my code. I guess I could make one of those annoying pages with a button that says “Click here to win one million dollars” and whenever you tap on it it moves. You can set the Background property to set the background color.

Ellipse

This just draws an ellipse on the screen. The Stroke property controls the color of the outline of your ellipse. StrokeThickness controls the width of the line. Fill controls the background colour of the ellipse. Weird how all the property names are different for Ellipse than they are for Border and Canvas eh? I made an ugly red and green ellipse to go with my ugly border.

image

Grid

A grid is an area made up of columns and rows, so this would be great for displaying a table of data. You’ll need to go to the ColumnDefinitions property and add ColumnDefinitions for each column you want in the table. For each column you can specify a MinWidth and MaxWidth property. Then you need to go to the RowDefinitions Property to add a RowDefinition for each row. There is also a ShowGridLines property that controls whether you see the lines on the grid between columns and rows. You can then add controls in the different squares of the grid. Here’s my 3 row, 2 column grid with the grid lines displayed.

imageImage

Okay I know Images can be used to display data or to make things look pretty, I had to pick somewhere to put it! The image control allows you to display images. Use the Source property to specify the image to display. If your images aren’t the same size as your image control, play around with the Stretch property to control whether it clips, or resizes the image for you. It looks like JPEG and PNG formats are supported

imageRectangle

This just draws a rectangle on the screen. The Stroke property controls the color of the outline of your rectangle. StrokeThickness controls the width of the line. Fill controls the background colour of the ellipse. Weird how all the property names are different for Ellipse than they are for Border and Canvas eh? I decided to go with blue and green for my rectangle Smile

image

ScrollViewer

The ScrollViewer lets you create a scrollable area, great for letting users read large amounts of text that might not fit on the scree, the user can then scroll to see all the content. It can have a horizontal or vertical scroll bar which you control with the HorizontalScrollBarVisibility and the VerticalScrollBarVisibility properties. Now what’s interesting is when I did a little searching I found a few articles that said you need to use Blend to create a ScrollViewer, those were pre 7.5, but when I tried to dig into 7.5/Mango I found comments about performance improvements so maybe you still need to use Blend to create this, still not sure. I could see this control being very useful though!

StackPanel

A StackPanel lets you nicely line up child controls horizontally or vertically, for example you could make sure all your radio buttons are nicely lined up. I like this one, easy to use and helps me make my form look much cleaner!

image

Advertisements

If I can build a phone app anyone can!

I can write code, but I always run into issues installing, testing, deploying, and dealing with nit-picky stuff. Everyone told me if you can code you can build a phone app, so I decided to put that to the test in this blog series.

I will update this blog post as I continue my adventures so you can follow the series, please join me on my adventure as I code and publish my first app!

Part 1 – Installing the tools

Part 2 – Writing Hello World

Part 3 – Tombstoning

Part 4 – Project Types (Pivot vs Panorama and more)

Part 5 – Controls and more Controls

Part 6 –  Displaying a numeric keypad and validting numeric values

If I can build a phone app anyone can: Part 3 What the heck is tombstoning?

Every time I start digging through Windows Phone stuff I find a blog or video about tombstoning (well okay not that kind). Now that I have my Hello World App I am ready to figure out what the heck tombstoning is! If you want to build an app you will need to know it, if you don’t have tombstoning, your app might not be accepted in the marketplace. So today I’m going to figure this out!

For those of you just joining, I am learning to build a phone app from scratch. If you can code you can build a phone app. The first two blogs in the series will get you started if you need help.

Part 1 Getting the tools you need

Part 2 Writing Hello World

So apparently tombstoning is all about making sure your app gives the user a nice experience if they have to do something like answer a call on their phone (I know, who ever uses their phone for phone calls anymore, let’s say you have to answer a text message, that’s more realistic). You wouldn’t want a user to enter a bunch of information on the screen painstakingly done on a tiny keyboard, leave the page to send a text, come back and have to enter it all over again! That would not make you popular! So tombstoning is about making sure when you come back to the app everything is the way you left it.

At the end of our Hello World app we had a page with a textbox, button, and textblock that looked like this

HelloSusanNow apparently a simple way to test tombstoning is to click on the “Windows” button to go back to the menu, and then use the back button to return to your application.

PhoneButtons

So If I type Susan into the textbox, hit the Windows key, yup I leave the application, then I hit the Back button and I am back at the application and hey it remembers the value in my text box! Sweet! So I guess I don’t have to worry about writing any code for tombstoning. I know in the pre-Mango applications it didn’t work this way, because your application was deactivated when you left and it didn’t remember state. But they fixed that in Mango. This could be my shortest blog post ever! But no… you see what happened, is when I pressed the window button and went back to the menu, my app was deactivated and became dormant. When I tapped the back button to return to my app it became active again. Here’s a diagram I found that describes what my mango phone application is doing.

image

BUT!!!! Yes there is a but, the phone can’t just leave all applications in memory forever, that would make the other applications run really slow, and drain battery power. So what happens is the phone keeps an eye on the memory and if there is too much running on the phone it will “tombstone” your application. When that happens it won’t remember stuff like what you had typed into a text box. Here is another diagram I found that shows the extra bubble for tombstoned.

image

But how the heck do you test this? If the phone decides when it is going to tombstone an app instead of just leaving it dormant, how on earth do I write code to say “if the app was tombstoned go get the values the user entered and put them back in the text box again” and how do I test that if I don’t have a phone? Turns out they thought of that. If you go to the Solution Explorer windows, right click on your project and go to Properties.

ProjectProperties

When you get to the project properties choose Debug and select the checkbox that says Tombstone upon deactivation while debugging.

TombstoneInVisualStudio

Now if I use the Windows button to exit my application in the simulator it will tombstone my app so I can test my tombstoning logic in my application to make sure it will work in case a phone device does tombstone my app behind the scenes.

So let’s see what happens now when I run my application, and then use the Windows button to exit and the Back button to return to my application and sure enough, the name I had typed into the text box is gone!

NoSaveStateOkay so now I can see the problem users will have if I don’t do tombstoning. Users who leave my app to do something else on the phone don’t want to come back and lose everything they had typed in. I found a great big MSDN article on how to preserve and Restore Page State, I’ll try to break it down to the basic concepts here, but feel free to go read the article.

So after a little digging I discovered that the best place to remember what someone typed in is in the OnNavigatedFrom event handler of the page. This event fires when you leave the page in your application. To get to the code for your page so you can add the event handler you can right click on the background of the page where you see your screen and choose View code, or in Solution Explorer you can expand your page by clicking on the little arrow so you see the code-behind page listed in Solution Explorer. You can then double click on the code behind page to navigate to the code

imageNow I can add a OnNavigatedFrom event handler, the syntax is a little different in VB and C#. What I want to do is remember the value the user typed into my text box when I leave the page. After a little digging I found that you can use the State dictionary to remember the values. Basically you call the Add method of the State dictionary and tell it the value you want to store, and what you want to call the value stored so you can get it back later. Call the add method once for each value you want to remember. You do need a little error handling though in case the value is already stored, so I added a little logic that says if the value is already there, delete it and add it back with the new value. When I am done my code looks like this:

Protected Overrides Sub OnNavigatedFrom
(e As System.Windows.Navigation.NavigationEventArgs)
    MyBase.OnNavigatedFrom(e)

    If Me.State.ContainsKey("NameEntered") Then
        Me.State.Remove("NameEntered")
    End If

    Me.State.Add("NameEntered", TxtName.Text)

End Sub

Now I need to add code so that when they come back to the page it reads the value I saved and puts it back in the textbox again. I do this in a OnNavigatedTo event handler. Again I add a little bit of error handling because if someone enters the app for the very first time there won’t be a value stored in state yet, and I don’t want that to crash my application, so basically I say if you find a value go get it and put it in the text box. The code looks like this:

    Protected Overrides Sub OnNavigatedTo
(e As System.Windows.Navigation.NavigationEventArgs)
        MyBase.OnNavigatedTo(e)

        If Me.State.ContainsKey("NameEntered") Then
            TxtName.Text = Me.State("NameEntered")
        End If

    End Sub

Now to test it! Run the application, use Windows button to exit, back to return and Woo hoo! I have successfully told my phone application to remember the value even if it gets tombstoned. If you see a little ‘”resuming…” message then you know for sure your application was tombstoned, but depending on how long it takes to restore your application you may not see the message.

Now, the programmer in me has one issue with the code I just wrote. Most of the time, my application will not be tombstoned it will just be dormant. So I now have code that runs 100% of the time as you enter and leave the page, but really only needs to run some of the time. Not the best performing code! It turns out you can actually find out programmatically if your application was tombstoned and then you should only restore state IF it was tombstoned.

If you go to the application code page (go to solution explorer, expand the little arrow pointing to App.xaml, and you will see App.xaml.vb or App.xaml.cs, double click on that .vb or .cs file to get to the application code page). By the way there is a whole lab on how to do this tombstoning stuff you can download as well if you want.

image

If you scroll down through the code you will find a Application_Activated event this is where we can check to see if the application was dormant or tombstoned, because this event receives an argument called IsApplicationInstancePreserved which will be true if the app was dormant, and false if the app was tombstoned.  The problem I have though is that I need to be able to find this out in my OnNavigatedTo event handler on the page. There may be more clever ways to do this (open to suggestions from the peanut gallery here) but what I am going to do is create a class called Statemanager with a shared/Static property called restorestate that I can set in the Activated event and read in the OnNavigatedTo event.

    Private Sub Application_Activated
(ByVal sender As Object, ByVal e As ActivatedEventArgs)
        If e.IsApplicationInstancePreserved Then
            StateManager.RestoreState = False
        Else
            StateManager.RestoreState = True
        End If

    End Sub

Visual Studio Tip: I could create the class before I create the event,  but when I get the squiggly under the class name, i just hover the mouse over the little red line (or click on that line and then do CTRL + . on the keyboard, that’s a period by the way) and a little pop-up menu appears that offers to generate the class for me since it doesn’t exist. I choose Generate Class StateManager from the pop-up menu and voila Visual Studio makes the class for me. of course then it complains that the property RestoreState does not exist, so I use the same little trick, click on the line with the squiggly do my CTRL + . and pick Generate field for StateManager (yeah I could do a property here instead of a field, I am just being lazy, I know that in good OO design you always have properties, but this is just a hello world application right now). But I love this little feature in Visual Studio that generates classes, properties, and method stubs for me Smile.

image

I can now double click on my StateManager class to edit the code, or if you didn’t use the little tip above you could have created the StateManager class yourself by right-clicking the project HelloBonjour and choosing Add Class to create the class from scratch myself and added a shared/static field for RestoreState. Either way, when you are done Your class should look something like this:

Class StateManager

    Friend Shared RestoreState As Boolean

End Class

Now I can go back to my OnNavigatedTo event handler and specify to only load state if RestoreState is true.

    Protected Overrides Sub OnNavigatedTo
(e As System.Windows.Navigation.NavigationEventArgs)
        MyBase.OnNavigatedTo(e)

        If StateManager.RestoreState Then
            If Me.State.ContainsKey("NameEntered") Then
                TxtName.Text = Me.State("NameEntered")
            End If
        End If

    End Sub

That’s it that’s all and that’s definitely more than enough for this blog post, time to pat myself on the back for figuring out yet another step in the steps towards building a windows phone app. You know I am beginning to believe I can do this! The whole tombstoning thing always had me confused, I feel a lot better now that I have that piece figured out.

Yup time to do the Hello World App – My First phone app Part 2

If I can publish a phone app, anyone can, at least that’s my theory! So if you have ever thought about it, try it yourself as I blog. There are always roadbumps on the way. With the pressure of having you doing this with me I think I can do this. Last blog I managed to get the tools up and running. Today my goal is to get some code running.

As cliche as it is, I am going to build a Hello World app, if I am going to build a phone app, I need to make sure I know how to use the tools, that way when I start to get weird error messages on the screen, then I know it’s my code, and not because I don’t even know how to use the tool! By the way, this may look like a long blog, but that’s just because I have a lot of screenshots to help anyone who is new to Visual Studio.

If you don’t already have the tools installed you can check out Part 1 – Installing the Phone tools (the title doesn’t match but that’s what I did in the actual blog post)

Okay let’s go.

I have Visual Studio installed on my PC, you may have to launch Visual Studio Express for Phone, but once you are in the tool the steps should be nearly identical.

Step 1 – Launch Visual Studio 2010 (Start | All Programs | Visual Studio 2010 | Microsoft Visual Studio 2010)

Step 2 – Create a phone project (Okay I admit it, I like VB .NET better than C#, I can write C# but I have to think harder to do it, if I am going to embarrass myself by sharing my code with you, I might as well go all out and use VB.NET, all you C# aficionados can scoff if you wish, but I like it)

Choose File | New Project | Installed Templates (either pick Visual Basic or Visual C#) | Windows Phone Application

Sure there’s a bunch of other project types there, but I figure the first one will work for a Hello World application. I’ll have to figure out the difference between all those other ones later.

Now I get a window popping up asking which Windows Phone Platform I want to target for the application. I am going to choose 7.1, because 7.1 is the Mango release, I know there are some nice new features in that release and I want to be able to use them in my application. I also know that pretty much all Windows Phone users in Canada have the Mango update so I am not limiting who can use my application.

PickTargetPhonePlatform

Okay now I see a screen with a whole bunch of scary looking XAML. I just want to create a hello world app, so let’s hide that XAML stuff for now. There is a tiny double arrow you can click on to hide the XAML pane.

CollapseXAML

Now I just have a page in front of me which says MY APPLICATION, and page name.

Let’s start by changing the text “MY APPLICATION” to “HELLO BONJOUR APPLICATION”. If you click on the text that says My application it will select the TextBlock control that displays the text. That TextBlock control has properties that affect how it is displayed. When you select the TextBlock you can see the property window displayed in the bottom right hand corner.

TIP:  if you like you can click on that property window and drag it out and resize it so it is easier to see. If you close the property window, you can get it back by:

  • selecting a control and hitting the <F4> key
  • selecting View | Properties Window from the menu
  • right clicking the control and selecting Properties from the pop-up menu.

PropertyPanel

Go into the property window and change the Text Property to “Hello Bonjour Application”. The text on the screen should now show your new application title. I know from developing windows and web applications that you spend a lot of time editing properties, so good to get used to that right away.

image

Now let’s add a Button, a TextBox, and a TextBlock to the screen. In order to add controls to the screen I need to display the toolbox window. On the far left of your Visual Studio window you will see a little tab called toolbox. You will need to click on that so that you can see the toolbox and add controls by dragging them to your screen. Lucky for me, although I have never built a phone app, I have used Visual Studio so I can actually help you out there if you haven’t.

Toolbox

Once you can see the toolbox, drag a TextBox control, a Button Control and a TextBlock control to the screen and put them under the page name textblock. When you are done your screen should look something like this.

image

Tip: If you find it annoying the way you have to keep re-opening the toolbox, there is a little pushpin icon that allows you to pin it in place so it stays there all the time. The pushpin is a toggle, so if you want the toolbox to go away again you can just click on that pushpin icon again.

Toolboxpinning

When you add controls, it is always a good idea to rename them, having controls called Button1 and textBox1, textBox2 is not very easy to keep track of later. I use a prefix to remember the type of control (e.g. txt, btn, blk) and then a meaningful name of some sort for each control. Let’s rename our controls. Button – btnDisplayMessage, TextBox – txtName, textBlock – blkMessage. You will find that makes life easier when you start adding code as well. To rename a control, bring up the properties and click on the control name, then you can type in a new name.

image

Let’s also change a couple of properties to change how they are displayed.

  • BtnDisplayMessage set Content = Click Here
  • TxtName set Text to blank
  • BlkMessage set Text to blank

Now we need to add some code, what we’ll do is have the user type their name into the text box, then click on the button. When you click on the button we’ll display a message saying Hello <insert name here> on the screen.

Since we want our code to run when you click on the button, we can add an event handler to the button by double clicking on the button. That automatically creates a click event handler where you can write code that will execute when you click on the button. We are going to write code that says get the content of the Text property of the TxtName field (that will contain whatever the user types in) and put that value into the text property of our textblock concatenated to a string that says “Hello/Bonjour”  so basically you need to add the following code to your event handler.

BlkMessage.Text = “Hello\Bonjour ” & TxtName.Text

When you are done it should something like this (I reformatted a little bit to make it more readable)

    Private Sub BtnDisplayMessage_Click(sender As System.Object,
                                        e As System.Windows.RoutedEventArgs
                                        ) Handles BtnDisplayMessage.Click
        BlkMessage.Text = "Hello\Bonjour " & TxtName.Text

    End Sub

You now have two windows open, one is the designer window (MainPage.xaml) where you can add more controls and change properties. The other is the code window (MainPage.xaml.vb) where you can add and modify code. You can move back and forth freely between the windows by clicking on the tabs.

image

We’re done! Now we can test our application!

You can launch the application a couple of ways, you can click on the debug button in the toolbar. you can choose Debug | Start Debugging from the menu, or you can right click on the project name in the Solution Explorer window and choose Debug | Start new instance.

StartDebuggingZoomin

Now you wait a few little while for the emulator to load, dum de dum, (it takes a little time the first time you launch it) and then the application appears in the emulator.

PhoneEmulator

If you have a touch screen you can actually touch the textbox and the on screen keypad will appear in the emulator. If you don’t have a touchscreen, you can use your mouse to click inside the textbox and the onscreen keyboard will appear. This is where I go a little batty. You have to use the on screen keyboard by clicking the keys with your mouse, or tapping it with your fingers. You can’t use your desktop or laptop keyboard. Maybe they did that on purpose to remind us what it will be like for a phone user who doesn’t have a real keyboard Smile

EmulatorKeyboard

Now you can click on the button and ha! I just realized, when I screwed up my project and had to restart that I forgot to change the label on the button! So in the screen shots you will see that the button label is not set to “click here”!  Man, I should really go fix that shouldn’t I…I am not going to go recreate all the screen shots though, forgive me! Hey i guess I get to show you how to go back to your code,

tip: DO NOT click on the ‘X’ beside the emulator. That works, but it unloads the emulator and then you have to wait for it to reload again. Instead go back to Visual Studio and choose Debug | Stop Debugging from the menu or click on the Stop debugging button in the toolbar. Then when you start debugging again it will be faster.

StopDebugging

Okay go back, select the button, <F4> to bring up properties, Change Content to “Click Here”. Now run it again to test <Start Debugging> Ha! fixed it! Now Type “S u s a n” into the text box, click on the “Click Here” button and cool! the textblock now says Hello/Bonjour Susan. I love it!

HelloSusan

So now that I have a very very simple application that I can run in the emulator I can play around a bit, start adding more controls to see what they look like, figure out how to line up the fields so they look nicer, play around with font sizes, explore the emulator buttons. That is why I like Hello World apps. They get me just far enough that I can start to explore. Next blog…I’m going to figure out how to put the application on my actual Windows Phone! But I got my Hello World finished, time to go celebrate with chocolate (I hope my kids have some Halloween candy left)