Timmy Kokke

Code and Slides – Dutch Code Camp 2009

Timmy Kokke — Sun, 22 Nov 2009 13:19:20 GMT

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:

A few other places with great information about Prism are:

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

Timmy Kokke — Thu, 05 Nov 2009 20:50:41 GMT

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:

Control styling and templating
Save files to disc
Perspective 3D
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:

Using Blends Sample Data Feature and Importing XML Data into Expression Blend
Creating the Style for the SwatchListBox
Binding the Values to the XML Data Object
Importing a Custom Panel into the Project and using it for the List Box
Creating the Details Balloon
Binding Data to the Details Balloon
Adding the Details Balloon VisualStateGroup
Adding Events
Adding and Using the ListBoxSentToTop.cs Behavior
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:

An Introduction to SuperPreview
Defining Baseline Browsers and Comparing Image Mockups
Identifying the Source of Layout Problems
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.

Introduction to Inserting Silverlight Content with Expression Web 3
Inserting Silverlight Content into a Web Page Using Expression Web 3
Using Dynamic Web Templates in Expression Web 3
Inserting Silverlight Video into a Web Page Using Expression Web 3
Adding Deep Zoom Content to a Web Page Using Expression Web 3
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:

Introducing SketchFlow
Adding Navigation Screens in SketchFlow
Building a Basic Layout in SketchFlow
Adding SketchStyle Controls to Enhance a SketchFlow Layout
Working with Components
Adding Navigation to Buttons in SketchFlow
Working with States in SketchFlow
Working with SketchFlow Animation
Working with Behaviors
Using Sample Data in SketchFlow
Using SketchFlow and SketchFlow Player to Track Feedback
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:

Understanding the Benefits of Standards-Based Design with Expression Web
Best Practices for Markup and Using Multiple Style Sheets
Using CSS Properties to Create a Unique Heading in Expression Web
Creating a Site Navigation Bar in CSS Using Expression Web
Creating a Site Navigation Bar in CSS Using Expression Web (Part 2)
Working with Images Using CSS
Create a Two Column Layout with Expression Web (Part 1: CSS Floats)
Create a Two Column Layout with Expression Web (Part 2: CSS Floats)
Modifying CSS Layouts with Margins and Padding
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:

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

>Download StarterKit

	Tags van Technorati: Silverlight	Silverlight and Expression Insiders Usergroup

Silverlight and Expression Insiders

Timmy Kokke — Mon, 02 Nov 2009 14:08:07 GMT

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

Timmy Kokke — Fri, 16 Oct 2009 21:45:45 GMT

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

Timmy Kokke — Wed, 14 Oct 2009 09:15:24 GMT

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 <

> is encoded into >

& is encoded into &

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

Timmy Kokke — Sat, 03 Oct 2009 09:15:26 GMT

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

Timmy Kokke — Tue, 29 Sep 2009 21:14:31 GMT

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

Timmy Kokke — Mon, 28 Sep 2009 13:53:53 GMT

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

Timmy Kokke — Wed, 09 Sep 2009 15:23:32 GMT

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

SilverBullet #9 - System.Windows.Analytics

Timmy Kokke — Thu, 03 Sep 2009 15:27:16 GMT

When developing applications, especially graphic intensive web applications you want to monitor the performance when running. The System.Windows.Analytics class can help you with that.

The class has no methods of any significance and only three read-only properties:

AverageProcessLoad – shows the average of all cores on how much of the CPU the process is using

AverageProcessorLoad – shows the amount of CPU processing that’s being used

GpuCollection – holds a collection of GpuInformation objects. The GpuInformation class contains information about the GPU. Every element in the collection has three properties: DeviceId, DriverVersion and VendorId.

Using these properties is very simple as this example will show:

This example uses a timer to display and update the values from the properties in the System.Windows.Analytics class.

To display the various values added a couple of text boxes and a listbox to stackpanel. Too keep things simple for this example, just add the stackpanel to MainPage.xaml in a new silverlight project.

<StackPanel x:Name="LayoutRoot" Orientation="Vertical">

    <TextBlock x:Name="AverageProcessLoad" />

    <TextBlock x:Name="AverageProcessorLoad" />

    <ListBox x:Name="GpuInfo" />

    <TextBlock x:Name="Time"/>

</StackPanel>

Next, add the following to the codebehind, MainPage.xaml.cs

 public MainPage()

            InitializeComponent();

            var t = new DispatcherTimer();

            t.Tick += TickHandler;

            t.Interval = new TimeSpan(0,0,1);

            t.Start();

        void TickHandler(object sender, EventArgs e)

            Time.Text = DateTime.Now.ToLongDateString()+ " -- "+

                            DateTime.Now.ToLongTimeString();

            var an = new Analytics();

            AverageProcessLoad.Text =

                an.AverageProcessLoad.ToString();

            AverageProcessorLoad.Text =

                an.AverageProcessorLoad.ToString();

            GpuInfo.Items.Clear();

            foreach (var gpuInformation in an.GpuCollection)

                GpuInfo.Items.Add(string.Format(

                    "ID:{0}, Version:{1}, vendorId{2} ",

                    gpuInformation.DeviceId,

                    gpuInformation.DriverVersion,

                    gpuInformation.VendorId)

);

	Tags van Technorati: Silverlight