Custom Control Development: Simple code guidelines

Jeff Wilcox did a great post on custom control conventions that is cool, if for nothing else that I feel vindicated with regard to the use of regions. Some time ago I got into a heated discussion on this topic and I feel as much as it is esoteric regions help break things down into logical understandable chunks. The rest of the article is great too as to best practices which seem to be still evolving around Silverlight

http://www.jeff.wilcox.name/2009/08/custom-controls-simple-code-guidelines/

Converting Silverlight Apps to WPF

Using Ariel's Simon design I built this game called Silverlight Simon. Jobi suggested making it a WPF app and then a surface version. I got it working and will do a post on it later but strictly speaking here this is how I overcame some of the issues going from a Silverlight user control to WPF.

The first thing I found out when I moved my code into Xaml was a number of things that WPF doesn't do that you can do in Silverlight.

1. there is NO VSM... at all.
2. there is no autoplay on media element.
3. no 2.5D (ie, all the plane projection stuff)
4. and all my animation calls to story boards didn't work.

When I first ported the code over I knew the VSM and 2.5d was not going to work so I started with ripping that out. the first thing that then poped up was all my animations calls. For example say I have a click event and I'm doing something like [animationname].Begin();

well that doesn't work as all my animations are 'resources' I played with this for a while and with some Dr. WPF medicine I found that I basically had to change all my animation issues to something like this:


Storyboard foobar = TopSimonGrid.FindResource("PrefsBtnPressedKey") as Storyboard;
foobar.Begin();

from their I got my animations working. I then removed my auto play on the media element and it would compile. but as soon as an event tried to fire a sound I got another error. I ended up having to add
LoadedBehavior="Manual"

