Dear visitor, thanks for stopping by! If you want, you can follow all updates on Snowball.be via RSS. You can also follow me on Twitter or Facebook. More interesting posts from other Microsoft Regional Directors can be found at The Region.
Gill Cleeren         March 8, 2010    

The month of March has already started. That means that the biggest conference for the Netherlands is almost upon us: DevDays 2010 (www.devdays.nl).

About the conference (Dutch):

DevDays 2010: het grootste Microsoft evenement in Nederland voor software development en softwarearchitectuur. Duizenden professionals bezoeken jaarlijks DevDays om in twee dagen weer volledig op de hoogte te raken van alle actuele ontwikkelingen op hun vakgebied.

I’ll be doing a talk on ASP.NET 4.0 What’s new (http://www.devdays.nl/Agenda.aspx?pid=66&lang=nl). Hope to see you there!

  Posted on: Tuesday, March 09, 2010 12:07:12 AM (Romance Standard Time, UTC+01:00)   |   Comments [0]
         
Gill Cleeren     Silverlight | Speaking     March 8, 2010    

In the coming weeks and months, I’ll be presenting at several conferences. In April, I’m booked to give a talk on Silverlight 4 and WPF 4 in Birmingham for VBUG’s Spring Conference 2010. You can find the full agenda here: http://www.vbug.co.uk/

The event takes place at Heritage Motor Centre on Thursday April 29th 2010.

About the conference:

With the imminent release of Microsoft Visual Studio 2010 and the .Net framework 4, 'VBUG4Thought' celebrates and highlights these new products.
This conference is ideal if you wish to learn about the new enhancements, features and capabilities of VS2010 and .Net 4. The conference will also give you an overview of how you can apply these technologies in new or exisiting projects.
As usual, we'll be featuring key speakers from the UK and abroad in order to give you expert, impartial and informative advice. Hadi Hariri, Jon Skeet, Gill Cleeren, Dave Sussman, Josh Twist and Eric Nelson are confirmed as speakers.

  Posted on: Tuesday, March 09, 2010 12:03:47 AM (Romance Standard Time, UTC+01:00)   |   Comments [1]
         
Gill Cleeren     Azure | Case studies | Microsoft | Silverlight     March 8, 2010    

In my busy time (see previous post), some really interesting case studies were released.

  • On iis.net, a huge white paper was posted on the Sunday Night Football site. This site, which may not be known to European readers as much, is now built entirely on Silverlight 3 backed by IIS Smooth Streaming. The latter, an ability to dynamically adapt the bit rate of the video stream, is unique in a RIA technology: for example Flash does not have this on board. This way, viewers with lower bandwidth or slower PC processors frequently experience long periods of video buffering, stuttering, and degraded picture quality. Silverlight solves this. The white paper can be read at http://learn.iis.net/page.aspx/808/sunday-night-football-live-in-hd-with-microsoft-silverlight-3-and-iis-smooth-streaming/
  • The second interesting case study can be found at http://www.microsoft.com/casestudies/Case_Study_Detail.aspx?CaseStudyID=4000005861%0d . This case describes the use of Windows Azure by Outback Steakhouse. Outback was looking for a social networking presence but did not know what to expect in visitor numbers. Windows Azure offered them exactly what they needed.
  Posted on: Tuesday, March 09, 2010 12:00:00 AM (Romance Standard Time, UTC+01:00)   |   Comments [0]
         
Gill Cleeren     Silverlight | sl4     March 8, 2010    

As many of you may already know, I’m working on a book titled Silverlight 4 Data and Services Cookbook. Writing my first book (together with fellow Silverlight addict Kevin Dockx) has taken a lot of my time, I haven’t been able to blog as much as I used to. My sincere apologies for that :)

The good news is that the book is almost done, we’re in the last straight line to the publication stage! Even more good news is that the book is already available for pre-order at the publisher’s site: http://www.packtpub.com/microsoft-silverlight-4-data-and-services-cookbook/book .

1847199844

The contents of the books is the following:

Over 85 practical recipes for creating rich, data-driven business applications in Silverlight

  • Design and develop rich data-driven business applications in Silverlight
  • Rapidly interact with and handle multiple sources of data and services within Silverlight business applications
  • Understand sophisticated data access techniques in your Silverlight business applications by binding data to Silverlight controls, validating data in Silverlight, getting data from services into Silverlight applications and much more!
  • Packed with practical, hands-on cookbook recipes, illustrating the techniques to solve particular data problems effectively within your Silverlight business applications

In detail:

Microsoft Silverlight is a programmable web browser plugin that enables features including animation, vector graphics, and audio-video playback – features that characterize Rich Internet Applications. However, Silverlight is a great (and growing) Line-Of-Business platform and is increasingly being used to build data-driven business applications. Silverlight Data Services enable efficient access to your data, allowing you to draw on multiple sources of data and solve particular data problems. There is very little existing material that demonstrates how to build data-driven solutions with the platform. Silverlight 3 made a big step into Line-Of-Business data services and Silverlight 4 builds further upon this. This book will enable .NET developers to get their finger on the pulse of data-driven business applications in Silverlight.

This book is not a general Silverlight 3/4 overview book; it is uniquely aimed at developers who want to build data-driven applications. It focuses on showing .NET developers how to interact with, and handle multiple sources of data in Silverlight business applications, and how to solve particular data problems following a practical hands-on approach, using real-world recipes. It is a practical cookbook that teaches you how to build data-rich business applications with Silverlight that draw on multiple sources of data. Most of the covered features work both in Silverlight 3 and 4. However, we cover some that are specific for Silverlight 4, which will therefore not work with Silverlight 3. Where this is the case, it is clearly indicated.

Packed with reusable, real-world recipes, the book begins by introducing you to general principles when programming Silverlight. It then dives deep into the world of data services, covering all the options available to access data and communicate with services to get the most out of data in your Silverlight business applications, whilst at the same time providing a rich user experience. Chapters cover data binding, data controls, the concepts of talking to services, communicating with WCF, ASMX and REST services, and much more.

By following the practical recipes in this book, which are of varying difficulty levels, you will learn the concepts needed to create data-rich business applications—from the creation of a Silverlight application, to displaying data in the Silverlight application and upgrading your existing applications to use Silverlight. Each recipe covers a data services topic, going from the description of the problem, through a conceptual solution to a solution containing sample code.

I’m really really excited about the upcoming release, I hope you enjoy reading it as much as I did writing it! As you can see, the book takes a very practical approach to working with Silverlight in enterprise environments using a recipe-approach. The scenarios for these recipes are things me an you often encounter and this book should give you the solution for them. The book is aimed at Silverlight 4 development, although most recipes will work in Silverlight 3 as well.

I hope in the coming weeks/months to be able to give away a few copies of the book from here.

  Posted on: Monday, March 08, 2010 11:31:07 PM (Romance Standard Time, UTC+01:00)   |   Comments [0]
         
Gill Cleeren     Visug     February 2, 2010    

I just created the Visug Twitter account. You can follow @visug from now on for updates, news etc.

And, best of all, we’ll be giving away a free ticket to TechDays 2010 in the coming days to one of our followers!

  Posted on: Tuesday, February 02, 2010 9:57:56 PM (Romance Standard Time, UTC+01:00)   |   Comments [1]
         
Gill Cleeren         January 28, 2010    

With January almost behind us, the season of events and conferences is coming closer.

I’ve been confirmed for quite some event already, more on this later.

Since a few days, the first batch of sessions for TechDays 2010 Belgium has been made available on www.techdays.be. I’ll be doing 2 sessions, more specifically:

  • Silverlight 4 tour de force, with a little of WPF 4 sauce on top

2007... Silverlight 1.0 is released. 2010… Silverlight 4 is almost upon us. Did you lose track of all the new features that are in the platform right now? And how does Silverlight 4 compare to WPF 4?
In this session, we will take you on a tour through the most exciting features that Silverlight 4 has to offer, varying from Trusted application to full data binding support, from rich text-editing to webcam support etc. While we’re at it, we’ll look at how WPF 4 can help you achieve the same effects.
After this session, you’ll have a better understanding on the position of Silverlight 4 and WPF 4 and their newest features.

  • Building business data-driven applications FAST with WCF RIA Services and Silverlight

NET RIA Services is a new framework allowing you to get easy access to your data in Silverlight applications. While still in beta, this new framework has already caused quite a stir in the community. In this session, we'll explore the current version and its features. This session contains mostly demo’s on how to build a business application with .NET RIA Services.

I’ll also be at DevDays NL, more on this in a few days.

From Visug, we'll also be doing something very special on Thursday April 1st in Antwerp after TechDays, so keep your agenda free that night!

  Posted on: Thursday, January 28, 2010 8:25:30 PM (Romance Standard Time, UTC+01:00)   |   Comments [0]
         
Gill Cleeren     .net | Silverlight | Silverlight Advent Calendar | sl4     December 23, 2009    

Yes, I made it :) Welcome to this last post in my Silverlight Advent Calendar! From December 1st until today, December 24th, I have created each day, a Silverlight article. When I first thought about it, I feared there would be at least one day I would not be able to create my post. Well, this didn’t happen, and this means that after 24 articles, we have finally arrived at Christmas Eve. I really hope you enjoyed these posts and I’ll sure be doing something similar in the future!

On a “real” advent calendar, on December 24th, the final day of the calendar, you get a special surprise: a bigger image, a bigger gift or a larger chunk of chocolate than on other days. Well, I thought this needed to be the case in my advent calendar as well, so I decided to end my series with a special post. It gives a preview of something that can in much more detail be found in my upcoming book AND it brings some more Christmas spirit on this day: a Flickr Christmas image browser. All free as my gift to you!

Below is the interface of the application.

image

We’re in luck when working with Flickr: it exposes a cross-domain file so we can access their API services from a client Silverlight application, even without running with elevated permissions! Therefore, we do not need to create a service layer that sits in between our application and Flickr’s services.

When clicking on the Get Pictures button, we load thumbnails into a templated StackPanel. When clicking on any of these thumbnails, the large image is loaded. To store the information needed for a thumbnail, I created a class called SmallFlickrImage.

