SilverBullet #13 - System.Threading.SynchronizationContext

I’d like to provide you with a SilverBullet™, a small snippet of Silverlight, a class or namespace hidden in the silverlight .NET framework, to help you out in times of need. It’s not to learn, but something to keep in your pocket. Just remember it’s there and you’re safe.

When writing the demo for the code-camp  I ran into issues getting back on the UI thread after calling a webservice. The call to the webservice was made from the UI thread, but the callback was made on a different thread. The System.Threading.SynchronizationContext class held the solution.

The System.Threading.SynchronizationContext class is a base class that provides a thread-free context. It contains a read-only static property named Current, which gets the thread from which it is requested. When the current context is kept while the asynchronous call to a webservice is made, it can be used the call method in that context. The SynchronizationContext.Post can do this asynchronous, the SynchronizationContext.Send can do this synchronous.

Sample

Let me try to explain with a small sample which is taken from the code-camp demo.

The GetSearch(string searchText) method is called, which begins the call to the Bing API.

public class BingModel : IBingModel

{

    // this string is used to make the actual call to the bing API. 

    // the blancs are filled in when SearchBing method is called

    const string BingRequestURL =

        "http://api.bing.net/json.aspx?AppId={0}&Version=2.2&"

        +"Market=en-US&Query={1}&Sources=web&Web.Count={2}";

    // the request is kept so it can be used to handle the response

    private WebRequest request;

    // the SearchBing method is called from the UI thread

    //(note: //you can get your AppId at http://bing.com/developers)

    public void SearchBing(string searchText, string appId)

    {

        //the blancs are filled in  

        string requestString = 

            string.Format(BingRequestURL, 

                          appId, 

                          HttpUtility.UrlEncode(searchText),

                          20); //20 results will be givin.

        //a new request is made.

        request = HttpWebRequest.Create(requestString);

        //the getting of the response is started. The OnRequestCompleted 

        //method is provided so it can be called when the request is 

        //completed. The Current SynchronizationContext is provided as 

        state so it can be handled by the result.

        request.BeginGetResponse(OnRequestCompleted, 

                                 SynchronizationContext.Current);

    }

    //when the request is completed this method is called

    private void OnRequestCompleted(IAsyncResult ar)

    {

        //the response is extracted from the result and read thru a stream.

        var webResponse = (HttpWebResponse)request.EndGetResponse(ar);

        var response = new StreamReader(webResponse.GetResponseStream());

        //Because a string of Json is returned by the service, this string is 

        //parsed into a JsonObject.

        var json = JsonObject.Parse(response.ReadToEnd());

        //the ExtractResults method (defined below) is used to create 

        //an enumeration of the results

        IEnumerable<BingResult> ress = ExtractRestults(json);

        // this method (defined below) is used to fire a custom event on the UI thread

        // the state is provided as Synchronization context along with the json results

        InvokeSearchBingCompletedEvent(ar.AsyncState as SynchronizationContext, ress);

    }

    private void InvokeSearchBingCompletedEvent(SynchronizationContext context, 

                                                IEnumerable<BingResult> ress)

    {

        if (context != null) // just in case the context has become null somehow

            // call an anonymous method asynchronous on the context that was used to start 

            //the search

            context.Post((e) => 

                     {

                         if (SearchBingCompleted != null) 

                             //raise the event

                             SearchBingCompleted(this, new SearchBingCompletedArgs() 

                                                   {

                                                       SearchResults = ress.ToList()

                                                   }

                                 );

                     }, null);

    }

    // Extract search result from Json returned by Bing API  

    private static IEnumerable<BingResult> ExtractRestults(JsonValue json)

    {

        var results = json["SearchResponse"]["Web"]["Results"] as JsonArray;

        return from res in results

               select new BingResult()

                          {

                              Title = res["Title"],

                              Url = res["Url"]

                          };

    }

    // the definition of the event handler

    public event EventHandler<SearchBingCompletedArgs> SearchBingCompleted;

}

Code and Slides – Dutch Code Camp 2009

Code Camp

Thanks!

Thanks everyone for coming to my session about Modular Silverlight applications with Prism at the third Dutch Code Camp last Saturday! I hope you learned something useful from it.

