The first contest is the Silverlight Control Builder Contest put on by a few people you might know Page Brooks and Silverlight Cream's David Campbell. Custom controls submitted will be judged on their usefulness, creativity, experience and how easy they are to template.
And the big bonus is that all controls submitted will be made available as open source and free to reuse.
For a jumpstart on creating your own awesome controls, I've posted the code for a simple HelloWorld custom control that demonstrates the basic architecture.
Sans fancy logo, there is also a Silverlight Article Competition going on where the prize is a e-book copy of the new Silverlight 2 in Action book. So basically, if you write one worthy article on Silverlight 2, you will get a return of 12 chapters of Silverlight 2 goodness.
Good luck to all those who enter in either contest!
With the recent announcement of the Silverlight Controls Builder Contest, I thought it may be useful to post code that creates a very simple custom control.
The example I'm posting isn't even worth a screenshot as all the control does is render the text "Hello property_value_here". Something like:
Hello Gilbert
The value of the sample is that it provides code and architecture to demonstrate the basics of creating a simple control. A few items to note:
- The control lives in a separate assembly as the application
- The generic.xaml file is used to define the default template of the control
- DefaultStyleKey must be set in order for your control to show up without a custom template defined
- A DependencyProperty is used to enable animation and binding
- You can change the value by entering text in the TextBlock and clicking the button.
For a deeper look at creating custom controls I would recommend Karen Corby's 4 part Parts & States Model with VisualStateManager.
After a few changes the Xbox Friends Watch Gamercard now runs on Beta 2. The few changes I had to make included
- updating the project file in Visual Studio to match Beta 2
- Adding System.Net as a reference since the WebClient class has moved there
- Changing Storyboard.GetClockState to AnimationInstance.GetCurrentState to match the API update.
- Moving from ToolTips to the ToolTipService on the HyperlinkButtons.
- Changing MouseLeftButtonDown event handlers to handle the Click event on Buttons, now that MouseLeftButtonDown event no longer fire.
- The final change had to do with adding a setting in the AppManifest.xml to allow the XAP to be hosted on a different server than the page its embedded on and still make the cross domain call. Emil Stoychev has more detail about the X-Domain Scenario on SilverlightShow.
Get your own Gamercard on the script builder page. Even if you already have the Gamercard on your page, you will still need to update your embed code to reflect the new changes.
Now to find the time to play the Xbox...
I remember the days back on the were-here forums (now sadly defunct) when there was this guy who went by the alias rpenner and he schooled us all in math and showed us how to do very cool things in ActionScript. Robert Penner's equations have been perfected, published and translated to C#.
Lee Brimelow originally translated the equations to C# for use in WPF and the beauty of Silverlight being a subset of WPF is that the same equations work just as well. (The only small change needed was to remove the reference to an unused default library System.Windows.Navigation).
I've been focused quite a bit lately on how best to do dynamic animations in Silverlight and after seeing Corey Miller's tweening sample based on Penner's equations, I was energized to go find the library and apply it in Silverlight.
This first part was easy, since Lee (Thanks man!) had already done the translation. The second part was then applying the equations using the Empty Storyboard method for Silverlight. As a result, I've come up a few different code samples:
WPFPenner.cs - This is the original C# translation, minus the WPF only library reference. I've also added an enum of the easing types, which I use for reference in another sample.
TweeningTest - A very basic application that demonstrates the usage of an equation in code. Two methods of modifying the position of element are shown, both TranslateTransform and Canvas Left and Top. The TranslateTransform is nice because it works within the Grid as well as the Canvas.
OffToTheRaces - This is a simple application that can be used to preview the different easing types. Its a bit of an extreme sample since the easings are dynamic, but you can make the horses run and then randomize them to bring up new horses. You can also check out Robert Penner's original Equations Visualizer to get an idea of the equations.
Moving beyond the basic Linear equation for animation can greatly enhance the experience you create. The easier we can make it do this the better and I think the equations are a good start.
United States Map
Tornado
Stars
When I'm thinking of a UI or visualization design, its very cool to think of the possibilities when moving from Silverlight to WPF as your platform. Hardware acceleration, real 3D objects which are fully interactive, DirectX Integration, Custom Effects can really help bring some of the most ambitious designs alive. After watching a recent HPC case study video though, the features mentioned above seem like just the beginning.
I only understand HPC at high-level, but after seeing the work they can do, its amazing to think that each of the data points visualized are actual and not some random number generated to make an interesting effect. At this point, I know HPC is only used at an industry application level, but just imagine once this type of power becomes more accessible. I'm thinking a 3D map of the Internet or something.
Form more information on HPC check out the Windows HPC site. The have an interesting set of case studies which show how this power is being put to use today.
After some research, I'm recommending the use of Empty Storyboards for procedural animations.
What is an "Empty Storyboard"? It is a Storyboard with no animations or specific target that simulates a game loop or per frame callback by having a short duration and once its Completed it Begins itself again.
A simple example looks like this in C#:
Storyboard timer = new Storyboard();
timer.Duration = TimeSpan.FromMilliseconds(500);
timer.Completed += new EventHandler(timer_Completed);
timer.Begin();
void timer_Completed(object sender, EventArgs e){
if (conditionToKeepGoing)
timer.Begin();
}
The other two options include the DispatcherTimer, which is not suitable for this type of quick ticking, and Storyboards with defined Targets and Animations.
Modifying Animation values at run-time does work smoothly and as expected. But you are limiting your flexibility by tying every Target property that's animated to a matching Animation instance. With an Empty Storyboard you are free to modify any property based on your calculations.
A combination of the two Storyboard method will most likely end up becoming the most powerful pattern. During the game loop, within the empty Storyboard you can calculate your scene and when a different state is desired, you can call into an object's prepared routines or Storyboards with linked Animations.
I've modified the original HelloBeta2 to use an Empty Storyboard and there is commented out code which adds a Storyboard to each Line as its drawn that moves its second point after initial placement. This simulates the "known routine" idea, and I could easily update the new location for the second point at run-time.
I've also added a StrokeWidth loop and DashArray, but that was just for my own entertainment.
This is a list of all the 3rd Party controls that have demos or samples running on the latest version of Silverlight.
| ComponentOne | A full suite of components including custom layout panels, menus, treeview, textboxes, charts and more. |  |
| DevExpress | A free datagrid with grouping, sorting, resizing, template support, multi-row selection and more. |  |
| Infragistics | A large collection of charts and gauges for data visualization. |  |
| Intersoft | Two alternative controls to the standard menu, FishEye and CoverFlow. |  |
| NETiKA Tech | An implementation of the standard Windows Forms control library, developed as Windows Forms Applications and run as Silverlight applications. |  |
| Telerik | A full suite of components including menus, tabcontrols, treeviews, mediaplayer, progressbar and more. |  |
| Visifire | A large collection of open source data visualization components. |  |
| Xceed | An asynchronous, multiple file upload control with data compression. |  |
I'll keep this page up to date as Silverlight evolves and control offerings grow.
Silverlight 2 has just hit Beta 2 and they are already some really nice offerings available. Take a minute and check out some of the cool demo applications on each site that show off the controls.
After all of the interest shown in the WPF 3.5 SP1 graphics video, I was planning on writing a tutorial showing how to create your own simple custom effect. Noe need.
Instead, I will point you to Anders Bursjöö Grayscale Effect tutorial. Anders walks step by step through the process of creating the shader in HLSL, the C# effect class and then implementing the effect in a WPF application.
Nicely done Anders!
For more, Effects goodness, go straight to the source on Greg Schechter's blog. He's maintaining a list of GPU-based Effects posts which also show how to write custom Effects and explain more detail on how they work.
I was just having a bit of a chat with Scott Barnes (welcome to the US!) today about Deep Zoom and its untapped potential. And surprise, look what surfaces from Down Under and was posted tomorrow, a video showing off some awesome applications of Deep Zoom. Thanks go to Michael Kordahi for meeting up with Jose Fajardo after REMIX08 Australia and capturing Jose's demos.
I'll be there.