Expression Blend 3: Sample Data & Data Binding

Expression Blend 3 introduces new databinding experience, generating data and many other data-related improvements. Read this post.

Useful links

New Silverlight 3 / Blend 3 Video Tutorial – Working with Data

Unni

• Introducing sample data support in Blend 3
• DataGrid support in Blend 3
• Blend 3 Databinding
• Introducing sample data for Developers

Kirupa Chinnathambi

• Element to Element Data Binding - Page 1
• Element to Element Data Binding - Page 2

SilverZine

• How to Create Sample Data in Blend 3
• Simple Data Binding in Blend 3

Corey Schuman

• Overview of Sample Data in Blend 3

ISV Developer Community

• Blend 3 – Great Feature #2 – Master/Details Screens
• Blend 3 – Great Feature #3 – Silverlight Element Binding

Evgeny

• Expression Blend 3 – secrets of working with data
• Expression Blend 3 – secrets of working with data 2

Others

• Silverlight & Blend 3 Sample Data
• Styling a TreeView in Silverlight 3 and Blend 3
• How To Get a Silverlight 3 AutoCompleteBox To Show Sample Data in Blend 3

Samples

I have created four samples with data binding and sample data:

SimpleBinding

MasterDetails

HierarchicalCollection

DataGrid

and I’ve tested Unni’s sample with design data:

Expression Blend 3: Adobe PhotoShop and Adobe Illustrator Support

With the introduction of Expression Blend 3 comes the ability to import both Adobe Photoshop (.psd) files and Adobe Illustrator (.ai) files directly into your projects (layers, shapes, text elements and more)

Some useful links about these features:

Starter Kit: Venture into Gaming with Behaviors in Expression Blend 3 (first module)

Janete Perez

• Blend 3: Introduction to Importing Photoshop Files
• Blend 3: Photoshop Import- Supported Features
• Blend 3: Photoshop Import – Merging Layers

SilverZine

• Import Photoshop files to Blend 3

I have imported Photoshop file with some image layers, vector shapes and layer mask. Dialog with file settings and DJ imported into Blend’s artboard below.

Deep Zoom Composer: Collection support & Extensible templates

Kirupa Chinnathambi, a program manager in the Expression Blend team, has written excellent posts about collection support and extensible templates in Deep Zoom Composer. I have tested all these new features.

Collection Support

You no longer have to compose your images. You can just import your images and go straight to exporting using options: Silverlight Deep Zoom –> Export as a collection –> Tag Browser. To filter what images you see based on the tag, you should add tags in Compose view:

Extensible templates

Now you can export Silverlight Deep Zoom collection using predefined templates:

• Blend 3 Behaviors + Source
• Deep Zoom Classic + Source
• Deep Zoom Navigation (Default)
• Empty Project + Source
• Tag Browser

The process of selecting a template from within DZC is extensible. You can easily add your own templates with or without Source Files/Project. You should copy your files to Export Templates folder (in DZC installation directory) and restart DZC.

I have set blue background in my test templates.

The latest release of Deep Zoom Composer has other interesting new features. Analytics tracking allows you to specify tracking URLs that will silently get called when you zoom in on an image or region. You can know which images of advertisement get the most attention. Another feature is support for Smooth Streaming.  Now you can export your images into a form that is optimized for servers with the technology enabled.

Deep Zoom Composer: Slideshow, Menu & Links

The Deep Zoom technology in Silverlight can be used to do a lot more than just allowing you to zoom in on high resolution images. Using Deep Zoom Composer you can now create slideshows, link images to other images or external links, and create a menu for navigating to images. For more details please read this post.

Janete Perez, a program manager in the Expression Blend product team, has written excellent posts about these cool features:

• http://blog.sunnypixels.com/?p=197
• http://blog.sunnypixels.com/?p=211
• http://blog.sunnypixels.com/?p=226

I’ve tested all these features, too. Look at my image compositions below.

Slideshow

Menu

Links

Silverlight Toolkit July 2009: Rx Framework !

The .NET Reactive Framework (Rx) uses Linq to build asynchronous code declaratively. It will be part of .NET 4.0. As of today the only place you can get it is in the Silverlight Toolkit sources (System.Reactive.dll  in the bin folder of the Silverlight Toolkit Unit Tests). The Silverlight Toolkit team is using Rx to write reliable, event-based asynchronous tests.

Jafar Husain, a developer on the Presentation Platform Controls team at Microsoft, has written very interesting posts about Rx Framework with many practical examples:

• http://themechanicalbride.blogspot.com/2009/04/rx-framework-asynchronous-programming.html
• http://themechanicalbride.blogspot.com/2009/07/introducing-rx-linq-to-events.html
• http://themechanicalbride.blogspot.com/2009/07/developing-with-rx-part-1-extension.html
• http://themechanicalbride.blogspot.com/2009/07/developing-with-rx-part-2-converting.html
• http://themechanicalbride.blogspot.com/2009/08/joy-of-rx-building-asynchronous-service.html

