WP7 Application WishList

It has been a year since Windows Phone 7 first released.

I do look forward for the rise of Windows Phone, not because of  I am a big fan of Microsoft Product but Windows Phone is really a phone that we need.

It is actually moving to the other topic: why iPhone is so popular?

There is only one reason for iPhone to be popular, that is the huge AppStore.

With the success of iPhone, developers or even non-developers(investors) want to grab a piece from Apple, no matter to earn from Advertisement or pricing the apps.

We all know that in order to make people use WP7, there must exist a trigger to initiate people to grab one windows phone with them.

It seems that the existing applications in MarketPlace cant fulfill peoples’ needs.

Feel free to leave a comment on what you want most for the application in Windows Phone 7

Tutorial of the Day 4: Tips on Debugging WP7 Application(Frame Rate Counters)

When you try to depoly the WP7 Application to your phone or emulator via Visual Studio, it is not difficult for you to find some numbers showing at the right top corner of the application. They are Frame Rate Counters.

The numbers keep changing as long as you input any to the application, e.g. gesture, typing etc.

However, do you really know what the numbers are showing? What are they measuring?

Here is an explanation from Microsoft.

You may ask, can we switch off these counters?

Of course we can, simply go to App.xaml.cs, you should be able to find the line

// Display the current frame rate counters.
Application.Current.Host.Settings.EnableFrameRateCounter = true;

Just change the true to false or comment it out, to disable this feature.

There is some explanation to each of the values.

Composition (Render) Thread Frame Rate (FPS)	The rate at which the screen is updated.
User Interface Thread Frame Rate (FPS)	The rate at which the UI thread is running.
Texture Memory Usage	The video memory and system memory copies of textures being used in the application.
Surface Counter	The number of explicit surfaces being passed to the GPU for processing.
Intermediate Surface Counter	The number of implicit surfaces generated as a result of cached surfaces.
Screen Fill Rate Counter	The number of pixels being painted per frame in terms of screens. A value of 1 represents 480 x 800 pixels.

Hope it helps you in debugging your WP7 Application.

Have fun

Tutorial of the Day3 : Input Scope of TextBox in WP7

You may have a question “how to set a textbox for inputing url” which shows the .com button when developing Windows Phone 7 Application. If you create a simple TextBox, you will find the Windows Phone always showing the default virtual keyboard.

However, you may want a textbox for user to input some common type of data, for example a Phone Number, then the letters are all useless when inputing. The user experience is not that great if you show the default one including all letters but not this one.

Cool! huh?

Here I will introduce a property in TextBox which will help you if you find the above difficulty.

The property name is “InputScope” which is an Enumeration called InputScopeNameValue.

Here I have an example to show all the available value in the InputScope.

First of all, we should have a Listbox showing all the Textbox and corresponding TextBlock(label) showing what is the inputScope set in the TextBox.

            <ListBox x:Name="InputScopeList">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="{Binding}" Width="200"/>
                            <TextBox InputScope="{Binding}" Width="200"/>
                        </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>

Then, we should create a String List which store all memebers in the InputScopeNameValue into our List, and finally bind it to the Listbox.

            List list = new List();
            int i = 0;
            string inputscope;
            while((inputscope = Enum.GetName(typeof(InputScopeNameValue),i)) != null)
            {
                list.Add(inputscope);
                i++;
            }
            InputScopeList.ItemsSource = list;

Here, I also include the full list of the enumeration.

CurrencyAmountThe text input pattern for amount of currency.

