I wish I could remember where I stumbled upon this, but you have to check out this creepy Flash demo. Move your mouse around and watch the model. The movement is not super fluid, but impressive nonetheless. A company by the name of MotionPortrait created the demo.

This week I was reading two of my favorite Microsoft Evangelist blogs; Kirk Allen Evans’ and Tim Heuer and was inspired to build upon two of their posts. Kirk wrote a great entry on Creating a JSON Service with WebGet and WCF 3.5 and Tim on
Calling web services with Silverlight 2. I thought it would be interesting to take the concepts covered in both of these posts and put them together into my own how to. In my sample I read an RSS feed into a JSON string, stores it in Isolated storage, and displays it in a ListBox. Once displayed, I will check every 30 seconds to see if the RSS feed has changed. Out-of-the-box my solution is not practical, but illustrates a flexible technique for caching a serialized collection of data in the event the service is unavailable.

In the first part of my sample I check to see if I have a cache of RSS in Isolated Storage. If so, I use the “DataContractJsonSerializer” class to de-serialize the JSON array. Once de-serialized, I can bind it to my ListBox control in “Page.xaml”

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

void Page_Loaded(object sender, RoutedEventArgs e)
{
    RssService.RssItem[] items
    if (_isf.FileExists("blog.json"))
    {
        //Read from IsolatedStorage the last set of blog entires
        using (IsolatedStorageFileStream isfs = 
         new IsolatedStorageFileStream("blog.json", System.IO.FileMode.Open, _isf))
        {
            //Deserialize the JSON array that was stored in Isolated storage.
            DataContractJsonSerializer djson = 
             new DataContractJsonSerializer(typeof(RssService.RssItem[]))
 
            items = djson.ReadObject(isfs) as RssService.RssItem[]
 
            isfs.Position = 0
            using (StreamReader sr = new StreamReader(isfs))
            {
                this.txtBlock.Text = sr.ReadToEnd()
            }
            isfs.Close()
        }
        listBox.ItemsSource = items
    }
 
    . . . . . . 
}

After we update our presentation of RSS, I will insert a animating UserControl to be use when we go to retrieve additional RSS items. This retrieval from our WCF 3.5 service will be executed every 10 seconds when our “DispatcherTimer” fires.

1
2
3
4
5
6
7
8
9
10
11
12

    //insert a UserControl that animates a spinner when we are retrieving 
    //an update of RSS data
    _indicator.HorizontalAlignment = HorizontalAlignment.Center
    _indicator.VerticalAlignment = VerticalAlignment.Center
    this.LayoutRoot.Children.Add(_indicator)
    _indicator.Visibility = Visibility.Collapsed
 
    //we will use a timer here to simulate a 5 second delay in grabbing 
    //the next rss update
    _dt.Interval = new TimeSpan(0, 0, 10)
    _dt.Tick += new EventHandler(_dt_Tick)
    _dt.Start()

Upon successful retrieval from our WCF service, we will update our isolated storage by serializing our array of RssItems[] into JSON, and writing that text to a file.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

void wcf_GetFeedsCompleted(object sender, 
    IsolatedStorage.RssService.GetFeedsCompletedEventArgs e)
{
    try
    {
        RssService.RssItem[] items = e.Result as RssService.RssItem[]
        //if we were able to grab a new set of Rss items then update Isolated storage
        if (items.Length > 0)
        {
            if (_isf.FileExists("blog.json"))
            {
                _isf.DeleteFile("blog.json")
            }
            using (IsolatedStorageFileStream isfs = 
             new IsolatedStorageFileStream("blog.json", System.IO.FileMode.Create, _isf))
            {
                //Take the array of RssItem[] objects and convert it to a JSON array.
                DataContractJsonSerializer djson = new DataContractJsonSerializer(items.GetType())
                MemoryStream ms = new MemoryStream()
                djson.WriteObject(ms, items)
 
                this.txtBlock.Text = System.Text.Encoding.UTF8.GetString
                   (ms.GetBuffer(), 0, Convert.ToInt16(ms.Length))
 
                isfs.Write(ms.GetBuffer(), 0, Convert.ToInt16(ms.Length))
                isfs.Close()
            }
            listBox.ItemsSource = items
        }
        this.listBox.Opacity = 1
        _indicator.Animation.Stop()
        _indicator.Visibility = Visibility.Collapsed
    }
    catch (Exception ex)
    {
        this.txtBlock.Text = ex.Message
    }
}