Erik Meijer has discovered that IEnumerable has a dual characteristic: as one can pull a piece of data from a collection, he can also push one into the same collection. So the Observable pattern and the Iterator pattern are the same pattern !!!  But IEnumerable can’t be used in asynchronous operations because it blocks and the team has introduced a new pair of interfaces: IObservable and IObserver.

Rx allows you to write complex, asynchronous code declaratively. With  Linq to IObservable you can transform and combine events and async callbacks to create the precise event you’re interested in. Then you register a handler and do something with the data. Rx enables you build complex events from a sequence of primitive events (f.e click, drag & drop) !

The framework includes lots of methods for constructing observables and observers. Converting events to IObservables is very easy. Rx provides a static Observable.FromEvent method. It's good practice to create extension methods for each event you would like to query (extension events).

Silverlight Toolkit July 2009: New controls

The newest Silverlight Toolkit includes some new controls and extensions. Please read this post for more information.

There are three new controls: GlobalCalendar, Rating and TreeMap.

GlobalCalendar

A GlobalCalendar control provides an easy way to style individual days and define custom Gregorian calendars. It can be used on its own, or as a drop-down part of a DatePicker control.

Rating

It can be used to display or allow users to interactively select a rating value. Ratings can be whole or partial stars. By default the control displays stars but can be easily styled.

TreeMap

It can display hierarchical data as a set of nested rectangles. Each item in the hierarchy is laid out in a rectangular area of a size proportional to the value associated with the item.

• http://blogs.msdn.com/marlat/archive/2009/07/10/treemap-control-comes-to-silverlight-toolkit.aspx
• http://blogs.msdn.com/delay/archive/2009/07/10/silverlight-charting-gets-an-update-and-a-treemap-silverlight-toolkit-july-2009-release-now-available.aspx
• http://blogs.msdn.com/marlat/archive/2009/08/06/treemap-in-silverlight-toolkit-how-to-write-your-own-interpolator.aspx

The data for my samples is Silverlight course topic list. The metrics are quantity and importance.

ItemDefinition (topics by quantity)

ItemDefinitionSelector [levels] (topics by quantity)

ItemDefinition & Interpolators (topics by quantity and importance)

ItemDefinitionSelector [regions] & Interpolators (topics by quantity and importance)

July release provides useful extensions: ItemsControlExtensions, ScrollViewerExtensions and TreeViewExtensions. For more information look here.

Silverlight Toolkit July 2009: DataForm & controls introduced in previous release

There are many changes in Silverlight Toolkit July 2009 release. Some controls and types have been removed from the Silverlight SDK and  they are now in the toolkit (f.e DataForm). Controls introduced in March release have been refreshed. There are also new controls and extensions. Today I’ll write about new DataForm and some refreshed controls.

DataForm

DataForm provides a flexible way to display a single object of or collection of data in a form and to interact with the object(s).  It allows IEditableObject support, for the committing or cancelling of changes; it allows field- and entity-level validation through the consumption of attributes. For more information see the links below.

• http://blogs.msdn.com/rickyt/archive/2009/07/13/silverlight-3-released-and-introduction-to-dataform.aspx
• http://www.silverlightshow.net/items/Silverlight-3-RTW-overview.aspx
• http://silverlight.codeplex.com/Wiki/View.aspx?title=Silverlight%20Toolkit%20July%202009%20change%20list
• http://msdn.microsoft.com/en-us/library/cc645049(VS.95).aspx

I’ve build four simple examples (screenshots below) to test some features: single object and collection displaying, validation, autogenerated UI, EditTemplate with grouped DataFields, EditTemplate without DataFields, ReadOnlyTemplate. Grouping fields with standard containers is cool!

Accordion, DomainUpDown, TimePicker, LayoutTransform, TransitioningContentControl

There are not big changes in these controls. However, I have noticed some differences when I updated samples with Accordion, DomainUpDown and TimePicker. For example Accordion bug with HeaderTemplate binding has been fixed.

New features in Silverlight 3: New controls

DataGrid paging… Modal window… Saving file…. Look at this post.

Silverlight 3 runtime and SDK introduce new controls: AutoCompleteBox, ChildWindow, DataPager, DescriptionViewer, Frame, HeaderedItemsControl, Label, Page, SaveFileDialog, TreeView, ValidationSummary, VirtualizingStackPanel. Some of these controls were previously released as part of the Silverlight Toolkit and some I have been presented in my previous posts here and here.

The zip file contains examples of use of three controls: ChildWindow, DataPager and SaveFileDialog. 

The DataPager control provides a configurable user interface for paging through a data collection. You can bind the DataPager to any IEnumerable collection, but to provide paging functionality, you should wrap it in the PagedCollectionView class. To use a DataPager to page through data in another control, you assign the control's ItemsSource property and the DataPager.Source property to the same data collection. It’s very easy, isn’t it?

