Silverlight Controls

Summary

This post describes controls in Silverlight 2, Silverlight 2 SDK, and Silverlight Toolkit December 2008 Release, and their designer support. Based on their shipping vehicles, there are three types of Silverlight controls from Microsoft: runtime controls, SDK controls, and Toolkit controls. Designer support for runtime and SDK controls are spread over Visual Studio, Blend, and Silverlight SDK; while designer support for Toolkit controls are fully implemented by design assemblies in the Toolkit, using designers' extensibility framework.

Runtime Controls

Silverlight runtime comes with a set of basic controls, like Button, Canvas, Ellipse, and TextBox. It also exposes some base classes like Control, UserControl and Panel, to allow users to customize, extend and build their own controls. All run time controls are in System.Windows.dll under %ProgramFiles%\Microsoft Silverlight\2.0.31005.0\:

Please note the XmlnsDefinition attributes above. Runtime controls live in the default xmlns http://schemas.microsoft.com/winfx/2006/xaml/presentation, so their tags don't need any xmlns prefix, as shown in below xaml:

<UserControl 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="MySLApp1.Page"
    Width="640" Height="480"> 
    <StackPanel x:Name="LayoutRoot" Background="White">
        <Button x:Name="Button" />
    </StackPanel>
</UserControl>

SDK Controls

Silverlight 2 SDK is a separate package from Silverlight runtime. You can install it from http://silverlight.net/GetStarted:

It is part of the Silverlight Tools for Visual Studio 2008 SP1 download, which also includes Silverlight 2 developer runtime. Silverlight 2 SDK adds two control dlls: System.Windows.Controls.dll and System.Windows.Controls.Data.dll.

System.Windows.Controls.dll

System.Windows.Controls assembly adds four main controls: Calendar, DatePicker, GridSplitter, TabControl, and their supporting classes, to the same two CLR namespaces: System.Windows.Controls & System.Windows.Controls.Primitives, in which most runtime controls also live. All controls in System.Windows.Controls assembly are in the xmlns "clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls", and usually use the "basics" xmlns prefix, as shown in below Xaml:

<UserControl 
    xmlns:basics="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
    xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation
    xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml
    x:Class="MySLApp1.Page"
    Width="640" Height="480"> 
    <StackPanel x:Name="LayoutRoot" Background="White">
        <basics:Calendar></basics:Calendar>
    </StackPanel>
</UserControl>

System.Windows.Controls.Data.dll

System.Windows.Controls.Data assembly adds the all mighty DataGrid control and its supporting classes to the same two CLR namespaces, System.Windows.Controls & System.Windows.Controls.Primitives, just like the runtime assembly System.Windows and the SDK assembly System.Windows.Controls.

System.Windows.Controls.Data controls (just DataGrid for now) are in the xmlns "clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data", and usually use the "data" xmlns prefix, as shown in below Xaml:

<UserControl 
    xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"
    xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation
    xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml
    x:Class="MySLApp1.Page"
    Width="640" Height="480"> 
    <StackPanel x:Name="LayoutRoot" Background="White">
        <data:DataGrid></data:DataGrid>
    </StackPanel>
</UserControl>

Toolkit Controls

Silverlight Toolkit is yet another separate package that you can install from http://silverlight.net/GetStarted:

You can also install it directly from Toolkit's home page: http://www.codeplex.com/Silverlight.

Once installed, the Silverlight Toolkit adds four more control assemblies:

Each assembly introduces a new xmlns prefix and a set of controls under it:

• System.Windows.Controls.dll
  • xmlns:controls="clr-namespace:Microsoft.Windows.Controls;assembly=Microsoft.Windows.Controls"
  • Main controls: AutoCompleteBox, DockPanel, Expander, HeaderedContentControl, HeaderedItemsControls, Label, TreeView, Viewbox, WrapPanel
• System.Windows.Controls.Input.dll
  • xmlns:input="clr-namespace:Microsoft.Windows.Controls;assembly=Microsoft.Windows.Controls.Input"
  • Main controls: NumericUpDown, ButtonSpinner
• System.Windows.Controls.Theming.dll
  • xmlns:theming="clr-namespace:Microsoft.Windows.Controls.Theming;assembly=Microsoft.Windows.Controls.Theming"
  • Main controls: ImplicitStyleManager, Theme (concrete Theme classes are implemented in assemblies under Themes directory)