that way my sound method started working. At this point you could play the game if you could get past the fact that all the styles that used the VSM looked like crap. I know there was this codeplex project called WPF Toolkit ( http://www.codeplex.com/wpf ) which included a prototype VSM (Visual State Manager). I pulled it down and tried it out. The only hard part was figuring out the right name space to get my vsm: working. as it turns out it is where you would expect if it was part of WPF kind of:

xmlns:vsm="clr-namespace:System.Windows;assembly=WPFToolkit"

With this mojo going on everything worked but my flip fx control. I couldn't find that any one get industrous enough to build the 2.5d stuff for WPF so I took the old animations from the SL2 fx control but put them in the vsm flip animations generic xaml so that it would use that instead of the 2.5d. I then had to change the content presentor to have the transforms needed and then poof like magic Silverlight simon worked like a champ.

For something extra I ripped out the WPF window chrome so Simon sits on the desktop and I found that my drop shadow on Simon was know on my desktop.

for those that are interested ripping out the chrome which is way easier then it used to be I had to add this to the window tag:

WindowStyle="None" ResizeMode="NoResize" AllowsTransparency="True" Background="Transparent"

from there you can pretty much do what you want.

ok ok ok, here is a little update. for Simon the above works fine... but for my uber tile project a few more issues came up... starting with dependency property registration sanity check....

So it is not so much a difference other then that the code that shouldn't work does in Silverlight 3 but blows up properly in WPF. take a look at this code:

public readonly DependencyProperty BackLink2TitleProperty = DependencyProperty.Register("BackLink2Title", typeof(string), typeof(MediaPlayer), new PropertyMetadata(new PropertyChangedCallback(OnBackLink2TitlePropertyChanged)));

in the named registration value you can't have two of these with the same value. Silverlight will currently over look that little indiscretion. WPF... not so much :)

The Ultimate Design Pattern

So I'm building out all these different variations on Command Pattern for Silverlight and writting articles on MVP or pMVP or MVVM or M-WTF and some times the entire discussion gets so esoteric that I want to screen. I mean really how the heck to you entirely seperate presenter from the model and view for example? in Silverlight its NEVER entirely seperate, not really. Anyway so as always Dr. WPF is the man and has a solution... W-V-poo which I think applies to Silverlight as much as WPF. Check out the article:

http://www.drwpf.com/blog/Home/tabid/36/EntryID/27/Default.aspx

Xaml Guidelines, Part 1

Check out Jonathan, Jared and Nathan on Xaml Guidelines on Channel 9. I know this is focused alot of WPF but as suggested on their post it applies to Silverlight AND wpf.

http://channel9.msdn.com/shows/Continuum/XAML-Guidelines-Part-1/Default.aspx?wa=wsignin1.0

Scrubbing Timeline MediaElement

I wrote this sample of a timeline a year ago in Dec, and some one posted a link saying that the code didn't work. gasp code written against the 1.1 alpha doesn't work against the released v2.0??? oh my, how can that be. Personally I htink the expectation was a bit over the top. Anyway i wipped out the same used in the book and yes I have not tried it in some time but working 18 hours a day on BillG keynotes and other such nonsense kind of does that to you.

anyway I got the code out and walked through it since actually I'm checking all the samples currenty for the final review so I had todo it. In any case I was suprised to find that it works, Yes granted the in the article and post a year ago didn't expressly bind the events but seeing as the audience is developers and this is a blog called 'hacking' silverlight so I'm assuming that most of the readers are trained developers and in fact many are probably smarter then me so I would think they would be able to figure out what it means to add the events. The only other issue I found with the code was in fact when I wrote the article the play and pause methods were abstracted in the original which again was a simple thing but anyway I found the remark mean. and here is the same code recompiled on RTM SL 2.0 and it seems to work:

http://www.hackingsilverlight.net/samples/ScrubbingTimeline.zip

Silverlight 2 Performance Best Practices

Here is some more 'content' summary info from my Architectural Best Practices presentation at DevTeach.

As to performance best practices… use the following as a good starting place:

· Don’t stretch things including Images, videos, or paths. Stretching things is going to cause more processing. Create assets at the size that they will be used and life will be much easier.

· Don’t use ECMA Script or the Anti-Pattern Silverlight 1.0.

· Don’t use windowless mode.

· Remove event handlers and set them to null before removing the element from the visual tree.

· Set MediaElement sources to null before removing them from the tree.

· Don’t use opacity if you just need to make things disappear, instead use the visibility property.

· Do use ‘IsHitTest’ and set it to false when doing drag and drop do hit testing only happens on the elements that are drag targets. This also allows you to keep visual elements from interfering with role over related events such as Mouse Enter and Mouse Exit events.

· Don’t have 1000 thousand elements in the same Visual Tree…

· If something is going to take a while tell the user or show the user that we are waiting.

· Don’t use ‘findName’ if you don’t have too as this causes a walk through the visual tree.

At least following these rules for Architecture and Performance your application won’t fall on its face.

SCRUM in 10minutes

Jobi sent me this link to a video this guy made that teachs SCRUM in under 10 minutes. We use this methodology alot at IM, with a little Crystal clear and some custom IM methodologies mixed in. For Agile dev I think this is a really cool resource Hamid put together. Don't get me wrong I'm not an expert but I have used lots of different methodologies from CMM/SDLC waterfall stuff on huge shrink wrapped products over the years to SCRUM and SCRUM seems to be nice, simple and effective for most project work we do.

http://www.youtube.com/watch?v=Q5k7a9YEoUI&fmt=22

Architectural Best Practices for Silverlight 2.0

these will or could change when people that are smarter then me publish material I'm sure but in my work on everything from the emmy site for the SL 1.0, lauch or Crossfader for the BG keynote, or innovate on or msn or the mix 08 stuff etc this all seems to be a nice bulleted list of best practices for Silverlight 2. we will see what happens when there is a Silverlight 3.o so with much ado:

Underlying Silverlight architecture helps us abstracted UI from logic and we need to take into account this toolability story that Silverlight enables as this can provide more ROI and shorter time to market for application development if designers and developers can work at the same time without the whole ‘through it over the fence’ approach. From a design pattern standpoint I recommend pMVP or Proxy Model View Presenter as the ‘better’ design patterns I know of require more upfront development as Silverlight doesn’t support the underlying infrastructure for these patterns. pMVP keeps it simple and the simplest solution is usually the best.
For Architectural best practices lets bullet out our best practices:

· Design Pattern pMVP (Proxy Model View Presenter) which is a clean, simple design pattern to implement that gives better abstraction.

· Make use of designer developer workflow enabled by Xaml UI separation.

· Don’t impose artificial Xaml coding conventions on designers or yourself as this slows productivity. Just let Blend go with it.

· Agree on Naming conventions, coding conventions (maybe standard WPF conventions might be a good place to start) and the like as you like but be consistent so that it is easier to support and pick up again later. This improves readability and helps the whole designer developer interaction.

· For the most part doing event bindings in Xaml, the more in Xaml the better however use common sense. If the designers are using Photoshop and converting the Xaml maybe just do the bindings in code so that you can have the designer just do a new conversion to generate new Xaml if they might make changes.

· Build at lest the Presenter logic in a separate Silverlight library.

· Build generic custom controls in a library.

· Consider putting the presenter code in a separate library or at least its own folder.

· Build Views with Blendablity in mind. Break up complex user controls that build the View into its component parts so that the elements can be more easily worked with in Blend.

· Use Gobal Styles and Templates and other resources in the App.xaml only when they are truly global in the application. Don’t clutter up the global resources with elements that are not really global.

· Use best practices with other connected technologies such as WCF or SQL or IIS/ASP.NET. Best practices in Silverlight wont’ do you much good if everything else is a mess.

· IF you build controls that rely on the DOM bridge encapsulate the ECMA related resources either in a Xap or right into the control so the ‘user’ as the simplest method to use the control.

· Consider the install experience to encourage users to install Silverlight so they can use your Silverlight application. Just using the default badge is boring.

· Consider Search Engine Optimization if it is a public site, such as control element names and the HTML on the Silverlight page etc. event the names of Xaml elements as a lot of this will be in the Xap that will at some point be parsed by search engine spiders.

That gives us a nice list of best architectural best practices. Following these simple rules lets you approach Silverlight architecture and application design with ease. Now we didn’t go into a lot of the application ‘Design’ aspects of ‘Designing’ applications such as UML etc but the focus here is strictly on Silverlight.

Sidebar Gadgets and Email

here is an interesting thing I ran into when emailing a sidebar gadget as a gadget file... it seems that some email systems will go into the compiled gadget file and replace all the script files with .txt files and this:

FILE QUARANTINED
[COMPANY NAME HERE] has removed App.Gadget->App.Gadget.html.js since ithas been found to match the FILE FILTER= unnamed: *.js file filter.

I find if I change the file extention to something like .virus then you can get through email filters much better...

Path Performance Issues in Silverlight

So I was talking to Jared and Devin and the other designer/integrator types this morning and some one pointed out that when you create a Path that uses stretch and has a height and width Silverlight takes a huge preformance hit. Not sure why this is as it doen'st appear to be an issue in WPF that I know of but it seems to be a 'don't do that' in Silverlight...