Tweened

• French version

In a joint production of Regart.net and Microsoft, I participated with Boris Forconi, in developing a plugin for wordpress. The idea was to create a Silverlight gallery in wordpress using the API but by developing the gallery itself in Silverlight. It is partially based on the one made by Tim Heuer. Boris has occupied any part of PHP and Wordpress integration. For my part, I developed the Silverlight gallery. The goal is to provide a simple way to put pictures online nicely for Wordpress blogs as shown below:

Just write a tag like : [sl-gallery: ...]

You can set parameters as shown in the example below :

• width=400
• height=400
• leftArrow=true
  //show/hide left arrow
• rightArrow=true
  //show/hide right arrow
• pageNumbers=true
  //affiche ou cache la pagination
• thumbnails=true
  //show/hide thumbnails
• fill=uniform
  / / used to indicate a way of filling you can choose between:
  / / Uniform (homothetic part by filling ability)
  / / UniformToFill (filling with homothety)
  / / Fill (filling with deformation dimensions)
  / / None (preserves the original dimensions)
• bgcolor
  //set the background color
• bgmode
  // set the background mode(windowless)

The first good news is that it is possible to use a menu to set it all in 2 seconds. It adds to the administration of sections Wordpress. A small window appears when you click the button (see below).

The second good news is that we will quickly sources available on wordpress.com. This way you can completely change the visual side of the gallery Silverlight. In all cases, it dynamically retrieves images from the gallery Wordpress. You can download a first version here.

• French version

I put online two new components outlined below :

You can download the tweenedcontrols library here.

ColorChooser

Since its beta version, this control has been greatly improved. It is now possible to click directly on the surface of the two swatches to select a color. The property is SelectedColor this time of type Color. This greatly simplifies the code and avoids the usage of an IValueConverter class.

ColorPicker

That component is intended to make a ColorChooser appear when user click on it, with the help of an instance of Popup. The whole problem was to place the ColorChooser beside the ColorPicker in any case. To this end, I've created a method of  extension for Class Popup. It is also possible to access to the style and template of ColorChooser directly through the menu Template Edit => Edit Template Aditional as shown below.

ColorPicker has the IsOpen dependency property coupled with Opened and Closed events. Apart from this trick this class exposes properties and events of a ColorChooser.

[silverlight: http://www.tweened.org/wp-content/uploads/applis/TestColorControls.xap, 540, 323,3.0.40818.0]

• French version

I recently completed writing my book Silverlight Practice wich is dedicated to technology of the same name. It should be over 500 pages and focuses on learning good practices and team production. It is published by Pearson Education France and released February 2, 2010. I have not designed as a glossary of features but rather as a production guide and learning. He draws a sketch of the design of Silverlight applications, starting from the display list to loading external data in the design model MVVM through prototyping or organizational workflow.

The general idea of the book is to provide concrete examples downloadable for both designers and for developers. You can reserve a copy on the website of Pearson France here.

This book is for Web integrators, interactive designers, graphic designers and pure web developers unfamiliar platform. Net. It creates a bridge between development and design, to improve collaboration and productivity.

Its content takes into account the specificities of developers and designers of interactive forms of complementary exercises. The C # is chosen as the only logical language for clarity. The theory, examples and exercises (downloadable) are progressive and can be a learning base for non-developers. However this is not a book for beginners Web, but to those who have acquired bases on other technologies.

Here is the summary of the book:)

Part I. Approach Silverlight

1. Introduction
1.1 What does Silverlight?
1.2 In. Net 1 to Silverlight
1.3 The benefits of Silverlight
1.4 The Expression Studio
1.5 Positioning business
1.6 Development language and choice

2. The couple XAML / C #
2.1 XML
2.2 XAML, a declarative language powerful
2.3 The fundamentals of C #

3. HelloWorld
3.1 A first Silverlight application
3.2 Architecture of a solution
3.3 The root container
3.4 Add Text
3.5 Test and compile

4. A site full screen in 2 minutes
4.1 type projects website
4.2 Creating resizable containers
4.3 The component button
4.4 Add interactivity
4.5 Files deployed

5. The visual and logical tree
5.1 Components Visual
5.2 Principle of Nesting
5.3 Adding children to the display list
5.4 Remove objects from the visual tree
5.5 Exchange index

Part II. Interactivity and graphic design

6. Animation
6.1 Introduction
6.2 Animating with Expression Blend
6.3 Managing acceleration
6.4 Animating with C
6.5 The transformations on
6.6 Animate particles

7. Buttons
7.1 Create a video player
7.2 Visual Style
7.3 Generic Button
7.4 The manager of visual states
7.5 The switch or button ToggleButton

8. Interactivity and event model
8.1 The foundations of event model
8.2 withdrawn listening to an event
8.3 The weak coupling in practice
8.4 Event Propagation
8.5 The behavior

9. The basics of 3D projection
9.1 The 3D environment
9.2 The properties of 3D
9.3 The camera
9.4 Introduction to matrices

10. Prototyping dynamic SketchFlow
10.1 The Environment
10.2 Simple Prototype
10.3 The player SketchFlow
10.4 Interactivity
10.5 Interface rich

