Posts Tagged ‘WP7’

If I can build a phone app anyone can: Changing the keyboard and IsNumeric

In todays blog I start coding my app, the first task is having users enter a time for my timer and making sure they enter a number. So I explore adding code to make sure they enter a number, and changing the on screen keyboard to show just numbers.

Wow I’ve been spending a lot of time learning about the projects, tools, and controls, it’s great that I am finally starting to code! If you missed any earlier posts you can find them here. My application will be a presentation timer that I can use to make sure I don’t talk too long.

I’ve created a New project of type Windows Phone Application in Visual C# (by the way as I start to code if you can make any of my code more elegant, feel free to leave comments, I am open to suggestions and improvements).

When I created my project I chose target Windows Phone OS 7.1 (which is the same as 7.5 which is the same as Mango) because at this point most Windows Phone users have Mango and I want to be able to use the latest features.

Adding validation code

I need a text box where a user can enter the number of hours, minutes, or seconds for the timer. So I’ll just drag a TextBox control to my page. I change the name of the TextBox to txtHours and set the Text to a value of 1, this will be the default value. When I run the app and click in the TextBox it looks like this.

TextKeyboard

I don’t want users entering letters, so I had better add some validation to make sure the users enters numbers in the TextBox and i will add a TextBlock for displaying an error message to the user.

I create a TextBlock control and name it blkMessage and set the Foreground property to Red and the Text property to an empty string.

Now I double click on the my TextBox control which takes me to the code page and creates a TextChanged event handler for me. The TextChanged event handler fires whenever a user changes the content of my TextBox, so it literally fires every time you type in a letter or number (that means I don’t want too much code in there because it wouldn’t be great for performance). In my event handler I test to see if the value in the text box is numeric, if it isn’t, I display an error message. If it is a valid value, I clear out the error message. My code looks like this. BUT IsNumeric is a function I had to add myself it is not built in! I got the code for the IsNumeric function from this blog post (thank you Keith Murray)

        private void txtHours_TextChanged(object sender, TextChangedEventArgs e)
        {
            if (!IsNumeric(txtHours.Text))
            {
                blkMessage.Text = "You must enter numbers only";
            }
            else
            {
                blkMessage.Text = "";
            }
        }

.csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, “Courier New”, courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }

Now if a user enters letters or other non numeric values in the field they see an error message like this:

EnterNumbersOnly

Changing the on screen keyboard

That works, but I don’t like the way the keypad comes us as letters as default which could be a bit annoying. With mobile apps you really want the user to have to use the keyboard as little as possible, so every keyboard tap I can save the user is a good thing. In addition, it’s good design to stop someone from entering an invalid value in the first place wherever possible, if I display a numeric keypad I don’t need to worry about someone entering letters and symbols! A quick bing search turns up a blog post that talks about setting the InputScope to get the numeric keyboard. Sounds worth a try. Unfortunately I can’t find a way to set that value in the property page so I am going to have to edit the XAML, and of course the XAML example in the blog post doesn’t work, but a quick search on MSDN for InputScope gives me the correct syntax.

So I have to open up the XAML pane by clicking on the little arrow button in the corner

imageThen find the <TextBox …/> called txtHours and add the InputScope attribute and set it to Number (wow I didn’t think I’d be messing in the XAML code this soon! but this really wasn’t that scary)

        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <TextBox InputScope="Number" 
                     Height="69" 
                     HorizontalAlignment="Left" 
                     Margin="76,106,0,0" 
                     Name="txtHours" 
                     Text="1" 
                     VerticalAlignment="Top" 
                     Width="77" 
                     IsEnabled="True"/>
        </Grid>

.csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, “Courier New”, courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }

And now when I run the application in the emulator, check it out: just numbers! Much better for my user!

NumericKeypad

So now I just need to replicate that logic for my hours, minutes and seconds textboxes. It’s fun to be starting my application. We’ll see what I learn next. Hope you are making progress with your apps as well. Remember if you publish an application by May 20th, 2012 you can get cool stuff thanks to the developer movement so get coding!

Advertisements

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