Michael Sync

Book Review: Silverlight 2 in Action

Michael Sync — Mon, 17 Nov 2008 17:15:19 +0000

Have you guys read Silverlight 2 in Action book? I just finished reading the final version of this book. It was great! This is my second time that I read this book. I’ve read the early version of this book because Steven Hong, Marketing Coordinator of Manning Publications send me the MEAP copy of this book for review on 7th of June, 2008. I read it within 2 days and mailed my feedbacks to Steven and Chad at that time. ( BTW, Do you guys still remember my “Silverlight 2: Write and Win” that I made in this blog a few months back? Yes, Steven and SilverlightShow sponsered that contest. )

Source Download : http://www.manning.com/campbell/code/

Chapter 1: Introducing Silverlight

This chapter is good for those who has no idea about what Silverlight is. You will see a lot of good things about Silverlight in this chapter. You will learn how your team will improve their productivity by using Silverlight, the performance of Silverlight, developer/designer collaboration and how easy for your team to port Silverlight to the desktop application. There are a few interesting charts that show the performance comparison between Silverlight, Flex and Java Swing on IE(PC), Firefox(PC) and Safari(Mac), the stats of browsers and OSs. (I requested Chad to use JavaFX instead of Java Swing in comparison chart but seems like he forgot to change about that.) If you already know what Silverlight is, you can probably skip this section and can start from 1.3 XAML.

The section 1.3 is about the basic understanding XAML in Silverlight. If you are coming from ASP.NET and WinFrom background, you should read this section. You will learn about how to create Silverlight application. At the end of this chapter, you will be able to create very basic Silverlight project by yourself.

Chapter 2: Harmony with the Web

This chapter is a bit more technical than previous chapter. You will be introduced the relationship between Silverlight and the HTML DOM. I like the idea of having introduced about this relationship in first place because you will be confused in future if you are not aware of those relationship. I found that there are a lot of win-form/WPF developer who has no experience in web-application developement started playing with Silverlight and they used to face a lot of problems in understanding this relationship.

After that, you will learn very very detailed information about Silverlight.js in this chapter. IMHO, this is so Silverlight 1.1 style. I used to recommend people to use OBJECT tag or asp:Silverlight control instead of Silverlight.js so I asked Chad why he is more prefere to use Silverlight.js over OBJECT. He explained me the reason as below ~

The reason for this approach is to empower developers to use Silverlight with any server technology (ASP.NET, PHP, ASP, JSP, etc.). The reason I chose createObjectEx over OBJECT is because learning Silverlight.js is more valuable. By doing this, you can customize the experience if a user does not have Silverlight installed. This is important to consider with the fact that Silverlight is not on many non-technical users machines yet. It is very difficult to provide a custom user/installation experience to an new user without an understanding of Silverlight.js

I agree with him for that reason. If you are using non-ASP.NET and want to custom the splash screen, you can stick with Silverlight.js. Otherwise, you should probably use asp:Silverlight control as much as you can.

After learning about Silverlight.js in details, you will be learning about how to manipulate HTML DOM via the managed code, the Silverlight installation experiences and etc in this chapter.

IMO, it would be great if we can get more information about loosely XAML, inline XAML, OBJECT, asp:Silverlight control and in which scenerio we should OBJECT, asp:Silverlight control and Silverlight.js in this book.

Chapter 3: Back to the Basics: Layout and Text

This chapter is about flexible layout management and text management feature in Silverlight. I would say that this chapter is pretty good resource for Silverlight newbies and I highly recommend you to read this chapter unless you are from WPF background. You will learn about Silverlight Layout Controls such as Canvas, Stack Panel and Grid. And also, you will learn about some basic UI controls (e.g. TextBlock and etc) and their properties in that chapters.

Chapter 4: Handling User Interaction

This chapter will give you the basic understanding about Keyboard inputs/Mouse Interaction and the examples of how to use Silverlight controls (e.g Button, HyperLink Button, Radio Button, CheckBox, ListBox, TabControl, Date Controls (Calendar and DatePicker), PopUp, OpenFile Dialogs, Border, Slider)

