Monthly Archives: June 2008

BUSY With Exams

I am having my school exam right now. So I may have to leave away from my computer for two weeks…

These days, I cant answer questions on Silverlight.Net although my answers may not be so accurate.

I am looking forward to the end of the exam and also the MIX 2008 Essential =]

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 http://www.silverlight.net/forums/ and post the bugs you found onto it.

Thanks!

Live with Light!
Steve Wong (Hong Kong) 

Silverlight Beta 2 has released

http://silverlight.net/forums/t/17337.aspx

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.

Page.xaml.cs

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", "&#91;", "&#93;", "\\", "A", "S", "D", "F", "G", "H", "J", "K", "L", ";", "'", "Z", "X", "C", "V", "B", "N", "M", ",", ".", "?", " " };
        public Page()
        {
            InitializeComponent();
            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&#91;i&#93;;
                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);
                }
                else
                {
                    k.Margin = new Thickness(i * 20 - 50, 0, 180 - i * 20 + 50, 80);
                }
                KeyBoard.Children.Add(k);
                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);
                }
            }
            else
            {
                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;
            item.ReleaseMouseCapture();
            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.CaptureMouse();
            item.Opacity *= 0.5;
        }
        #endregion Drag and Drop Starts Here
    }
}
&#91;/sourcecode&#93;

<strong><em>Page.xaml</em></strong>

<UserControl x:Class="Testing.Page"
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="400" Height="300" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 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" />
         </Grid>
        </Canvas>
    </Grid>
</UserControl>

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)

Powerful XAML

Today, I answered a question which is about XamlReader. By the way I think of so many technologies which can work with silverlight, not only because Silverlight can run on HTML or Silverlight can contact Webserivce, but because of it is making use of XAML.

Then I think of a Webserivce which return a string which is a string of XAML coding. It is so great to do so. Let say I have a SQL and after getting the data from the DataBase, maybe Information of Staffs. And I want to create a list of cards which includes the information of all staffs of my company. I can simply do that with all work on WebService but not Silverlight.

It has both advantages and disadvantages. For Adv, some class cannot be passed to Silverlight from Webservice (ArrayList, HashTable..) but we can manipulate all these into the form we want to show in XAML and pass that string. Yet, on the other hand, the xaml code will be so long that lengthens the time of downloading from the webserive.

By the way, Let me show an example here for the WebService.