Special thanks to SDN, Stichting dotNed en VBcentral for organizing this event.

Code & Slides

The slides can be downloaded  here.

But more important, the source for the demo can be found over here.

Links

Here are a few links mentioned in the presentation:

• Silverlight en Expression insiders user group, Sixin
• Prism on MSDN

A few other places with great information about Prism are:

• CompositeWpf on Codeplex
• Stack Overflow
• Silver Bay Labs

Questions

If you have any questions about the presentation, the code or anything else, feel free to send me an email, tweet or approach me at a future event.

StarterKits for Silverlight and Expression

StarterKits for Silverlight and the Expression Tools

Lately I’ve seen some tweets passing by with links to various StarterKits. I’ve decided to "Bing” around a little and find out what these people were talking about. There are quite a few StarterKits available on various topics. I’ve listed a few below, old and new ones, that I find relevant to my fields of interest: Silverlight and the Expression Blend, Design and Web.

Building a Zune Website with Expression Blend 3 StarterKit

In this lab you will learn how to use Expression Blend and Visual Studio to build a Zune mini-website

This hands-on-lab explains how to build a Silverlight application to view a Zune in various colors. The labs shows a couple of Silverlight concepts like data binding, Perspective 3D and Out of Browser. It contains four exercises:

1. Control styling and templating
2. Save files to disc
3. Perspective 3D
4. Out of browser

> Download StarterKit

Creating a ColorSwatch With Expression Blend 3 Starter Kit

Learn how to create a fun and colorful color swatch control using Expression Blend 3 custom layout controls. In this Starter Kit you will find assets, labs and a video collection.

This StarterKit explains how to build a Color Swatch control in detail. The kit contains 10 modules each with a Word document walking you through ever step, a video and Visual Studio solution containing the code:

1. Using Blends Sample Data Feature and Importing XML Data into Expression Blend
2. Creating the Style for the SwatchListBox
3. Binding the Values to the XML Data Object
4. Importing a Custom Panel into the Project and using it for the List Box
5. Creating the Details Balloon
6. Binding Data to the Details Balloon
7. Adding the Details Balloon VisualStateGroup
8. Adding Events
9. Adding and Using the ListBoxSentToTop.cs Behavior
10. Testing and Modifying the Color Swatch Application

> Live Demo

> Download StarterKit

Expression Web 3 Super Preview Starter Kit

Use this Expression Web 3 Super Preview Starter Kit to become familiar with Super Preview.

This StarterKit talks you thru a lot of features of Super Preview, which is part of Expression Web 3. The Kit contains four modules, each made out of a video, a Word document and the assets needed. The module’s are titled:

1. An Introduction to SuperPreview
2. Defining Baseline Browsers and Comparing Image Mockups
3. Identifying the Source of Layout Problems
4. Working with the DOM View

> Download StarterKit

Microsoft® Expression® Design Portfolio Starter Kit 

Get hands-on support in standards-compliant Web design.

This StarterKit contains the code for an Asp.net site for a design portfolio and a document on how to customize it.

This StarterKit is an older one, but still useful. It’s not as comprehensive as the newer ones. I think it’s a nice foundation to build a new site on.

> Download StarterKit  

Silverlight Support Web 3 StarterKit

The download site for this StarterKit contains little information about the Kit. The contents however is surprisingly extensive. It explains stuff about Silverlight, Expression Web and SuperPreview, among other things. The Kit contains six modules each with a video, a Word document and example code.

1. Introduction to Inserting Silverlight Content with Expression Web 3
2. Inserting Silverlight Content into a Web Page Using Expression Web 3
3. Using Dynamic Web Templates in Expression Web 3
4. Inserting Silverlight Video into a Web Page Using Expression Web 3
5. Adding Deep Zoom Content to a Web Page Using Expression Web 3
6. Using Expression Web’s Publishing Feature to Deploy Your Web Site

> Download StarterKit

Prototyping with Sketchflow in Expression Blend 3 Starter Kit

New in expression Blend 3 is SketchFlow. This extensive StarterKit explains a how to build a prototype of a Snowboard shop in Silverlight. The Kit contains all videos, guides and example code you need. The Kit is divided into 12 modules:

1. Introducing SketchFlow
2. Adding Navigation Screens in SketchFlow
3. Building a Basic Layout in SketchFlow
4. Adding SketchStyle Controls to Enhance a SketchFlow Layout
5. Working with Components
6. Adding Navigation to Buttons in SketchFlow
7. Working with States in SketchFlow
8. Working with SketchFlow Animation
9. Working with Behaviors
10. Using Sample Data in SketchFlow
11. Using SketchFlow and SketchFlow Player to Track Feedback
12. Exporting Your SketchFlow Project

> Download StarterKit

Standards Based Websites with Expression Web 3 Starter Kit

Learn how to create standards based websites with Expression Web 3 using this Starter Kit that includes assets, labs and videos.

This StarterKit explains what standards can be used in Expression Web 3 and why you can benefit from them. The guide explains uses of css and html best practices. Again, the Kit contains code, videos and Word documents spread over 10 modules:

1. Understanding the Benefits of Standards-Based Design with Expression Web
2. Best Practices for Markup and Using Multiple Style Sheets
3. Using CSS Properties to Create a Unique Heading in Expression Web
4. Creating a Site Navigation Bar in CSS Using Expression Web
5. Creating a Site Navigation Bar in CSS Using Expression Web (Part 2)
6. Working with Images Using CSS
7. Create a Two Column Layout with Expression Web (Part 1: CSS Floats)
8. Create a Two Column Layout with Expression Web (Part 2: CSS Floats)
9. Modifying CSS Layouts with Margins and Padding
10. Testing Your Site with Snapshot and SuperPreview

>Download StarterKit

Venture Into Gaming Expression Blend 3 Starter Kit

Explore gaming using Microsoft Expression Blend 3 Starter Kit

This last StarterKit is my personal favorite. What's more fun than building a real game? This one explains everything. From importing assets in Expression Blend to Testing it in SuperPreview. All using Silverlight. This StarterKit is a great place to start if you’re new to Silverlight and the Expression toolset. But even if you’re a more experienced Silverlight developer I recommend reading thru this one. As a lot of other StarterKits, this one contains videos, guides and videos in 10 parts:

1. Organizing and Importing Assets into Expression Blend
2. Creating the Game Interface Using Expression Blend 3
3. Understanding Layout Containers
4. Creating a UserControl
5. Adding and Applying Behaviors
6. Adding Walls and Creating Animations
7. Animating Controls with the Visual State Manager
8. Working with Text and Embedding Fonts in Expression Blend
9. Adding Audio Resources to a Silverlight Game
10. Publishing and Testing your Silverlight Game

>Download StarterKit

	Tags van Technorati: Silverlight	Silverlight and Expression Insiders Usergroup

Silverlight and Expression Insiders

A few months ago I received an email from Rob Houweling explaining his ideas for a new Dutch usergroup, focused  on Silverlight, Expression Design and Expression Blend. I’ve had been playing with the idea of a Silverlight usergroup myself at the time, so I didn’t have to think very long about joining. After meeting and numerous emails between six silverlight enthusiasts(Rob Houweling, Mark Monster, Koen Zwikstra, Antoni Dol, Eric van den Hoek and me, Timmy Kokke) the plans are worked out and it’s time to go public.

Launch of Silverlight & Expression Insiders

10/31/2009 4:20:04 PM

On November 2, 2009 the user group for Silverlight & Expression is officially launched. Silverlight & Expression Insiders will organize a number of activities in the near feature. You can find the usergroup at the following website: http://sixin.nl.

What audience do we try to reach?

The target audience of Silverlight & Insiders consist mostly of (Interaction) Designers and (Front-end) Developers that are enthusiastic about Silverlight and the Expression tools of Microsoft and would like to know more about them or would like to share their knowledge on these subjects.

What is the usergroup going to do?

Our main goal is to bring people together who have knowledge of Silverlight & Expression tools and people who are interested in these tools. We will try to achieve this by the following activities:

• This website which will be updated with more features in the future
• Organizing small events with interesting speakers
• Speaking at events like SDN or other user groups