Chapter 5 : Getting Down with Data Binding

This is very important chapter. Yes. this is about data-binding. If you want to become a WPF/Silverlight developer, you must know about data-binding. In this chapter, you will learn two different approaches (runtime and design-time), three binding modes (OneTime, One way and two ways), how to use INotifyPropertyChanged, IValueConverter and DataTemplate. And also, there are very detailed explanation about Silverlight DataGrid included in this chapter. Finally, you get a taste of LINQ in the last section (5.5) of this chapter. but this book is not for LINQ so you won’t find that much details in this book. If you are very interested to learn LINQ, I would recommend you to read LINQ in Action book.

Chapter 6: Networking and Communications

This chapter starts with cross-domain issues, clientaccesspolicy.xml and crossdomain.xml, which are very important for Silverlight developers. Even you are coming from ASP.NET or any other web technology background, you must focus on this section to understand all about cross-domain issues. Based on my experience in participating Silverlight.net forum and Codeproject forum, the most problems that people used to face are cross-domain issue. So, it’s better if you have good understanding about cross-domain before start playing.

After learning about clientaccesspolicy.xml and crossdomain.xml, you will be introduced with SOAP 1.1, REST (both POX and JSON), RSS, WCF duplex and socket in this chapter.

IMO, if you like to understand about those services in details, this chapter is not enough for you. You will have to find more resources on your own but however, as I mentioned before, you will be introduced with a lot of services so you can get some idea about those services and you can go for the one that you like the most.

Chapter 7: Managing Digital Media

This chapter is all about Audio, Video, Image, Deep-Zoom(Multi-Scale Image) and Play-Ready component. If you are looking for Silverlight developer position, you will find that 80% of Silverlight job openings are related to Media. It’s so sad that people are still willing to use ASP.NET MVC until now and don’t want to use Silverlight for LOB applications. Anyways, if you like to become Silverlight developer, you should have some understanding about those media things. So, you will have to read it.

Chapter 8: Getting a grip on graphics

This chapter is all about Silverlight Graphics. You will learn about 6 types of Shape objects with 7 segment types, 5 types of Brushes and 4 transformation options which are available in Silverlight 2. And also, you will learn how to use Expression Blend 2 in this chapter.

Chapter 9: Bringing it to life: Animation

Animation? yes! The whole chapter is just for Animation. I would say that the previous chapter and this chapter are very important for UI designers who like to play a lot of graphics and animation to make your UI looks cool. However, if you are working in small software company and you have to wear the multiple hats, you should probably know about those graphics and animation things to create the attactive UI. In this chapter, you will be learning all kinds of animation objects, how to animate the object using storyboard and etc. It has a lot of samples and very detailed explanation for animation objects so I think you will find it very useful. If you are like me who like to create beautiful and cool things, I’m sure that you will definetly enjoy reading this chapter.

Chapter 10: Giving it style

If you are coming from web background, you might like to know how to create something like CSS style in Silvelright. Then, this chapter is just right for you. You will learn everthing about creating style for Silverlight in this chapter but as this book is released before Silverlight Toolkit, it doesn’t cover anything about ImplicitStyleManager and theme/skins in this chapter.

Anyway, I think you should be able to create some cool styles like Silverlight Glass Button after you finish reading this chapter.

Chapter 11: Enhancing the experience

This chapter explains a lot of good things that Silverlight has. Silverlight Isolated storage and BackgroundWorker are very helpful things to improve the user experiece of Silverlight application. If you are a Silverlighter, you must know about those two important things. This chapter explains very well about Isolated storage and BackgroundWorker. If you are reading this chapter, don’t read it. I suggest you to play a bit with Visual Studio while you are reading. I’m sure that you will often need to use those things when you are developing the application. There are some explanations about DLR (Dynamic Language Runtime) but honestly, I skipped it. hehe.

Chapter 12: Share the light: Distribution and deployment