Thanks again to Tim and Kirk for the majority of my example.

Code: IsolatedStorage.zip

Check out this article on Cnn that describes the recent privacy breach that caught Facebook with there pants down.  A security lapse allowed strangers to access photos of Facebook member and their friends, even if the privacy settings were set to restrict who could see the photos.

With over 67 million active users, Facebook will always be suspect to hackers looking for a way to circumvent its user privacy.  For reasons beyond my comprehension, our generation of Internet users have little trepidation about what information we place in the hands of others.   When Facebook made the decision to open ups its platform they put upon them self a huge risk that someday the breach will be very serious.   Privacy is not a setting, but a caution we should all take before we choose to upload a private photo or other personal information to the 5th most-trafficked website in the world .

In a move to make the Windows Mobile PC more usable, Microsoft announced that mobile phones running there operating system will include both Adobe’s Flash Lite and Adobe Reader LE. Microsoft has over 11 million phones running Mobile PC and hopes to grow that to over 20 million by next year. This move will certainly put pressure on Apple to support Flash and hopefuly Silverlight on the increasingly popular iPhone. Even with this move I believe that the Mobile PC operating system is virtually unusable and needs a complete overhaul if it hopes to gain or even maintain its existing market share.

One of the cool new features of Silverlight 2 is the concept of on-demand deployment of assemblies. In most interactive development there is a desire to minimize the amount of data a user has to download to get your RIA up and running. The application package (XAP) size can grow quite quickly if one tries to include all of resources required to run the entire application. In Silverlight 2 we have the concept of a XAP file or compressed package (zip file). By default, the XAP contains an application assembly and any Silverlight assemblies that your application is dependent on (System.Xml.Linq, etc). In Silverlight 2 we have the ability to generate more than one XAP file giving us the opportunity to deploy additional assemblies on demand, asynchronously to the initial payload.

To leverage this technology one has to understand the concept of “AssemblyParts” and how reflection is used to extract an assembly from a downloaded XAP. The following example will show how one can code this functionality in Silverlight 2 Beta 1.

The first step in downloading an additional assembly is to go and get the XAP package. Note the use of a BaseAddress. In my example the base address is http://localhost/MultipleXap_Web/.

1
2
3
4
5

Uri addressUri = new Uri(_baseUri, "ClientBin/MultipleXap1.xap")
System.Net.WebClient wcXap1 = new System.Net.WebClient()
wcXap1.BaseAddress = _baseUri
wcXap1.OpenReadCompleted += new OpenReadCompletedEventHandler(wcXap1_OpenReadCompleted)
wcXap1.OpenReadAsync(addressUri)

Once downloaded, the “OpenReadCompleted” event will fire and one can extract the assembly from the XAP. I have chosen to factor into a method the logic used extract the Assembly from the compressed zip file. In the event that we had multiple assemblies we could use Linq to navigate the xml of AppManifest and programmatically load each assembly.

1
2
3
4
5
6
7
8
9
10