Member name	Description
AddressCity	The text input pattern for a city address.
AddressCountryName	The text input pattern for the name of a country/region.
AddressCountryShortName	The text input pattern for the abbreviated name of a country/region.
AddressStateOrProvince	The text input pattern for a state or province.
AddressStreet	The text input pattern for a street address.
AlphanumericFullWidth	The text input pattern for alphanumeric full-width characters.
AlphanumericHalfWidth	The text input pattern for alphanumeric half-width characters.
ApplicationEnd	Not supported. For internal use in Silverlight for Windows Phone.
Bopomofo	The text input pattern for the Bopomofo Mandarin Chinese phonetic transcription system.
Chat	The SIP layout for text messaging, which recognizes pre-defined abbreviations. Supported only in Silverlight for Windows Phone.
CurrencyAmountAndSymbol	The text input pattern for amount and symbol of currency.
CurrencyChinese	The text input pattern for Chinese currency.
Date	The text input pattern for a calendar date.
DateDay	The text input pattern for the numeric day in a calendar date.
DateDayName	The text input pattern for the name of the day in a calendar date.
DateMonth	The text input pattern for the numeric month in a calendar date.
DateMonthName	The text input pattern for the name of the month in a calendar date.
DateYear	The text input pattern for the year in a calendar date.
Default	The default handling of input commands.
Digits	The text input pattern for digits.
EmailNameOrAddress	The SIP layout for an e-mail name or address. Supported only in Silverlight for Windows Phone.
EmailSmtpAddress	The text input pattern for a Simple Mail Transfer Protocol (SMTP) email address.
EmailUserName	The text input pattern for an email user name.
EnumString	Not supported. For internal use in Silverlight for Windows Phone.
FileName	The text input pattern for a file name.
Formula	Do not use.
FullFilePath	The text input pattern for the full path of a file.
Hanja	The text input pattern for Hanja characters.
Hiragana	The text input pattern for the Hiragana writing system.
KatakanaFullWidth	The text input pattern for full-width Katakana characters.
KatakanaHalfWidth	The text input pattern for half-width Katakana characters.
LogOnName	The text input pattern for a log on name.
Maps	The SIP layout for entering a map location. Supported only in Silverlight for Windows Phone.
NameOrPhoneNumber	The SIP layout for SMS To field. Supported only in Silverlight for Windows Phone.
Number	The text input pattern for a number.
NumberFullWidth	The text input pattern for a full-width number.
NumericPassword	Do not use.
OneChar	The text input pattern for one character.
Password	The text input pattern for a password.
PersonalFullName	The text input pattern for a person’s full name.
PersonalGivenName	The text input pattern for a person’s given name.
PersonalMiddleName	The text input pattern for a person’s middle name.
PersonalNamePrefix	The text input pattern for the prefix of a person’s name.
PersonalNameSuffix	The text input pattern for the suffix of a person’s name.
PersonalSurname	The text input pattern for a person’s surname.
PhraseList	The text input pattern for a phrase list.
PostalAddress	The text input pattern for a postal address.
PostalCode	The text input pattern for a postal code.
Private	Not supported. For internal use in Silverlight for Windows Phone.
RegularExpression	The text input pattern for a regular expression.
Search	The SIP layout for a search query. Supported only in Silverlight for Windows Phone.
Srgs	The text input pattern for the Speech Recognition Grammar Specification (SRGS).
TelephoneAreaCode	The text input pattern for a telephone area code.
TelephoneCountryCode	The text input pattern for a telephone country/region code.
TelephoneLocalNumber	The text input pattern for a telephone local number.
TelephoneNumber	The text input pattern for a telephone number.
Text	The software input panel (SIP) layout for standard text input. Supported only in Silverlight for Windows Phone.
Time	The text input pattern for the time.
TimeHour	The text input pattern for the hour of the time.
TimeMinorSec	The text input pattern for the minutes or seconds of time.
Url	The text input pattern for a Uniform Resource Locator (URL).
Xml	The text input pattern for XML.
Yomi	Not supported. For internal use in Silverlight for Windows Phone.

Hope you will enjoy this tutorial

Tutorial of the Day 2: Binding Data to Controls on WP7

Data Binding is an indispensable part in creating WP7 Application.

It is important since Mobile application usually rely on data from the Internet. The way to show the data on the screen is the technique of Data Binding.

You may bind an item to the control or a list of items to the controls.

For an item one, you can create a TextBox.