This chapter covers about creating the user controls, page navigation, creating the custom splash screen and hosting Silverlight Streaming. But I’m not sure why “creating the user controls, page navigation, creating the custom splash screen” are included in “Distribution and deployment” chapter. I mean, the explanation and sample for those sections are good but I was expecting to get the explanation how to host the services (WCF or Astoria or etc) with Silverlight 2 application. maybe, hosting those services are beyond this book.

Summary

If you ask me about my favoriate chapters, I would say that Chapter 3, 5, 6 and 9 are my favoriates. What I like about this book is that it has a lot of detailed explanation and samples so that if you are new to Silverlight, you can easily understand about how Silverlight works and improve your Silverlight skill in very short time.

I have two friends who are very new to Silvelright. When they asked me about Silverlight book, I suggested to buy the MEAP of this book. After 2 weeks of reading this book and playing with Silverlight, they said that this book is very easy to read and having a lot of samples for each chapter makes them to learn very fast. As of now, they are able to start developing small application with Silverlight now. I have to go and check their application on coming weekend.

Silverlight Glass Button

Michael Sync — Sat, 08 Nov 2008 10:54:23 +0000

Martin Grayson wrote an amazing tutorial about how to create a WPF glass button using blend in his blog. He explained each and everything in very details with the step-by-step instruction. (You can find Tutorial.doc in the sample file of his post.) I’ve been thinking to create the similiar one for Silverlight since I was using Silverlight 1.1 Alpha (a.k.a Silverlight 2 Alpha). Due to some limitation of Silverlight 1.1, it’s not so easy to create it at that time. After that, I’ve been very busy with my job and couldn’t manage to port it to Silverlight.

Today, I got some time to check his code again and managed to port it to Silverlight. It was very simple. The only difference between the original WPF style and the one that I ported is that I’m using Visual State Manager instead of ControlTemplate.Triggers in this sample. The reason is that Silverlight doesn’t support all kind of WPF triggers (including ControlTemplate.Triggers) except EventTrigger. So, I decided to use VSM in my sample. I hope you find it useful.

SoureCode Download: SilverlightGlassButton.zip (1.07 MB)
Demo :Silverlight Glass Button Demo

Custom ContentTemplate of Glass Button

The following code is the Glassy Button Style. If you like to know the detail, I would recommend you to read Martin’s tutorial.

Visual State Manager - MouseOver State

Martin is using Trigger.EnterActions and Trigger.ExitActions of ControlTemplate.Triggers to apply the Mouse Over Style but as I mentioned before, Silverlight doesn’t support those kind of triggers so that Visual State Manager is the best choice to change the style.

You will see the following in “MouseOver” state of VSM.

Visual State Manager - Pressed State














Collapsed

Note: I haven’t implemented the FocusStates and Disabled state. I will look at those states when I have some more time. You can also send me if you manage to create those missing states too.

Enjoy! Silverlighters!!!

Silverlight Toolkit - Using Silverlight TreeView Control

Michael Sync — Tue, 28 Oct 2008 17:55:44 +0000

The tutorial is written for those who are very new Silverlight TreeView control. The control that I’m using in this tutorial is from Silverlight Toolkit CTP - October release.

Contents

Introduction
Getting Started with Silverlight Treeview
Adding the TreeViewItem from Code-behind
Using HierarchicalDataTemplate with TreeView
Model-View-ViewModel Pattern
Treeview with Theme
Known Issues

Introduction

The TreeView control provides a way to display information in a hierarchical structure. You can customize the appearance of TreeView by using DataTemplate, HierarchicalDataTemplate, Style and etc.

Sample: SilverlightTreeViewDemo.zip (724 KB)

Software Needed

Microsoft Visual Studio 2008
Silverlight 2 RTM Tool for Visual Studio 2008
Silverlight Toolkit CTP (Binary)

Getting Started with Silverlight Treeview

In this section, I will show you how to manually add the TreeViewItem to Treeview from XAML and code-behind file.

Let’s create new Silverlight project (I will call “SilverlightTreeViewDemo”) in VS 2008.