Part III. Designing rich applications

11. Graphic Resources
11.1 What is a resource
11.2 brushes
11.3 Fonts
11.4 Styles and component models
11.5 The model Slider
11.6 connections
11.7 The model ListBox

12. Custom Components
User Control 12.1
12.2 Connection Box
12.3 Custom Controls

13. Media and Data
13.1 Loading media
13.1.1 Dynamic loading of images
13.1.2 video formats and modes of dissemination
13.1.3 A simple video player
13.1.4 Dynamic Loading videos
13.2 Design MVVM
13.2.1 Principles
12.2.2 Model
12.2.3 Model-View
13.3 Loading Data
13.3.1 The object WebClient
13.3.2 Introduction to LINQ
13.3.3 Lambda Expression
13.3.4 Consuming XML with LINQ
13.3.5 Loading a JSON feed
13.3.6 Cross Domain Security

• French version

For the purposes of a recent production, I had to design a control named PieProgressBar. This class inherits RangeBase and as such has all the capabilities inherent in this type of control. It behaves in the end like any type ProgressBar control with a few more things. The hard part was to create dynamically pie in C #. Unlike WPF, Silverlight does not allow to override method to create new kinds of Shape. In other words, even if Shape is an abstract class, it is useless to inherit because the method of route design can not be overloaded.
The other technique is to use the "Path mini language" for creating geometric shapes in XAML. I had to use 3 segments with a ArcSegment to achieve this control. as I could not create primitive Pie for the designer in Blend, it took cunning ... The technique involves creating a pie chart dynamically when assigning a control part (ControlPart). Internally, the properties of filling the route generated, are related to properties of the control via a simple data binding created in C #.
You can see some examples below and download the library tweenedcontrols here.

Once the dll referenced, you can instantiate the control PieProgressBar in Blend through the Assets panel as shown below:

This component will probably be included as others in the CodePlex project SLExtensions. Thierry Bouquain updates it at this time and I welcome the move

• French version

Recently, I had to use Silverlight shaders for my personal needs, that article explains memory and CPU usage when you define shaders on objects.

First, each time you apply one of the shaders provided by default (DropShadow and Blur)  on a UIElement, actually you generate two bitmaps into RAM at runtime. The first bitmap is a simple rasterization of the UIElement, the second bitmap is that bitmap with the effect applied to it. In terms of performance, that behavior, wich is logic, can lead to some issues if you don't take care about few points :

First, we can calculate the memory used by an effect applied to a 200 * 200 UIElement. We consider that each pixel (40000) are encoded into 4 bytes :

• Alpha is coded on 1 byte (called octet in french) and 8 bits, leads to 256 possible values from 0 to 255 or 0x00 to 0xFF in Hexadecimal
• Red | 1 byte | 8 bits | 0xFF | 0-255
• Green | 1 byte | 8 bits | 0xFF | 0-255
• Blue  | 1 byte | 8 bits | 0xFF | 0-255

The first rasterized bitmap is contained by the RAM as it is made at runtime. As there's no compression for it you can calculate his weight with the formula below :
PixelsWidth * PixelsHeight * 4 Bytes = total weight of the intermediate bitmap in RAM

In our case the bitmap is about 160 Kbyte, but it's just the first bitmap. The second will at least take 160 kBytes plus extra size needed to render effect. The total size is about 400 kbyte if you consider that these effect create a bigger  rendered surface area than the original bounding box does.

Concerning customs pixels shaders, the behaviors is slighty different as there's a direct rasterisation wich creates by the way, a single bitmap into memory. This is a pretty good advantage in terms of memory usage but CPU usage increases. Indeed, the intermediate bitmap is here to aleviate CPU as it avoid to calculate it each time for translate transforms. When you translate an UIElement wich displays an effect, the intermediate bitmap is not recreated. For other operations, it is always regenerated. For example, if you decide to animate the scale or rotation or skew of a rectangle, the intermediate bitmap will be recreated each time. For a 60 max fps, Silverlight will create about 60 intermediate bitmaps and 60 bitmaps with final effect. Designers and developers must take care about that, as memory and CPU charge could increase drasticly and reduce performances... To avoid or limit that behavior, Microsoft has limited the max size of an effect to 2048 pixels for width and height.

All bitmaps, including intermediates, hang around for the life of the Effect+UIElement pairing. When the Effect is removed or a UIElement destroyed, all surfaces are released at once. CacheMode (bitmap cache) or 3D usage will create intermediate bitmaps in every way.

Jason Prado in charge at Microsoft on that topic kindly helps me to clarify some Silverlight behaviors concerning shaders. You will find some best practices below :

* Smaller area is better.

* The most important thing is to not trigger rerasterization of a UIElement. Rerasterization means we have to run the effect again, and both of these steps are expensive. Many changes, e.g. changing the color of a Rectangle, trigger rerasterization.

* Don't run effects on elements that change every frame. Trigger rerasterization as rarely as possible..

* BlurEffect is slow. It's a separated two-pass gaussian blur, but it is still an inherently slow operation if you want visual quality that is at all passable. Keep the radius low. At Radius >= 10, you start to notice serious performance degradation.