public class SmallFlickrImage
{
  public string ImageId { get; set; }
  public string FarmId { get; set; }
  public string ServerId { get; set; }
  public string Secret { get; set; }
 
  public string ImageUrl
  {
    get
    {
      return string.Format(
        "http://farm{0}.static.flickr.com/{1}/{2}_{3}_m.jpg", 
        FarmId, 
        ServerId, 
        ImageId, 
        Secret
        );
    }
  }
}

In the click event, we perform a service call to Flickr. To call Flickr’s API, you’ll need an API key which can be obtained for free at http://www.flickr.com/services/api/. Once obtained, you need to embed this key in each request your application will perform with Flickr. Also on this site, you’ll find a complete overview of all available methods. Here, I’m using the flickr.photos.search method, which accepts a search string and returns me an XML response, containing all the information I need to display images in my client side application.

Working with Flickr is a typical example of a REST service. When working with these services from Silverlight, we actually need to do 3 steps:

  • Create a URL
  • Send a request to this URL
  • Accept the response, mostly in XML, sometimes in JSON

The URL is constructed as follows (as directed by Flickr):

string searchUrl = 
  "http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key={0}
   &text=christmas tree snow";

To send a request to this URL, we can use either the WebClient, or the HttpWebRequest. WebClient is sufficient (there are cases where this is not the case, I spent many pages to this topic in my book ;) ). Working in Silverlight with WebClient is identical to working with this class in the full .NET framework. One thing though: just like any interaction with a service, the service call is to be done asynchronously. The code below sends a request to Flickr:

private void GetPicturesButton_Click(object sender, RoutedEventArgs e)
{
    WebClient client = new WebClient();
    client.DownloadStringCompleted += 
      new DownloadStringCompletedEventHandler(client_DownloadStringCompleted);
    client.DownloadStringAsync(new Uri(string.Format(searchUrl, api_key)));
}

In the callback, which is invoked automatically when the service returns, using some very simple LINQ-To-XML, we can parse the results. The returned XML is always of the same format and can be seen as the contract between Flickr and my application. Because we cannot set the Source property of an Image control directly, we need to go around using a BitmapImage.

protected void client_DownloadStringCompleted(object sender, 
  DownloadStringCompletedEventArgs e)
{
  XDocument xml = XDocument.Parse(e.Result);
 
  var photos = from results in xml.Descendants("photo")
               select new SmallFlickrImage
               {
                 ImageId = results.Attribute("id").Value.ToString(),
                 FarmId = results.Attribute("farm").Value.ToString(),
                 ServerId = results.Attribute("server").Value.ToString(),
                 Secret = results.Attribute("secret").Value.ToString()
               };
 
  foreach (var photo in photos)
  {
    Image image = new Image();
 
    BitmapImage bitmapImage = new BitmapImage(new Uri(photo.ImageUrl, UriKind.Absolute));
    image.Source = bitmapImage;
    image.Width = 160;
    image.Height = 160;
    image.Stretch = Stretch.Uniform;
    image.Tag = photo;
    image.Margin = new Thickness(3);
    image.HorizontalAlignment = HorizontalAlignment.Center;
    image.MouseLeftButtonDown += new MouseButtonEventHandler(img_MouseLeftButtonDown);
    PicListBox.Items.Add(image);
  }
}

At this point, the ListBox is filled. This ListBox is templated; the code for this can be seen in the sample code download.

When clicking (we attached a MouseLeftButtonDown event on each dynamically added image) on an image, we’ll load the "full” image into an Image control. This requires some code, mostly concerning which type of URL is used by Flickr for the image.

void img_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
  Image img = sender as Image;
  SmallFlickrImage smallFlickrImage = img.Tag as SmallFlickrImage;
  if (smallFlickrImage != null)
  {
    WebClient detailClient = new WebClient();
    detailClient.DownloadStringCompleted += 
      new DownloadStringCompletedEventHandler(detailClient_DownloadStringCompleted);
    detailClient.DownloadStringAsync(
      new Uri(string.Format(detailUrl, api_key, smallFlickrImage.ImageId)));
  }
}
 
void detailClient_DownloadStringCompleted(object sender, 
  DownloadStringCompletedEventArgs e)
{
  XDocument xmlDocument = XDocument.Parse(e.Result);
  XElement photoElement;
  Uri detailImageUrl;
 
  if (xmlDocument.Descendants("photo").Count<XElement>() > 0)
  {
    photoElement = xmlDocument.Descendants("photo").First<XElement>();
 
    string serverId = photoElement.Attribute("server").Value;
    string farmId = photoElement.Attribute("farm").Value;
    string imageId = photoElement.Attribute("id").Value;
    string secret;
    
    if (photoElement.Attribute("originalsecret") != null)
    {
      secret = photoElement.Attribute("originalsecret").Value;
      detailImageUrl = new Uri(string.Format
        ("http://farm{0}.static.flickr.com/{1}/{2}_{3}_o.jpg", 
          farmId, 
          serverId, 
          imageId, 
          secret)
         );
    }
    else
    {
      secret = photoElement.Attribute("secret").Value;
      detailImageUrl = new Uri(string.Format
        ("http://farm{0}.static.flickr.com/{1}/{2}_{3}.jpg", 
          farmId, 
          serverId, 
          imageId, 
          secret)
         );
    }
 
    BitmapImage bitmapImage = new BitmapImage(detailImageUrl);
    DetailImage.Source = bitmapImage;
  }
}

 

With that, the sample is working!

The complete code sample can be downloaded here: SLChristmasFlickr.zip (31.34 KB)

MERRY CHRISTMAS!

  Posted on: Thursday, December 24, 2009 12:50:15 AM (Romance Standard Time, UTC+01:00)   |   Comments [0]
         
Gill Cleeren     .net | Silverlight | Silverlight Advent Calendar | sl4     December 20, 2009    

In the before-last post of my Silverlight Advent Calendar, I would like to spend some time with a Silverlight 3 feature that’s most helpful in real world projects: merged resource dictionaries. By most helpful, I mean that in real applications, resource files can become really really big. Files of 1000 lines of pure mark-up are no exception and are really hard to find your way in.

Silverlight 3 added support for merged dictionaries. Basically, using these, we can split resources over several files, dictionaries. Using them though is nothing different than using resources located in App.xaml or Resources of the current page/control.

Let’s take a look at using these merged resource dictionaries. I created some styles to style the ChristmasSong application we have been using a few times already.

 

image

In the beginning of this series, we already looked at implicit styles. For this application, I’m defining a few of these, meaning that this very project will only work for Silverlight 4. Of course, the merged dictionary function works also in Silverlight 3.

To define a resource dictionary, in the project, we need to add a XAML file (either via creating an empty text file and renaming the extension or creating a new user control and deleting the *.cs file). In this file, we can create a ResourceDictionary element. Below is the XAML code for the implicit styles, which I grouped into a file called DefaultStyles.xaml. I created a default style for a Button, TextBlock and TextBox.

<ResourceDictionary 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Style TargetType="Button">
        <Setter Property="Foreground" Value="Black" />
        <Setter Property="Background" Value="Red" />
        <Setter Property="FontWeight" Value="Bold" />
        <Setter Property="FontSize" Value="15" />
        <Setter Property="HorizontalAlignment" Value="Center"></Setter>
        <Setter Property="VerticalAlignment" Value="Center"></Setter>
    </Style>
 
    <Style TargetType="TextBlock">
        <Setter Property="Foreground" Value="Green" />
        <Setter Property="FontWeight" Value="Bold" />
        <Setter Property="FontSize" Value="15" />
        <Setter Property="HorizontalAlignment" Value="Left"></Setter>
        <Setter Property="VerticalAlignment" Value="Center"></Setter>
        <Setter Property="Margin" Value="2"></Setter>
    </Style>
 
    <Style TargetType="TextBox">
        <Setter Property="Width" Value="150" />
        <Setter Property="FontSize" Value="15" />
        <Setter Property="HorizontalAlignment" Value="Center"></Setter>
        <Setter Property="VerticalAlignment" Value="Center"></Setter>
        <Setter Property="Margin" Value="2"></Setter>
    </Style>
</ResourceDictionary>

Next, I created a second ResourceDictionary which has just one Style, designed for the title, in a file called SpecificStyles.

<ResourceDictionary 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Style TargetType="TextBlock" x:Key="TitleStyle">
        <Setter Property="Foreground" Value="Red" />
        <Setter Property="FontStyle" Value="Italic"></Setter>
        <Setter Property="FontWeight" Value="Bold" />
        <Setter Property="FontSize" Value="28" />
        <Setter Property="HorizontalAlignment" Value="Center"></Setter>
        <Setter Property="VerticalAlignment" Value="Center"></Setter>
    </Style>
</ResourceDictionary>

Now we need to let our application know about these resources. To do so, I have in the App.xaml added the following code. In the MergedDictionaries element, we link the seperate XAML files.

<Application 
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
  x:Class="SLMergedDictionaries.App"
  >
  <Application.Resources>
    <ResourceDictionary>
      <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary 
          Source="/SLMergedDictionaries;component/DefaultStyles.xaml">
        </ResourceDictionary>
        <ResourceDictionary 
          Source="/SLMergedDictionaries;component/SpecificStyles.xaml">
        </ResourceDictionary>
      </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
  </Application.Resources>
</Application>

We can now use the styles declared in the dictionaries just like we would do with regular defined styles.

The complete sample can be downloaded here: SLMergedDictionaries.zip (310.39 KB)

  Posted on: Monday, December 21, 2009 12:46:11 AM (Romance Standard Time, UTC+01:00)   |   Comments [0]
         
Gill Cleeren     .net | Silverlight | Silverlight Advent Calendar | sl4     December 20, 2009    

Next to the full support of the data binding engine for the IDataErrorInfo interface, Silverlight 4 adds a new interface called INotifyDataErrorInfo, offering more options for particular scenario's. In this post, we’ll look at a small example using this interface.

IDataErrorInfo allows retrieving the error on a per-property basis. It’s not possible however to validate all properties of the entity in one go. This becomes possible with the INotifyDataErrorInfo. Let’s look at the interface first.