• System.Windows.Controls.DataVisualization.dll
  • xmlns:charting="clr-namespace:Microsoft.Windows.Controls.DataVisualization.Charting;assembly=Microsoft.Windows.Controls.DataVisualization"
  • Main controls: Chart, [Category|DateTime|Linear]Axis, [Bubble|Bar|Column|Line|Scatter|Pie]Series

Below screenshot shows a Silverlight application using the four Toolkit assemblies:

Designer Support

The two Silverlight designers from Microsoft are Visual Studio 2008 SP1 and Expression Blend 2 SP1. Designer support for Visual Studio 2008 SP1 (VS9) is mostly about toolbox icon and IntelliSense, as shown in above screenshot. Designer support for Blend 2 is mostly about metadata registration, like Description, Category, Browsable, ToolboxBrowsable etc attributes, as shown by below screenshot:

Designer Support for Runtime and SDK Controls

Below screenshots demonstrate designer support for Silverlight runtime and SDK controls:

• Visual Studio has toolbox icons and IntelliSense for runtime and SDK controls:

• Blend has rich support (Icons, Categories, Descriptions, inline/extended/dialog Editors etc) for runtime and SDK controls:

The design time assemblies for runtime and SDK controls are installed by Silverlight SDK:

• System.Windows.VisualStudio.Design.dll for runtime controls in System.Windows.dll
• System.Windows.Controls.Design.dll & System.Windows.Controls.xml for SDK controls in System.Windows.Controls.dll
• System.Windows.Controls.Data.Design.dll & System.Windows.Controls.Data.xml for SDK controls in System.Windows.Controls.Data.dll

If we open those design dlls in reflector, we can see that they don't do much other than providing toolbox icons for Visual Studio:

There is no metadata registration, nor nice icons displayed by Blend. So the rich designer support for runtime and SDK controls in Visual Studio and Blend are actually implemented by the designers themselves, instead of design assemblies for those controls. This creates tight coupling between tools (VS9 and Blend2) and controls (runtime and SDK controls).

Designer Support for Toolkit Controls

On the other hand, designer support for Toolkit controls are fully implemented by design assemblies in Toolkit, built on top of designer extensibility framework:

You can get more information about Toolkit design time features and their implementation from following posts:

• Design Time Features in Silverlight Toolkit
• Design Time Feature Implementation in Silverlight Toolkit
• How to Add a Toolbox Icon for Your Silverlight Control

Conclusion

So we have three vehicles for shipping Silverlight controls:

• The Toolkit is open-source on Codeplex and ships every few months. This enables us to "add new functionality quickly for designers and developers, and provide the community an efficient way to help shape product development by contributing ideas and bug reports."
• For those controls that are well baked, widely adopted and reached mature quality band, we may move them to SDK.
• Over time some of the SDK controls may merge into Silverlight runtime.

Silverlight revolutionizes web development by converging web and desktop development technologies (languages, platforms, tools etc), unifying web and desktop, and bringing the power of desktop to web client. Silverlight Toolkit team is like an agile ISV inside Microsoft, continuously and aggressively enriching and empowering the Silverlight platform, as well as pioneering a new agile, collaborative and open-sourced engineering model. The idea was started by Shawn Burke and Scott Guthrie, as described in Shawn's blog post Control Freak.

Technorati Tags: Silverlight,Silverlight Toolkit,Silverlight Controls,Blend,Visual Studio,Design Time Features

Quick Introduction to Web Analytics for Bloggers

Summary

This post gives a quick introduction to popular free web analytics tools (Google Analytics, Microsoft AdCenter Analytics, FeedBurner Stats, WordPress Stats), how to set it up, and how web analytics works.

What is web analytics?

If you blog, you may be very interested in knowing:

• who read your blog: the demographic, geographic, techno-graphic information of your readers;
• what do they do on your site: what pages do they read, how much time do they spend on each page, how frequently do they come back etc;
• how do they find your blog: referrals, keywords, search engines that lead people to your blog.

Web Analytics answer those questions, help you to better connect with your readers, improve your site, and motivate you to blog more. It is those who contribute information to the Web that have made the Internet so much useful.

After about 20 years of development, web analytics is now fairly mature and easy to use. There are many free web analytics tool on the Web, the most popular one is probably Google Analytics (GA):