After creating the Silverlight project, you will need to add Microsoft.Windows.Controls.dll from Silverlight Toolkit. There are other two dlls such as Microsoft.Windows.Controls.DataVisualization.dll and Microsoft.Windows.Controls.Theming.dll and I will be convering those dlls in my upcoming tutorials.

As TreeView control is not Silverlight Core Library, you will need to add xmlns namespace in XAML like we used to do when we wanna use the custom control. I will use “control” as a prefix for Silverlight Toolkit control.

The following example shows how to create a TreeView with static TreeViewItem in XAML. You can just copy and paste it in Page.xaml.

You will see the output below when you runs the sample.

Adding the TreeViewItem from Code-behind

If you don’t want to add those treeview items from XAML, you can also do the same thing from code-behind file. The example shows how to add a few TreeViewItem from code-behind file.


TreeViewItem tvItem = new TreeViewItem();
tvItem.Header = "Level 1.1";
tvItem.Items.Add("Level 2.1");
myTreeView.Items.Add(tvItem);
myTreeView.Items.Add("Level 1.2");
myTreeView.Items.Add("Level 1.3");

You can also do editing, removing those TreeViewItem from code-behind. As those operations are very simple, I won’t write each and everything in this post. Let’s move to HierarchicalDataTemplate which is more interesting than doing it from code-behind file or XAML.

Using HierarchicalDataTemplate with TreeView

We have learnt how to add the static TreeViewItem in XAML or in previous section. We will learn about how to use the HierarchicalDataTemplate in this section. What we did in previous section is manipulating the Treeview or TreeViewItem manually. It’s not related to the data. But we will learn how to bind the TreeView with object and we can manipulate the object without touching directly to the TreeView control.

First of all, we will create one nested class called Level in our project. And, we will add two properties called Name, Children as below in that class.


using System;
using System.Collections.Generic;

namespace SilverlightTreeViewDemo {
public class Level {
private List _children = new List();
public List Children {
get {
return _children;
}
set {
_children = value;
}
}

public string Name { get; set; }
}
}

Model-View-ViewModel Pattern

Before going to HierarchicalDataTemplat, I would like to add one interesting thing here. I know that there are a lot of people who are using Design and Pattern in their Software Development these days. MVVM (Model-View-ViewModel) pattern is the most popular pattern for UI developers. So, I’m thinking that it would be great if I use this pattern in article too. If you want to learn more about that pattern, I highly recommend you to read Nikhil’s post “Silverlight ViewModel Pattern“. He is using the attached property to communicate between View and ViewModel. But I would like to make my demo project as simple as possible so I will use the ViewModel class as a resouce in View instead of using the attached property in my sample.

As I mentioned in the screenshot above, I create new class called PageViewMoel in project and I created that viewmodel as a resource in Page.xaml. So, we are able to communicate from View to ViewModel. In other words, we are able to bind the data from ViewModel in View.

I will declare one List varible that can keep the list of Person object in ViewModel.


#region Priviate Variables
List root = new List();
#endregion

And I will populare the data to that list in the constructor of PageViewModel class. I’m going to write the code for filling data to List here but you can download the sample and check the code in your machine.

Then, you will need to export the data as a property so that you can bind that properties with TreeView in View (Page.xaml).


#region Public Methods
public List Data {
get {
return root;
}
}
#endregion

Finially, you can create the HierarchicalDataTemplate as below in XAML to display the hierachical data in TreeView. If you are using Datagrid, you can simply use the DataTemplate to customize the apperance of Datagird. The same way, you can also use Datatemplate with TreeView too but if you want to show the hierachical data then you will need to use HierarchicalDataTemplate instead of normal DataTemplate.

If you like to display other controls (e.g. Image ), you can simply put those controls inside StackPane. The following output is what I got when I add one image and one image control in HierarchicalDataTemplate that I mentioned above.

If you want to display the dynamic image, you can use ImageConverter to convert the URL to Image Bytes. Sache did a great job to create the Windows Explorer in WPF. You can also use his approach with a few changes in Silverlight too.

If you have any question or you want to get a few sample for Silverlight TreeView control, please feel free to let me know. I will try to create it for you.

