Silverlight Recipes

Sunday, March 8, 2009

Adding RTL Support to Silverlight Using SilverlightRTL Library – Part 1

In the previous post, options to display Arabic text with Silverlight has been explored. In this post we will explore how to use the Open Source SilverlightRTL library available from http://www.codeplex.com/silverlightRTL to add RTL support for Silverlight Applications.

Using SilverlightRTL From Visual Studio
First you will need to download the bits from CodePlex site, you can either download the latest release from http://silverlightrtl.codeplex.com/Release/ProjectReleases.aspx or if you want the most recent update, you can download the source code from http://silverlightrtl.codeplex.com/SourceControl/ListDownloadableCommits.aspx. I recommend download the source code, so you get the latest updates, and you can debug into the source code if you happen to face any problem.
Now add reference to the BidiControls assembly or the project if you are using the source code directly from your project.
The next step is to add a namespace reference to your XAML file. Please note that you need to compile the project first if you are using project reference or intellisense to work. The XMLNS declaration should look like the following snippet:

        1: clr-namespace:System.Windows.BidiControls;assembly=BidiControls
  

And Visual Studio screen should look like the following figure:

Now you can declare a BIDI control by prefixing the control with bidi: namespace, for example:

       1: <bidi:TextBlock Text="أهلا عالم" FontSize="18" />
  

Using SilverlightRTL from Blend

Firstyou will need to add reference to the BidiControls.dll assembly or the System.Windows.BidiControls project. To add a control You can open the “Asset Library” at the bottom of the Toolbox. Select “Custom Controls” tab. You should find the BIDI controls available. You can search for a specific control using search box. The following screenshot shows that

Please stay tuned. I will post more about the specific controls implemented, how you can use and style them, and how the controls were implemented.

Monday, February 16, 2009

Displaying Arabic Text in Silverlight

When it comes to typography Arabic has a distinctive rich set of features coming from a long history of calligraphy as the center of Arabic art. If you are interested in more information about Arabic calligraphy, you can check Wikipedia's article about the subject http://en.wikipedia.org/wiki/Islamic_calligraphy.

So let's talk more specific about these features that makes Arabic language so special, and difficult to implement especially in a platform independent platform like Silverlight.

The first and most obvious feature is the RTL (Right to Left) or more precisely the Bidirectional nature of Arabic, and other scripts like Urdu, Persian, and Hebrew. RTL languages as the name suggests are written primarily starting from right to left, which presents a challenge to Software platforms designed to render the Latin languages from left to right. In the simplest case the solution to render Arabic text correctly is by reversing the characters order in the string array, but in real RTL text the situation is more complicated than that. First the text needs to be split into separate paragraphs, numbers needs to be preserved in LTR order, if there is Latin text mixed with the RTL text, its order needs to be preserved. Unicode standard has an annex with details for the algorithm of handling bidirectional text including how to handle special Unicode control characters that affects the text rendering. You can find the Annex here http://www.unicode.org/reports/tr9/.
Shaping is the second challenge in implementing Arabic support, shaping refers to the fact that Arabic characters are rendered to a different glyph according to its position. So let me explain the difference between characters and glyphs first. Character are an abstract representation of a piece of information, this can be a letter, number, punctuation mark, or a control character. Glyph is the visual representation of characters, a glyph can be a ligature which is a combination of more than one character, or it can represent a single characters, or in the case of control characters, no visual glyph is associated with them. So in Arabic the letter Ha' for example can be represented as one of the following four glyphs based on its position in the word

Ligature is another challenge where character sequence like Lam, Alef must be represented as a single glyph. Ligature can greatly improve the aesthetics of a word, the following picture shows a series of characters with ligature on the right, and on the left the same characters without ligature

Tashkeel or Harkat refers to special characters that controls how a word is pronounced. The Tashkeel character needs to be placed above or under a character. The following picture shows how the position of the Tashkeel character is adjusted according to the height and depth of the affected character

In this blog post I will talk about different options to display Arabic text in Silverlight, and the pros and cons of each. In a future post I will talk about options for text input, and adding Arabic support to controls like Button, Calendar, and DataGrid.

The simplest method to display Arabic text in Silverlight is to display it as an image. This has the obvious problem of the big size and lack of scalability of the bitmaps, but it may be a good option when you are trying to display an artistic text that can not be displayed using computer glyphs, this link shows an example of such text http://en.wikipedia.org/wiki/File:Mirror_writing2.jpg.

Another option to work around the limitation in Silverlight is by overlaying HTML text over the Silverlight content. This requires the Silverlight plugin to be configured in windowless mode which affects the application performance, also the text will have the limitation of the DHTML experience, but this option may be the way to go if you are using Silverlight 1.0.