Microsoft has a free web analytics offering too, called AdCenter Analytics (ACA):

Besides those general web analytics tools, there are analytics tools for specific sectors, in particular FeedBurner Feed Stats for bloggers who publish blog feeds via FeedBurner:

And if you use WordPress, probably the best blogging software, WordPress.com has free blog stats:

How to set it up?

"OK, you've convinced me, so how do I get started?" You ask. Just follow below three simple steps:

1. Open an account with an web analytics provider, like Google Analytics or AdCenter Analytics;
2. Add the piece of JavaScript code from your analytics provider to pages in your site;
3. Log into your provider's site and watch analytics roll in, or if you prefer, receive analytics reports via email.

The only tricky part is step two. Some blog providers don't allow JavaScript, like Windows Live Spaces, then you are out of luck there. For those providers do allow JavaScript, like Blogger and WordPress, or you host your own blog software, you have several options, for example:

1. modify the html template directly
2. use some widget/gadget that allow your add JavaScript code

I usually go with option two, because it makes it easy to switch/upgrade templates.

• Blogger: use HTML/JavaScript Gadget, contain JavaScript for both Google Analytics and AdCenter Analytics

• WordPress: use Text widget, ACA only, since GA is tracked using Google Analytics for WordPress widget

Please note: account code (UA-1234567-1, A1B2) in above screenshots are fake, to protect my privacy :-)

It is generally advised to use two or more analytics providers:

• to verify data and possibly fix data discrepancies
• to duplicate traffic history and avoid get locked into one provider
• each provider usually offers some unique features, like AdCenter Analytics has better demographic data, FeedBurner gives subscriber stats.

How does it work?

For those curious minds, this is how web analytics works, over-simplified version:

• The JavaScript code you add to your pages references a JavaScript file, like ga.js for GA, and msAnalytics.js for ACA. Those JavaScript files contain a whole set of JavaScript API's for web analytics. The code by default uses just one API, like GA's pageTracker._trackPageView(), or ACA's msAnalytics.TrackPage(). You can add other API calls for more sophisticated analytics scenarios, like msAnalytics.EnableLinkTracking() in above screenshot for tracking outbound referrals.
• The JavaScript calls mentioned above generate http requests, usually for a 1x1 transparent gif, (those requests are also called web beacon), to the analytic provider's log servers. Those http requests contain a lot of information:
  • the web page on your site that issued the http request
  • the user who is browsing the page, usually identified by cookies
  • the machine and software the user is using in browsing your page
• The web analytics servers have complex logic in analyzing and aggregating information from those logs, together with other online and offline information, and then produce the web analytics for your site, via web site, email, or API.

Below screenshots show some of those web analytics http requests in Fiddler and FireBug:

Conclusion

Hopefully this post will help those who haven't tried web analytics before to get started in using it. Happy blogging!

Technorati Tags: Web Analytics,Google Analytics,AdCenter Analytics,Analytics

How to Add an Toolbox Icon for Your Silverlight Control

Controls in Silverlight runtime (system.windows.dll) and SDK (system.windows.controls.dll) have nice toolbox icons in Visual Studio. December 2008 release of Silverlight Toolkit added that for Toolkit controls too, as described in my previous post Design Time Features in Silverlight Toolkit:

This post explains how it is done in Silverlight 2 SDK, and in December 2008 release of the Silverlight Toolkit.

 

Control Icons in Run Time Assembly

The December 2008 Release of Silverlight Toolkit demonstrated how to embed toolbox icons for controls without using a design time assembly.

Open Silverlight.Controls.sln in Visual Studio (see previous post Design Time Feature Implementation in Silverlight Toolkit for more information on how to download the toolkit source):

Or open Controls.csproj in notepad:

<ItemGroup>
  <EmbeddedResource Include="Microsoft.Windows.ControlsAutoCompleteBox.Icon.png" />
  <EmbeddedResource Include="Microsoft.Windows.ControlsDockPanel.Icon.png" />
  <EmbeddedResource Include="Microsoft.Windows.ControlsExpander.Icon.png" />
  <EmbeddedResource Include="Microsoft.Windows.ControlsLabel.Icon.png" />
  <EmbeddedResource Include="Microsoft.Windows.ControlsTreeView.Icon.png" />
  <EmbeddedResource Include="Microsoft.Windows.ControlsViewbox.Icon.png" />
