(X) Hide this
    • Login
    • Join
      • Say No Bots Generate New Image
        By clicking 'Register' you accept the terms of use .

10 Silverlight 2 gotchas resolved

(2 votes)
Antoni Dol
>
Antoni Dol
Joined Jul 18, 2008
Articles:   1
Comments:   0
More Articles
1 comments   /   posted on Jul 18, 2008
Categories:   General

Note: This article is submitted by Antoni Dol for Silverlight Contest: Write and Win.Thanks a lot, Antoni! Hello All, Please drop a comment if you like it.

This Silverlight 2 development kick start helps you get over initial hurdles and clears the path for faster results.

Coming from projects in which WPF design experience was established, the step to developing in Silverlight 2 was not an easy one. Even though I anticipated getting disappointed and even annoyed by times, there were several gotchas that baffled me. Some of those can still be found in the current Beta 2 release, but others are resolved to a degree that makes for a workable Silverlight 2 environment. These include Canvas rules, Color resources, limited fonts, no BitmapEffects, no paging facility, limited resource facilities, significant transparency, StaticResources only, XML Databinding, and the lack of some important controls. I’ll let you in on this treasure trove and tell you all about these 10 Silverlight 2 gothas resolved.

1. Canvas rules

As a designer it is fairly easy to get XAML. You export it from Illustrator using a special plug-in or you copy and paste it from Expression Design. You can export it from Expression Design too, with more elaborate options for WPF and Silverlight. Still, the Canvas layout panel rules in all these exports. The Canvas places elements on absolute positions using Canvas.Left and Canvas.Top attached properties. Any Canvas can be placed on any other Canvas. The export from an entire Illustration will likely be Canvas galore. You’ll lose control, get fed up with canvasses, but can’t get rid of them because every layout position of every element depends on one or more canvasses, anchored somewhere in the bulk of XAML markup. Endless strings of Path streamgeometry data make finding a specific Canvas sheer hell. To cut to the chase: don’t let your layout get out of control.

First, export only small and modular elements from Illustrator or Expression Design illustrations. Stay on top of it by confining certain elements to a Canvas and placing this in a layout that actually makes use of the extended layout features of Silverlight. Secondly, before exporting that element, copy it to a new page and place it on the exact 0,0 coordinates. Finally, remove any canvasses from an export before committing it to you layout. You’ll have to rearrange the elements using Grid and StackPanel panels. What you will gain is the ability to create and control more flexible layouts.

 2. One way to make Color resources

This is the only way to create a Color Resource in Silverlight:

 <Color x:Key="clrAccent">#FF800000<Color> 

Other ways to formulate the color code, which may be valid in WPF, don’t work in Silverlight. Don’t forget that many Backgrounds and Fills use Brushes, so create a Brush Resource for every Color Resource too:

 <SolidColorBrush x:Key="brsAccent" Color="{StaticResource clrAccent}"  />

Why would you want to do this? You can create color palettes and swap all colors in your application on the fly. Your clients will love it, you will gain time. Also, creating a color palette will keep the amount of colors used in your application to an acceptable level, making a harmonious design possible.

Another option is to use predefined colors using the White, Red, Black and some 200 other keywords that are automagically converted to valid color values by the platform. Your choice is limited and not every color that you might need is available as predefined color. Nobody stops you when you just use hex color codes right into the XAML. You will have entered an environment where changing the color of elements in one sweep is virtually impossible. Then again, not every client want a complete overhaul of the colors in your application now, do they?

3. Limited Fonts

This one caught me by surprise. I was used to Segoe UI in my interfaces, not only because it is the font recommended by the User Experience Guidelines, but just because it is a beautiful and open typeface, obviously especially designed for use in UIs. In WPF it was easy to set a font for an entire application using a Typed Style on the Control control. That ensured that all controls that inherit from Control use the same FontFamily and base FontSize. No go in Silverlight 2. Apart from it being impossible to set a Style to a Type (you have to use a Key for a Style and you have to use this key to implement the Style) you have access to only nine fonts that are normally available on computers these days. These are about the same that Web developers traditionally adhere to, because they have little to no control over installed fonts on a client PC.

To use a different FontFamily, you’ll have to add the font files to your Silverlight project as a Resource –which will increase the download. Note that you also have to add Bold and Italic versions of the font to your project if you want to use those. Refer to it using this XAML:

 <TextBlock FontFamily="segoeui.ttf#Segoe UI" FontSize="12"  />

