Silverlight Control Customization Slides and Demos…

Ok, I’ve given this talk a few times, and keep promising to post my slides and demo projects.  ALLRIGHT, I’ll do it.  If you saw the “pumpkin” version last fall, I’ve updated based on an attendees suggestion for spring.  Now we throw bunnies, not pumpkins. 

This session covers the following basic topics:

  • Overview of controls
  • Nesting content in Content controls
  • Creating custom control templates
  • Understanding Visual States
  • Understanding Template Parts
  • Creating custom User Controls
  • Creating custom Controls

There is a starter project with some code snippets (in the snippets folder of the Silverlight project) that you can try to walk through on your own although I don’t have written explicit instructions to get you through the steps.  The snippets may be enough to get you through them though if you are adventurous.  There is also a completed version of the demo project that you can play with.  Finally, I’ve included my slides.

If you have a user group in the So Cal area and would like me to come present this session for you (its about two hours of content) give me shout, and I’d love to come do it for you. 

Silverlight Control Customization Slides and Demos (6MB)

Bunny Being Thrown

Silverlight Error Handling Default Behavior

 

What actually happens when exceptions occur inside the managed code of a Silverlight application can be a little confusing at first.  Factors that affect what you will see depend on:

  • Whether or not the app is being run by the Visual Studio debugger
  • Whether or not Silverlight debugging is enabled
  • Whether or not the offending code is in a try/catch block
  • Whether or not the Applicaiton.UnhandledException event has a handler
  • Whether or not the Silverlight Plug-in has an onError handler in JavaScript
  • Whether or not script debugging is enabled in IE

That’s a lot of “Whether or not”s to deal with. To try and make sense of it, I have created the following flow chart.  Be warned, this is how I see it, and what my testing has shown me.  Your mileage may vary.  Also, this all assumes that you are using Internet Explorer as the browser.  The browser portion of the following information will be different with each browser.  Click the image or link below to download a zip file with the Visio document, a PNG, and a PDF of the flowchart.

Silverlight Error Handling Default BehaviorSilverlightErrorHandlingDefaultBehavior.zip

If you have any input, drop a comment below and let me know.  As always though the files I am posting are yours to do with as you wish, I retain no rights. 

Choosing the right property type in Silverlight

If you are going to be creating your own classes or controls in Silverlight, you need to choose wisely when you implement the properties for your new class or control.

Silverlight properties can be either:

  1. Standard CLR Properties
  2. Standard CLR Properties that raise the INotifyPropertyChanged interfaces PropertyChanged event
  3. DependecyProperty instances that support a value precedence based on animation, data binding, templates, styles, and default values.

The kind of property you need to create depends a great deal on what you need to do with it. 

If you just need a place to hold onto a value, a standard CLR property will suffice. 

If you only need to provide a value in data binding, then INotifyPropertyChanged is probably the right choice.  This is the simplest way to provide value change notification to subscribers.  DependencyProperties also provide change notification, but at a much higher cost, and if all you need is the change notification piece then the DependencyProperty comes with too much extra baggage.

If you need the property to be the target of an animation or data binding, or if you want to set it’s value in a template or style, then you should implement it as a DependencyProperty. 

Property Type Choice Flow Chart

Do you have a different opinion on the above?  Tell me about it!

Expression Blend 4 Project MRU List….

In prepping demo’s for Expression Blend 4, I like to be able to start with a clean project “Most Recently Used” (MRU) list.  In Expression blend, the list of recent projects is kept in an xml configuration file (user.config) in your user profile.  I know this works in the Expression Blend 4 RC.  I haven’t tried it on any other versions of Expression Blend.

For me, the path to my configuration file is:

“C:\Users\BStateham\AppData\Roaming\Microsoft\Expression\Blend 4\user.config”

Double clicking on it should open the file in Visual Studio 2010, although you can open it in the text editor of your choice.

If you look at the file, you will see a <ConfigurationService Version="0.1.0.0"> root node which contains a series of <ConfigurationObject Name=""> elements.  Each <ConfigurationObject> contains one or more <PrimitiveObject Name=""> elements:

<ConfigurationService Version="0.1.0.0">
  …
  <ConfigurationObject Name="ProjectManager">
    <PrimitiveObject Name="LastNewProjectFolder">…</PrimitiveObject>
    <PrimitiveObject Name="LastProjectCategoryTreeItem">…</PrimitiveObject>
    <PrimitiveObject Name="LastProjectCategoryTreeVisible" Type="">…</PrimitiveObject>
    <PrimitiveObject Name="LastProjectFilterCreated">…</PrimitiveObject>
    <PrimitiveObject Name="LastProjectTargetFrameworkCreated">…</PrimitiveObject>
    <PrimitiveObject Name="LastProjectTemplateCreated">…</PrimitiveObject>
    <PrimitiveObject Name="RecentProjects">…|…</PrimitiveObject>

</ConfigurationObject>
  …
</ConfigurationService>

Locate the <ConfigurationObject Name="ProjectManager"> element, and under that find the <PrimitiveObject Name="RecentProjects"> element.  You will see a pipe (“|”) delimited list of project paths.  You can delete the contents of the <PrimitiveObject Name="RecentProjects"> element, or just delete the entire element itself.  Expression Blend will re-create it on the next time it starts up. 

In addition to the <PrimitiveObject Name="RecentProjects"> element, I also deleted the <PrimitiveObject Name="LastNewProjectFolder"> element.  Again, this is really just for demo purposes so that when I demo, the values look like they do after a clean installation.  When you go to add a new project, the “Location” will default to a folder under your My Documents.