Treeview with Theme

Silverlight CTP was released with six build-in themes. Those six themes are in six different assemblies. You can simply add your favoriate theme assembly as a reference in your project and then, you can easily start using it.

Let’s say you really like ExpressionDark theme and you wanna use it in your project. First thing that you need to do is that you have to create xmlns: in User Control tag as below.


xmlns:theme="clr-namespace:Microsoft.Windows.Controls.Theming;assembly=Microsoft.Windows.Controls.Theming.ExpressionDark"

And then, you have to put all of your controls inside the theme controls (e.g. ). That’s all. The look and feel of all of your controls will be changed on the theme that you applied.

Known Issues

1. DisplayMemberPath in TreeView is not working.

2. Nested HierarchicalDataTemplate: You can’t use the nested HierarchicalDataTemplate with Silverlight TreeView control.

For example:You will get the error if you are using the nested HierarchicalDataTemplate as below.


SilverlightApplication1.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:toolkit="clr-namespace:Microsoft.Windows.Controls;assembly=Microsoft.Windows.Controls"
Width="400" Height="300">

If you encounter any issue with this control, please drop a comment. I will add this to this list so that it would be helpful for other people.

Silverlight Toolkit CTP released

Michael Sync — Tue, 28 Oct 2008 17:22:22 +0000

What is Silverlight Toolkit?

Silverlight Toolkit is the set of controls and utilities for Silverlight Developers. Those controls are not integrated yet with Silverlight Core Library but its likely to be a part of Silverlight Core in future.

As the time of writing, the following controls are available in Silverlight Toolkit CTP. I will write the series of how-to tutorials for those controls in my blog.

Controls

ObjectDataProvider (dropped)
TreeView
AutoCompleteBox
DockPanel
WrapPanel
Label
Expander
HeaderedItemControl
HeaderedContentControl
NumericUpDown
ViewBox
Chart
ButtonSpinner
ImplicitStyleManager
Theming

Software Requirement

VS 2008
Silverlight 2 RTM

Where can I get it?

You can download it from this link http://codeplex.com/Silverlight.

Screenshots

Here is a few screenshots that I captured for now. Please check more screenshot in my upcoming tutorials.

Silverlight Toolkit CTP on Visual Studio 2008

TreeView

AutoCompleteBox

Dock Panel and Wrap Panel

Silverlight 2 Contest: Time to vote

Michael Sync — Tue, 30 Sep 2008 02:37:56 +0000

Hey everyone! This is time to choose the winner from The Silverlight 2 ‘Write and Win’ contest. There are 8 articles submitted in total. Please vote your favorite article here. You get a chance to vote your faviorite author until 23:59 GMT 05 October. The winners will be announced on 06 October 2008.

Silverlight and Drupal: Syndication
Tutorial: Create a Silverlight 2 User Control from a Popup Control
Silverlight and Drupal: Popular Content
Silverlight ComboBox
Virtual earth deep zooming
Find Your Books in Amazon.com with Silverlight
Silverlight Stock Portfolio
Building a Framework for Silverlight Line-Of-Business Applications

A few updates for my readers

Michael Sync — Mon, 29 Sep 2008 07:38:27 +0000

Hello All,

How are you doing? I hope everything is fine with you. Please accept my apologies for not posting anything lately in my blog. (I don’t want to repeat that I’ve been so busy this time. hehe ) I’m writing this post because I would like to share some updates that you might interest.

WPF and Silverlight Insiders

Yes. I’ve been invited to join WPF/Silverlight Insiders team last month. Some of you may not know what WPF/Silverlight Insiders is. The insiders are the group of people who invited by Microsoft to give the feedbacks on their new products.

All insiders got the early build of Silverlight and other new products. We also have the private mail list where we can discuss about anything relate to those products with other Insiders, MVPs and (of course) Microsoft team.

I really enjoy to be a part of that team. Initally, I was not so sure whether I’m allowed to tell my friends about WPF/Insider team and etc. That’s why I didn’t post about that last month. Now, I come to know that it’s okay to share about that with my friends.