public interface INotifyDataErrorInfo
{
    bool HasErrors { get; }
 
    event EventHandler ErrorsChanged;
 
    IEnumerable GetErrors(
                    string propertyName);
}

This interface has some nice advantages. As said, we can check if the entity as a whole is in an invalid state through the HasErrors property. Retrieving the errors using the GetErrors can now retrieve other things than just strings which was all that we could do with the IDataErrorInfo. On top of that, a property can have more than just one validation error at the same time

The ErrorsChanged event can come in handy if there’s a long running process needed to perform validation: assume that for some validation, we need to go to the database over a service. The ErrorsChanged event allows us to notify the UI if the validation errors change. If ValidatesOnNotifyDataErrors is set to true on the UI, Silverlight will listen for the ErrorsChanged event and will display any errors if they are added afterwards.

That’s it for this interface, let’s now look at it in an example. I have changed the example created for the IDataErrorInfo to work with INotifyDataErrorInfo, so the interface has remained the same.

The errors I want to return to my interface are more than just strings. I created a custom error as follows:

public class ChristmasSongError
{
    public ErrorLevel Severity{ get; set; }
    public string ErrorName { get; set; }
    public string ErrorMessage { get; set; }
 
    public override string ToString()
    {
        return ErrorName + ": " + ErrorMessage;
    }
}

The ChristmasSong class now implements the INotifyDataErrorInfo interface. Let’s focus on the Title property. When its value is set, it calls a validation method. In this method, I create an instance of the custom error, specifying all the property values. If there’s an error, here the title being empty, I add it to a Dictionary called errors using the AddError method. If validation is satisfied, it’s removed using the RemoveError method. The errrors Dictionary is used so it is possible for each property to have more than one error: each property has as its value a List.

public class ChristmasSong : INotifyDataErrorInfo
{
    private string title;
    private string performedBy;
    private TimeSpan duration;
    private DateTime published;
 
    private string error;
 
    public Dictionary<string, List> errors = 
      new Dictionary<string,List>();
 
    public event PropertyChangedEventHandler PropertyChanged;
 
    protected void NotifyPropertyChanged(string propertyName)
    {
        if (PropertyChanged != null)
            PropertyChanged(
                    this, new PropertyChangedEventArgs(propertyName));
    }
 
    public string Title
    {
        get
        {
            return title;
        }
        set
        {
            title = 
                    value;
            ValidateTitleProperty();
        }
    }
 
    private void ValidateTitleProperty()
    {
        ChristmasSongError christmasSongError =
new ChristmasSongError() 
        { Severity = ErrorLevel.Error, ErrorName =
"TitleRequired", 
          ErrorMessage = 
                    "Title should not be empty" };
        if (string.IsNullOrEmpty(title))
        {
            AddError(
                    "Title", christmasSongError);
        }
        else
        {
            RemoveError(
                    "Title", "TitleRequired");
        }
    }
 
    public string PerformedBy
    {
        get
        {
            return performedBy;
        }
        set
        {
            performedBy = 
                    value;
            ValidatePerformedByProperty();
        }
    }
 
    private void ValidatePerformedByProperty()
    {
        ChristmasSongError christmasSongError =
new ChristmasSongError() 
        { Severity = ErrorLevel.Error, ErrorName =
"PerformedByRequired", 
          ErrorMessage = 
                    "The artist should not be empty" };
        if (string.IsNullOrEmpty(performedBy))
        {
            AddError(
                    "PerformedBy", christmasSongError);
        }
        else
        {
            RemoveError(
                    "PerformedBy", "PerformedByRequired");
        }
    }
 
    public TimeSpan Duration
    {
        get
        {
            return duration;
        }
        set
        {
            duration = 
                    value;
            ValidateDuration();
        }
    }
 
    private void ValidateDuration()
    {
        ChristmasSongError durationNullError =
new ChristmasSongError() 
        { Severity = ErrorLevel.CriticalError, ErrorName =
"DurationNull", 
          ErrorMessage = 
                    "The duration should not be empty" };
        ChristmasSongError durationTooLongError =
new ChristmasSongError() 
        { Severity = ErrorLevel.Error, ErrorName =
"DurationTooLong", 
          ErrorMessage = 
                    "The duration is too long" };
        
        if (duration == TimeSpan.Zero)
        {
            AddError(
                    "Duration", durationNullError);
        }
        else
        {
            RemoveError(
                    "Duration", "DurationNull");
        }
 
        if (duration.TotalSeconds > 500)
        {
            AddError(
                    "Duration", durationTooLongError);
        }
        else
        {
            RemoveError(
                    "Duration", "DurationTooLong");
        }
    }
 
    public DateTime Published
    {
        get
        {
            return published;
        }
        set
        {
            published = 
                    value;
            VaidatePublished();
        }
    }
 
    private void VaidatePublished()
    {
        ChristmasSongError publishedTooLow =
new ChristmasSongError() 
        { Severity = ErrorLevel.CriticalError, ErrorName =
"PublishedTooLow", 
          ErrorMessage = 
                    "The date is too small" };
        ChristmasSongError publishedTooHigh =
new ChristmasSongError() 
        { Severity = ErrorLevel.CriticalError, ErrorName =
"PublishedTooHigh", 
          ErrorMessage = 
                    "The date is too high" };
 
        if (published < new DateTime(1900, 1, 1))
        {
            AddError(
                    "Published", publishedTooLow);
        }
        else
        {
            RemoveError(
                    "Published", "PublishedTooLow");
        }
 
        if (published > new DateTime( 2010, 1, 1))
        {
            AddError(
                    "Published", publishedTooHigh);
        }
        else
        {
            RemoveError(
                    "Published", "PublishedTooHigh");
        }
    }
 
    private void AddError(string propertyName, ChristmasSongError error)
    {
        
 
        if (!errors.ContainsKey(propertyName))
        {
            errors.Add(propertyName, 
                    new List() { error });
        }
        else// adding the error to the already existing list
        {
            var list = errors[propertyName];
            list.Add(error);
        }
 
        if (ErrorsChanged != null)
            ErrorsChanged(
                    this, new DataErrorsChangedEventArgs(propertyName));
    }
 
    private void RemoveError(string propertyName, string errorName)
    {
        if (errors.ContainsKey(propertyName))
        {
            var christmasSongError = errors[propertyName]
                .Where
(e => e.ErrorName == errorName).FirstOrDefault();
            var list = errors[propertyName];
            list.Remove(christmasSongError);
 
            if (list.Count == 0)//no more errors for this property 
            {
                errors.Remove(propertyName);
            }
 
            if (ErrorsChanged != null)
                ErrorsChanged(
                    this, new DataErrorsChangedEventArgs(propertyName));
        }
    }
 
    public event EventHandler ErrorsChanged;
 
    public System.Collections.IEnumerable GetErrors(string propertyName)
    {
        if (string.IsNullOrEmpty(propertyName))//retrieve
                        errors for entire entity
        {
            return errors.Values;
        }
        else
        {
            if (errors.ContainsKey(propertyName))
                return errors[propertyName];
            return null;
        }
    }
 
    public bool HasErrors
    {
        get
        {
            if (errors.Count == 0)
                return false;
            return true;
        }
    }
}

With the entity in place, we can look at the UI. The XAML code is similar to the IDataErrorInfo example, although we should now use the ValidatesOnNotifyDataErrors and set it to True. Below is part of the code, for the entire listing, see the download.

<TextBox x:Name="TitleTextBox" Grid.Row="1" Grid.Column="1" Width="200" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="2"

Text="{Binding Path=Title,Mode=TwoWay,ValidatesOnNotifyDataErrors=True,NotifyOnValidationError=True}" />

The complete sample can be downloaded here: SLINotifyDataErrorInfo.zip (602.56 KB)

  Posted on: Monday, December 21, 2009 12:42:27 AM (Romance Standard Time, UTC+01:00)   |   Comments [0]
         
Gill Cleeren     .net | Silverlight | Silverlight Advent Calendar | sl4     December 20, 2009    

Services and data access are the focus of the book I’m writing (more very very soon!). Working with services to get data into a Silverlight application is so vital, it should be code that’s known by every Silverlight developer by heart. Working with duplex bindings is somewhat more complicated. However, there are situations in which duplex communication is really necessary. Think of the typical example: a stock application that should send stock updates to the client without the client requesting for an update.

Duplex communications are possible with WCF. They “seem” initiated by the server: the service will send updates without the client requests the service to do so. This way, the client can receive updates whenever new information is available on the server (new stock info that becomes available) and act accordingly. I put seem between quotes. The reason for that is that a duplex binding is in fact still a normal request/receive process. Initially, the client has to do a request to the service and from then on, the service can send its updates to the client.

In the example I have created for this post, I created an application that posts updates about snow throughout Belgium (while writing this article, it has snowed quite a lot in Belgium, so that’s where the inspiration came from and Tienen is where I live :) ). Below is a screenshot.

image

Of course, you’re here to learn something and see some code, right? No problem! Let’s first focus on the service. For the data exchange, I created a small type called SnowUpdate.

public class SnowUpdate
{
    public string Location { get; set; }
    public double centimeter { get; set; }
}

One very important thing that we need to do, is adding a reference to an assembly available in the Silverlight SDK called System.Service.PollingDuplex.dll. By default, it’s installed in C:\Program Files (x86)\Microsoft SDKs\Silverlight\v4.0\Libraries\Server. Add a reference to this assembly. (Note the x86, that’s because I’m running 64bit).

The contract of the service makes it clear that we are working with a duplex service. There are some special things to note in this code. As you can see, two interfaces are defined here. The first one is the regular contract, the second one is what’s called the callback contract and defines the contract for the call to the client.

Also note that both OperationContracts have IsOneWay set to true. For the Connect method, we’re actually saying: a client can call Connect to make itself known to the service but it expects no response, hence the IsOneWay.

[ServiceContract(Namespace = "Silverlight", CallbackContract = typeof(ISnowServiceClient))]
public interface ISnowService
{
    [OperationContract(IsOneWay = true)]
    void Connect();
}
 