Silverlight Navigation Application Theme

I have created my first theme for the Silverlight Navigation Application template.  You can get it here.

BretsLeftBarFlourish

I can’t really say that I “created” it.  It was more a modification of the default styles.xaml document that comes with the application template.  For the flower background on the left, I modified an image I got from stock.xchng user fangol.

Let me know if you use it!

Silverlight 4 Beta Control Namespaces, Assemblies, and Paths….

 

Quick Fix Notes:

If you got to this article because you are trying to get the “Silverlight 4 Beta Toolkit” controls from silverlight.codeplex.com to show up in Visual Studio 2010 Beta 2, try these steps.

  1. Open a Visual Studio 2010 Beta 2 Silverlight Project
  2. Open a MainPage.xaml in the designer
  3. Right click on the Toolbox and select “Add Tab”. 
  4. Name the new tab “Silverlight Toolkit Controls” or something else to your liking
  5. Inside the new tab, right click again and select “Choose Items…”
  6. Switch to the “Silverlight Components” tab in the “Choose Toolbox Items” dialog
  7. Enter the Following into the “Filter” text box:

    C:\Program Files\Microsoft SDKs\Silverlight\v4.0\Toolkit
    (note you can include a release subfolder, Like \Nov09)

  8. From the filtered list of controls, select the controls and themes you would like to add to the toolbox.
  9. Click OK
  10. Your Silverlight Toolkit controls should now be added to the Toolbox.

KEEP READING FOR SOME
COOL INFO ABOUT THE CONTROLS

I have recently started digging deep into Silverlight 4. I have installed

  • "Visual Studio Professional 2010 Beta 2"
  • "Silverlight 4 Beta Tools For Visual Studio 2010"
  • "Silverlight 4 Beta Toolkit – November 2009"
  • "Microsoft Expression Blend for .NET 4 Preview"

After getting all of those installed, I noticed that I didn’t see the toolkit controls in the toolbox in Visual Studio 2010 Silverlight projects. The seem to show up in Blend, but not in Visual Studio. That sent me on a hunt for controls. What I learned through the process gave me a much better understanding of the where the controls live, and what controls come with which install.

My search began by simply using the "Choose Toolbox Items" dialog that appears when you right click in a Visual Studio Toolbox and select "Chose Items…" from the pop-up menu.

ChooseToolboxItemsWithDir

I switched to the “Silverlight Components” tab and looked down the “Directory” column.  As I did I noticed that while there were 150+ controls (172 to be exact in my install), there were only six distinct directories that the controls assemblies came from.  I am listing those directories below with MY estimation of what component or features the directories and their assemblies represent.

Path Purpose
C:\Program Files\Microsoft SDKs\Expression\Blend Preview for .NET 4\Prototyping\Libraries\Silverlight Sketchflow Assemblies.  Interesting though because the Blend 4 Preview doesn’t include Sketchflow
C:\Program Files\Microsoft SDKs\RIA Services\v1.0\Libraries\Silverlight .NET RIA Services (I haven’t installed the WCF RIA Services preview yet).
C:\Program Files\Microsoft SDKs\Silverlight\v4.0\Libraries\Client Silverlight SDK Assemblies
C:\Program Files\Microsoft SDKs\Silverlight\v4.0\Toolkit\Nov09\Bin Silverlight Toolkit control assemblies
C:\Program Files\Microsoft SDKs\Silverlight\v4.0\Toolkit\Nov09\Themes Silverlight Toolkit theme assemblies
C:\Program Files\Microsoft Silverlight\4.0.41108.0 Silverlight core assemblies

Along with the list of assembly directories, I also compiled all of the assemblies, namespaces, whether the control appears on the “Common Silverlight Controls” Toolbox in Visual Studio 2010 as well as if it appears in the “All Silverlight Controls” toolbox in visual studio.  The data made it into various incarnations, but I ended up getting it into an XML format (ControlDetails.xml) that I could play with. I even made a SQL 2008 Express Database (SLControlsDB) that I could use but ended up opting for the XML instead.  LINQ to XML in Silverlight is a really easy way to work with data.  

Since I was playing with Silverlight I went ahead and made a Silverlight application to visualize the data I had collected (Source Code):

SLControlsInfoV3ScreenShot

I made the above project using Visual Studio 2010 Beta 2, but I targeted the Silverlight 3 runtime just so people didn’t have to upgrade to the Silverlight 4 Beta runtime to see it. I know it’s kind of confusing to use VS 2010 to build an Silverlight 3 app about Silverlight 4 Beta controls.  I just thought it was the most compatible way to do it. 

Anyhow, long story longer, I learned a lot about what controls come from where in the Silverlight environment.  In the end, I was able to filter the “Choose Items Dialog” to only show controls from the “C:\Program Files\Microsoft SDKs\Silverlight\v4.0\Toolkit\Nov09\Bin” directory, and then select those controls to add to my toolbox.  I made a new tab in the toolbox called “Silverlight Toolkit Controls” and added them there.  Everything was copacetic then.

Feel free to use the data I supply above, play with my sample app, or download and play with the source of my sample app.  It shows some interesting examples of using LINQ to XML to populate the PieChart series using aggregates. 

Article Resources

Resource Title Link
XML File Containing Control Details netconnex.com/slcontrolsinfov3/ControlDetails.xml
Normalized SQL Database with Control Details netconnex.com/slcontrolsinfov3/SLControlsDB.zip
Live Control Data Visualization App netconnex.com/slcontrolsinfov3
Control Data Visualization App source netconnex.com/slcontrolsinfov3/SLControlsInfoV3.zip