Metro ListBox in WPF

With the latest design strategy of Microsoft, Metro Style is dominating the entire internet. It is not difficult to find many websites adapted some elements of metro style. For Windows 8, you can fully feel the power of Metro Style.

Today, I am going to show you how to turn your ListBox (WPF / Silverlight) into Metro Style.

The result ListBox will be as below.

MetroListBox Continue reading

Watermark TextBox

Searching on the Internet about creating a watermark TextBox, there are many ways to achieve but finally I do it on my own.

<Grid Width="182" Margin="2">
    <Rectangle Fill="White"/>
    <TextBlock Margin="4,3" Text="Search..." FontFamily="Segoe UI"
    Foreground="#FFC0C0C0" FontSize="20" FontStyle="Italic"
    Visibility="{Binding ElementName=txtSearchBox, Path=Text.IsEmpty,
    Converter={StaticResource booleanToVisibilityConverter}}"/>
    <TextBox x:Name="txtSearchBox" BorderThickness="0" Margin="0,3"
    FontSize="20" FontFamily="Segoe UI Light" Background="Transparent"  />

Continue reading

Windows Phone Tutorial:ListBox on Windows Phone 7

This is one of the tutorial that walks through development of application on latest Windows Phone 7

Here I will show you how to use ListBox on Windows Phone and how to Bind Data to it.

First of all, you have to insert a ListBox into the PhoneApplicationPage, also I have edit the PageName to Transactions

Apart from dragging the ListBox control from the toolBox into the Application Page, you can also Code it by yourself.

Remember to give it a Name here is “TransactionList” so that we can call it from codebehind directly.

Next, we have to create a class which clarify the structure of a transaction.

Here for simply, all data are in string data format, Date, Amount and Type.

You can see a switch-case here so as to load specific image representing the type of the transaction.

Construct your ListBox

here we construct our listbox with some stackPanel

The following Code will generate a button like the following, it is quite dull with black background and white words.

The latter part of this tutorial will teach your how to design your own style.

Finished our design part, we have to jump to the code part.

It is better we create a loaded event handler to put our code so as to ensure allĀ componentsĀ are fully loaded.

Then, inside the Loaded event, I have some lines to generate a set of data instead of reading from XML or from the internet.

It is all done for our first Windows Phone 7 Application with ListBox

here is the result

Adding own Style to ListBoxItem

For this I will teach it on the next tutorial.


We can live without Motion Path

For Silverlight, many agree it is not perfect enough coz it doesnt include many features that inside WPF. Well, as we all know, Silverlight is an engine for us to create a web-based program/application. In my opinion, being a web-based application, it should be lite but not simple of course. As I remember, last week, someone ask how to create a motion path in Silverlight in order to make a picture flying around an ellipse (circular motion). Yesterday, another post has been created where people keep on discussing the problem of silverlight without motion path.

I think all we can do is to relate Math and Programming together.
Fortunately, my PureMath teacher has taught about a set of parametric equations which declare a path of circle. Then I try to implement it on Silverlight. Finally, it works, and I my extremely happy with that. Here is the solution.





        int t = 0;
        double AniX;
        double AniY;

        void Page_Loaded(object sender, RoutedEventArgs e)
            Ellipse_ani_X.From = Ellipse_ani_Y.From = 0;
            Ellipse_ani_Y.To = Ellipse_ani_X.To = AniX = AniY = 0;

        private void Ellipse_ani_X_Completed(object sender, EventArgs e)
            Ellipse_ani_X.From = AniX;
            Ellipse_ani_X.To= AniX = Math.Cos(t * Math.PI / 50 ) * 100;
            Ellipse_ani_Y.From = AniY;
            Ellipse_ani_Y.To = AniY = Math.Sin(t  * Math.PI / 50 ) * 100;


        private void Ellipse_ani_Y_Completed(object sender, EventArgs e)


I am trying to work out the motion path solution. I hope it will help all of you.

Steve Wong(Hong Kong)
Live with Light!

To Do List

Well, I have quite a bit to do these days becoz I want to try as much as I can in this Summer Holiday

Of course I will have some time for my academic preparation

Things to do are as follow, and I have no idea for each item at all. If you do have, please tell me or kindly comment here

  1. Prepare for the ImagineCup2009 (think of the toughest question that we are facing now)
  2. Linking Windows LiveID Authentication and Silverlight together
  3. create a useful little silverlight application (theme hasnt been decided)
  4. take a deep look into working ADO.NET with Silverlight (know quite a little bit)
  5. learn more about PopFly (I know nothing about it)
  6. Create a game on Silverlight(the least priority)
  7. To be a MVP (daydreaming…)

Hopefully, I can do much much…better than now after a few year… Fortunately, I am just 17 years old now =] still have a few of time

Steve Wong (Hong Kong)
Live with Light

Tired and…

Spending lots of time on Actually, not too much, but it is sure consuming some of my time. Now, I cant decide what to create.. I want to make a software but I have no idea at all. I wrote a mail sender before coz it is useful for me at least. Now, I would like to do more on the ADO.NET coz it should be something very important for the one who works with WebService.

By the way, these days, I replied some posts and found that many posts are related to 404 Error throws from the WebService when working with Silverlight. Not only does it the CrossDomain Error but also size of Data being transfered and the endpoint address. And the one who are having the problem right now please do search on a good search engine, and you should find lots of articles about 404 from

I should take enough rest before working on my new project .. topic is still not yet decided

Hopefully, all things go straight.

Live with Light!