[ServiceContract]
public interface ISnowServiceClient
{
    [OperationContract(IsOneWay = true)]
    void SendSnowUpdate(SnowUpdate snowUpdate);
}

In the service implementation, I have created a Timer, which will periodically send a new message to the client. The OperationContext.Current.GetCallbackChannel gives us access to the callback channel which we can use to send messages to the client side. On a tick of the Timer, we’re sending a message.

private ISnowServiceClient client;
private Timer timer;
 
public void Connect()
{
    client = OperationContext.Current.GetCallbackChannel<ISnowServiceClient>();
    timer = new Timer(new TimerCallback(TimerTick), null, 500, 5000);
}
 
void TimerTick(object state)
{
    try
    {
        if (client != null)
        {
            client.SendSnowUpdate(GetLatestUpdate());
        }
    }
    catch (Exception)
    {
 
        client = null;
        timer.Dispose();
    }
}

With that, the service code is done, but it does require some specific configuration code to work. Take a look at the sample for this code. We can now look at the client code. The process to add a service reference is exactly the same, although you’ll notice that the ServiceReferences.clientconfig file remains empty (which it does not when referencing a normal service). Therefore, the code that we need to write is somewhat more complex: we have to create the binding and the address from code and pass this along with the proxy instantiation. Below you can see the client-side code.

private void UserControl_Loaded(object sender, RoutedEventArgs e)
{
  EndpointAddress address = new EndpointAddress("http://localhost:59485/SnowService.svc");
 
  CustomBinding binding = new CustomBinding(
    new PollingDuplexBindingElement(),
    new BinaryMessageEncodingBindingElement(),
    new HttpTransportBindingElement());
  
  client = new SLDuplexSnow.SnowService.SnowServiceClient(binding, address);
 
  client.SendSnowUpdateReceived += 
    new EventHandler<SLDuplexSnow.SnowService.SendSnowUpdateReceivedEventArgs>
     (client_SendSnowUpdateReceived);
    client.ConnectAsync();
}
 
void client_SendSnowUpdateReceived(object sender, 
  SLDuplexSnow.SnowService.SendSnowUpdateReceivedEventArgs e)
{
    SnowDetailsGrid.DataContext = e.snowUpdate;
}

Note that we are calling ConnectAsync to let the service know about the client so it can send updates to it BUT we are handing SnowUpdateReceived events.

NOTE: This sample is written for Silverlight 3/VS2008. At this point, I have issues with VS2010 when generating the client proxy with SL4/VS2010 when using a duplex service.

The complete code can be downloaded here: SLDuplex.zip (111.91 KB)

  Posted on: Monday, December 21, 2009 12:38:33 AM (Romance Standard Time, UTC+01:00)   |   Comments [4]
         
Gill Cleeren     .net | Silverlight | Silverlight Advent Calendar | sl4     December 19, 2009    

In today’s post, we’ll take a look at Silverlight’s Isolated Storage, a feature already available in Silverlight since version 2. With this post, I want to show all there is possible with this handy option.

We all know cookies, small text files that are stored on our machines by sites. Most of the time, the goal of a cookie, is storing informational data for next visits of the user to that particular site. This data can vary from login information to perhaps a background color the user favors. Cookies are limited to containing just plain text as well as in size.

Isolated storage does not differ that much from cookies. It’s basically a file store for Silverlight: Silverlight applications can store in the Isolated Storage files during a session and retrieve them in a later session. Isolated storage is a per-user per-application storage, meaning that when userA works with SilverlightAppA, he’ll have a different isolated storage from userB working with the same application. Isolated storage information is not deleted when you clear your temporary internet files, it can be deleted through the Silverlight configuration, as shown below.

image

We can use isolated storage in a number of ways. Let’s take a look at the sample for this post. Below is a screenshot of the very simple UI I created for this sample. It allows a user to enter a text, representing his preferred background color for the application. We’ll store this value using the IsolatedStorage. Secondly, using another feature called IsolatedStorageSettings, I’m allowing the user to store a second value, which is used for the color of a StackPanel ( the blue bar in the screenshot).

image

First, let’s look at the code for the background color, using the regular IsolatedStorage. Below you can see the code. Working with IsolatedStorage is done using the IsolatedStorageFile class. It defines among others, the GetUserStoreForApplication static method, which returns the data store, for the specific user and the current application. From there on, working with IsolatedStorage is similar to working with the regular file system. Isolated storage is not to be seen as one file, it’s an entire file system, that can contain directories and files. In this code, we are creating using System.IO code a file called color.txt and writing some data to this file.

private void ColorButton_Click(object sender, RoutedEventArgs e)
{
  try
  {
    IsolatedStorageFile isoStore = IsolatedStorageFile.GetUserStoreForApplication();
 
    using (IsolatedStorageFileStream fs = isoStore.CreateFile("color.txt"))
    {
      StreamWriter writer = new StreamWriter(fs);
      writer.Write(ColorTextBox.Text);
      writer.Close();
    }
    ChangeColor(ColorTextBox.Text);
  }
  catch (Exception)
  {
    //handle error here, not for demo
  }
}

On load of the application, we need to check if this file already exists and if yes, read the file and set the background to that specific color. This is shown in the code below.

private void UserControl_Loaded(object sender, RoutedEventArgs e)
{
  try
  {
    IsolatedStorageFile isoStore = IsolatedStorageFile.GetUserStoreForApplication();
 
    if (isoStore.FileExists("color.txt"))
    {
      using (IsolatedStorageFileStream fs = isoStore.OpenFile("color.txt", FileMode.Open))
      {
        StreamReader reader = new StreamReader(fs);
        ChangeColor(reader.ReadLine());
        reader.Close();
      }
    }
  }
  catch (Exception)
  {
    //handle error here, not for demo
  }
}

In ASP.NET, we have the Application and Session objects, which provide an easy and quick way to store information between requests. Through a feature of the IsolatedStorage, we can have something quite similar. The IsolatedStorageSettings allow us a key/value lookup to store data. We don’t have to write code to actually store the files, it does that for us. Take a look at the following code. We allow the user to store a second string for the background of the StackPanel.

private void AppColorButton_Click(object sender, RoutedEventArgs e)
{
  IsolatedStorageSettings.ApplicationSettings["AppColor"] = AppColorTextBox.Text;
  ChangeStackPanelColor(AppColorTextBox.Text);
}

Using this approach, we say for the AppColor value, store the contents of the TextBox as value. Behind the scenes, this is persisted, so it can be retrieved after the application has been shutdown (it is thus not stored in application memory). Retrieving the value can be done as follows:

if (IsolatedStorageSettings.ApplicationSettings.Contains("AppColor"))
{
  string appColor = IsolatedStorageSettings.ApplicationSettings["AppColor"].ToString();
  ChangeStackPanelColor(appColor);
}

The complete sample can be downloaded here: SLIsolatedStorage.zip (30.84 KB)
  Posted on: Sunday, December 20, 2009 12:26:40 AM (Romance Standard Time, UTC+01:00)   |   Comments [0]
         
Gill Cleeren     .net | Silverlight | Silverlight Advent Calendar | sl4     December 19, 2009    

The day before yesterday, we looked at an sample with Twitter: we retrieved the tweets from the public timeline in an OOB trusted application. The public timeline feed on Twitter requires no credentials to be passed along. Some other feeds however do, such as the user timeline (containing your own tweets) and the friends timeline (containing the tweets of your friends).

Up until Silverlight 4, passing credentials to a service was not supported. Silverlight 3 added support for the ClientHttp stack, however, it was not possible to modify the authorization header, resulting in it being impossible to pass credentials. Silverlight 4 adds this support however. In combination with the support for cross-domain access for services for Silverlight if they are executed with elevated permissions, we can easily build a more complete Twitter client in Silverlight. We already did some work on this application, we will now extend it to make it possible to execute requests to services that require authorization.

Below is a screenshot of the modified application, running OOB as a trusted application.

image

We will not be looking at the code for the public timeline, that was already covered two days ago. Instead, let’s focus on the code we need to write to make the authorized request possible. Of course, we need the user’s credentials, therefore, I added a username/password field.

When clicking on the Submit button, two request are being executed:

Here’s the code for the first one. Note a few things. Passing credentials is only possible if using the ClientHttp stack. This is enabled by WebRequest.RegisterPrefix("http://", System.Net.Browser.WebRequestCreator.ClientHttp). This selects the ClientHttp stack instead of the browser http stack, which is used by default. To pass the credentials, we use the Credentials property and set it to an instance of NetworkCredentials. Here’s the code.

WebRequest.RegisterPrefix("http://", System.Net.Browser.WebRequestCreator.ClientHttp);
//try finding the user tweets and friends tweets
string userTimeLine = "http://twitter.com/statuses/user_timeline/" + 
  UserNameTextBox.Text + ".xml";
WebClient client = new WebClient();
client.Credentials = new NetworkCredential(UserNameTextBox.Text, 
  PasswordTextBox.Password);
client.UseDefaultCredentials = false;
client.DownloadStringCompleted += new DownloadStringCompletedEventHandler
  (user_DownloadStringCompleted);
 
client.DownloadStringAsync(new Uri(userTimeLine, UriKind.Absolute));

A very important line is setting the UseDefaultCredentials to false. If we set it to true, Silverlight will pass the credentials of the logged-on user on the machine (NTLM). If this is the wanted behavior however, simply setting this property to true will of course enable this.

The complete code for this application can be downloaded here:

SLTwitterCredentials.zip (82.89 KB)
  Posted on: Saturday, December 19, 2009 9:24:22 PM (Romance Standard Time, UTC+01:00)   |   Comments [0]
         
Gill Cleeren     Snowball     December 19, 2009    