<TextBlock Text="{Binding}" x:Name="myTextbox" />

And in code behind, just add

public class Customer
{
    public Customer() { }

    public Customer(string name, int age, DateTime dob)
    {
        Age = age;
        Name = name;
        Dob = dob;
    }

    public string Name { get; set; }
    public int Age { get; set; }
    public DateTime Dob { get; set; }

    public override string ToString()
    {
        return Name + " [ " + Age + " ] { " + Dob.ToShortDateString() + " } ";
    }
}

So now, you can bind the data to the textBox

// Set the data context to a new Recording.
myTextbox.DataContext = new Customer("Steve", 20,
    new DateTime(1990, 11, 18));

But it is not always the case to bind a single data. Data often comes in a bundle.

For example, you have a list of Customer to choose from a Combo Box. Now, our task is to bind data to a Combo Box. So we have to create a Combo Box first, and set the ItemsSource to binding

<ComboBox x:Name="myComboBox" Height="30" Width="200" ItemsSource="{Binding}"/>

And for the set of data, you create a class like the previous one “Customer”. Following by, we need an ObservableCollection to store the list of Customer.

public ObservableCollection<Customer> CustomerList = new ObservableCollection<Customer>();

public Page()
{
    InitializeComponent();

    CustomerList.Add(new Recording("Steve", 20,
        new DateTime(1990,11,18)));
    CustomerList.Add(new Recording("Hazel",
        20, new DateTime(1990, 12, 14)));
    CustomerList.Add(new Recording("Joe",
        20, new DateTime(1990, 3, 5)));

    // Here bind the data to the combo box as DataContext
    myComboBox.DataContext = CustomerList;
}

After the data is binded, whenever you made changes to the CustomerList, the content inside ComboxBox will changed immediately.

Thanks for reading my tutorial

Enjoy the brilliant data binding design in Silverlight and Windows Phone 7.

Tutorial of the Day 1: Creating your first WP7 Panorama Application

When creating Mobile application, one may find the screen is too small to display all the information you want to show. Toggle to change the page is one of the solution, but it is not grand and userfriendly at all. With Windows Phone 7, you can create a application with Panorama Controls, sample is like this.

How to do this? It is very simple.

First create a new project, and then one of the project type in Silverlight for Windows Phone is “Windows Phone Panorama Application”

What is the difference between an Panorama Application and the Windows Phone one? The main difference is Panorama Controls are built automatically inside the Grid of the Panorama Application. Actually, you can create your custom one in Windows Phone Application.

After that you will see the result is like this.

and the code is

Here, for each panorama item will create a page-like view, you can change the “page” with left or right sliding.

For the content inside the menus, as you can see from the code, it is binded with some data.

 

From this, we know that the data context is binded with the MainViewModelSampleData.xaml

You can change the content inside to create the Panorama Items with your own content.

In the Mainpage.xaml code, you change the background image or color to your favourite one by the line

P.S.The sample is using Listbox to create a menu. Apart from using listbox, you can also use StackPanel.

Finally, thanks for reading this tutorial.

Tomorrow, I will have a tutorial on Binding Items to the Controls which may also help you in creating an excellent Application.

WP7 Tutorials Start!

Starting from tomorrow, I will post a series of tutorial on WP7.

Also, you can comment here for your wishing tutorial. I will try to make it out.

Do subscribe my blog and follow my Twitter coz everyone else does.

WP7 Gesture Recognition

Writing Windows Application or Silverlight Application may not find the importance of gesture, however, it is important in Windows Phone since we dont have a pointer device.

Silverlight Team from Microsoft release the silverlight for Windows Phone Toolkit, which is available at here.

Download and install it. Here starts the tutorial.

After created a new Windows Phone Project and make sure you have install the Toolkit for Windows Phone, right click on the project in Solution Explorer. Then, press Add Reference.

Choose Microsoft.Phone.Controls.Toolkit from the .NET Tab. Here inclues

New Components

• AutoCompleteBox
• ListPicker
• LongListSelector
• Page Transitions