Who are we?

The organization of Silverlight & Expression Insiders is done by a number of enthusiastic people you might recognize from the Silverlight community. Check out the page "Over ons" for more information.

For the press release, click here

Twirling smoke effect in Expression Design

For a long time I’ve been wondering how to create a smoke effect like used in the Silverlight Logo for example. There are some techniques to render smoke by using 3D modeling software. But creating this effect in a tool like Expression Design is easier than it looks. Below is an example of what the end result might look like.

After opening expression Design start by creating a new document.The size of the document isn’t very important as long as you have a bit of space to play with some paths, so at least 1024 x 786 is recommended.

Select the Pen tool  from the toolbar and draw a curvy path. Try giving it some space, but don’t be scared to try out different variations with wide curves and even small loops. You’ll probably end up drawing these curves a couple of times. After you’ve learned this little trick, you’ll quickly learn to what works and what doesn’t.

Remove the fill of the path. Give the stroke a light blue color like #74C4FC. and a width of 3. Change the opacity to 25.

Now draw a second curvy path approximately the same as the first, but don't follow it exactly. Add some different twists and turns. This will cause the smoke effect to twirl and get a smooth feel. Remove the filling for this path also. Change the stroke to the same light blue as the first. Give it a width of 3 also, but set its opacity to 0.

  Select both paths.

With both paths selected, go to Object menu and select Blend Paths…

Set the Steps value to 1. This will create a new path, that’s drawn between both paths.

Add this new path to the selection to get all three paths selected. And go to Object, Blend Paths.. again.

This time, set the Steps value to 100. This will create a smooth transaction between the three paths.

Et voila, “Smoke”.

Where to go from here? Experiment! Play with different colors, try gradients and see where different curves may lead you. And, for a funny twist, try dashing the curves.

You can download the .design file here.

	Tags van Technorati: Silverlight

SilverBullet #12 – System.Windows.Browser.HttpUtility

I’d like to provide you with a SilverBullet™, a small snippet of Silverlight, a class or namespace hidden in the silverlight .NET framework, to help you out in times of need. It’s not to learn, but something to keep in your pocket. Just remember it’s there and you’re safe.

This time I would like a little helper class to your attention. When working in a web environment ever so often you need to encode/decode a Url or a piece of Html. In Silverlight you need to look for the System.Windows.Browser.HttpUtility class. The static System.Windows.Browser.HttpUtility class contains 4 static methods. A set for encoding and decoding Html and a set for encoding and decoding URLs.

The HttpUtility.HtmlEncode method converts all special Html characters to their encoded versions. Because html can’t display its control characters directly, they have to be converted to be displayed.  An < character will be interpreted by Html as the start of an Html tag. To display it, it has to be encoded.

For example:

< is encoded into &lt;

> is encoded into &gt;

& is encoded into  &amp;

The counterpart of the HttpUtility.HtmlEncode method is the HttpUtility.HtmlDecode method. This method converts all encoded characters back to normal character.

When sending strings to urls, a lot of characters will cause misinterpretation on the receiving end.  To replace this characters by their hexadecimal escape equivalents in a string you can use the HttpUtility.UrlEncode method. For example, an empty space is likely to cause trouble. After encode a string with a space, the space is replaced by %20.

To reverse the process and change the hexadecimal escape characters back to their normal form, you can use the HttpUtility.UrlDecode method.

	Tags van Technorati: Silverlight

Retro-lines in Expression Design

Today I would like to show you how to create lines like above in Expression Design.

After opening Expression Design, start by creating a new .design document.

Now, zoom in a bit to the upper left corner of the document. Draw a small rectangle and give it some easy numbers. Move the rectangle to 10, 10 and change it width and height to 10 too.

Change the stroke of the rectangle to none, and change the fill color to black.

Copy the black rectangle and move it to position 10,20. Change its color to a medium grey, like #999999.

Create another copy of the rectangle and move it to position 10,30. Give that rectangle a light grey color, #DDDDDD.

Add a fourth copy and move it to 10,40. Fill it with a dark grey #555555.

At this point there should be a stack of 4 squares like this:

