The structure of the article is as follows:

• Define data structures for storing and defining interfaces for fetching live and historical data.
• Implement fetching stock data using Google Finance
• Visualize fetched stock data using Visiblox Charts for Silverlight

Read the full article and download the source code on Codeproject: Visualizing Live and Historic Stock Data Using Silverlight

1. Debug Data Binding Expressions by Using Breakpoints in XAML
2. Animations Made Easy with Transitions
3. Navigating Up the Visual Tree in Bindings using RelativeSource and Mode=FindAncestor
4. Binding View Events to the ViewModel Using Custom Markup Extensions
5. Changing Styles Runtime By Binding in Style Setters
6. Networking No Longer Happening on the UI Thread
7. Vector Based Printing
8. HTML Content and Additional Permissions Within Trusted Silverlight Application
9. 3D API
10. Smaller Enhancements: Text Clarity and Performance Improvements

You can read the full article with details on all of these features on my Visiblox blog.

The final part of the series is ready and it covers the following topics:

• Modifying Styles Runtime: the IsSealed Property – modifying the Setters of a Style can only be done if the IsSealed property is set to false and this property is set to true as soon as the style gets applied to an element in the visual tree.
• Cloning Styles – because sealed Styles can’t be modified, one needs to clone them to be able to manipulate them. I’m providing example code on how cloning of a Style can be done.
• Merging styles runtime – I’m showing two ways of merging existing styles programatically, both using the BasedOn property of Style as well as just copying Style setters.

You can read the detailed article and download source code for examples on my Visiblox blog – I hope you’ll find it useful.

This article aims to collect the most important resources developers should go through in order to learn the WP7 ecosystem and build decent Windows Phone 7 applications using Silverlight.

Tools To Get Started Developing

• Download the free developer tools (installs Visual Studio Expression or project templates, Expression Blend for WP7 or project templates for Expression Blend 4) (you can get them from the Windows Phone 7 developer site developer home page as well). You’ll need this to get started with development.
• Download the Windows Phone 7 Silverlight training kit – it features some very useful examples with explained source code. I suggest going through it, or at least the parts you feel are relevant to what you want to develop.
• Download the Silverlight for Windows Phone Toolkit. This component contains some essential classes for development such as GestureService (simplifying detection of gestures), DatePicker, TimePicker, WrapPanel and ToggleSwitch.

Get a Feel for Metro, the WP7 UI

To develop good WP7 applications it’s important to get the feel of the WP7 user interface, Metro. I suggest going through the following resources to get familiar with it:

• Windows Phone Design System – Codename Metro – this whitepaper helps understand the motivation behind Metro
• Windows Phone 7 UI design guidelines – worth flipping through and holding on for it for future reference.
  Also worth Taking a look at the structure of the panorama and pivot controls – these are two controls unique to WP7.
• Pictures and videos of some conceptually well designed WP7 applications:
  • USGA Golf:  pictures and video
  • Twitter, Seesmic, Foursquare
  • Twit.TV, AP news
• Windows Phone 7 Design Templates. These are useful templates to give your application a WP7 look and feel.

Coding Resources for Windows Phone 7

• Windows Phone development resources on MSDN. These are quite in depth tutorials on specific topics from getting started all the way to specic WP7 features like the location service, accelerometer API, trial API and so on.
• Programming Windows Phone 7 book – a great and free e-book on WP7, though not yet finalized
• Windows Phone 7 in 7 - 20 to 30 great 7 minute video tutorials on various aspects of Windows Phone 7 development. Highly recommended.
• WP7 code samples on MSDN – if you find an application with a similar concept to what you want to build, looking at its source code is a good start!
• Creating High Performing Silverlight Applications for Windows Phone – a whitepaper with lots of advice on creating good and performant WP7 applications
• If developing a larger application, it’s worth following MVVM guidelines. Get to know MVVM in 3 easy steps and download the MVVM Light toolkit. Also learn how to unit test your WP7 project.

Other Useful Resources

• 130 Metro Icons for Windows Phone 7. If you’ll use the application bar, chances are you’ll use some of these icons or want to design ones similar in style to these.
• Creating a custom application bar icon at kirupa.com – an article explaining how to create application bar icons that look good both on dark and white themes.
• Collection of theme resources for WP7. Bookmark this page so you can reference as StaticResource from your phone – you’ll be using this often when coding in Visual Studio. Expression Blend has built in support for these though – another reason to use it for designing your application.
• Frame rate counter on the emulator: read Jeff Wilcox’s blog post on how to enable/disable it
• Designing Windows Phone 7 applications - a short article worth reading on basic considerations for designing WP7 applications.