Better even is to create a series of Styles for all your text controls and try to cover all your bases. You’ll also have to accommodate for several other controls (like Buttons and TabItems), because you can set the FontFamily on those as well.

 <Style x:Key="TextBlockFont" TargetType="TextBlock">
     <Setter Property="FontFamily" Value="segoeui.ttf#Segoe UI"  />
     <Setter Property="FontSize" Value="12"  />
 <Style>

To finish this, set the Style on all TextBoxes:

 <TextBlock Style="{StaticResource TextBlockFont}"  />

4. No BitmapEffects

The advantage of having no DropShadow, OuterGlow, Bevel and Blur effects available in Silverlight is that you cannot overdo using them. The danger of these effects is to use them when it is unnecessary. When you want to make a real subtle shade behind a container you can’t do it. Not easily anyway. I have two solutions that you might use: RadialGradients and Blends. The first is a simple radial gradient that allows you to make a shadow or a glow behind your drawing. The drawback is that is has to be an ellipse. Actually, when I think about it, you could clip this ellipse using a clipping path on the filled object.

The other solution is to use blends (notice the lower case b). Expression Design actually supports blends with a little dialog. This allows you to take two complex Paths and morph the first in the second. Create a copy and a larger copy of your Path and center the two and give them a 95% transparent Black Background. Blend in 10 steps from the first copy to the second. For a rectangular container, you can also use a Border with a 1 pixel Margin and a 95% transparent Black Background:

 <Border CornerRadius="25" Margin="1" Background="#0C000000"> 
     <!-- 9 more borders like this -->
 <Border>

The almost transparent background will add up to a nice shade of gray, working with any color behind it. You’ll have to decrease any CornerRadius you use by 1 pixel, to make the effect work correct. Likely, a Grid layout panel inside and outside the collection of Borders will make your live easier. This way you can create a shadow, a glow and even a bevel if you choose your colors wisely.

 5. No Paging facility

You can link to any other HTML page using HyperlinkButtons in Silverlight. That page can contain a plug-in with a different screen or set of screens in your application. You can also hide and show overlapping panels using code animations (be sure to read gotcha 7 about significant transparency when you use this method). When you want to swap XAML files within you current application it is a different story. There is no paging functionality in Silverlight.

The concept of Page in earlier Silverlight versions is replaced by UserControl as your RootElement. The answer is to replace the RootVisual in your app.xaml code behind file to load this new XAML file:

 startupUI = new Silverlight.Welcome();
 Grid root = new Grid();
 root.Children.Add(startupUI);
 this.RootVisual = root;

You can find enough examples online on variations on how to do this. One will fit your case.

6. Limited Resource facilities

Unlike in WPF using Resources in Silverlight is limited. Without the MergedDictionaries making external Resource Dictionaries a no brainer in WPF, Silverlight lacks flexibility in using Resources. MergedDictionaries would have made it possible to have a RD per Control or have an application wide Stylesheet using XAML. As a result the only possible application wide Resource Dictionary app.xaml should now be swamped with Styles addressing various parts of the UI, be it Colors, Brushes, Styles or ControlTemplates. You can override these Application Resources with Local Resources by using the collection and using the exact same Keys. You could even go further and use the Resource collection of layout panels to overrule the Local Resources. will do just that. Apart from that Silverlight supports Static Resources and doesn’t allow for implicit Stylings with the use of a TargetType only. BasedOn Styles are also a no go.

Another story is placing Animations in app.xaml. I like to have my animations apart from the rest of the XAML, because they can become very lengthy and are not really relevant to the functionality of the UI. The animations have to be started using Event Handlers in a Code Behind file in Silverlight instead of the Triggers used in WPF. The Triggers were able to connect to the target object for an animation. The Event Handlers won’t do that for you. You’ll have to find the Animation Resource using App.Current.Resources.Contains(name), assign it to a Storyboard object in the Code Behind file of your page and set the Target element for that Storyboard before starting the animation:

 Storyboard.SetTarget(Storyboard1Resource, Rectangle1);

7. Significant Transparency

I have been taunted by this one for a long time. It has two sides to it. The first is that transparent elements overlapping parts of your UI (like a Glow from White to Transparent) block all interactivity with the elements under it; the other is that invisible elements may still receive click events and result in actions that you cannot trace to the visible UI.

Both sides have very easy solutions. To stop overlapping semi-transparent elements preventing any interactivity, set its IsHitTestVisible property to false. The catch is that in the Expression Blend Interface this is not picked up. In Blend, you still won’t be able to touch the overlapped elements. My choice is to poke the eye next to the Elements’ name in the Objects and Timeline palette and thus Hide it in Blend.