The third option is to use the SilverlightRTL library available on CodePlex at http://www.codeplex.com/SilverlightRTL. You can use the TextBlock control included in the library. You will get integrated experience where you can use all the features of Silverlight with the control like Animation, Brushes … etc. The drawback of this approach is that currently optional ligature is not implemented, the only ligature available now is the mandatory Lam-Alef ligature. Also Tashkeel characters is not displayed correctly because Silverlight will display the Tashkeel glyph beside the affected glyph and not over or under it. Arabic-Indic numbers are not supported yet too.

The fourth option is to use the Glyph element, which gives extreme control over how the text will be displayed. It can let you specify the indices of the glyph to be displayed, which can be used to implement optional ligatures. The offset of the glyph can be specified, which can be used to properly display Tashkeel characters. The problem with the Glyph approach is that it is not easy to retrieve the glyph indices for a font, and set the offset manually, one way to achieve that is to print the text as XPS and collect the Glyph element from the .fpage file in the XPS file (XPS files are simply zip files, you can find an fpage file, which is a XAML file representing a page).

The fifth option is to render the text as a path. This gives extreme flexibility in defining the appearance of the text, and you can even animate the path nodes to make the text dance. The drawback of this approach is that to render the text with good quality you will need great number of nodes which will bloat the size of the content, and will overload the rendering engine if there is much text. You can get the path for the text using Vector design application like Illustrator, Expression Blend has a convert text to path feature, but unfortunately it does not work with Arabic text.

In conclusion, there are many options to display Arabic text in Silverlight, each with some advantages and limitations. My recommendation is to use Glyphs when possible, which is mostly feasible with static text, but for text coming dynamically from a DataBase for example SilverlightRTL library may be the best option.

Thursday, March 6, 2008

Silverlight 2.0 Deep Zoom using MultiScaleImage Control

This is my first Silverlight 2.0 tutorial. I have seen MIX keynote yesterday and was really impressed with Hard Rock's Memorabilia sample http://memorabilia.hardrock.com/. I tried to reproduce the sample but could not find any documentation about Deep Zoom. After some search, I found a tool released by Microsoft called "Deep Zoom Composer". You can download the tool from here . And you can get the user's guide from here. The composer is very simple, you will import your images, arrange your photos, then export. These steps went smoothly, but I didn't know what I am supposed to do with the exported output, but after some hacking I could display the image, zoom in and out, and move the canvas. So I decided to share how I accomplished these tasks.

Displaying Deep Zoom Content

This is the simplest task, all you need to do is inserting a MultiScaleImage control and set its Source property. But there are a couple of tricks here, first you need to copy the folder that "Deep Zoom Composer" generated to your clientbin folder. The second is that the Source property should refer to your items.bin file if you exported your content with "Create Collection" option selected, or info.bin file otherwise.

Zooming
You can zoom either by using ViewPortWidth property, or better using ZoomAboutLogicalPoint method, the method takes zooming factor, and logical x, y co-ordinates to zoom around. The following code sample shows how to use this method

if (!isCtrlDown)
                    this.DeepZoom.ZoomAboutLogicalPoint(1.5, this.DeepZoom.ElementToLogicalPoint(e.GetPosition(this.DeepZoom)).X, this.DeepZoom.ElementToLogicalPoint(e.GetPosition(this.DeepZoom)).Y);
                else
                    this.DeepZoom.ZoomAboutLogicalPoint(0.75, this.DeepZoom.ElementToLogicalPoint(e.GetPosition(this.DeepZoom)).X, this.DeepZoom.ElementToLogicalPoint(e.GetPosition(this.DeepZoom)).Y);

The isCtrlDown field is set in the KeyDown, KeyUp events of the root canvas. I have tried setting the events on the MultiScaleImage control, but it did not fire, not sure why, here is the code
        private void DeepZoom_KeyDown(object sender, KeyEventArgs e)
        {
            if (e.Key == Key.Ctrl)
                isCtrlDown = true;
        }

        private void DeepZoom_KeyUp(object sender, KeyEventArgs e)
        {
            if (e.Key == Key.Ctrl)
                isCtrlDown = false;
        }

Moving Content
This is the most tricky part because of the logic needed to handle dragging. But when it comes to the MuliScaleImage control, it is relatively easy and require only one line of code to modify the ViewportOrigin property, here is some sample code
            if (isDragging)
            {
                Point newOrigin = new Point();
                newOrigin.X = this.DeepZoom.ViewportOrigin.X - ((e.GetPosition(this.DeepZoom).X - lastMousePosition.X)/this.DeepZoom.ActualWidth);
                newOrigin.Y = this.DeepZoom.ViewportOrigin.Y - ((e.GetPosition(this.DeepZoom).Y - lastMousePosition.Y) / this.DeepZoom.ActualHeight);
                this.DeepZoom.ViewportOrigin = newOrigin;
            }