I’m planning to write the series of tutorials in my blog. I will let you know more about that later. Stay turned.

SLUnity - Configuration

As you all know, I’m participating in UnityContrib project to contribute the Silverlight version of Unity (SLUnity) for Silverlight Community. I recieved serveral requests to support the SLUnity Configuration. I tried to port the project in very simple way and I got it working for very simple scenerio. One of my friends from UK was helping me to test my ported version of SLUnity. He pointed out some intesteing scenerios that I need to look at it. I’m really appreciated his help on this. I will take some time to share the code of SLUnity.Configuration with you. I also like to see what Unity team will offer for us.

Download - Silverlight 2 RC (Release Candidate) Released

Michael Sync — Fri, 26 Sep 2008 05:51:22 +0000

Scott Guthrie just published the official post about the release of Silverlight 2 RC in his blog. You can read the original post here.

You can go and download the installer from this link. http://silverlight.net/GetStarted/sl2rc0.aspx

Downloads

The most wanted control “combobox” is available in this bits. Plus, it works with Microsoft Visual Web Developer 2008 Express Edition. Yay!!

2008 Formula 1 - Sexy Silverlight Heart Race Test from Singapore

Michael Sync — Sat, 16 Aug 2008 12:40:05 +0000

The Silverlight Application “The Heart Race Test” is a contest which is hosted on “2008 Formula 1 SingTel Singapore Grand Prix” promotion website. They are giving a way Formula 1 ticket and an XBox 360. If you are a Singaporean or PR or EP holder, you can participate in that contest. Okay. Let’s take a look that application.

First of all, the girl-dancing video will be displayed on the screen for 2 or 3 mins.

You will see some interactions between one video to another.

At the end of the introduction videos, you will see the list of top 20 girls as below.. They are smiling and looking at you to get your attention.

If you mouse over on a particular girl, the girl that you select will be so happy and she will do jumping or laughing or etc. Don’t forget to look at other girls. (I really like this idea. ) Okay, anyway, choose the girl you like the most. then, the quiz screen where you can answer 10 questions and the girl that you chose will be appeared.

At the end of quiz, it will ask you to enter your name, email address and phone number. Then, it will shows how many percentage you match with the girl that you choose. (There is one problem here. Let’s you don’t click “Show Me” button at the end of quiz for 5 or 10 mins. then, you click that button. What will happened is that the application will show the wrong girl. )

If you are a Singaporean, PR or EP holder, please ensure that you give the correct name, email and mobile number. You will get the chance to win F1 ticket or XBox 360. Good luck!!!

Silverlight ‘Write and Win’ Contest on SilverlightShow.net

Michael Sync — Sat, 16 Aug 2008 06:07:15 +0000

Hey Silverlighters! Time for new contest!! Silverlight ‘Write and Win’ contest will be hosting on SilverlightShow.net this time. Go to http://www.silverlightshow.net and submit your great article!

The contest will be started at 00:00 GMT 18 Aug.The dead line is 23:59 28 Sep. You will get one week for voting and then, the result will be announced on 06 Oct 2008.

All the best!

Free Download: Moonlight 0.8 for Silverlight Linux Users

Michael Sync — Sat, 16 Aug 2008 05:21:07 +0000

Rusty Howell from Novell announced that they have released the next version of Moonlight. You can download the Firefox Plugin from this link and install it on your Linux box. If you are willing to get more closer with Moonlight, you can get the whole sourcecode from here or you can check-out from SVN.

svn co svn://anonsvn.mono-project.com/source/trunk/moon

Download ~

What is Moonlight?

Moonlight is an open source implementation of Microsoft Silverlight for Unix systems. The official Microsoft Silverlight plugin doesn’t work on Linux or Unix systems so that Mono team developed Moonlight, an open source firefox plugin, for Linux users.

According to the bug list, there are currently 59 issues in this release. I hope those all will be resolved very soon. If you encounter any issue with that plugin, you can send it to the Moonlight team via this link. Enjoy!