</ItemGroup>

Or open Microsoft.Windows.Controls.dll in reflector:

 

All three show that the custom toolbox icons are embedded resources in the run time assembly Microsoft.Windows.Controls.dll, with a particular naming convention. Take above Microsoft.Windows.Controls.Microsoft.Windows.AutoCompleteBox.Icon.png as an example:

• The first Microsoft.Windows.Controls is the root namespace, specified in controls.csproj file with line: <RootNamespace>System.Windows.Controls</RootNamespace>
• The next Microsoft.Windows.Controls.AutoCompleteBox is the fully qualified name of AutoCompleteBox class, including namespace but not assembly.
• The rest of the name, Icon.png, specify the icon resource type, as will be explained more later.

Control Icons in Design Time Assembly

The Silverlight 2 SDK demonstrated the approach of embedding control icons in design time assembly.

Open System.Windows.Controls.Design.dll in reflector (it is installed under %ProgramFiles%Microsoft SDKsSilverlightv2.0LibrariesClient):

Take above Controls.Design.Icons.Calendar.bmp as an example:

• Controls.Design is the root namespace, specified in its csproj file with line <RootNamespace>Controls.Design</RootNamespace>
• Icons is the subfolder where the Calendar.bmp file is in source tree
• Calendar.bmp is the name of the icon resource file in source tree

Control Icon Resource Naming Convention

So from above two examples, we can see that custom toolbox icons for controls are embedded resources in either run time assembly (so you don't need to ship a design time assembly), or design time assembly (so you have flexibility to change icons, like localize it for a different culture, without touching the run time assembly). The tools (Visual Studio 2008 SP1 for now) try to find the icons based on a special naming convention:

1. Search for resources whose file name without extension matches the type name of the control, including the namespace with a “.icon[*].{XAML | BMP| PNG | GIF | JPG | JPEG}” .
   1. Note that subdirectories affect the namespace in which embedded resources are found. For example, the Toolkit icons are put under a Microsoft.Windows.Controls subfolder, to avoid putting this long string in all icon file names; while the SDK put all icons under a Icons subfolder.
   2. Supported extensions and file types are: XAML, BMP, GIF, JPG, JPEG and PNG
   3. Recommended image size for Bitmap based file formats is 64x64.
   4. The .icon[*] in the naming convention is optional and allows the Control Dev to specify multiple sizes of the image that is used as the icon. The match follows the following algorithm:
      1. Vector XAML
      2. If there is an exact match on size (both dimensions) use it
      3. Use the closest match based on size and aspect ratio
   5. If a given resource file is not valid XAML or a valid image file, the next match will be used until one is found.
2. If an image is not found in the same namespace as the control, a loose match based on the type name alone will be searched for against all of the resources, as in the SDK case.
3. Different hosts use different image sizes for their toolbox icon.
   1. Blend uses 24x24 for their large size and 12x12 for their small size (I don't think this is working in Blend 2 SP1)
   2. Cider (Visual Studio) uses 16x16

The blog post Specifying a Toolbox Icon for a Control in WPF Designer describes the naming convention in more details.

 

Hope this helps. Thanks!

Technorati Tags: Silverlight,Silverlight Toolkit,Visual Studio,Blend,Design,Toolbox Icon

Upgrade to WordPress

Per strong recommendation from my colleagues, I've ported this blog to http://www.ningzhang.org, a self host WordPress blog. This blog (http://blog.ningzhang.org, hosted by Blogger) will remain, but probably will not be updated. I will make new postings to the new blog site, so please bookmark http://www.ningzhang.org instead. I also re-mapped my feedburner feed http://feeds.ningzhang.org/ningzhangsblog to point to the new site, so existing subscribers don't have to change anything. Hopefully this all woks out smoothly.

I have been busy working on our MIX09 release, so blogging may be light till after MIX in March.

Thanks,

-Ning

 

Update (4/10/2009)

I am surprised to see (from Google Analytics and Feed Stats) that there have been consistent high page views and some subscribers to this blog site for the past several months, so I will cross post here as a backup to my new blog site (http://www.ningzhang.org).  Please note that all new postings are first published to my new blog site and optimized for that view, so they may not look as good here.