Existing Components

• GestureService/GestureListener
• ContextMenu
• DatePicker
• TimePicker
• ToggleSwitch
• WrapPanel

We will focus on Gesture one.

First add the namespace on XAML.

xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

Then add the following Lines to the object you want to have the gesture on, here I put inside the LayoutRoot

<Grid x:Name="LayoutRoot" Background="Transparent">
<toolkit:GestureService.GestureListener>
<toolkit:GestureListener>
</toolkit:GestureListener>
</toolkit:GestureService.GestureListener>
...
</Grid>

There are several events built inside the Gesture Listener,

• Double-tap: Just like double-clicking, but with a finger instead of a mouse
• DragStarted, DragDelta, and DragCompleted: Three events that can be used together to implement easy drag-and-drop on Windows Phone
• Flick: Putting your finger down, moving it quickly, and then picking it back up.
• Hold: Putting your finger down and holding it in one place for a while
• PinchStarted, PinchDelta, and PinchCompleted: Three events that can be used together to tell if a user is pinching something, typically to zoom in or out
• Tap: Just like clicking, but with a finger instead of a mouse

You can create the events in codebehind or in XAML

in XAML you can have

<toolkit:GestureListener DoubleTap=”GestureListener_DoubleTap” Flick=”GestureListener_Flick”>
</toolkit:GestureListener>

In code behind, you can have

void MainPage_Loaded(object sender, RoutedEventArgs e)
{
GestureService.GetGestureListener(LayoutRoot).DoubleTap += new EventHandler<GestureEventArgs>(GestureListener_DoubleTap);
GestureService.GetGestureListener(LayoutRoot).Flick += new EventHandler<FlickGestureEventArgs>(GestureListener_Flick);
}

Tutorial for gesture ends here

Don’t hesitate to leave comment if you meet any difficulties.

Mark Six(六合彩) on Windows Phone 7

One day, I want to check the lottery result which is called Mark Six (六合彩), however, it is clumsy to check with browser on WP7.

Then, I developed a simple application which allows users to check the current MarkSix Result instantly from the jockey’s Club of HONG KONG.

Also, you can enter six number for checking. It shows the time of the next lottery, the jackpot and the turnover.

You can click to generate four sets of lottery number which may help you when you dont want to think of any number .

DOWNLOAD

here you can download the xap:)

Start writing your own WP7 Application

Here is the webcast I recorded in Chinese, hope developers in Hong Kong can learn more in writing Windows Phone 7 Application.

http://www.facebook.com/video/video.php?v=142916879062634

More Webcast will be put up here when I finished my final exam in University

Getting Physical Properties of WP7

If you dig deep into the Windows Phone 7 Application Development, you will find it is necessary to retrieve some of the properties of Windows Phone 7 of the user, for example the memory usage and Phone name, etc.

But how to do so?

We can query by using of DeviceExtendedProperties class.

All the supported properties are list in this page.

I will also post the code here

private static void physicalInformation()
{
string DeviceManufacturer = DeviceExtendedProperties.GetValue(“DeviceManufacturer”).ToString();
string DeviceName = DeviceExtendedProperties.GetValue(“DeviceName”).ToString();
byte[] DeviceUniqueId = DeviceExtendedProperties.GetValue(“DeviceUniqueId”).ToByte();
string DeviceFirmwareVersion = DeviceExtendedProperties.GetValue(“DeviceFirmwareVersion”).ToString();
string DeviceHardwareVersion = DeviceExtendedProperties.GetValue(“DeviceHardwareVersion”).ToString();
string DeviceTotalMemory = DeviceExtendedProperties.GetValue(“DeviceTotalMemory”).ToString();
string ApplicationCurrentMemoryUsage = DeviceExtendedProperties.GetValue(“ApplicationCurrentMemoryUsage”).ToString();
string ApplicationPeakMemoryUsage = DeviceExtendedProperties.GetValue(“ApplicationPeakMemoryUsage”).ToString();
}