To keep invisible objects from being clickable, you’ll have to collapse them. Set Visibility=”Collapsed” in XAML or this.Visibility=Visibility.Collapsed in code to accomplish this. You may have to create some code to make parts of you UI visible before allowing your users to work with them, while collapsing all other parts of the UI.

8. StaticResources only

The use of StaticResources only has two consequences. The Resource has to be loaded before it is used. The Resource cannot be changed afterwards (hence Static). For you this means placing all Resources in code before an attempt to use it. For example Background=”{StaticResource brsAccent}” will pop up an error when the Brush Resource brsAccent is not in de Application Resources or the Local Resources. What you lose is the ability to update Resources real time, like in swapping Skins. You’ll have to find other tricks do achieve that.

9. XML Data Binding in code only

One of the powers of the Expression Blend UI is the ability to create a data binding to a XML data structure using nothing but mouse clicks. This is not working for Silverlight 2 Beta 2. As you can see the +XML tab in the Data panel is disabled. This should be resolved by the Blend Team in the coming months, but it doesn’t mean that you cannot use XML Data Sources to bind to. You can actually use LINQ to find the element to bind to. You’ll have to do that in code for now. Check the Silverlight SDK for the correct procedures.

10. Lack of important controls: DropdownList and PasswordBox

Last, but not least, important controls are still missing from the Beta 2 plug-in. Of course we cannot have the entire WPF Framework to our disposal, but some controls we cannot do without. Fortunately there’s a workaround for some of these, which may be reason to leave them out in the first place. You can create a DropdownList using a Togglebutton and a ListBox. The ToggleButton governs the ListBox visibility. The ListBox itself shows a collection of ListBoxItems and has a scrollbar when necessary. You should update the ToggleButton Content with the value of the selected ListBoxItem, so it reflects the users’ choice. You can style both controls as you like to create a coherent DropdownList control.

The code to create a PasswordBox control from a TextBox contains a lot of string handling, but it works. I’ve used the solution from Chris Pietschmann with success in my last project.

So, having removed the primary obstacles to Silverlight 2 Development, consider yourself warned and ready to create stunning applications in Silverlight 2. Expect more improvements of the plug-in before it is final. Not every snag may be gone, but your developer life will get better. Using these solutions to 10 Silverlight 2 gothas you should be able to get on your way right now.

Links:

· Silverlight: http://silverlight.net/

· Silverlight 2 beta 2 SDK online: http://msdn.microsoft.com/en-us/library/bb404700(VS.95).aspx

· Paging: http://silverlight.net/blogs/jesseliberty/archive/2008/05/31/multi-page-applications-in-silverlight.aspx

· Animations as Application Resource: http://antonidol.wordpress.com/2008/07/16/silverlight-animations-as-application-resources-in-appxaml/

· Dropdownlist: http://blog.seancleaver.com/sean_cleaver/2008/05/combobox-dropdo.html

· PasswordBox: http://pietschsoft.com/post/2008/03/PasswordTextBox-for-Silverlight-2-Beta-1.aspx

Author Bio:

Antoni Dol is Senior Designer at the Dutch Internet service bureau Macaw. He graduated as illustrator at the Gerrit Rietveld Academy in Amsterdam, studied Advertising at the Academy of Art in Rotterdam and was a freelance illustrator for three years. Growing with the internet he started as a web designer in 1995 and from 1996 he is designer at the internet service bureau Macaw. He has worked for companies like KPMG, NedTrain, Wolters Kluwer, Univé Insurances, Bijenkorf e-commerce, city of The Hague, Rabobank en Microsoft in the Netherlands. He received a Creative Excellence Award at the Web Page Awards in 2001 en the NedTrain intranet was one of the 10 best of 2005 according to Usability expert Jakob Nielsen. Antoni has experience in Windows Presentation Foundation from October 2006 onwards and worked on applications in WPF, such as a large system for welfare administration and a simulation game. Antoni writes articles for internal and external Macaw publications and for the Dutch Software Development Network. He was the runner up in the Microsoft Expression Designers Contest in the Netherlands with a Silverlight website created in Expression Design en Expression Blend. He wrote the “XAML Handbook” in Dutch and has a blog called “Addendum” with additions to the book at http://antonidol.com/. Antoni works with XAML in WPF en Silverlight projects on a daily basis.


Subscribe

Comments

  • -_-

    RE: 10 Silverlight 2 gotchas resolved


    posted by Nirav Vyas on Aug 27, 2008 21:47

    Good Points Noticed!

    Hey But What about WebConfig.???

Add Comment

Login to comment:
  *      *