You can download the complete sample project with source code from here

Tuesday, November 27, 2007

Silverlight 1.0 Animation: Checkerboard, blinds, and comb

This post describes how to create a Silverlight 1.0 based checkerboard, blinds, and comb animation. The effect is added to my animation library so you can reuse the effect using a single line of code. You can download the complete source from here. Below is a working sample.

Recipe:

To create your own checkerboard animation using my animation library download the source code and include Animator.jas and XamlObjectFactory.js in your project and reference them in your Silverlight host page. To create an across checkerboard effect, use the following line:

SilverlightRecipes.Animator.checkerAcross('CheckerAcross', sender.findName('ToAnimate'), '1', 10, 10);

The first parameter is a unique ID for the animation storyboard. The ID is required because storyboards added to a UIElment resources must be named. The second parameter is the animation target. The target can be any UIElement. The third parameter is the animation duration in seconds. The third parameter is the number of horizontal checkers, and the fourth parameter is the number of vertical checkers.

To create a top down checkerboard animation use the following line of code:

SilverlightRecipes.Animator.checkerDown('CheckerDown', sender.findName('ToAnimate'), '1', 10, 10);

To create a vertical blinds animation use the following line of code:

SilverlightRecipes.Animator.blindsV('BlindsV', sender.findName('ToAnimate'), '1', 10);

To create a horizontal blinds animation use the following line of code:

SilverlightRecipes.Animator.blindsH('BlindsH', sender.findName('ToAnimate'), '1', 10);

To create a vertical comb animation use the following line of code:

SilverlightRecipes.Animator.combV('CombV', sender.findName('ToAnimate'), '1', 20);

To create a horizontal comb animation use the following line of code:

SilverlightRecipes.Animator.combH('CombH', sender.findName('ToAnimate'), '1', 20);

The idea behind these animations is to use multiple wipe animations with different clippings, start times, and durations to generate the desired effect. For example the clipping for 2*2 checkerboard is a PathGeometry with four PathFigure instances to represent each rectangle of the checkerboard:

<PathGeometry.Figures>

<PathFigure.Segments>

</PathFigure.Segments>

</PathFigure>

<PathFigure.Segments>

</PathFigure.Segments>

</PathFigure>

<PathFigure.Segments>

</PathFigure.Segments>

</PathFigure>

<PathFigure.Segments>

</PathFigure.Segments>

</PathFigure>

</PathGeometry.Figures>

</PathGeometry>

And the animation is done by a single storyboard with three PointAnimation instances to generate the wipe effect. The following is an example for a 2*2 checkerboard animation:

</Storyboard>

Wednesday, November 7, 2007

Easy Silverlight 1.0 Animations: Wheel

This post describes how to create a PowerPoint like wheel animation using Silverlight 1.0. The effect is added to my animation library so you can reuse the effect using a single line of code. You can download the complete source from here. Below is a working sample.

Recipe:

To create your own wheel animation using my animation library download the source code and include Animator.jas and XamlObjectFactory.js in your project and reference them in your Silverlight host page. To create a wheel with a single spin, use the following line:

SilverlightRecipes.Animator.wheel('WheelSingle', sender.findName('ToWheel'), '1');

The first parameter is a unique ID for the animation storyboard, the second parameter is the object to animate. It can be any UIElement like Canvas, Image, TextBlock, or MediaElement. The last parameter is the animation duration in seconds[.fractionalSeconds].

To create 2 spin wheel animation use the following line:

SilverlightRecipes.Animator.wheel2('Wheel2', sender.findName('ToWheel'), '1');

To create 4 spin wheel use the following line:

SilverlightRecipes.Animator.wheel4('Wheel4', sender.findName('ToWheel'), '1');

To create 8 spin wheel use the following line:

SilverlightRecipes.Animator.wheel8('Wheel8', sender.findName('ToWheel'), '1');

This animation is done by creating a PathGeometry with multiple Figures. Each figure is a triangle drawn with two line segments and IsClosed property set to true. The two lines are initialized with the same coordinates. The following example shows the initial clip for a single spin wheel animation for a 400*270 Rectangle

<Rectangle.Clip>

<PathGeometry.Figures>

<PathFigure.Segments>

</PathFigure.Segments>

</PathFigure>

<PathFigure.Segments>

</PathFigure.Segments>

</PathFigure>

<PathFigure.Segments>

