Share on Facebook
Working as a web developer for going on 9 years, I've weathered the transition from table based layouts to the Semantic Web. When I start a new web page I begin by typing in the html semantically, with no consideration of layout at this point. The symantic html is what search engines will see when the site is indexed. It's my page's skeleton. For example, I'll make sure the important title of the page is an H1 tag. I'll layout all navigation as a list. I'll wrap all my text in paragraphs.
After the html markup is written - I can come back through and add the CSS style. Part of that will be to put some div tags in where the columns need to be. When the CSS is created, I'll make sure the naming convention doesn't target a specific color or position. What I mean is that if I have Red text in the markup used to notify users I won't call the style ".redtext" but ".alert". If I'm naming a column, I'll name it ".column1" instead of ".leftcolumn". That way, if that column gets moved to the bottom or the right later, the name of it's style will still make sense.
To me, it seems logical to move these same principles into the Silverlight application development arena. Since I've multiple ecommerce sites to put these controls into, my goal is to make it once and apply the skin differently. Take this back of the napkin drawing of a category list for example:
So in this case with a Silverlight control instead of an html page, I'll start with plain XAML, and go from there. Here I have taken the napkin drawing of category pictures with descriptions, and translated it to a Silverlight wrap panel full of buttons. If you would like to view the control, it can be seen here. The control was built with generic xaml and it's styles are applied dynamically in the back end code. If the concept is refined, it will work for multiple applications.
The wrap panel control came from Codeplex, by the way. If you'd like to download it, the source can be found here: http://www.codeproject.com/KB/silverlight/WrapPanelSilverlight.aspx
If you'd like the code for this category list, I've placed it out to this web server and that link is here: http://www.faxt.com/silverlight/snappea/CategoryList.zip . Here's the piece of code that fills the Wrap panel.
String buttonTemplate = "<Button xmlns='http://schemas.microsoft.com/client/2007' "
+ " Style='{3}'>"
+ "<Button.Template>"
+ "<ControlTemplate TargetType='Button'>"
+ "<Grid>"
+ "<TextBlock Style='{4}' Text='{0}' Grid.Row='0' />"
+ "<Image Source='{1}' Style='{5}' Grid.Row='1'/>"
+ "</Grid> "
+ "</ControlTemplate>"
+ "</Button.Template>"
+ "<Button.ToolTip>"
+ "<ToolTip Content='{2}' />"
+ "</Button.ToolTip>"
+ "</Button>";
foreach (MenuItem mnu in _menu)
{
//the StaticResource strings below could come from a configuration file, from parameters in the html, or ?
string onebutton = string.Format(buttonTemplate, mnu.MenuItemName, mnu.MenuItemImage,
mnu.MenuItemPageUri, "{StaticResource buttonStyle1}",
"{StaticResource MenuItemNameBlock}", "{StaticResource ThumbNailPreview}");
Button bt = (Button) XamlReader.Load( onebutton );
bt.Click += new RoutedEventHandler(bt_Click);
Wrappable.Children.Add( bt );
}