Further Lists of WP7 Resources

• Windows Phone development resources on MSDN. A very well structured list pointing to detailed tutorials and whitepapers.
• An extensive list of categorized WP7 resources by Jeff Blankenburg
• Another great list of WP7 resources by Mark Kirby

Hope you found this list helpful, good luck with developing!

Why Silverlight?

Developing for Windows Phone 7 can be done using two frameworks: Silverlight and XNA. XNA is a framework targeting game development. Those who are looking to develop either games or graphically intensive applications are advised to use that framework.

Silverlight, on the other hand started off as a web application framework, a “web” light version of Windows Presentation Framework (WPF), the successor of Windows Forms. Microsoft decided to support Silverlight as the other application development framework on Windows Phone 7 next to XNA, specifically version 3.0 with some extra libraries. It’s safe to say that if one’s goal isn’t game development, the obvious (and easier) choice is to develop applications in Silverlight for WP7.

What is Silverlight?

Silverlight is a similar framework to Adobe Flash, allowing the developer to create applications that manipulate media, are interactive all built on the .NET platform. .NET developers will be familiar with lots of the libraries used, however Silverlight introduces several new concepts and libraries. With Out Of Browser support and Windows Phone 7 development announced, Silverlight is no longer just a web framework, but more an application development platform.

Some useful resources on understanding what Silverlight is:

• What Is Silverlight? A CNET article back from 2007, most of the content is still not outdated though.
• Silverlight Overview on MSDN
• Overview of how Silverlight version differ on silverlight.net. Remember, WP7 supports Silverlight 3.

Developer tools

Silverlight development can be done with Visual Studio 2008 and upwards, I’d recommend using Visual Studio 2010 – a free, express version is available for use. Expression Blend is an additional tool that makes creating the UI much easier.

If you’re planning on doing WP7 development, download the developer tools for WP7 which will either install the expression version of Visual Studio 2010 and a phone version of Expression Blend or if VS and Expression Blend are already installed, it will just add the new supported project types and the emulator.

Understanding how Silverlight Works

There are some key areas anyone from an OO background needs to understand to be able to develop with Silverlight.

XAML

XAML (eXtensible Markup Language) is the markup language for Silverlight. A Silverlight page always consists of a XAML file (the markup) and a code behind file (the logic). Understanding how XAML works is vital to developing any Silverlight applications.

Some useful resources that give on overview of XAML are:

• XAML quickstart on silverlight.net
• Getting started with XAML – a short article by Umiar Saeed
• XAML overwiew on Wikipedia

Silverlight Controls

Building a Silverlight application involves with creating pages, then adding visual elements and controls to them. Silverlight has mostly the same controls as WPF – for someone who’s not worked with any of these, getting to know the basic controls can be challenging. The most important Silverlight controls to get to know are the following:

• Layout controls. Most important ones are Canvas, Grid and StackPanel.
• Input & selection: Button, CheckBox, ComboBox, RadioButton, Slider, TextBoxc
• Text display: TextBlock

The easiest way to explore the tools is to either add them on an example project in Visual Studio 2010 from the toolbox or in Expression Blend. There are also some good resources covering what the individual controls are designed for:

• Silverlight User Interface Controls – from silverlight.net (unfortunately the original article seems to be removed, this is a PDF version of it)
• Overview of Silverlight (and WPF) layout controls by Karl Shifflett
• Silverlight controls overview on MSDN – reference documentation

Styling and templating

Visuals are important in Silverlight and as such, the framework has good support for customization of visual elements. This customization can be done by using Styles on elements or by setting the Template of some controls.

Some resources on understanding styling and templating:

• Styles overview on silverlight.net
• Using Styles in Silverlight 2 – this applies to Silverlight 3 and 4 as well
• Using Style elements to better encapsulate look and feel – an article by Scott Guthrie
• Using templates to customize a control’s look and feel – again by Scott Guthrie

Dependency Properties

Dependency properties are new kinds of properties Silverlight (and WPF) introduces: compared to the standard properties (the CLR properties) they provide additional services: change notification, binding, styling and resetting to default value.

Most of the properties on visual elements are dependency properties meaning they can be bound to, styled and change can be detected on them. Dependency properties are mostly used in bindings and styling – a lot of developers not even always aware that they’re using DPs. Understanding how they work is a stepping stone to understanding how MVVM works.

Some resources on understanding what dependency properties are:

• Demistifying dependency properties – a nifty overview by Josh Smith
• Dependency properties overview on MSDN

MVVM