• http://msdn.microsoft.com/en-us/library/cc645075(VS.95).aspx
• http://msdn.microsoft.com/en-us/library/system.windows.controls.childwindow(VS.95).aspx
• http://msdn.microsoft.com/en-us/library/system.windows.controls.datapager(VS.95).aspx
• http://msdn.microsoft.com/en-us/library/system.windows.controls.savefiledialog(VS.95).aspx

New features in Silverlight 3: Bitmap API & AddHandler

Taking snapshot of playing video …  Handling already-handled route event …. Silverlight 3 has many new features, hasn’t it?  Read my post about these two features.

Bitmap API

One of the new features in Silverlight 3 is the Bitmap API which provides the ability to render UIElements to a bitmap and provides direct access to the pixel level information of bitmaps. It is useful for taking snapshots of playing video, generating fractals, and for data visualization. The key to generating a bitmap is the WriteableBitmap class. Note that it does not render popup controls, such as Popup, ToolTip and ComboBox.

• http://community.irritatedvowel.com/blogs/pete_browns_blog/archive/2009/03/18/Silverlight-3-_1320_-The-Bitmap-API-_2F00_-WriteableBitmap.aspx
• http://www.smartypantscoding.com/content/rendering-text-writeablebitmap-silverlight-3s-bitmap-api
• http://msdn.microsoft.com/en-us/library/system.windows.media.imaging.writeablebitmap(VS.95).aspx

Routed Events: AddHandler

The API AddHandler provides a technique whereby you can attach a handler that will always be invoked for the route, even if some other handler earlier in the route has set Handled to true. This technique is useful if a control you are using has handled the event in its internal compositing or for control-specific logic but you still want to respond to it on a control instance, or higher in the route.

In order to use AddHandler, the routed event must expose a public static field that is the event identifier, which is required for the routedEvent parameter. This is only true for a limited set of events in the Silverlight core classes: KeyDown; KeyUp; MouseLeftButtonDown; MouseLeftButtonUp. Do not use Loaded event and AddHandler; Loaded is not a true routed event in the Silverlight implementation. MouseMove cannot be used with AddHandler because there is no Handled in its event data. BindingValidationError cannot be used with AddHandler because there is no event identifier, and also because there is no control handling of the event.

• http://msdn.microsoft.com/en-us/library/cc189018(VS.95).aspx#input_event_handlers_in_controls
• http://msdn.microsoft.com/en-us/library/ms598899(VS.95).aspx

New features in Silverlight 3: Browser Zoom Support & Hardware Acceleration

In this post, I’ll write about two new Silverlight features: Browser Zoom Support and Hardware Acceleration.

Browser Zoom Support

By default, Silverlight-based content resizes in response to changes in the browser zoom setting. You can disable this feature by setting Settings.EnableAutoZoom to false, or replace it by handling the Zoomed event. If you want to supplement the zooming feature instead of replacing it, handle the Zoomed event and set EnableAutoZoom to true. You can access the zoom setting for the current browser window through the ZoomFactor property.

• http://blogs.microsoft.co.il/blogs/alex_golesh/archive/2009/07/10/silverlight-3-quick-tip-browser-zoom-support.aspx
• http://msdn.microsoft.com/en-us/library/system.windows.interop.settings.enableautozoom(VS.95).aspx

Hardware Acceleration

Caching visual elements as bitmaps allows you to take advantage of hardware acceleration.

Hardware acceleration can benefit performance for the following scenarios:

• Blending two static layers using opacity
• Transforming objects (f.i stretching a VideoBrush, stretching and rotating objects)
• Video

The GPU acceleration feature works only in managed code.

At the object level, you set cached composition information for graphics with the CacheMode property and BitmapCache values. But the GPU acceleration must be enabled at the Silverlight plug-in level, and by default the feature is disabled. Set EnableGPUAcceleration to true to enable GPU acceleration.

During profiling of application, you can set EnableCacheVisualization (Silverlight Plug-in Object) to true to produce an overlay visualization of the areas in your UI that are being hardware accelerated. Areas where optimisations are not being applied will be coloured (red) whereas areas where the optimisations are being applied will use their usual colours.

Caching objects can hurt performance if you misuse it. You only set CacheMode on objects that are either being transformed or having opacity changes applied because otherwise the object will not benefit from caching and performance could be worse than if you did not cache it.

• http://mtaulty.com/CommunityServer/blogs/mike_taultys_blog/archive/2009/04/16/silverlight-3-and-gpu-acceleration.aspx
• http://msdn.microsoft.com/en-us/library/ee309563(VS.95).aspx
• http://msdn.microsoft.com/en-us/library/dd833062(VS.95).aspx
• http://msdn.microsoft.com/en-us/library/dd833081(VS.95).aspx

EnableGPUAcceleration = false EnableGPUAcceleration = true, EnableCacheVisualization = true, CacheMode = null EnableGPUAcceleration = true, EnableCacheVisualization = true, CacheMode = BitmapCache