Since a few days, Snowball.be had some minor changes applied to it. I *think* I resolved all browser incompatibilities (if you do happen to see something weird, let me know). The google ads have been removed (yes they were there…) and have been replaced.  From now on, ads will be served by The Lounge (http://theloungenet.com/). You can see the ad on the right!

The great thing about The Lounge is that only allow .NET related sites to their network and thus only serve ads related to .NET. Currently, you’ll be seeing Silverlight advertisements only, since Snowball.be is now a member of the Silverlight Room.

If you’re interested in making your .NET site part of The Lounge, you can apply at http://theloungenet.com/.

  Posted on: Saturday, December 19, 2009 10:05:59 AM (Romance Standard Time, UTC+01:00)   |   Comments [1]
         
Gill Cleeren     .net | Silverlight | Silverlight Advent Calendar | sl4     December 18, 2009    

After looking at Twitter yesterday, we have arrived at another data binding-related feature new in Silverlight 4, namely the support for the IDataErrorInfo interface.

The fact that Silverlight supports this interface now, means we can fully use it to help with the display of validation errors in a data binding scenario. The interface itself is quite simple, as shown below:

public interface IDataErrorInfo
{
    string Error { get; }
 
    string this[string columnName] { get; }
}

When we are binding an object of a class that implements the IDataErrorInfo, Silverlight will automatically check each field for validation errors using the indexer. In here, we can write validation code that will check if the specified value is valid and if not, return the error message for that field. Silverlight will then automatically display the error for the field.

I have created a small sample that does exactly that. Being it almost Christmas, I have created a sample where the user can enter his christmas music collection, as shown below.

image

The type we are binding to is called ChristmasSong. This class implements both the INotifyPropertyChanged and the IDataErrorInfo interfaces. Both have been implemented in the code below. In the indexer, we are checking per column if the entered value is valid. If not, we are returning a message containing the validation error. Note that when we are entering “Last Christmas” by “Wham”, the application will not accept it! (Sorry to all Wham fans ;-) )

public class ChristmasSong : IDataErrorInfo, INotifyPropertyChanged
{
    private string title;
    private string performedBy;
    private TimeSpan duration;
    private DateTime published;
 
    private string error;
 
    public event PropertyChangedEventHandler PropertyChanged;
 
    protected void NotifyPropertyChanged(string propertyName)
    {
        if (PropertyChanged != null)
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }
 
    public string Title
    {
        get
        {
            return title;
        }
        set
        {
            title = value;
            NotifyPropertyChanged("Title");
        }
    }
 
    public string PerformedBy
    {
        get
        {
            return performedBy;
        }
        set
        {
            performedBy = value;
            NotifyPropertyChanged("PerformedBy");
        }
    }
 
    public TimeSpan Duration
    {
        get
        {
            return duration;
        }
        set
        {
            duration = value;
            NotifyPropertyChanged("Duration");
        }
    }
 
    public DateTime Published
    {
        get
        {
            return published;
        }
        set
        {
            published = value;
            NotifyPropertyChanged("Published");
        }
    }
 
    public string Error
    {
        get { return error; }
    }
 
    public string this[string columnName]
    {
        get 
        {
            string error = string.Empty;
            switch (columnName)
            {
                case "Title":
                    if(string.IsNullOrEmpty(title))
                        error = "Title can not be blank";
                    break;
                case "PerformedBy":
                    if(string.IsNullOrEmpty(performedBy))
                        error = "The artist should be filled in";
                    else if(performedBy.Equals("Wham") && title.Equals("Last Christmas"))
                        error = "You should NOT be entering that song to your collection!";
                    break;
                case "Duration":
                    if(duration.TotalSeconds > 600)
                    error = "A song can not be longer than 10 minutes";
                    break;
                case "Published":
                    if (Published > new DateTime(2010, 1, 1))
                        error = "You found a song from the future?";
                    else if (published < new DateTime(1900, 1, 1))
                        error = "That's a bit too old, isn't it?";
                    break;
            }
            return error;
        }
    }
}

We can now bind our UI to an instance of this type. Below is the XAML code for the Grid containing the fields. Note especially the data binding expression, where I’m stating the fields should be reporting the error back. For spacing reasons, I only pasted the Title field, the others are similar.

<TextBlock x:Name="TitleTextBlock" Text="Title" Grid.Row="1"  
  Foreground="Red" HorizontalAlignment="Left" Margin="2" 
  VerticalAlignment="Center"></TextBlock>
<TextBox x:Name="TitleTextBox" Grid.Row="1" Grid.Column="1" Width="200" 
  VerticalAlignment="Center" HorizontalAlignment="Left" Margin="2" 
  Text="{Binding Path=Title, Mode=TwoWay, ValidatesOnDataErrors=True, 
    NotifyOnValidationError=True}" />

When we are entering data now, the validation will kick in whenever a validation error is encountered.

We can take it one step further though, using the BindingValidationError event, defined on FrameworkElement. This event will trigger whenever a binding error is reported by the binding source, being here the instance of the ChristmasSong class. In this event, we can through the e.Action property check if an error was added or resolved. In this particular code, I have specified that the Submit button will only become enabled when there are no more errors.

private void ChristmasSongGrid_BindingValidationError(object sender, 
  ValidationErrorEventArgs e)
{
  switch (e.Action)
  {
    case ValidationErrorEventAction.Added:
         errorsOnPage++;
         break;
    case ValidationErrorEventAction.Removed:
         errorsOnPage--;
         break;
  }
  if (errorsOnPage == 0)
    SubmitButton.IsEnabled = true;
  else
    SubmitButton.IsEnabled = false;
}

All this can be seen in action, when we are entering “Last Christmas” by “Wham”!

image

The sample code can be downloaded here: SLDataErrorInfo.zip (308.96 KB)

  Posted on: Friday, December 18, 2009 12:06:56 PM (Romance Standard Time, UTC+01:00)   |   Comments [0]
         
Gill Cleeren     .net | Silverlight | Silverlight Advent Calendar | sl4     December 17, 2009    

In today’s article, we’re looking at cross-domain access to a service in Silverlight 4’s trusted applications.

As you may know, when accessing any service located in a domain different from the one in which the Silverlight application itself is hosted, Silverlight will check for a cross domain file being in place. Cross-domain policies prevent Silverlight applications to connect with services that are not in the same domain. However, a service can opt-in to be connected to if at the root of the domain, a cross-domain policy file has been deployed. Silverlight will check for its existence (the file should be named clientaccesspolicy.xml or crossdomain.xml, which is the cross-domain file of Flash) and if found, Silverlight will connect in a cross-domain manner.

Services such as Twitter and Facebook do not deploy this file anymore. Flickr does, meaning that we can connect to Flickr from a client-side Silverlight application. If we want to connect with Twitter from Silverlight, we have to create a service within the same domain as where the Silverlight application is hosted. This service can then communicate with Twitter and Silverlight can communicate with our service.

In Silverlight 4, the notion of trusted applications was added (we looked in this blog series already to some other concepts available when running a trusted application such as COM interop and local file access). If a Silverlight application is running as a trusted application, it can perform cross-domain calls, without there needing to be a cross domain policy file in place. That means that we can build a Twitter client as a trusted Silverlight application without having to build an extra service layer in between.

In the sample I have built for this post, I’m doing exactly that. Below is a screenshot. The UI of the application contains a templated ListBox. Note that the application is running OOB as a trusted application.

image

The code for this application is quite easy. It’s the same code we would write to access a “local” service, meaning a service in the same domain. Below is the code to access Twitter, an asynchronous web service call using the WebClient class.

public void GetPublicTimeLine()
{
    string publicTimeLine = "http://twitter.com/statuses/public_timeline.xml";
    WebClient client = new WebClient();
    client.DownloadStringCompleted += new DownloadStringCompletedEventHandler
      (client_DownloadStringCompleted);
    client.DownloadStringAsync(new Uri(publicTimeLine, UriKind.Absolute));
}
 
void client_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
{
    XDocument document = XDocument.Parse(e.Result);
    twitterData = (from status in document.Descendants("status")
                   select new Tweet
                   {
                     Message = status.Element("text").Value.Trim(),
                     User = status.Element("user").Element("name").Value.Trim()
                     }).ToList();
 
    PublicTimeLineListBox.ItemsSource = twitterData;
}

This code is executed when a user clicks on the “Load Twitter Messages” button at the top. We do perform a check to see if the application is running OOB and is running with elevated permissions.

private void LoadTwitterButton_Click(object sender, RoutedEventArgs e)
{
    if (Application.Current.IsRunningOutOfBrowser && 
            Application.Current.HasElevatedPermissions)
    {
        //it's OK to access Twitter services cross domain now
        GetPublicTimeLine();
    }
}

Tomorrow, we will look at extending this sample by allowing to send credentials to Twitter to access personalized streams of tweets.

The complete sample can be downloaded here.

SLTrustedTwitter.zip (269 KB)
  Posted on: Thursday, December 17, 2009 4:52:54 PM (Romance Standard Time, UTC+01:00)   |   Comments [3]
         
Gill Cleeren     .net | Silverlight | Silverlight Advent Calendar | sl4     December 16, 2009    

The DataGrid is probably the most popular control in many business applications. Added in Silverlight 2, this control allows for easy displaying and editing of data in a tabular format. While already a very decent control, the DataGrid in Silverlight 2 and 3 still had some things that were missing or not working like you’d hope them to. In today’s post, we’ll look at the newly added changes to the control.

The first and probably biggest change is the auto-sizing option for columns. In previous versions, we could basically specify a column width or specify nothing at all, leaving it to Silverlight. What we could not do, was saying to a specific column: Take all the remaining space, similar to what we can do with the Grid control through the use of *.

Basically, there are now 5 options we have to specify how a column should behave (copied from the MSDN docs):

Member name
Description
Auto
The unit of measure is based on the size of the cells and the column header.
Pixel The unit of measure is expressed in pixels.
SizeToCells The unit of measure is based on the size of the cells.
SizeToHeader The unit of measure is based on the size of the column header.
Star The unit of measure is a weighted proportion of the available space.

Let’s take a look at using these in an example. I created a random data generator (see sample code download), which generates Employee instances. These are stored in a generic list which is then set as the ItemsSource for a DataGrid. The result can be see below.

image

As you can see in the screenshot, the Address column is wider than the others. I actually specified it to be twice as wide as the FirstName and the LastName columns. The City column has a specific width set.