using System;
using System.Web;
using System.Collections;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Data;
using System.Data.SqlClient;
using System.Web.Script.Services;
using System.Text;
using System.Configuration;
[WebService(Namespace = "<a href="http://tempuri.org/">http://tempuri.org/</a>")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]
public class MyService : System.Web.Services.WebServices
{
    public MyService()
    {
    }
    [WebMethod]
    public string Get_StaffInfo(string id)
    {
        int nElement = 0;
        StringBuilder strReturn = new StringBuilder();
        strReturn.Append("<Canvas>");
        SqlConnection sqlCon = null;
        try
        {
            string strConnectionString = (string)ConfigurationManager.ConnectionStrings["StaffDataBase"].ConnectionStrings;
            sqlCon = new SqlConnection(strConnectionString);
            SqlCommand sqlCom = new SqlCommand();
            sqlCom.Connection = sqlCon;
            sqlCom.CommandType= CommandType.Text;
            sqlCom.CommandText = "SELECT ScreenName From dbo.Staffs WHERE (StaffId = @strId)";
            sqlCom.Parameters.Add(new SqlParameter("@strId", id));
            sqlCon.Open();
            SqlDataReader sRead = sqlCom.ExecuteReader();
            while (sRead.Read())
            {
                strReturn.AppendFormat("<TextBlock Canvas.Top='{0}'" + "Foreground = 'White' Text = '{1}' />", nElement, sRead["ScreenName"]);
                nElement += 20;
            }
        }
        catch
        {
            strReturn = new StringBuilder();
            strReturn.Append("<Canvas>");
        }
        finally
        {
            strReturn.Append("</Canvas>" );
            if (sqlCon != null) sqlCon.Close();
        }
        return strReturn.ToString();
    }
}

Inside your Silverlight you call this

namespace SL2WebSrv
{
    public partial class Page : UserControl
    {
        WebServiceProxy.ServiceSoapClient mydata = new SL2WebSrv.WebServiceProxy.ServiceSoapClient();
        public Page()
        {
            InitializeComponent();
            Loaded += new RoutedEventHandler(Page_Loaded);
        }
        void Page_Loaded(object sender, RoutedEventArgs e)
        {
            mydata.Get_StaffInfoAsync("1");
            mydata.Get_StaffInfoCompleted += new EventHandler<SL2WebSrv.WebServiceProxy.Get_StaffInfoCompletedEventArgs>(mydata_Get_StaffInfoCompleted);
        }
        void mydata_Get_StaffInfoCompleted(object sender, SL2WebSrv.WebServiceProxy.Get_StaffInfoCompletedEventArgs e)
        {
            if (e.Error == null)
            {
                Canvas newStaff = XamlReader.Load(e.Result) as Canvas;
                LayoutRoot.Children.Add(newStaff);
            }
        }
    }
}

After all this tutorial, I hope more developers can know more about how powerful the Silverlight is and of course the XAML.

It can really work with so much thing…. not only Webservice but also JSP and AJAX and ASP.NET…

Live with Light
SteveWong (Hong Kong)

MIX2008HK

Wow! I have been waiting for many many days for this event.

As I know many different countries have held MIX2008 but not HongKong.

Details are as follow:

Date:
July 11, 2008 (Friday)
Time:
2:30 – 4:30pm
(Registration: 2:00 – 2:30pm)
Venue:
Grand Ballroom, Lower Lobby, Conrad Hong Kong,
Pacific Place, 88 Queensway, Hong Kong
Language:
Cantonese
Admission:
FREE
Enquiry Hotline:
2388 9600

 Reference Web Link: http://www.microsoft.com/hk/msdn/mixessentials2008/

Join It NOW!

Animation and Storyboard

Before getting closer to Silverlight, I used to make animation and some application by Flash.

Now, I have to remind all the people, who used to design Flash Application before, should be clear that it has a new system in Silverlight which is totally different from Flash.

We have Storyboard to control the animation of different objects but we have Movie Clip to control those in Flash.

In flash we have to create animation by time line everywhere, but we can do all the animation separately in Silverlight.

We create animation in code-behind as follow:

First we create our new Storyboard and Double Animation :

Storyboard Reflection_Story1 = new Storyboard(); 
DoubleAnimation Reflection_fades = new DoubleAnimation();

Then we have to set what the animation do, the value changed from …. to ….

Reflection_fades.From = 0;
Reflection_fades.To = 1;

Furthermore, we have to let the computer know, how long is the animation last for?

Reflection_fades.Duration = new Duration(TimeSpan.Parse("0:0:1"));

After that, what else we left? We have to tell the computer which object we want to apply for this animation.

Storyboard.SetTarget(Reflection_fades, Target_item);

Also, the property that you are changing from 0 to 1 on the Targert_item.

Storyboard.SetTargetProperty(Reflection_fades, "(Target_item.Opacity)");

Things left are quite simple and easy to understand!
We should let the Storyboard to control our animation, thus we add(hook) it onto the Storyboard.
Of course, we should then add the Storyboard into the Resources so that we can see it in the application.

Reflection_Story1.Children.Add(Reflection_fades);
LayoutRoot.Resources.Add(Reflection_Story1);

Lastly, we should make it starts so we can see what happens to the Opacity of the item.

Reflection_Story1.Begin();

Example is almost finished here, but for more details, you can refer to MSDN.

Because users also need to have a clear concepts of the use of different Animation (like Double, Point…)

Live With Light
Steve Wong (Hong Kong)

Setting source of Images

This week end, I am so busy with my heavy work load… homework! But, I still want to share my experience on writeing Silverlight Application.

As I remembered, I have seen more than ten posts asking for the blinding of the source of their images.

Actually people want to make use of the images that they added to the project.

Honestly speaking, it has so many ways to do the trick.

First one:

Image Img = new Image();
BitmapImage bi3 = new BitmapImage();
bi3.UriSource = new Uri("pic.gif", UriKind.Relative);
Img.Source = bi3;

Let me explain a little bit. If you added the image to your project, it is better for you to use UriKind.Relative. Just like the word “Relative” it is taking the resources relatively to the project. But how about somethings that are not added to the project?

Image Img = new Image();
BitmapImage bi3 = new BitmapImage();
bi3.UriSource = new Uri("http://localhost/pic.gif", UriKind.Absolute);
Img.Source = bi3;

Apart from setting it programmatically with C#, you can also add it with xaml code throught C#.

Image img = XamlReader.Load(" " ) as Image;
Layoutroot.children.add(img);

It is rare to see people using XamlReader, but it can really do the trick!

Live with Light
Steve Wong (Hong Kong)