Next, the four rectangles have to be turned into a stroke definition to use it for the drawing. Select all four rectangles and go to Object –> Stroke –> New Stroke Definition…

By default there’s some room around the squares. When using the stroke definition like this, there’s going to be some space at the beginning and the end of the line. To fix this, select the stroke definition box from the toolbar.

Drag the stroke definition on the borders of the squares, so that it matches the size.

That’s all. Hit the little cross on the tab to close the stroke definition. Enter a name for the definition in the dialog that pops up. Set the default width to 10.

Hit ok to close the popup.

Because the stroke definition is now stored, the rectangles aren’t needed anymore. Delete them and reset the zoom level to 100%.

Select the Pen tool from the toolbar or hit P on the keyboard. Hold down shift on the keyboard and click on the canvas a few times. Make sure you don’t click and drag because this will create curved lines. By using shift and click all lines will be at 45 degrees to each other.

You don’t need the filling so set that to none. Set the stroke color to a dark red, like #5D0000 and give it a with of 25 pixels.  Select ”Retro” Stroke from the dropdown list. The drawing is starting to look like something now.

Repeat the drawing with the pan again to draw a second line. Instead of using a red color, select a dark blue color like #00005D this time.

All the drawing needs now is a little dynamics.

Add new layer to the design and call this “Shadows”.

Draw a new rectangle and give it a width and height of 25.

Set the stroke for the rectangle to none. Fill it with a gradient and set the gradient to go from black with an alpha 50% to black with an alpha 0.

Use the selection tool to rotate the square 45 degrees, use the shift key while rotating to make the rotation snap to the 45 degrees more easily. Move the rectangle over to a crossing between red and blue lines and place it with the dark side toward the blue line, placing it over the red line.

Copy the shadow square, rotate it 180 degrees and move it with its dark side to the blue line again.

clone, rotate 180 degrees and move to other side of the blue line.

To make it look like the blue line is diving below the red, a small portion of the blue line has to be deleted. To do that, select the Add Anchor Point tool from the toolbar.

To make locating the places to add the anchor points a bit easier, add two guides crossing each other where the side of the blue line crosses the center of the red line. Add three points, like shown below.

To finish it off, delete the middle anchor, by hitting delete on the keyboard. Add a bit of shadow by copying the shadow squares and placing them over the blue line this time.

All there’s left to do is repeating the process of placing shadows and moving a blue line “below” the red every now and then.

	Tags van Technorati: Silverlight

SilverBullet #11 - SyndicationFeed

I’d like to provide you with a SilverBullet™, a small snippet of Silverlight, a class or namespace hidden in the silverlight .NET framework, to help you out in times of need. It’s not to learn, but something to keep in your pocket. Just remember it’s there and you’re safe.

Occasionally it’s required to use an Rss or an Atom feed in your projects. Just to show some news, or the latest update on the stock exchange. Working with these, often large, chucks of xml directly can be a pain. In Silverlight 3 (and .NET 3.5 and 4)  the System.ServiceModel.Syndication.SyndicationFeed class has been added. This class makes the processing of the feed a lot easier.

Say you have an service getting an Atom feed from somewhere and returning this as a string (how to do this can be found in an earlier tutorial I wrote about .Net Ria Services and Rss). Basically you’ll end up with a large string containing xml which represents an Atom or Rss feed. For the creation of a new SyndicationFeed you can use its static Load() method. This method takes an XmlReader object as a parameter, which is created using a StringReader, which takes a string. Got that? Here’s the code to clarify:

using(var reader = XmlReader.Create(new StringReader(AnXmlString)))
{
  var feed = SyndicationFeed.Load(reader);  
  // do something useful with the feed
}

To use this feed in your xaml, you can data-bind to properties like Title, Description and Copyright. The SyndicationFeed class also has a property which gets or sets a list of Items, a list of Authors and a list of Categories.

A lot of these properties use types which can be found in System.ServiceModel.Syndication also, to provide an easy use of the building block of the feeds, Classes like SyndicationItem, SyndicationPerson and TextSyndicationContent.