When writing larger Silverlight applications it’s important both to separate different parts of the application, such as the model, the view and the in between layer and also to be able to test the application as much as possible. The recommended way of designing larger Silverlight (and WPF) applications is using the MVVM: Model-View-ViewModel pattern.

This patterns shows some similarities to the MVC (Model-View-Controller) pattern in terms that it also separates the model and the view. However instead of the controller layer, something different, a ViewModel layer is used which acts as a wrapper around the model, presenting it to the view. The pattern very heavily relies on bindings that are available in Silverlight (and WPF).

Anyone planning on creating a more complex Silverlight application or working on an application with a team should understand and be able to use this pattern. Some good resources on learning MVVM are the following:

• MVVM for tarded folks like me by Jeremiah Morrill – an overview written in a unique (and entertaining) style
• MVVM explained by Jeremy Likness
• MVVM overview on Wikipedia

MVVM can be implemented on its own, but for more complex applications it’s worth using an MVVM framework that has most of the infrastructure implemented. If you’re looking into developing in WP7, the obvious choice is MVVM Light, the only MVVM framework at the moment I’m aware of that works on WP7, Silverlight and WPF.

Unfortunately there are few resources on MVVM Light – you’ll have to explore a lot on your own to master it. The few helpful ones I’m aware of are the following:

• MVVM Light on Silverlight TV
• MVVM Light discussions on Codeplex and MVVM Light questions on Stackoverflow

Other great tutorials

Others have put together great tutorials that help getting started with Silverlight. Some of the ones I’m aware of are the following:

• Scott Guthrie’s 8 part tutorial on building a Digg-like Silverlight application
• A list of quickstarts on silverlight.net – a list of quickstarts covering different topics in Silverlight
• Learn to use Expression Blend – learning to use Expression Blend can be extremely helpful in being more productive when building Silverlight applications

Conclusion

This post aimed to collect useful resources for those wanting to gain some understanding of Silverlight before jumping on to develop for Windows Phone 7 using it, hope you found it useful.

In my next post I’ll be presenting a similar list of resources specifically about developing for Windows Phone 7.

The problem

I was building Paths by re-using a pre-built collection of PathGeometries. However when re-assigning a PathGeometry to another Path like this:

Path path1;
Path path2; // These paths are in the visual tree
// Create a PathGeometry with some points
var points = new PointCollection();
points.Add(new Point(100, 0));
points.Add(new Point(100, 100));
points.Add(new Point(0, 100));
 
var pathFigure = new PathFigure();
pathFigure.StartPoint = new Point(0, 0);
pathFigure.Segments.Add(new PolyLineSegment() { Points = points });
 
var pathGeometry = new PathGeometry();
pathGeometry.Figures.Add(pathFigure);
 
// Assign this PathGeometry to both Paths
path1.Data = pathGeometry;
// No you don't you get an ArgumentException
path2.Data = pathGeometry;

When trying to re-assign this PathGeometry, an ArgumentException was thrown with the message Value does not fall within the expected range. After googling around it turned out others have come across this issue back in mid 2008. This issue is only present in Silverlight, not WPF, which definititely suggests it is a bug.

However, having received a completely meaningless exception, I decided to dig deeper to at least try to understand what went wrong and find a workaround.

The cause of the problem

From the problem it was obvious that there is some problem with assigning the same PathGeometry object to multiple Path objects. Fair enough, if the same object won’t work, how about cloning it? For starters I implemented a shallow clone extension method and tested it out:

// Create a shallow copy method
public static PathGeometry CloneShallow(this PathGeometry pathGeometry)
{
    var newPathGeometry = new PathGeometry();
    foreach (var figure in pathGeometry.Figures)
    {
        newPathGeometry.Figures.Add(figure);
    }
    return newPathGeometry;
}
 
var pathGeometry;
path1.Data = pathGeometry;
// Try assigning the shallow cloned copy of this pathGeometry to the Path
// No you don't, this time an InvalidOperationException is thrown
path2.Data = pathGeometry.CloneShallow();

This didn’t work either, I still got an exception. The exception was at least more helpful this time: it was an InvalidOperationException with the message Element is already the child of another element. This probably means that unlike WPF, the Silverlight engine probably registers PathGeometries and their figures as well in the visual tree, not allowing them to be placed under another sub tree if they are already in the tree themselves.

This just means that I would have to clone even deeper until the point that I get to elements that aren’t registered somewhere (probably in the visual tree) as child elements. This is what I did.

The workaround

The workaround that finally solved the problem was using a deep clone method that cloned all the way down until it got to Point instances which are no longer registered as children of another element (again, probably in the visual tree). This deep clone method looks like the following:

public static PathGeometry CloneDeep(this PathGeometry pathGeometry)
{
    var newPathGeometry = new PathGeometry();
    foreach (var figure in pathGeometry.Figures)
    {
        var newFigure = new PathFigure();
        newFigure.StartPoint = figure.StartPoint;
        // Even figures have to be deep cloned. Assigning them directly will result in
        //  an InvalidOperationException being thrown with the message "Element is already the child of another element."
        foreach (var segment in figure.Segments)
        {
            // I only impemented cloning the abstract PathSegments to one implementation, 
            //  the PolyLineSegment class. If your paths use other kinds of segments, you'll need
            //  to implement that kind of coding yourself.
            var segmentAsPolyLineSegment = segment as PolyLineSegment;
            if (segmentAsPolyLineSegment != null)
            {
                var newSegment = new PolyLineSegment();
                foreach (var point in segmentAsPolyLineSegment.Points)
                {
                    newSegment.Points.Add(point);
                }
                newFigure.Segments.Add(newSegment);
            }                    
        }
        newPathGeometry.Figures.Add(newFigure);
    }
    return newPathGeometry;
}

To understand the problem and the workaround a bit more, here is a sample application that does the three steps: it tries to copy the PathGeometry of the top blue rectangle first by directly assigning, then by shallow cloning and finally by deep cloning:

You can download the source of this application here: PathGeometryProblem.zip

The problem

I’ve come across this issue because I was trying to clone styles with the following extension method:

public static Style Clone(this Style style)
{
    if (style == null)
        return null;
    Style clonedStyle = new Style(style.TargetType);
    clonedStyle.BasedOn = style.BasedOn;
    foreach (Setter setterToCopy in style.Setters)
    {
        clonedStyle.Setters.Add(new Setter()
        {
            Property = setterToCopy.Property,
            Value = setterToCopy.Value
        });
    }
    return clonedStyle;
}

As you can see, this clone method is not doing anything complicated: it is simply iterating through the Setters of the Style and creating new Setter instances with the Property and Value of the original Setters – basically deep cloning the Style itself.

The issue in Silverlight 3

When I did clone a Style that had been created on the fly and had been assigned a the Style of an element, the values of Setters magically were set to null in Silverlight 3. The problem is visualized using the following simple code:

Style dynamicallyCreatedStyle = new Style(typeof(Rectangle));
dynamicallyCreatedStyle.Setters.Add(new Setter(Rectangle.StrokeThicknessProperty, 4));
dynamicallyCreatedStyle.Setters.Add(new Setter(Rectangle.StrokeProperty, new SolidColorBrush(Colors.Red)));
Rectangle1.Style = dynamicallyCreatedStyle.Clone(); // Works fine
Rectangle2.Style = dynamicallyCreatedStyle; // The Value of all Setters in dynamicallyCreatedStyle are set to null because of a Silverlight 3 bug
Rectangle3.Style = dynamicallyCreatedStyle.Clone(); // The Value of all Setters of dynamicallyCreatedStyle are null, thus Rectangle 3 won't be shown in Silverlight 3!

See the example in Silverlight 3 below. As you can notice, the third rectangle isn’t showing as the Style that it’s assigned to it (the clone of dynamicallyCreatedStyle) has all of it’s Setter Values set to null:

The issue in Windows Phone 7: exception being thrown

In Windows Phone 7 the same code still results in incorrect behaviour with an exception being thrown.

The Value of the Setter is not set to null, instead it’s value can’t be determined runtime, in the debugger. Cloning of this Style is still possible, however when assigning this cloned style to in this line:

Rectangle3.Style = dynamicallyCreatedStyle.Clone()

and ArgumentException is thrown with the error message The parameter is incorrect.

Silverlight 4: issue fixed

When compiling the very same code in Silverlight 4, the Values of the Setters of the dynamically created Style are no longer set to null. Here is the same example targeted for Silverlight 4:

Using Silverlight 4, the third rectangle is showing in the application. Kudos for the Silverlight team for fixing this (as far as I was aware) undocumented issue with Styles.

(Note: you can download the source of the example here: Silverlight 3 Styling Issue.zip)

Conclusion

It’s safe to say that due to this bug present in Silverlight 3 and Windows Phone 7, it’s definitely not recommended cloning Styles after they’ve been assigned to visual elements. If you’re forced to modify existing styles on visual elements, I’d suggest to constantly clone them before they’re applied to a visual element. Of course this is an expensive operation, so it’s definitely worth investigating if there are any other options available to avoid this happening in your application.

The Problem

