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.

Advertisements

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 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:)