public Assembly LoadAssemblyFromXap(string relativeUriString, Stream xapPackageStream)
{
    Uri uri = new Uri(relativeUriString, UriKind.Relative)
    StreamResourceInfo xapPackageSri = new StreamResourceInfo(xapPackageStream, null)
    StreamResourceInfo assemblySri = Application.GetResourceStream(xapPackageSri, uri)
 
    AssemblyPart assemblyPart = new AssemblyPart()
    Assembly a = assemblyPart.Load(assemblySri.Stream)
    return a
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

void wcXap1_OpenReadCompleted(object sender, OpenReadCompletedEventArgs e)
{
    if ((e.Error == null) && (e.Cancelled == false))
    {
        // Convert the downloaded stream into an assembly
        Assembly a = LoadAssemblyFromXap("MultipleXap1.dll", e.Result)
 
        /****************************************************************
         * The following should work  since I did the following
         *
         *   "added a reference to second assembly then specified that 
         *    the library assembly that is referenced by the application
         *    project is not included with the application package
         *    when the application assembly is built"
         *   
         *  This syntax compiles, but DOES NOT run correctly
         ****************************************************************
         * MultipleXap1.Page page = new MultipleXap1.Page()
         ********************************************************/
 
        object page = a.CreateInstance("MultipleXap1.Page")
        //Insert UserControl into the Primary grid.
        this.LayoutRoot.Children.Add(page as UserControl)
    }
}

Once the assembly has been extracted, we can create an instance of the selected UserControl by using the “CreateInstance” method on the Assembly object. Based on Microsoft’s documentation, we should have been able to add a project reference to the on-demand XAP, within our default Silverlight Application. This would give us access to that second assemblies types. We can make the reference and the project compiles, but throws an exception at runtime. CreateInstance is not a preferred approach since it drastically limits how we can leverage the strong typing of objects instantiated from this reflected assembly.

Code: MultipleXap.zip

During the process of writing our Silverlight 2 game “Tunnel Trouble” we stumbled upon a fairly significant rendering defect in the Beta 1 version of the Silverlight 2 plugin. This defect appears to affect any UIElement (Rectangles, Paths, Images) that has been transformed on its X or Y coordinate. If the object breaks the bounds of the plugin, Silverlight chooses not to render the object that has been flipped or rotated.

Note: There appears to be an inconsistent workaround. If you set the width and height of the <object> tag to a fixed size (i.e. 250×205) and not 100%x100% the defect appears to resolve itself.

Code: RenderDefect.zip

At Mix08 one of the components of Silverlight 2 I was most intrigued by was the multi-scale image technology called “Deep Zoom” (formerly seadragon). The demos we saw were quite compelling. Immediately I thought of areas where our clients could improve their users interactive experiences through this new technology.

Below you will find my first attempt at using the technology. It took about 10 min to create and showcases an interesting example of composition using deep zoom.

(Hint: Look for the plane in the right part of the sky)

Attached you will find my sample project. It is pretty big in size with the full collection of image tiles. All of the code you see in the page.xaml.cs was taken from Scott Hanselmans blog on Deep Zoom where he leveraged the Mousewheel class written by
Pete Blois

The image of the flags I took last summer and in the original there is a small speck in the sky where I believe a plane was. I found a image of an F16 on the internet and used Photoshop to remove its original background. I replaced it with a sample of the color of the flag photos sky. Using Deep Zoom Composer I placed the new F16 photo over the sky speck and exported the collection.

Code: DeepZoomFlag.zip
(Note: to get the sample to work you will need to edit the absolute path to the collection in the page.xaml file)

Whenever possible developers should encourage designers to maintain all of their Silverlight storyboards within XAML. This allows the designers the optimum environment to use a tool like Blend to tweak the animation timing, easing and any relevant Key Splines. That said, there are situations where a developer may create a UserControl that requires full control over the format of the animation. Defining this storyboard procedurally, allows the developer a more consistent level of control and allows an easier approach to manipulating properties within this storyboard.

The following will show a simple example of how one could include a “DoubleAnimationUsingKeyFrames” that allows the TranslateTransform’s “X” property to be manipulated each time the animation is played.

The first step in defining our animating UserControl is to attach a “Loaded” event handler within our constructor. This allows us to have the XAML parsed by the UserControls base class, yet inject a procedural storyboard into the UserControls resources.

1
2
3
4
5

public Box()
{
  InitializeComponent()
  this.Loaded += new RoutedEventHandler(Page_Loaded)
}

Our storyboard will include a “DoubleAnimationUsingKeyFrames”, “SplineDoubleKeyFrame” with a corresponding “KeySpline”. I have chosen to refactor this logic into a method. In the event that we wanted to manipulate both the “X” and the “Y” TranslateTransform property, this method could be called twice passing both “X” and “Y” as the last argument.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

private static SplineDoubleKeyFrame CreateDoubleAnimation(ref Storyboard sb,
   TranslateTransform translation, string property)
{
    DoubleAnimationUsingKeyFrames da = new DoubleAnimationUsingKeyFrames()
    da.SetValue(NameProperty, string.Concat("da_", property))
 
    SplineDoubleKeyFrame sdkf = new SplineDoubleKeyFrame()
    sdkf.SetValue(NameProperty, string.Concat("sdkf_",property))
 
    sdkf.Value = 0
    sdkf.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(0.25))
 
    //define the KeySpline
    KeySpline ksX = new KeySpline()
    ksX.ControlPoint1 = new Point(1.0, 0.25)
    ksX.ControlPoint2 = new Point(0.75, 1.0)
    sdkf.KeySpline = ksX
 
    //add the SplineDoubleKeyFrame to the DoubleAnimationUsingKeyFrames
    da.KeyFrames.Add(sdkf)
 
    //define which TranslateTransform property will be targeted by the DoubleAnimation
    Storyboard.SetTarget(da, translation)
    Storyboard.SetTargetProperty(da, property)
    sb.Children.Add(da)
    return sdkf
}