<data:DataGrid AutoGenerateColumns="False" x:Name="EmployeeDataGrid" 
    HeadersVisibility="All" Grid.Row="1">
    <data:DataGrid.Columns>
        <data:DataGridTextColumn Header="FirstName" Binding="{Binding FirstName}" Width="*"/>
        <data:DataGridTextColumn Header="LastName" Binding="{Binding LastName}" Width="*"/>
        <data:DataGridTextColumn Header="Address" Binding="{Binding Address}" Width="2*"/>
        <data:DataGridTextColumn Header="City" Binding="{Binding City}" Width="100" />
    </data:DataGrid.Columns>
</data:DataGrid>

We can also use the other options. By clicking on the Change button at the top, we switch the DataGrid to use another sizing option.

private void ChangeColumnsButton_Click(object sender, RoutedEventArgs e)
{
    EmployeeDataGrid.Columns[0].Width = new DataGridLength(1, 
        DataGridLengthUnitType.SizeToCells);
    EmployeeDataGrid.Columns[1].Width = new DataGridLength(1, 
        DataGridLengthUnitType.SizeToCells);
    EmployeeDataGrid.Columns[2].Width = new DataGridLength(1, 
        DataGridLengthUnitType.SizeToCells);
    EmployeeDataGrid.Columns[3].Width = new DataGridLength(1, 
        DataGridLengthUnitType.Star);
}

This results in the following:

image

The first three columns are sizing to their contents. The City column takes all the remaining space.

The second new feature concerning the DataGrid, is the ability to copy data from the DataGrid to Excel. This feature is really handy in business applications. Very often, we need to be able to export data from an application towards Excel. This can make this very easy to do.

When we start a copy by selecting one or more rows, we are shown a prompt, asking us if we want to allow access to the clipboard. If confirmed, the data is copied as textual information and can be pasted in Excel.

There’s an event fired per row that is copied to the clipboard, namely the CopyingRowClipboardContent event. In this event, we can see what data is being copied and if needed apply transformations on it.

private void EmployeeDataGrid_CopyingRowClipboardContent(object sender, 
    DataGridRowClipboardEventArgs e)
{
    // do something
}
The complete sample can be downloaded here. SLNewDataGrid.zip (1.04 MB)
  Posted on: Wednesday, December 16, 2009 10:10:05 PM (Romance Standard Time, UTC+01:00)   |   Comments [2]
         
Gill Cleeren     .net | Silverlight | Silverlight Advent Calendar | sl4     December 15, 2009    

In today’s article, we’ll be looking at another new feature that was added with Silverlight 4, namely the ability to react to right-clicks in a Silverlight application. This means that we can override the default behavior of Silverlight where it’s showing the context menu allowing us to go to the configuration screen.

Because Silverlight now supports right-clicking, we can create a context menu that appears on the right-click event. We can code this context menu as we want. Right-clicking is supported on any UIElement: on the UIElement class, there are two new events added, namely the MouseRightButtonDown and the MouseRightButtonUp. Both of these new events use MouseButtonEventArgs as their event arguments, which are also used for the normal left click events.

As said, by default, the Silverlight context menu is shown when a user right-clicks on a Silverlight application. To block this, in the MouseRightButtonDown, we have to set the e.Handled to true. This way, the default context menu is not shown and we can go ahead and create our own context menu. This will appear on the MouseLeftButtonUp event.

Let’s take a look at a simple application. In this application, we have attached a custom context menu on an Image control. Using this context menu, I can choose to delete the image I clicked on.

image

The image itself has both the MouseRightButtonDown and the MouseRightButtonUp events attached to it using XAML code:

<Image Height="195" x:Name="imgTree" Stretch="Fill" Width="249" 
   MouseRightButtonDown="imgTree_MouseRightButtonDown" 
   MouseRightButtonUp="imgTree_MouseRightButtonUp" 
   Source="tree.png" Canvas.Left="181" Canvas.Top="79">
</Image>

To prevent the default context menu from appearing, we can set the e.Handled to true in the mouse down event:

private void imgTree_MouseRightButtonDown(object sender, MouseButtonEventArgs e)
{
    e.Handled = true;
}

In the mouse up event, we can then specify what context menu we want to have appear:

private void imgTree_MouseRightButtonUp(object sender, MouseButtonEventArgs e)
{
    Image image = sender as Image;
    if (image != null)
    {
        ContextMenu contextMenu = new ContextMenu(PrintCanvas, image);
        contextMenu.Show(e.GetPosition(LayoutRoot));
    }
}

The ContextMenu used here is a custom control.

The complete source code can be downloaded here: SLRightClick.zip (473.2 KB)

  Posted on: Tuesday, December 15, 2009 11:21:21 PM (Romance Standard Time, UTC+01:00)   |   Comments [0]
         
Gill Cleeren     .net | Silverlight | Silverlight Advent Calendar | sl4     December 14, 2009    

Only 10 days ‘till Christmas and thus only 10 more posts after this one to finish my series. In today’s post, we’ll be taking a look at the Local Connection API, a feature introduced with Silverlight 3.

Most of the time, we build full-screen Silverlight applications, meaning that the only function that the HTML still fulfills, is hosting a DIV that will contain the HTML OBJECT tag in which Silverlight will be hosted. However, sometimes Silverlight could be used as an “island” on an HTML page. For example, we could have an HTML page (perhaps rendered by ASP.NET) in which a table of data is shown. The end-user may want a richer experience with this data grid such as reordering rows, efficient paging and so on. We could decide to just convert that specific part to functionality to Silverlight, resulting in a Silverlight island.

To go even further, in some scenarios, it may be needed that two or more of these Silverlight islands live on a single page. Silverlight 2 introduced the HTML Bridge to allow these two Silverlight plug-ins to talk to one another: using Javascript as an intermediate, we could send messages from control 1 to control 2 and vice-versa. While possible, it’s not the easiest way of developing an application.

Silverlight 3 introduced something easier for this particular problem, namely the local connection API. It basically allows two or more Silverlight instances to communicate with each other. These two instances can live on the same page, but can even live on two different browser tabs or even two different browser windows. The API uses a concept of a named pipe: a named sender sends a message into a pipe and a receiver can intercept this message. The message needs to be a string.

The messaging system introduced is based on two types, LocalMessageSender and LocalMessageReceiver, both types that live in the System.Windows.Messaging namespace.

Let’s take a look at an example. The application I built for this post contains two Silverlight controls. The first control contains a few buttons. When clicking on a button, I want to change the background of control n° 2. (Note that these are actually 2 different Silverlight applications hosted on one single page).

image

The first thing we need to do is creating an instance of the LocalMessageSender class. As parameter, we pass in the name that will be used as the identification (ColorSender), like so:

private LocalMessageSender localMessageSender;
private LocalMessageReceiver localMessageReceiver;
 
public MainPage()
{
    InitializeComponent();
    localMessageSender = new LocalMessageSender("ColorSender");
 
}

When we click on a button, we’ll send a message using this instance. In this case, we pass in the name of the color we want:

private void RedButton_Click(object sender, RoutedEventArgs e)
{
  localMessageSender.SendAsync("Red");
}
 
private void GreenButton_Click(object sender, RoutedEventArgs e)
{
  localMessageSender.SendAsync("Green");
}
 
private void BlueButton_Click(object sender, RoutedEventArgs e)
{
  localMessageSender.SendAsync("Blue");
}

In the second application, we create a LocalMessageReceiver, passing in the same string, ColorSender, as the name of the sender it should listen to. We then specify the handler for the MessageReceived event, which will trigger when a string is received. The receiver starts listening for values by calling its Listen() method:

private LocalMessageReceiver localMessageReceiver;
 
public MainPage()
{
  InitializeComponent();
  localMessageReceiver = new LocalMessageReceiver("ColorSender");
  localMessageReceiver.MessageReceived += 
  new EventHandler<MessageReceivedEventArgs>(localMessageReceiver_MessageReceived);
  localMessageReceiver.Listen();
}

Based on the value of the received message, we change the color:

void localMessageReceiver_MessageReceived(object sender, MessageReceivedEventArgs e)
{
  switch (e.Message)
  {
    case "Red": LayoutRoot.Background = new SolidColorBrush(Colors.Red);
                ColorTextBlock.Text = "RED";
                break;
    case "Green": LayoutRoot.Background = new SolidColorBrush(Colors.Green);
                  ColorTextBlock.Text = "GREEN";
                  break;
    case "Blue": LayoutRoot.Background = new SolidColorBrush(Colors.Blue);
                 ColorTextBlock.Text = "BLUE";
                 break;
    default: LayoutRoot.Background = new SolidColorBrush(Colors.White);
             ColorTextBlock.Text = "WHITE";
             break;
  }
}

The code can be downloaded here: SLLocalConnection.zip (97.1 KB)

  Posted on: Monday, December 14, 2009 9:31:33 PM (Romance Standard Time, UTC+01:00)   |   Comments [0]
         
Gill Cleeren     Silverlight | Silverlight Advent Calendar | sl4     December 14, 2009    

I hope you are all enjoying my post series Silverlight Advent Calendar. I still have a list of upcoming articles, but I was wondering, are there any specific things you would like to see appear?

I have one request already for an article on the local connection API, that will come in the coming days.

Let me know your ideas!

  Posted on: Monday, December 14, 2009 8:57:06 AM (Romance Standard Time, UTC+01:00)   |   Comments [4]
         
Gill Cleeren     .net | Silverlight | Silverlight Advent Calendar | sl4     December 13, 2009    

In today’s post, we will be working with services. As some of you know, I’m currently finishing my first book titled Silverlight 4 Data Access Cookbook. If all goes well, it will be available in early access preview somewhere in the coming week. Therefore, I decided I needed to write a post that’s in the same area as my book. More specifically, I’ll be creating a application that works together with the services API exposed by Bing.com, Microsoft’s new and successful search engine.

Bing has a very rich API that we can use to incorporate search functionalities in our applications, including Silverlight applications. It allows us to use WCF (SOAP) and REST communication, because it exposes endpoints for both these technologies. In this particular example, I’m using the SOAP interface for communication using a WCF service. To get a complete overview of the functionalities, you can download the PDF describing the entire API at http://www.bing.com/developers/s/API%20Basics.pdf . It also contains some sample code.