The type of the StrokeDashArray (that is defined on Shape) is a DoubleCollection. So naturally I tried setting a DoubleCollection instance as the Value of the Setter on the Style I created:

Style ellipse2Style = new Style(typeof(Ellipse));
// Setting a DoubleCollection as the Value of the Setter for StrokeDashArrayProperty doesn't work!
ellipse2Style.Setters.Add(new Setter(Ellipse.StrokeDashArrayProperty,new DoubleCollection() { 2, 2 }));
Ellipse2.Style = ellipse2Style;

This is interesting enough as setting the StrokeDashArray property directly seems to work just fine:

// Works fine
Ellipse1.StrokeDashArray = new DoubleCollection() { 2, 2 };

This issue definitely suggests that this is a bug that is still present in Silverlight 4. A little searching revealed that this issue has been reported in version 2 (almost 2 years ago!), but is still not fixed.

The Workaround

After some playing around I’ve found a workaround: the Setter property needs to be passed as a string, rather then a DoubleCollection.

The fact that this helps solve the issue is quite surprising as it suggests that there is some logic built in to the styling mechanism that in case of the StrokeDashArray property does some funky conversion from string to DoubleCollection. Personally I would’ve thought that only the XAML parser would do something similar, but it looks like this isn’t a case.

So the (strange) workaround is to set the value of the Setter for the StrokeDashArrayProperty to a string, just like one would do when declaring the Style in XAML. The above example can be made working using this code:

Style ellipse3Style = new Style(typeof(Ellipse));
// Setting a string as the Value of the Setter for StrokeDashArrayProperty works - odd!
ellipse3Style.Setters.Add(new Setter(Ellipse.StrokeDashArrayProperty, "2,2"));
Ellipse3.Style = ellipse3Style;

As for a demo of the bug, see the following application:

The code behind for the application is as follows:

// Works fine
Ellipse1.StrokeDashArray = new DoubleCollection() { 2, 2 };
 
Style ellipse2Style = new Style(typeof(Ellipse));
// Setting a DoubleCollection as the Value of the Setter for StrokeDashArrayProperty doesn't work!
ellipse2Style.Setters.Add(new Setter(Ellipse.StrokeDashArrayProperty,new DoubleCollection() { 2, 2 }));
Ellipse2.Style = ellipse2Style;
 
Style ellipse3Style = new Style(typeof(Ellipse));
// Setting a string as the Value of the Setter for StrokeDashArrayProperty works - odd!
ellipse3Style.Setters.Add(new Setter(Ellipse.StrokeDashArrayProperty, "2,2"));
Ellipse3.Style = ellipse3Style;

Download the source of the example here: StrokeDashArray Bug in Silverlight.zip

Hope this helps anyone coming across this issue!

The third part of the series is ready and it covers the following topics:

• Style is a dependency property. Because of this, it supports the following features:
  • Data binding – it’s possible to bind a style to another (even though this is probably a very rare use case)
  • Property change notifications – it is possible to get notified when the Style property changes, a little workaround is needed though
  • ClearValue – when resetting the value of a Style, setting it to null may result in the element disappearing. It’s worth knowing what the difference between that and calling ClearValue are
• Declaring styles in code behind: creating styles programmatically is more complex that via XAML but at times this technique may be useful.
• Only dependency properties can be styled, styling CLR properties will result in either a compile time error or a runtime exception.
• Only classes descending from FrameworkElement have the Style property and thus can be styled.

You can read the detailed article on my Scott Logic blog – I hope you’ll find it useful.

The final part of the series will explore manipulating styles in runtime.

• Re-Using Styles for Different Types: the TargetType of the Style can be a parent type of the target object as long as it only sets properties of the parent type.
  So for example the Fill property of both an Ellipse and Rectangle can be styled by using a Style that’s TargetType is set to Shape (as both Ellipse and Rectangle inherit from Shape)
• Inheriting Styles using the BasedOn property: Styles can be inherited from one another using the BasedOn property. Single inheritance is supported and the depth of inheritance is not limited.
• Implicit styling: Implicit styles allow defining a default style for all instances of a given type within the scope of the control. This feature has been introduced in Silverlight 4.
• Style Precedence: Styles are only applied to a property if that property is not animated, has no local value set and has no value set in a template. This precedence is the same as the dependency property precedence.
• Style Setter Precedence: setters specifying the value of the same property may be declared within the same Style. The last one of them has the highest precedence and will be used.

You can read the (much more detailed) full article on my Scott Logic blog. The next part of the series will cover further advanced topics such as using Styles in code behind and exploring the relationship between styles and dependency properties from a practical perspective.