Within our Page_Loaded handler we define the transformation group for this control, call our helper function and insert the storyboard into the UserControls grid (LayoutRoot) resource collection. In this example, we are only manipulating the 2D, X/Y coordinate system so we only need to include the “TranslateTransform” within the transform group. If Scale was being translated as well, we would include a “ScaleTransform” object within the group.

1
2
3
4
5
6
7
8
9
10
11
12

void Page_Loaded(object sender, RoutedEventArgs e)
{
    //define the Render Transformation for this control
    TranslateTransform translation = new TranslateTransform()
    TransformGroup transforms = new TransformGroup()
    transforms.Children.Add(translation)
    this.RenderTransform = transforms
 
    _sdkfX = CreateDoubleAnimation(ref _sb, translation, "X")
 
    this.LayoutRoot.Resources.Add("playerAnimation", _sb)
}

Lastly, I created a public method in the UserControl that sets the “X” and starts the animation. This method can be called repeatedly from the location that is instantiating this UserControl.

1
2
3
4
5
6

public bool Animate(int x)
{
    _sdkfX.SetValue(SplineDoubleKeyFrame.ValueProperty, x)
    _sb.Begin()
    return true
}

Code: Animation.zip

Even though Mix08 is now only a distant memory, the inspiration I leave with will last for quite a while.  There is something quite powerful about being around thousands of professionals that are as passionate and enthusiastic about the future of interactive development.  For months now I have had the special opportunity to be working close with Microsoft and the there development of the Silverlight 2 Beta.  We have seen first hand the power and potential of the platform. It was great to share that excitement with the rest of the development community.

In the weeks to come, I look forward to sharing our discoveries as we learned how to leverage the Silverlight 2 framework to build our most recent casual game.  Look for posts on the techniques and methodologies we found most effective.

A month ago Microsoft selected Terralever to conduct a in depth Case Study on our use of Silverlight 2 for creating a new Miniclip.com game Tunnel Trouble. This process was really exciting for Terralever.  I feel Microsoft did a great job of capturing the value we find in Silverlight and how this powerful framework allowed us to create a compelling casual game in less then 5 weeks.