Last week I launched my first Silverlight Template. The idea behind the template was to allow people to download the source code and pull apart a project made completely in Expression Blend and hopefully learn some tips and tricks around working in Blend.
I wanted to follow up the template launch with a quick post on some of the features of the template and how I created them.
Behaviors
I guess one of the coolest things about this template and Silverlight in general, is behaviors. This project really embraces behaviors to do most of the tasks from controlling animations, changing from state to state and linking to pages outside of the application.
Not only does it make it simple for people to create applications without needing any coding skills, but it also speeds up the development process around the UI because we simply don't need to worry about simple things like changing states or creating links.
You can find a small set of behaviors available to use straight out of the box in the assets tab (it should be in the top left if you have a default workspace). These is a small selection of behaviors which are probably the most useful in creating interfaces, but there are plenty more available though through the Expressions Gallery and CodePlex projects, so if you hunt around I'm sure there will be something to fit your needs.
Learn more about Behaviors
Animation
I added a few animations to the project to show different ways to create effects for your applications. There are 3 animations for the project, the first is the OnLoad animation which is basically the animation that plays when the application loads, and all the interface elements fly onto the screen.
The second is the MainAnimation. This is on the home page of the application. Here you will find the use of text in a few different ways and how you can display them using a Story Board in Blend.
The last is the Clipping Path Animation found on the AGKDesign.net page. This uses a series of PNG files layered on top of each other and then clipping masks added to each of these images and animated at different times to create a growing effect.
To open up and look at a Story Board in Blend, at the top of you Objects and Timelines panel there is a drop down (it will say 'no storyboard open'). Click the down arrow and you will see the 3 storyboards in the application. Select one and you will see the keyframes pop up in a timeline. You can easily identify which elements are effected by the animation by the small red dot on their icons.
Learn more about Animating in Silverlight.
Easing
Easing is a part of animating which allows you to add effects to a simple A to B movement of an object, like a bouncing effect for instance.
All of the animations in the application use easing to some degree, whether it be a simple 'start slow and speed up' effect or a more extreme effect like the bouncing of the 3 tin buttons on the AGKDesign.net page.
To see how easing is applied to an animation, open up a storyboard, and then on the timeline, click on on a keyframe (small gray circles that signify some sort of change in that object at that time). In your properties panel to the right you should now see an easing section. Some keyframes may have no easing applied.
Learn more about Animation/Easing
Styles
The last thing I wanted to talk about is template/styles. In Silverlight you can define a style for an object or a template for a button and then reuse for every button in the application. Similar to CSS.
To check out my templates, right click on a button, point to 'edit template' and then select 'edit current'. This will take you to the button style, here you can make changes and it will effect every button using this style.
You will also know that the styles are located in a different file called Styles.xaml. This is called a resource dictionary and you can place any styles and templates you want here and just call them when needed.
Conclusion
So that's basically it. If there is anything I have left out, let me know and I will update the post.
I have also started working on another template, it is more for people to download and use as their website, so it won't contain much content or animations. It will be free so I hope everyone enjoys. The world needs more Silverlight Templates!
Thanks!
About the Author
Alex Knight
Alex is a Silverlight MVP with a strong focus on the graphics and user interface side of things. He runs a Xamling with Jordan Knight (@jakkaj) which specialises in creating awesome experiences for Silverlight and WPF. So it doesn't matter what platform, if its xaml he digs it. If you want to find more out about Alex, check out:AGKDesign.twitter | xamling.net
