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!


Silverlight Beta 2

Still a long way to go…

After upgraded to Silverlight 2 beta 2, it seems that there is so many problems…

  1. Listbox.Items.MouseLeftButtonDown Event cannot be fired 
  2. WCFService cannot be added as Service Reference
  3. Beta 2 Runtime cannot view Beta 1 Application
  4. …. Still more to be found and discovered..

These are not my main point. What I want to say is that – it is still a Beta Version, isn’t it?

Engineers from Microsoft are still trying their best to create the best environment for us to build such a Dynamic Scenario (Silverlight). 

Please Clap for them and give your opinion at and post the bugs you found onto it.


Live with Light!
Steve Wong (Hong Kong) 

Silverlight Beta 2 has released

Newly Updated!

  • Important! Migrating Older Code to the Newer Release
  • Update Silverlight.js
  • Sockets Breaking Change
  • Change for Built-In Style of Controls
  • MIME Type and Installer URL Change
  • SetTargetProperty and GetTargetProperty Changes
  • System.Windows.Control.dll Merged with System.Windows.dll
  • ToolTip Changes
  • Removed Several Properties from Controls in System.Windows*dll
  • Change in Handling of System.Windows.Controls.Extended.dll in XAML
  • Changes to HtmlElement.GetAttribute and HtmlElement.GetProperty
  • Calendar/DatePicker Changes
  • HtmlPage.UnregisterScriptableObject Removed
  • WebClient and HttpWebRequest Changes
  • Improved Null Argument Checking in System.Xml
  • BackgroundWorker Moved
  • Deep Zoom Image and Collections Format Change
  • MultiScaleImage Change
  • AllowInboundCallsFromXDomain Changes
  • Changes to Scroll-related APIs and Drag*EventArgs
  • Glyphs Element Requires Either UniCodeString or Indices Attribute
  • ItemsControl.Items Is Now of Type ItemCollection Instead of IList
  • RoutedEventArgs.Handled=true Events No Longer Bubble
  • Style Cannot Be Applied to Control That Is Incompatible with Its TargetType
  • SetValue Only Accepts the Correct Types (No Conversions)
  • Control.InitializeFromXaml Removed
  • No Longer Can Specify Name and x:Name on the Same Element
  • Changes to Cross-Domain Policy
  • Storyboards Can Be Active While Outside the Live Tree
  • GetValue on Storyboard.Duration Only Returns Storyboard.Duration
  • Image and ImageBrush Class Changes
  • TextBox Template Changes
  • Custom BorderBrush/BorderThickness Change
  • ButtonBase Changes
  • ListBox and ListBoxItem Changes
  • ContentControl and ContentPresenter Changes
  • GetValue Changes
  • Updates to Control Styles
  • Miscellaneous API Changes


Keyboard OSK Control

WOW. It seems that most of my posts are written because I got ideas while I was answering the question on Silverlight.Net.

Today, I would like to introduce my OSK but it is only done very simply.
It doesnt support NumLk ScrLk Shift CapLk those function keys….
In other words, it support mainly input of words.

Let me paste the code here for all of you.


using System;
using System.Collections.Generic;
using System.Linq;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Media.Imaging;
using System.Windows.Markup;
using System.ComponentModel;

namespace Testing
    public partial class Page : UserControl
        string[] keystring = new string[49] { "`", "1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "-", "=", "<", "Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P", "[", "]", "\\", "A", "S", "D", "F", "G", "H", "J", "K", "L", ";", "'", "Z", "X", "C", "V", "B", "N", "M", ",", ".", "?", " " };
        public Page()
            Loaded += new RoutedEventHandler(Page_Loaded);

        public void Page_Loaded(object sender, RoutedEventArgs e)
            for (int i = 0; i <= 48; i++)
                Button k = new Button();
                k.Content = keystring[i];
                k.Width = 20; k.Height = 20;
                if (i == 48 )
                    k.Width = 220;
                    k.Margin = new Thickness(-30, 80, 0, 0);
                else if (i >= 38 )
                    k.Margin = new Thickness((i-38 ) * 20 - 20, 60, 180 -((i-38 ) * 20 - 20), 20);
                else if (i >= 27)
                    k.Margin = new Thickness((i-27) * 20 - 30, 40, 180 - ((i-27) * 20 - 30), 40);
                else if (i >= 14)
                    k.Margin = new Thickness((i - 14) * 20 - 40 , 20, 180 - ((i - 14) * 20 - 40), 60);
                    k.Margin = new Thickness(i * 20 - 50, 0, 180 - i * 20 + 50, 80);
                k.Click += new RoutedEventHandler(k_Click);

        void k_Click(object sender, RoutedEventArgs e)
            Button temp = sender as Button;
            if (temp.Content.ToString() == "<" )
                if (tb.Text.Length != 0)
                    tb.Text = tb.Text.Remove(tb.Text.Length - 1, 1);
                tb.Text += temp.Content.ToString();
        #region Drag and Drop Starts Here
        private bool isMouseCaptured;
        private Point mousePosition;
        void DragNDrop_MouseMove(object sender, MouseEventArgs e)
            FrameworkElement item = sender as FrameworkElement;
            if (isMouseCaptured)

                // Calculate the current position of the object.
                double deltaV = e.GetPosition(null).Y - mousePosition.Y;
                double deltaH = e.GetPosition(null).X - mousePosition.X;
                double newTop = deltaV + (double)KeyBoard.GetValue(Canvas.TopProperty);
                double newLeft = deltaH + (double)KeyBoard.GetValue(Canvas.LeftProperty);

                // Set new position of object.
                KeyBoard.SetValue(Canvas.TopProperty, newTop);
                KeyBoard.SetValue(Canvas.LeftProperty, newLeft);

                // Update position global variables.
                mousePosition = e.GetPosition(null);
        void DragNDrop_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
            FrameworkElement item = sender as FrameworkElement;
            isMouseCaptured = false;
            mousePosition.X = mousePosition.Y = 0;
            item.Cursor = null;
            item.Opacity *= 2;
        void DragNDrop_MouseEnter(object sender, MouseButtonEventArgs e)

            FrameworkElement item = sender as FrameworkElement;
            mousePosition = e.GetPosition(null);
            isMouseCaptured = true;
            item.Opacity *= 0.5;
        #endregion Drag and Drop Starts Here


<UserControl x:Class="Testing.Page"
    Width="400" Height="300" xmlns:d="" xmlns:mc="" mc:Ignorable="d">
    <Grid x:Name="LayoutRoot" Background="White">
        <TextBox x:Name="tb" Width="120" Height="25" Margin="8,8,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" d:LayoutOverrides="Width, Height"/>
        <Canvas HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Stretch">
         <Grid x:Name="KeyBoard"  Background="White" Height="100" Width="300" Canvas.Left="8" Canvas.Top="192">
          <Rectangle HorizontalAlignment="Stretch" Margin="0,0,18,0" VerticalAlignment="Stretch" Fill="#FFFF0000" Height="100" MouseLeftButtonDown="DragNDrop_MouseEnter" MouseMove="DragNDrop_MouseMove" MouseLeftButtonUp="DragNDrop_MouseLeftButtonUp" />

One for remind, the osk can move actually with the Drag and Drop code inside code-behind.
Of course, I will upload some pics here too.

Live With Light!
SteveWong (Hong Kong)