The very first thing we should before we can actually start building applications with Bing, is obtaining an API key. This key is required so Bing can check that your request is valid (this key will be part of every request you’ll send to Bing). Obtaining a key is free and can be done at http://www.bing.com/developers/createapp.aspx .

The provided sample is a Silverlight 4/VS2010 solution, all the code included however also works with Visual Studio 2008/Silverlight 3.

First, we need to generate a proxy using Visual Studio 2010. For this, we need the address of the WSDL (Web Service Description Language) file. In the documentation, we can find that this address is: http://api.search.live.net/search.wsdl?AppID=12345 where 12345 needs to be replaced with your obtained API key. In Visual Studio, we add the service reference using the dialog and I have set the namespace to BingSearchService.

image

Visual Studio will at this point create the proxy for the service. A proxy contains a client-side copy of the types exposed by the service and its methods. The contents of the methods is replaced with a call to the real service method. In the client-side code, we can now work with these types and methods.

In the screenshot a bit further, you can see the interface of the application. It contains a TextBox and a Button to search and a templated ListBox to display the results. Let’s first create the code for the event handler of the click event. Bing accepts quite a lot of parameters for the search it needs to perform. These are encapsulated in an object of type SearchRequest. Since we are conducting a normal web search, we specify this in the Sources property of the SearchRequest instance. A search with Bing is a service request, so all communication needs to be done asynchronously. We can see this at the way we are calling the service using the SearchCompleted event and SearchAsync() method. Below is the code.

private void SearchButton_Click(object sender, RoutedEventArgs e)
{
  LiveSearchPortTypeClient soapClient = new LiveSearchPortTypeClient();
  SearchRequest request = new SearchRequest();
  request.AppId = "81691C6A195FBC3FB469594BAA30B50A99CF3D22";
  request.Sources = new SourceType[] { SourceType.Web };
 
  if (SearchTextBox.Text != string.Empty)
  {
    request.Query = SearchTextBox.Text;
    soapClient.SearchCompleted += 
      new EventHandler<SearchCompletedEventArgs>(soapClient_SearchCompleted);
    soapClient.SearchAsync(request);
  }
}

When the service completes asynchronously, meaning, when Bing’s results are ready and available, the *Completed event is called and executed. In this event handler, we have access to the results of the service call. The result can be found in the e.Result parameter and is always of the same type as returned by the service. In our specific case, the used type is a SearchResponse, again a type exposed by the Bing services. We can now loop through these results and using a simple LINQ query, create an IEnumberable<SearchResult> . SearchResult is a type created by us to allow us to data bind to the results. This type is very simple:

public class SearchResult
{
    public string SearchResultTitle { get; set; }
    public string SearchResultDescription { get; set; }
    public string SearchResultUri { get; set; }
}

The code for the event handler is shown next:

void soapClient_SearchCompleted(object sender, SearchCompletedEventArgs e)
{
    SearchResponse response = e.Result;
    if (response.Web.Results.Count() > 0)
    {
        var results = from result in response.Web.Results
                      select new SearchResult
                      {
                          SearchResultTitle = result.Title,
                          SearchResultUri = result.Url,
                          SearchResultDescription = result.Description
                      };
        ResultListBox.ItemsSource = results.ToList();
    }
}

The ListBox is as said templated; the ItemsTemplate has been replaced with a custom data template, as shown below:

<ListBox x:Name="ResultListBox" Grid.Row="1" Margin="3" Background="Black">
  <ListBox.ItemTemplate>
    <DataTemplate>
      <Grid>
        <Grid.RowDefinitions>
          <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <TextBlock Text="{Binding SearchResultTitle}" FontWeight="Bold" 
          FontSize="15" TextDecorations="Underline" Foreground="White"></TextBlock>
        <TextBlock Text="{Binding SearchResultDescription}" Grid.Row="1" 
          TextWrapping="Wrap" Width="400" HorizontalAlignment="Left" 
          Foreground="White"></TextBlock>
        <TextBlock Text="{Binding SearchResultUri}" Grid.Row="2" Foreground="#568e71">
        </TextBlock>
      </Grid>
    </DataTemplate>
  </ListBox.ItemTemplate>
</ListBox>

When we now execute a search using our application, we see the following:

image

The complete sample can be downloaded here:

SLBing.zip (790.49 KB)
  Posted on: Sunday, December 13, 2009 12:48:53 PM (Romance Standard Time, UTC+01:00)   |   Comments [0]
         
Gill Cleeren     .net | Silverlight | Silverlight Advent Calendar | sl4     December 11, 2009    

I made it through the first half of my Silverlight Advent Calendar! You’re currently reading the 12th installment of my article series. In this article, we are looking at the RichTextArea control, which was added to the platform with Silverlight 4.

Up until Silverlight 4, we had no real way to perform rich text editing. Some (open source) implementations have been built of which the best one is in my opinion VectorLight.com’s RichTextBox/RichTextBlock (check it out at www.vectorlight.com, they have quite some nice controls). Silverlight 4 introduces the RichTextArea control. Its name already implies what it is capable of: allowing us to do rich text editing in our Silverlight applications. Things like making text bold, italic or underlined are of course supported by this control. On top of that, more advanced options are available, such as adding hyperlinks in text, adding images and adding XAML content. It can also out-of-the-box work with the clipboard and offers BiDi support. The latter is important for some languages such as Hebrew, since these are right-to-left languages.

Behind the visual of the control, text is being added as XAML, so in fact, the control is rendering the result of that XAML. This XAML is XAML like we know it for displaying rich text using TextBlock controls, containing Paragraphs, Runs and LineBreaks. At the time of writing, there is no real Text property on the control to get the entered text without the markup. To get the contents, we can use the Blocks collection to loop through the content. This is a bit of a setback and I can only hope it will in some way become possible to get the text from the control as well (without the markup).

Using this new control, we can thus perform most of the actions we’ll want to do with text. The control does not have buttons by default, so we need to add them ourselves. Below is an implementation of the control in combination with a ribbon (found in the official Silverlight 4 whitepaper/documentation).

image

Let’s take a look a simple implementation now. My implementation will make it possible to add text (quite logically), make it bold, underlined or italic. We’ll also add the possibility to change the color of the selected text and print it using the new printing functions in Silverlight 4.

image

Below is the XAML for the RichTextArea (nothing special as you can see):

<RichTextArea x:Name="MainRichTextArea" Height="300"></RichTextArea>

To implement the different functions, we need to add some code in the event handlers of the button click events. For example, if we want to make the selected text bold, we start by checking if text is selected. If there is, we check if the selected text is already bold or not. We set it to bold if it isn’t and vice-versa of course. The code for this is shown below.

private void BoldButton_Click(object sender, RoutedEventArgs e)
{
  if (MainRichTextArea.Selection.Text.Length > 0)
  {
    if (MainRichTextArea.Selection.GetPropertyValue(Run.FontWeightProperty) 
        is FontWeight &&
        ((FontWeight)MainRichTextArea.Selection.GetPropertyValue
        (Run.FontWeightProperty)) == FontWeights.Normal)
        {
          MainRichTextArea.Selection.SetPropertyValue(Run.FontWeightProperty, 
            FontWeights.Bold);  
        }
    else
        MainRichTextArea.Selection.SetPropertyValue(Run.FontWeightProperty, 
          FontWeights.Normal);
        MainRichTextArea.Focus();
    }
}

The code is similar for the other actions, it can be found in the sample code download. When we want to print our added text, we have 2 options. The most simple one is pointing the PageVisual to the RichTextArea:

private void PrintButton_Click(object sender, RoutedEventArgs e)
{
  PrintDocument printDocument = new PrintDocument();
  printDocument.DocumentName = "My rich text";
 
  printDocument.PrintPage += (s, args) =>
  {
    args.PageVisual = MainRichTextArea;
  };
  printDocument.Print();
}

The second option exists out of looping through the Blocks collection of the RichTextArea, parsing each of the retrieved items and adding them to the Inlines collection of a TextBlock control.

The sample code can be downloaded here: SLRichTextArea.zip (84.68 KB)

  Posted on: Saturday, December 12, 2009 12:49:28 AM (Romance Standard Time, UTC+01:00)   |   Comments [0]
         
Gill Cleeren     .net | Silverlight | Silverlight Advent Calendar | sl4     December 11, 2009    

One day away from finishing the first 12 (half of the total of 24 ;-) )of my Silverlight articles. In this post, we are looking at local file access in Silverlight 4. This new feature is another one that is only enabled with OOB apps with elevated permissions.

In Silverlight 2 and 3, we already had some basic file access. We could perform an OpenFileDialog starting with Silverlight 2. It gave us a read-only stream to the selected file, meaning that the only thing we could do with the file, was reading it and using its contents in the application. Silverlight 3 added the SaveFileDialog, which, surprisingly, allows us to save files to the local disk.

Silverlight 4 ads more or less real local data access. By more or less, I mean that Silverlight applications can only access some folders. More particularly, we can access the My Documents, My Pictures, My Videos and My Music folders (on Mac, an equivalent exists). Within this directory, we can read, create and delete files. One important side-note though: the application needs to be a trusted application, meaning that it needs to run with elevated permissions.

Silverlight has a specific enumeration that we can use to get the physical location of the files: Environment.SpecialFolder. In it, we can find MyPictures etc. Note that it contains more than what we can access at this point, for example ProgramFiles. Even if we try to do something with this, we can’t since Silverlight won’t allow access to this directory.

Let’s take a look at a basic application as shown below.

image

Let’s first take a look at the left listbox, which is filled with the files of my My Pictures folder. Reading out the files, as well as other operations on the files, are done using the traditional classes contained in the System.IO namespace, such as Directory, File, Path etc. To read out the contents, we use the following code:

if (canWork)
{
  var files = Directory.EnumerateFiles(Environment.GetFolderPath
   (Environment.SpecialFolder.MyPictures));
  foreach (var file in files)
    {
      string fileName = System.IO.Path.GetFileName(file);
      imageNames.Add(fileName);
    }
    ImageListBox.ItemsSource = imageNames;
}