Another thing that’s worth mentioning, the SyndicationFeed class can also be used the other way around, to create feeds. After filling all the necessary properties, you can call the SaveAsAtom10 or SaveAsRss20 methods to write the output using a XmlWriter.

Last, have a look here for bit of source code to play with.

	Tags van Technorati: Silverlight

DataTemplateSelector in Silverlight

Unlike WPF, Silverlight doesn't contain a DataTemplateSelector. A DataTemplateSelector is used to select a data template based on the data-bound element and the data object. But, it isn't hard to build your own.

Start by adding a class to the solution and call it something like “DataTemplateSelector”. Inherit this class  from System.Windows.Controls.ContentControl. The ContentControl class has a property for a data template and a property for content, which you can use to data-bind to. Next, create an override on the OnContentChanged method like this:

protected override void OnContentChanged(object oldContent, object newContent) 
{

}

In the OnContentChanged method, set the template of the  to a template picked from the dictionary. Add something like the code below to method:

if (((int)newContent % 2) == 0)
{
  ContentTemplate = DataTemplateHelper.LoadFromDictionary(
                        "DataTemplateDemo;component/DataTemplates.xaml",
                        "EvenDataTemplate");
}
else
{
  ContentTemplate = DataTemplateHelper.LoadFromDictionary(
                        "DataTemplateDemo;component/DataTemplates.xaml",
                        "OddDataTemplate");
}

Personally, I prefer to place templates in a separate dictionary, just in case I need to share them between xaml files or to keep the other xaml files clean. I use a custom helper class to make this a bit easier. I’ll explain this in a bit.

In your xaml file, use the template selector class as the template of the list:

<ListBox x:Name="ListofNumbers">
  <ListBox.ItemTemplate>
    <DataTemplate>
      <DataTemplateDemo:DataTemplateSelector 
           Content="{Binding}"/>
    </DataTemplate>
  </ListBox.ItemTemplate>
</ListBox>

I use this helper method like below to retrieve templates from dictionaries. To use the code, add a reference too System.Xml.Linq.

public static DataTemplate LoadFromDictionary(string dictionary,
                                              string template)
{
  var doc = XDocument.Load(dictionary);
  var dict = (ResourceDictionary)XamlReader
                    .Load(doc.ToString(SaveOptions.None));
  return dict[template] as DataTemplate;
}

A demo project can be downloaded here.

	Tags van Technorati: Silverlight

SilverBullet #10 System.Windows.Documents.Run

I’d like to provide you with a SilverBullet™, a small snippet of Silverlight, a class or namespace hidden in the silverlight .NET framework, to help you out in times of need. It’s not to learn, but something to keep in your pocket. Just remember it’s there and you’re safe.

When showing text to a user it's often necessary to show a few words in Italic or Bold. To do this, use the System.Windows.Documents.Run class. This class provides a small bit of HTML - like features inside a Silverlight TextBlock. But, instead of using HTML tags you have to use the Run class.

The Run class inherits from the abstract System.Windows.Documents.Inline which provides most of the properties to use.  A few of the most common are:

• FontWeight – sets the weight of the text, it’s Boldness, and can be of any of the static properties in FontWeights.
• FontStyle – is used to show the text in Italic. The only possibilities are Normal or Italic as provided by FontStyles.
• Foreground – sets the brush for the color of the text. This can be used as any other brush in Silverlight, like an LinearGradientBrush or an ImageBrush

There are couple more properties which you can find here.

Another thing that might become useful when using the Run class to simulate a bit of HTML like behavior is the System.Windows.Documents.LineBreak class. This class does not have any properties or methods and can be compared to the <br /> tag in HTML.

Here’s a small example to show how the Run class  is used in xaml:

<Grid x:Name="LayoutRoot" Background="White"> 

    <TextBlock TextWrapping="Wrap" FontFamily="Verdana"> 

            This is an example with 

            <Run FontWeight="Black">Bold</Run>, 

            <Run FontStyle="Italic">Italic</Run> and 

            <Run Foreground="red">Colored</Run>                        

            text...<LineBreak /> 

            It's even possible to use<LineBreak />

            multiple <LineBreak />lines of text.

    </TextBlock> 

</Grid>

	Tags van Technorati: Silverlight