SilverlightShow and Gill Cleeren start a series of materials aimed at helping you get prepared for taking Microsoft Silverlight Exam 70-506. Through this series we will try to structure the resources available on the internet, grouping them by topic covered in the exam. Any feedback would be much appreciated! Thanks!
This article is Part 2 of the series on Microsoft Silverlight Exam.
In the first part of this article series, we focused on learning the skills required for the layout-related questions and topics in the Silverlight exam (70-506). We looked at the layout containers (such as the Grid and the ScrollViewer), the basic controls (such as the TextBlock, CheckBox and the Button), how to create user controls, the navigation framework, displaying collections in controls such as the ListBox and finally at how the MediaElement can be used to playback media.
In this part, we’ll stay in the say theme let’s say: we’ll look at Enhancing the User Interface. We’ll be covering styling, templating, visual state manager, animations and more. For your convenience, the following list contains links to the other parts of the article series which have been finished already:
Part 2: Enhancing the User Interface
Since Silverlight is the platform of choice for building rich internet applications (RIAs), building a basic interface with just plain buttons and no animations seems like under-using the capabilities. Silverlight has many capabilities on board to help us create a unique experience, tailored to the business needs. Customizing the application’s UI has never been easier, since several features inside Silverlight are just targeted at doing so. In this part, we’ll look at how we can customize the UI of the application, so that our application can really shine!
Create or modify control styles
When we start creating a Silverlight application, we’re tempted to place UI-related properties directly on the elements themselves. Properties like FontSize, Width and Fill are often created on the declaration of the element in any XAML file. While there’s nothing really wrong with this way of working, it can become a difficult task to manage this in a later phase. Assume you have created an application for a company that has blue as its branding color. At some point, they want to update their logos and colors and everything needs to become red. You as the developer need to go through all the code files to make the changes directly in all XAML files. It will take some time.
For this very purpose, styles exist. Similar to CSS styling in HTML, styles in Silverlight are a way to create a common location for UI-related properties. A style also promotes reusability: when using the same style in all views, a simple change to that style changes all views without any manual change in the views themselves.
While styles are similar to CSS, there are some important differences. The ‘C’ in CSS stands for cascading and basically means that the final style of an element is the combination of all styles that are being applied on the element. This is not the case in Silverlight’s styling. Styles in Silverlight can however inherit.
To learn more about styling, take a look at the following articles:
- Setting a style locally / setting a style at the page control level / setting a style globally
Creating a style for local use, page level use or global use is similar. The only thing that’s different is of course the location where the style gets declared. This influences of course the scope that the style has. If a style gets declared on a Grid, only elements within that Grid are able to use the style. If the style is declared on the page/user control level, all controls within that page/user control can access the style. Controls on other pages however cannot access the style. If we want globally-known styles, we can declare them on the application level (in the resources section of the App.xaml).
If a control requires a specific style, XAML tree walking is executed to locate the style: first in its parent, then its parent… until the page/user control level is reached. If the style can’t be located on that level either, the style is searched for on the application level. The fact that styles in Silverlight aren’t cascading follows from this: once the style is located on a specific level, higher levels in the XAML tree aren’t searched for anymore. It’s therefore possible to create a style with the same name on both the page and application level if this should be required.
- Implicit styles:
Implicit or default styles make it possible to create a style that is used for all controls of a specific type, unless a specific style is defined on the control.
- Based-on (inheriting) styles:
It’s possible to create a base style and have other styles inherit from this style. This is achieved using the BasedOn property.
- Merged Dictionaries:
Placing all styles inside the App.xaml’s resource block may become a bit too much in the long run. The file may simple become too large. Merged Dictionaries allow us to split out the style information in several files.
Create control templates
With styling of elements, we can only get to a level where we change the ‘standard’ properties. We won’t however be able to customize the controls to our needs. The most basic example I always tell people is that there’s no option to create a round button just using styling. Last time I checked, there was no “IsRound” property available on the Button class!
For this very purpose, the concept of templating exists. With templates, we can completely overrule the visual of a control, we can in other words redefine the template of the control (hence the name templating). Templates support the concept of a ContentPresenter, which is a place holder for the actual content of the control to be placed in. Using TemplateBindings, we can create a binding to pass data from the control instance to the template.
The following articles and blog posts can be helpful in exploring the templating functionality in Silverlight:
- Creating a template / attaching a template:
- ControlTemplate class on MSDN: http://msdn.microsoft.com/en-us/library/system.windows.controls.controltemplate%28v=vs.95%29.aspx
- http://wsinsiders.com/2010/01/30/silverlight-tutorials-styling-and-templating/ (same link as before, this link contains an overview for both styles and templates)
- http://www.mindscapehq.com/blog/index.php/2010/08/16/silverlight-control-templates/
- http://weblogs.asp.net/scottgu/pages/silverlight-tutorial-part-7-using-control-templates-to-customize-a-control-s-look-and-feel.aspx
- http://www.silverlight.net/learn/quickstarts/controltemplates/
- http://channel9.msdn.com/Blogs/mtaulty/Silverlight-Templating-a-Button (video)
- http://channel9.msdn.com/Shows/SilverlightTV/Templating-Controls-with-Silverlight-Silverlight-TV-36 (video)
- Implementing a content placeholder
A ContentPresenter can be used as a place holder for the actual control content.
- Implementing template binding
When using a control with a template applied on it, a TemplateBinding can be used to pass the values of properties into the control template.
Create or modify data templates
When displaying a collection of items in a control such as a ListBox, a DataTemplate can be used to enhance the visualization of the items. By default, the ToString() method is used. A somewhat better solution is using the DisplayMemberPath where we can indicate which property needs to be displayed. To create a far better experience, we can use a data template. Such a template is basically a piece of XAML that gets generated for each item in the bound collection. The item will then become the data context for the data template upon generation.
Read the following list of articles to learn more about data templates:
- Modifying item templates for data controls:
- ItemTemplate on MSDN: http://msdn.microsoft.com/en-us/library/system.windows.controls.itemscontrol.itemtemplate%28v=vs.95%29.aspx
- DataTemplate on MSDN: http://msdn.microsoft.com/en-us/library/system.windows.datatemplate%28VS.95%29.aspx
- http://drwpf.com/blog/2008/01/03/itemscontrol-d-is-for-datatemplate/ (article targets WPF but is compatible with Silverlight)
- http://weblogs.asp.net/scottgu/pages/silverlight-tutorial-part-5-using-the-listbox-and-databinding-to-display-list-data.aspx
- http://www.devlifestyle.net/blogs/articles/archive/2010/08/09/silverlight-4-0-tutorial-4-of-n-listbox-itemtemplate.aspx
- http://weblogs.asp.net/dwahlin/archive/2008/04/03/using-silverlight-2-itemscontrol-templates.aspx
- Creating a create template / Creating an update template:
- Using a user control as a data template:
- http://www.silverlightshow.net/items/Using-A-UserControl-As-A-DataTemplate-in-Silverlight-2-and-Blend-2.aspx
- http://rhizohm.net/irhetoric/post/2008/03/31/0a-Using-A-UserControl-As-A-DataTemplate-in-Silverlight-2-and-Blend-20a-.aspx
Manipulate visuals
Once any visual has been created, it can be the target of a transform. This transform can manipulate the control in several formats such as rotation, skewing or even moving it to a different position. All transforms in Silverlight are RenderTransforms. Perspective transform can help creating depth: using such a transform, any 2D object such as a control can be rotated over any of the X, Y or Z axis, creating a 3D effect. This is not to be confused with real 3D: it’s a 2D object in a 3D space.
Reading the following articles about transformations can help you along the way:
- RenderTransformOrigin:
This sets the starting point for a transformation.
- http://msdn.microsoft.com/en-us/library/bb980041%28v=vs.95%29.aspx
- SkewTransform:
- http://msdn.microsoft.com/en-us/library/bb979772%28v=vs.95%29.aspx
- http://msdn.microsoft.com/en-us/library/system.windows.media.skewtransform%28VS.95%29.aspx
- http://www.c-sharpcorner.com/UploadFile/anavijai/4505/Default.aspx
- http://vbcity.com/blogs/canoz/archive/2010/04/25/beginning-silverlight-skewtransform.aspx
- RotateTransform:
- http://msdn.microsoft.com/en-us/library/system.windows.media.rotatetransform%28v=vs.95%29.aspx
- http://vbcity.com/blogs/canoz/archive/2010/04/25/beginning-silverlight-rotatetransform.aspx
- http://www.c-sharpcorner.com/UploadFile/anavijai/4476/Default.aspx
- ScaleTransform:
- http://msdn.microsoft.com/en-us/library/system.windows.media.scaletransform%28v=vs.95%29.aspx
- http://vbcity.com/blogs/canoz/archive/2010/05/02/beginning-silverlight-scaletransform.aspx
- TranslateTransform:
- http://msdn.microsoft.com/en-us/library/system.windows.media.translatetransform%28v=vs.95%29.aspx
- http://vbcity.com/blogs/canoz/archive/2010/05/02/beginning-silverlight-translatetransform.aspx
- CompositeTransform:
The CompositeTransform was added with Silverlight 4 and makes it easier to create a combination of other transformations on an element.
- http://msdn.microsoft.com/en-us/library/system.windows.media.compositetransform%28v=vs.95%29.aspx
- http://mtaulty.com/CommunityServer/blogs/mike_taultys_blog/archive/2009/11/18/silverlight-4-rough-notes-compositetransform.aspx
- http://adamkinney.wordpress.com/2009/11/22/compositetransform-simplifies-transforms-in-silverlight-4-beta/
- Perspective transform:
- Applying pixel shaders
Animate visuals
Animations are an integral part of Silverlight. While you may think that animations may not be your cup of tea because you only build business applications, think again. Animations can be helpful in creating a better experience for your users. Think of things such as creating an effect where a page/usercontrol slides in smoothly. This is nothing more than an animation!
The animation framework in Silverlight is time-based, not frame-based like in many other technologies. This means that Silverlight takes care of interpolation. What we in the end have to do is specifying what the value of a property should be before and after the animation. Silverlight will then draw the intermediate values of the property. Animations always work on properties, not on objects. These properties need to be dependency properties. Don’t worry though, as most visual properties of Silverlight controls are DPs.
Learning about animations can be done using the following links:
- Creating storyboards:
- StoryBoard class on MSDN: http://msdn.microsoft.com/en-us/library/system.windows.media.animation.storyboard%28v=vs.95%29.aspx
- http://msdn.microsoft.com/en-us/library/cc189019%28v=vs.95%29.aspx
- Dynamic storyboards: http://weblogs.asp.net/dwahlin/archive/2008/12/17/handling-dynamic-storyboards-and-animations-in-silverlight-2.aspx
- https://www.silverlight.net/learn/quickstarts/animations/
- http://www.dotnetspark.com/kb/2078-animation-silverlight.aspx#8
- http://www.dotnetspark.com/kb/2078-animation-silverlight.aspx#16
- Animation types:
- Programmatically starting and stopping storyboards:
- Implementing easing functions
- Using keyframes
- Triggering storyboard on load
- http://www.dotnetspark.com/kb/2078-animation-silverlight.aspx#12
- Repeating and reversing storyboards:
- Responding to events
- Configuring bitmap caching
Implement behaviors
- Behaviors
- Triggering storyboards by using behaviors
- http://csharperimage.jeremylikness.com/2009/10/silverlight-behaviors-and-triggers.html
- Dragging and dropping elements
Managing Visual State
The Visual State Manager is really important when creating custom controls. Using the VSM, we don’t have to manually create a custom template for a control. Instead, the model specifies that a control can be in a number of states (depending on the control, these states are defined using the TemplateVisualState on the control class). Defining a custom template for a control comes down to defining how a control will look in each of these states. While the VSM model is not required, it’s certainly recommended to be used, since Blend also uses this model. If a designer on your team would create new control templates using Blend, these would also be created using the VSM model.
State are grouped in so-called Visual State Groups. A control can be in a combination of states which aren’t part of the same state group. Therefore, these groups are said to be orthogonal. Between states, VisualTransitions can be created. The VSM automatically applies these when defined to create smooth transitions between control states.
Take a look at the following articles to learn more about the Visual State Manager:
- Visual State Manager:
- Creating state groups
- http://msdn.microsoft.com/en-us/library/system.windows.visualstategroup%28v=vs.95%29.aspx
- Transitioning states
- http://msdn.microsoft.com/en-us/library/system.windows.visualtransition%28VS.95%29.aspx
- http://msdn.microsoft.com/en-us/magazine/cc721611.aspx
- Programmatically changing states
- http://msdn.microsoft.com/en-us/library/system.windows.visualstatemanager.gotostate%28v=vs.95%29.aspx
- http://www.codeproject.com/KB/silverlight/VisualStateManagerNavbar.aspx
Summary
In this second part of the exam preparation guide, we looked at topics related to enhancing the user interface. In the following part, we’ll be focusing more on code!
About Gill
Gill Cleeren is Microsoft Regional Director (www.theregion.com), Silverlight MVP (former ASP.NET MVP), INETA speaker bureau member and Silverlight Insider. He lives in Belgium where he works as .NET architect at Ordina. Passionate about .NET, he’s always playing with the newest bits. In his role as Regional Director, Gill has given many sessions, webcasts and trainings on new as well as existing technologies, such as Silverlight, ASP.NET and WPF at conferences including TechEd Berlin 2010, TechDays Belgium, DevDays NL, NDC Oslo Norway, SQL Server Saturday Switserland, Spring Conference UK, Silverlight Roadshow in Sweden… He’s also the author of many articles in various developer magazines and for SilverlightShow.net. He organizes the yearly Community Day event in Belgium.
He also leads Visug (www.visug.be), the largest .NET user group in Belgium. Gill recently published his first book: “Silverlight 4 Data and Services Cookbook” (Packt Publishing). You can find his blog at www.snowball.be.
Twitter: @gillcleeren