Note the canWork bool value. Since the application can only work if running OOB and with elevated permissions, we perform a check initially to see if the operations are permitted. The value is set through the following code:

void MainPage_Loaded(object sender, RoutedEventArgs e)
{
  //check to see if application is running OOB and with elevated permissions
  if (App.Current.IsRunningOutOfBrowser && App.Current.HasElevatedPermissions)
    canWork = true;
  else
    MessageBox.Show("The application needs to run out-of-browser with 
      elevated permissions");
}

The second listbox is filled with all *.txt files, located in my My Documents folder: I’m simply applying a filter.

private void FetchTextFiles()
{
    var files = Directory.EnumerateFiles(Environment.GetFolderPath
     (Environment.SpecialFolder.MyDocuments))
     .Where(filename => filename.EndsWith("txt"));
    
    TextFilesListBox.ItemsSource = files;
}

As said, we can do more than just reading out the contents of a directory. We can for example delete a file. When we select a file in the second listbox, we can delete it using the following code:

private void DeleteButton_Click(object sender, RoutedEventArgs e)
{
  if (canWork)
  {
    if (TextFilesListBox.SelectedItem != null)
    {
      string path = TextFilesListBox.SelectedItem.ToString();
      File.Delete(path);
      FetchTextFiles();
    }
  }
}

As you can see, working with the files is no different than working with files in plain .NET.

The code can be downloaded here: SLLocalFileAccess.zip (68.26 KB)

  Posted on: Friday, December 11, 2009 10:34:42 PM (Romance Standard Time, UTC+01:00)   |   Comments [0]
         
Gill Cleeren     .net | Silverlight | Silverlight Advent Calendar | sl4     December 10, 2009    

Today, we are looking again at another new feature in Silverlight 4 which is the support for webcams and microphones.

Silverlight 4 gets support for microphones and webcams. It has access to the raw streams for both. The added support opens a lot of opportunities for new types of applications. For example, it becomes possible to write an application that reads barcodes of products you hold in front of the webcam, scans them and searches for product information.

The classes that expose this functionality live in the System.Windows.Media namespace. We’ll be using those to create a simple application that connects with the webcam and takes snapshots. Below is the interface of the application (a colleague of mine was just eating a banana :) )

image

The XAML for the application is shown below. The ComboBox displays the available webcams (only one on my machine), we are binding to the FriendlyName property. The ListBox is templated: both the ItemsTemplate and the ItemsPanel are overriden, to have the control display a horizontal list of images.

<Grid x:Name="LayoutRoot" Background="White">
  <Grid.RowDefinitions>
    <RowDefinition Height="330"></RowDefinition>
      <RowDefinition Height="50"></RowDefinition>
        <RowDefinition Height="140"></RowDefinition>
  </Grid.RowDefinitions>
  <Border BorderBrush="Black" BorderThickness="3" HorizontalAlignment="Center" 
    VerticalAlignment="Center">
    <Rectangle x:Name="WebcamRectangle" Fill="LightGray" Height="300" 
      Width="400"></Rectangle>
  </Border>
  <StackPanel Orientation="Horizontal" Grid.Row="1" VerticalAlignment="Center" 
    HorizontalAlignment="Center">
    <ComboBox x:Name="WebcamComboBox" Width="200" Margin="3" 
      SelectionChanged="WebcamComboBox_SelectionChanged">
      <ComboBox.ItemTemplate>
        <DataTemplate>
          <TextBlock Text="{Binding FriendlyName}"></TextBlock>
        </DataTemplate>
      </ComboBox.ItemTemplate>
    </ComboBox>
    <Button x:Name="StartWebcamButton" Click="StartWebcamButton_Click" 
      Content="Start webcam" HorizontalAlignment="Center" Margin="3"></Button>
    <Button x:Name="TakePictureButton" Click="TakePictureButton_Click" 
      Content="Take picture" HorizontalAlignment="Center" Margin="3"></Button>
  </StackPanel>
  <ListBox x:Name="PicListBox"  Width="500" Height="120" 
    ScrollViewer.HorizontalScrollBarVisibility="Visible"  Grid.Row="2">
    <ListBox.ItemTemplate>
      <DataTemplate>
        <Image Margin="5" Source="{Binding}" Stretch="UniformToFill" 
          Height="80" VerticalAlignment="Center"/>
      </DataTemplate>
    </ListBox.ItemTemplate>
    <ListBox.ItemsPanel>
      <ItemsPanelTemplate>
        <StackPanel Orientation="Horizontal" VerticalAlignment="Top" 
          HorizontalAlignment="Left"/>
      </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
  </ListBox>
</Grid>

To fill the ComboBox with the available webcams, we can use the CaptureDeviceConfiguration.GetAvailableVideoCaptureDevices(). This returns a Collection of VideoCaptureDevice instances. The VideoCaptureDevice class exposes the FriendlyName property we used in the data binding expression.

//fills the dropdown with all available webcams
WebcamComboBox.ItemsSource = 
  CaptureDeviceConfiguration.GetAvailableVideoCaptureDevices();

We can instruct Silverlight to use the default capturing device, if nothing is selected by the user in the ComboBox:

//use the default
VideoCaptureDevice selectedVideoCaptureDevice = 
CaptureDeviceConfiguration.GetDefaultVideoCaptureDevice();

A little side note: we can change the default device in the Silverlight Configuration window as shown below.

image

Starting the webcam needs to be a user-initiated action. It’s impossible to start the webcam on load of the application for example. Therefore, we put this code in the event handler of the click on the Button. Whenever the webcam is started, a prompt is shown, asking the user if he wants to allow the application to access the device. This prompt can not be changed by the developer.

image

The following lines of code, located in the click event handler, check if the user has already granted permission in this particular session to access the webcam. If not, the prompt is shown following the RequestDeviceAccess() method call.

if (CaptureDeviceConfiguration.AllowedDeviceAccess 
    || CaptureDeviceConfiguration.RequestDeviceAccess())
{
...
}

To access the video capture of the webcam, we use the CaptureSource class.

VideoCaptureDevice videoCaptureDevice = selectedVideoCaptureDevice;
CaptureSource captureSource = new CaptureSource();
captureSource.VideoCaptureDevice = videoCaptureDevice;

This CaptureSource can then be used in combination with a VideoBrush to paint the video on any shape. Here, we used a Rectangle. To start the capturing of the device associated with the capture device (note that more than one device can be associated with one CaptureSource), we call its Start() method.

VideoBrush videoBrush = new VideoBrush();
videoBrush.SetSource(captureSource);
WebcamRectangle.Fill = videoBrush;
captureSource.Start();

If we want to capture a snapshot, we can use the AsyncCaptureImage method. It provides a WriteableBitmap to the Action(T) which is passed in as parameter. We add the image to the collection. Because of the applied binding, it is displayed automatically.

private void TakePictureButton_Click(object sender, RoutedEventArgs e)
{
    captureSource.AsyncCaptureImage((snapshot) =>
    {
        snapshots.Add(snapshot);
    });
}

The complete code for today’s article can be found here: SLWebcam.zip (60.67 KB)

  Posted on: Thursday, December 10, 2009 11:33:15 AM (Romance Standard Time, UTC+01:00)   |   Comments [1]
         
Gill Cleeren     .net | Silverlight | Silverlight Advent Calendar | sl4     December 9, 2009    
Article number 9 is here, a bit later on the day since I was home late yesterday from the MVP dinner we had and left at 6am this morning to do the Silverlight Road Show. But here we are with the article of today, December 9th!

Today we are looking at a data binding feature that was introduced with Silverlight 3. The reason I’m dedicating an article to it, is that not that many people seem to know about this little gem, namely element-to-element binding or simply element binding. Regular data binding happens between a source object (for example a Person or a Customer) and a control such as a TextBlock. Element binding happens between 2 controls: a property of element A is bound to a property of element B.

A good example to understand element bindings is the following: a Slider control of which the Value property is bound to the Text property of a TextBlock.

image

To make the link between the 2 values, we create a binding as usual, but we specify the “source” as being another element, in this case the Slider control using the ElementName property on the binding.

<StackPanel x:Name="SliderStackPanel" Orientation="Horizontal" Grid.Row="0">
    <Slider x:Name="YearsToPensionSlider" Width="300" Minimum="0" Maximum="40" 
      SmallChange="1" LargeChange="1" VerticalAlignment="Center"></Slider>
    <TextBlock x:Name="ValueTextBlock" 
      Text="{Binding ElementName=YearsToPensionSlider, Path=Value}" 
      VerticalAlignment="Center"></TextBlock>
</StackPanel>

We can also make this binding a bi-directional binding. In the image above, in the second row, it’s possible to specify a value manually in the TextBox control. Due to the binding, the slider will also change its value if we specify the binding to be a two way binding, as so:

<StackPanel x:Name="SliderStackPanel2" Orientation="Horizontal" Grid.Row="1">
    <Slider x:Name="YearsToPensionSlider2" Width="300" Minimum="0" Maximum="40" 
      SmallChange="1" LargeChange="1" VerticalAlignment="Center"></Slider>
    <TextBox x:Name="ValueTextBox" 
      Text="{Binding ElementName=YearsToPensionSlider2, Path=Value, Mode=TwoWay}" 
      VerticalAlignment="Center" Width="100"></TextBox>
</StackPanel>

You can download the code for this sample here. This is a Visual Studio 2008 project and works both with Silverlight 3 and Silverlight 4.SLElementBinding.zip (59.38 KB)
  Posted on: Wednesday, December 09, 2009 11:35:28 PM (Romance Standard Time, UTC+01:00)   |   Comments [3]
         
Gill Cleeren     Silverlight     December 9, 2009    

Today, I have been all over Belgium for the Silverlight Roadshow. As promised, you can find the entire slide deck here.

It includes the general Silverlight slides as well as the Silverlight 3 and 4 feature overview slides.

  Posted on: Wednesday, December 09, 2009 9:25:32 PM (Romance Standard Time, UTC+01:00)   |   Comments [1]
         
3/13/2010   12:59:01 PM