</PathFigure.Segments>

</PathFigure>

<PathFigure.Segments>

</PathFigure.Segments>

</PathFigure>

<PathFigure.Segments>

</PathFigure.Segments>

</PathFigure>

</PathGeometry.Figures>

</PathGeometry>

</Rectangle.Clip>

Then using a PointAnimation the end point of the second line is moved to make the clipping rectangle grow. Once the PointAnimation is done, another animation is started to simulate the wheel effect. The following snippet is the Storyboard of one second single spin wheel:

</Storyboard>

Sunday, October 28, 2007

Easy Silverlight 1.0 Animations: Wipe

Another effect facilitated by the rich animation features of Silverlight. In this post we will explore the addition of PowerPoint like wipe effect. I have added this effect to my animation library so you can do this animation using a single line of code. You can download the complete source from here. Below is a working sample.

Recipe:

To create your own wipe animation, download the source code and include Animator.jas and

XamlObjectFactory.js in your project and reference them in your Silverlight host page. To wipe an object from top use the following line:

SilverlightRecipes.Animator.wipeDown('WipeDown', sender.findName('ToWipe'), '00:00:01');

The first argument is a unique ID for your animation, This has to be unique across the whole XAML structure, otherwise the runtime will complain. The second argument is the object to wipe, it can be an UIElement like Canvas, Image, or MediaElement. The last argument is the duration of the animation. The duration format is the same as the format of the Duration property of Silverlight Animation object. In the example I am using hours:minutes:seconds[.fractionalSeconds] format.

To wipe an object from bottom, use the following line:

SilverlightRecipes.Animator.wipeUp('WipeUp', sender.findName('ToWipe'), '00:0:01');

To wipe an object from left, use the following line:

SilverlightRecipes.Animator.wipeRight('WipeRight', sender.findName('ToWipe'), '00:00:01');

To wipe an object from right, use the following line:

SilverlightRecipes.Animator.wipeLeft('WipeLeft', sender.findName('ToWipe'), '00:01:01');

To create this animation, I created a clip rectangle that grows according to a timeline. The clip property of a Silverlight object. Normally the clip can be set to RectangleGeometry to achieve a rectangular clip, but unfortunately there is no RectAnimation in Silverlight. So as a work around I used a PathGemoetry to draw a clipping rectangle then animates the path segments using PointAnimation. Example clip for top down wipe:

<Rectangle.Clip>

<PathGeometry.Figures>

<PathFigure.Segments>

</PathFigure.Segments>

</PathFigure>

</PathGeometry.Figures>

</PathGeometry>

</Rectangle.Clip>

</Rectangle>

Example animation StoryBoard for top down wipe:

<Rectangle.Resources>

</Storyboard>

</Rectangle.Resources>

Note: The idea of using PathGeometry instead of RectangleGeometry is based on swirlingmass post on Silverlight forum. The original post can be found here http://silverlight.net/forums/p/1537/3938.aspx#3938

Tuesday, October 23, 2007

Easy Silverlight 1.0 Animations: Fade
Welcome to the first of a series about creating Silverlight aimations. This post is about dynamically fading objects using a single line of code. Download the complete source. Below is a working sample.

Recipe:
To create your own fade animation, download the source code and include Animator.js and XamlObjectFactory.js in your project and reference them in your Silverlight host page. Add this line to fade in:
SilverlightRecipes.Animator.fadeIn('FadeIn', sender.findName('ToFade'), '100');
Replace 'FadeIn' with a unique ID for the animation. The second argument should be the Object to fade, and the last argument is the duration of the animation in milliseconds. The object to fade can be any UIElement like Canvas, Image, MediaElement, Path, Rectangle, Ellipse, or TextBlock.
To fade out you can use the following line of code:
SilverlightRecipes.Animator.fadeOut('FadeOut', sender.findName('ToFade'), '100');
In a future post I will explain how I implemented the animator library, but currently I am ading more animation and transitions to the library, and I will post them as soon as they are done.

Silverlight Recipes

Sunday, March 8, 2009

Adding RTL Support to Silverlight Using SilverlightRTL Library – Part 1

Monday, February 16, 2009

Displaying Arabic Text in Silverlight

Thursday, March 6, 2008

Silverlight 2.0 Deep Zoom using MultiScaleImage Control

Tuesday, November 27, 2007

Silverlight 1.0 Animation: Checkerboard, blinds, and comb

Wednesday, November 7, 2007

Easy Silverlight 1.0 Animations: Wheel

Sunday, October 28, 2007

Easy Silverlight 1.0 Animations: Wipe

Tuesday, October 23, 2007

Subscribe Now

Blog Archive

About Me