AListForEverything

TECHNOLOGY USED: SILVERLIGHT 2, BETA 1

I recently posted some simple examples that demonstrate the power of Styles and ControlTemplates to skin your Silverlight applications.  Now let's talk about how it works.  Controls can be built to separate their visual appearance (i.e., the rectangular shape) from their behavior (i.e., firing a Click event).  This separation is facilitated with a "control contract" that implements the "parts control model."  This approach separates the appearance of the control into TemplateParts that can be replaced via ControlTemplates.  The contract specifies the following three items:

• Public properties that can be set using Styles or inline property assignments
  • Defined as public DependencyProperty
• UIElement objects that define the appearance
  • Defined with TemplatePart attributes
• Storyboard objects that define how the control changes appearance in response to events
  • Defined with TemplatePart attributes

The Styling and Templating Overview provides this simple example of a control contract:

Learning about the control contract, or parts control model, will provide you with a deeper understanding of Styles and ControlTemplates.  New controls should be written with a control contract to allow others to skin them. 

Sometimes you need to type characters that are not on an English-based keyboard.  For example, if you need to type the word "Español" with a tilde accent over the "n" - or other Spanish words, like "¡Sí!" or "¿Como estas?"  You can use special key sequences to add those characters.   The sequence you use depends on the operating system and application you are using.  Below is a reference for adding Spanish characters.  I also included links to good references that explain how to add other characters and symbols, like ô, æ, «, £, ÷, ½, ©, and many more.

Method #1: Windows computer, Microsoft Word

Reference: http://tlt.psu.edu/suggestions/international/accents/codeword.html

Letters that use the “Tilde” accent, like ñ:

• press and hold the following keys << CTRL >>  +  << SHIFT >>  +  << ~ >>
• let go of those keys
• press the << n >> key for lowercase, or press the << SHIFT >>  +  << N >> keys for uppercase

Letters that use the “Acute” accent, like á:

• press and hold the following keys << CTRL >>  +  << ‘ >>
• let go of those keys
• press the << a >> key for lowercase, or press the << SHIFT >>  +  << A >> keys for uppercase

Letters that use the “Umlaut” accent, like ü:

• press and hold the following keys << CTRL >>  +  << SHIFT >>  +  << : >>
• let go of those keys
• press the << u >> key for lowercase, or press the << SHIFT >>  +  << U >> keys for uppercase

Method #2: Windows computer, any program

Reference: http://tlt.psu.edu/suggestions/international/accents/codealt.html#accent

Follow these steps:

• press and hold the << ALT >> key
• while holding down the << ALT >> key, use the numeric keypad to type a special code
• let go of the << ALT >> key

Here are the codes:

Letters that use the “Tilde” accent, like ñ:

Ñ  0209

ñ  0241

Letters that use the “Acute” accent, like á:

Á  0193

á  0225

É  0201

é  0233

Í  0205

í  0237

Ó  0211

ó  0243

Ú  0218

ú  0250

Ý  0221

ý  0253

Letters that use the “Umlaut” accent, like ü:

Ü  0220

ü  0252

Method #3: Macintosh computer, any program

Reference: http://tlt.psu.edu/suggestions/international/accents/codemac.html#accent

Letters that use the “Tilde” accent, like ñ:

• press and hold the following keys << OPTION >>  +  << N >>
• let go of those keys
• press the << n >> key for lowercase, or press the << SHIFT >>  +  << N >> keys for uppercase

Letters that use the “Acute” accent, like á:

• press and hold the following keys << OPTION >>  +  << E >>
• let go of those keys
• press the << a >> key for lowercase, or press the << SHIFT >>  +  << A >> keys for uppercase

Letters that use the “Umlaut” accent, like ü:

• press and hold the following keys << OPTION >>  +  << U >>
• let go of those keys
• press the << u >> key for lowercase, or press the << SHIFT >>  +  << U >> keys for uppercase

Conclusion

Yay, now you have the tools to make non-English letters and special characters.  It's a bother to have to look up and enter the secret key-press sequences... but it's a lot better than not being able to use them at all!  For web developers, check out HTML Codes for Spanish.

Frustrated by the high gas prices at the pump? Blow off some steam playing “Solar Shooter: A Gas Guzzler’s Nightmare.” In this shoot’em up arcade game, it’s you vs. the gas guzzlers. Use your solar powered, electricity shooting hover car to face off against the single occupant commuter, the angry guy in the SUV, and even the dreaded gas station pump. Gotta zap them before they soak you. 

     

Solar Shooter is the first game posted to www.SL42.com.  The first version of the game was submitted to the "RIA Run" competition hosted by Internet.com and Microsoft.com.  It was selected as a finalist!!!  Support my entry and play the RIA Run Contest version between May 16, 2008 and June 5, 2008.

Solar Shooter was built with Silverlight 2.  I previously posted a complete listing of Silverlight features used in the game. 

Download the source code using this link: SolarCarBeta1.zip

Please post comments about Solar Shooter here. The next version of Solar Shooter is scheduled to include:

• Bosses
• Special weapons
• Brakes for the car
• Sound effects for ammo and explosions
• Level unlock codes
• Global scoreboard

I look forward to posting the next version.

TECHNOLOGY USED: SILVERLIGHT 2, BETA 1

In a recent post, I showed how Styles can be used to change one property of the existing appearance of a control, similar to CSS.  For example, the Button has a Foreground property that can be used to change the color of the text it contains.  You can use a Style object to set this foreground color for several Button controls.  Styles have limits.  You cannot use a Style to change the shape of a Button.  A Style cannot make a rectangular-shaped button look round. 

That's where the ControlTemplate is useful.  It was designed specifically for changing the shape of a control.  It can be used to change that rectangular-shaped button into a round one, as Jesse Liberty demonstrated in his Styles and Templates tutorial.  Another excellent post that clearly explains ControlTemplates is Creating a Custom Skin by Matt Berseth.

Some things to notice about Skinning with a ControlTemplate are:

• ControlTemplates are written inside a Style definition, using Property="Template".
• You can mix "normal" Styles and ControlTemplates in the same Style definition.  The "normal" Styles become the default Style for your skin.
• The Setter's value must be set to a ControlTemplate.
• The root visual element in the ControlTemplate must be named x:Name="RootElement"
• You can use the property values assigned by the consumer of the template, using the {TemplateBinding PropertyName} syntax.
• Storyboards are used to change the appearance of the control when the visual state changes, for example during the MouseOver event. 
• The normal state is the default and starting state of the control.  I did not need to provide any animation for this state.
• You can use DoubleAnimation, ColorAnimation, and ObjectAnimationUsingKeyFrames.
• You can animate attached properties, using syntax like (Rectangle.Stroke).(SolidColorBrush.Color).
• You cannot use TemplateBinding values in animations.
• You cannot have two objects in the ControlTemplate with the same x:Name. 
• Objects with special names defined in the control contract will receive special functionality from the base control's behavior.  For example, a HyperlinkButton's FocusVisualElement will be invisible unless the control has focus... at which time, the FocusVisualElement becomes visible. 

An Example Template Skin for HyperlinkButton

The typical example is making a button round.  To make my example a little more interesting, I'll do something different: adding a border to a HyperlinkButton, taking care to provide visual clues for all states defined in the HyperlinkButton's control contract: having focus, MouseOver, Pressed, and Disabled.  This skin allows for resizing and uses the values assigned by the consumer of this ControlTemplate. 

Applying the Template

Using a ControlTemplate is as simple as using a Style... because a ControlTemplate is basically part of a Style.  Just use databinding to a StaticResource for linking the Style property to the ControlTemplate.  The following code shows three sample HyperlinkButtons: one without the ControlTemplate, one using the default ControlTemplate Values, and one overriding the ControlTemplate's default values. 

And, finally, here is the Silverlight example you can interact with, to see how it looks when finished. 

• To review the MouseOver state, move your mouse around the example. 
• To preview the Pressed state, click on the links.
• To preview the Disabled state, click on the button.
• To preview the "has focus" state, click in the textbox and tab to the links.

If you can't see the Silverlight example, below is a screenshot that illustrates the unstyled HyperlinkButton with focus, the ControlTemplate HyperlinkButton with MouseOver, and the second ControlTemplate HyperlinkButton as disabled.

The ControlTemplate is a powerful tool.  It can be used to make drastic changes to the way your application looks.  For example, in the Solar Shooter game, I made buttons that look like a car, a lightning bolt, and an explosion.  ControlTemplates can be more difficult to build than Styles because they include more parts and also because they don't always throw errors - which makes debugging much harder.  But the extra work is worth it... and once you learn the concepts, it does get easier.  ControlTemplates are one of the Silverlight tools that have the potential to dramatically improve web applications.  What will you use them for?

I've always been shocked that the price of printers is low and the price of ink is high.  The replacement ink costs almost as much as the printer!!!  Even at retail prices, purchasing replacement ink just two times will end up costing more than the printer.  Can you believe that??!!

For example, I bought my color inkjet printer on sale for under $100.  The replacement ink costs about $75.  It's painful to buy expensive ink for a cheap printer!  We also have a laser printer that can also be replaced for under $100.  The ink for that printer also costs around $75. 

I've stayed away from refurbished or refilled inks in the past because I heard they aren't as good or could even damage the printer.  But when the retail ink costs almost as much as the printer, I'm almost tempted to just get a new printer each time instead of just an ink cartridge.

I finally broke down and started shopping online for the best deals on ink.  I have found Omnipro to have consistently low prices across their products.  I bought the cheapest replacement inks for both our inkjet and laser printers.  The inkjet replacement was $15 and the laser cartridge replacement was $25, making a savings of $110 on this purchase!  They were all remanufactured cartridges, but they were so cheap, it was worth it.  I don't really need top-end, perfect colors when printing.  Assuming that the cartridges work good enough, each time I buy ink from Omnipro, I save enough money to replace the whole printer. 

 Click here to shop at Omnipro.

I have been satisfied with the pages I've printed with their ink.  It has been good enough.  I will continue to buy ink from them.  Chances are, you can save $$ too!

One MSDN resource I use regularly is the page about named colors.  It is helpful when I want to quickly add a color to my application without going through the RGB color picker.  This reference is good because it provides a screenshot example of each named color, along with its official predefined color name and corresponding RGB values. 

This page is part of the Silverlight 1.0 documentation.  I use this one because I haven't found a similar reference for Silverlight 2.  Besides, the 1.0 color names still work in Silverlight 2.

It would be cool if Visual Studio provided color swatches in the IntelliSense.  Here's the current IntelliSense:

Here's what it could look like:

Neither Blend nor Design support setting colors by their named values.  Of course, you can do this in XAML in Blend. 

Perhaps the lack of support for named colors is because most "real" designs will use colors defined by their RGB values.  It would still be cool to have this resource integrated into the tools rather than having to look it up from documentation. 

What is carpodding?  It is a term I made up to describe listening to podcasts while driving.  It's a versatile word.  You can get creative with it.  In essence, carpodders are people who carpod. 

Unfortunately, I can't claim to be the first person to invent this word.  It is defined at techweb and a couple other places.   It's not defined on wikipedia, dictionary.com, or even urban dictionary... yet.

Most people write about carpodding because they do it while they commute to work.  There are even podcasts called Monday Morning Commute or My Daily Commute. 

Some of you might be wondering, just how do you carpod?  You need three things:

1. a portable music player (probably an iPod)
2. podcasts in your player (probably by downloading MP3 audio files and importing those files into your player)
3. the ability to listen to your podcasts while driving

And others of you are wondering, how do I carpod safely? After all, it's against the law to be driving around with headphones on both ears.  I guess the simplest way would be just use one headphone.  You could buy a speaker for your MP3 player.  I chose to buy a fairly cheap car radio with a headphone plug and connect it to my iPod.  There are much fancier solutions, like car radios that directly plug into and control an iPod.

What would you listen to while you carpod?  Pretty much anything!  Check out these blogs and articles about finding podcasts.  Some even write about free audio book resources. 

Sometime soon, I'll share my list of favorite podcasts.  That's a problem with podcasts... they are slow to review because you can't skim them.  As Scoble said, they're great for places where you can't read... like the car. 

Happy carpodding!

p.s. It would be really cool if the podcasts were already automatically in your car stereo - and you could bypass the player, downloading and plugging into the stereo!

While I was developing the Solar Shooter game, I wanted to add "control template and skinning support."  What is that?  Silverlight uses the "WPF-based" UI framework, which means that the appearance is separate from the behavior.  This is implemented through Styles and Control Templates.  They both provide a central place where you can define the appearance of a control.  Basically, Styles change one property of the existing appearance of the control, while ControlTemplates replace the entire appearance. 

Styles are very similar to CSS.  Styles can be used to customize the default appearance of a control.  The Silverlight SDK provides a very clear explanation of styles and is available online.  If you are completely new to Styles, read Jesse Liberty's Styles and Templates Tutorial.  For example, you can use a Style to make a group of TextBoxes have a yellow background.  Styles can be defined wherever you have <Resources> (i.e., control resources, grid resources, UserControl resources, App resources, etc.).  Basically, a Style is used to set a collection of properties for a specified type of control.  

As a simple example, let's use Styles to apply a green theme to a standard login form.  Though this example is very simple, it demonstrates using Styles to change the appearance of multiple controls from one place.  If we wanted to reduce the size of the labels to 13 points, we would only have to make that change in one place.  We can also feel confident that all of our labels have a similar appearance because they all use the same Style resource.

Here is a screenshot of the form before applying Styles:

Here's the code I used to apply a green theme to change the appearance of controls on this login form.  This example uses both named colors and RGB-defined colors to achieve a consistent visual design. 

Here's the result of using Styles:

As you can see, Styles are an important Silverlight / WPF concept to know.  It might seem confusing if you haven't used them before, but they are really simple once you understand them.  Styles are a powerful way of organizing your code, making it easier to maintain, and also help to enforce a consistent appearance across your application(s).  Have fun coding with Style!

I recently heard about 99 designs.  It is kind of like a contractor website for graphic designers.  Their goal is to help people "buy and sell designs."  The way it works is that someone will launch a contest where they need a graphic design.  When you create a contest, you offer a cash prize for the winning submission.  You can also offer non-cash prizes to make it interesting.  Designers create and submit graphics for you.  You pick a winner and pass out the prize money. 

The business model used by 99 designs is based on the concept of crowdsourcing - outsourcing a unit of work to a large group of people.  This service is a rebranded version of the original SitePoint contests.  The person outsourcing the work pays a $39 fee to 99 designs and at least a $50 prize to the contest winner.  You can only ask for one graphic per contest.  For example, a business card and website logo would be two separate contests.

This money message at the footer caught my attention:

So far, it sounds like a good concept, right?  You can tell my bias.  I'm not a designer.  I am a developer / business person who needs to purchase graphics.  It sounds like a cheap way to choose from a bunch of custom designs, which were all custom drawn for me.  Sure, most of them will suck and some of them will be good.  Just pick from the good ones.  Great concept.

That is, until I started hearing what other designers had to say about 99 designs.  In an Open Designs forum, Sean Pollock said that most of the designers use the contests for practice.  Some designers, like Chris at Positive Space, claim that sites like this devalue the graphic design industry.  Kevin Potts at GraphicPush criticizes that designers are "doing spec work for third-world prices with no option for copyright retention." 

I thought it might be fun to play around with graphic design and enter one of their contests.  The contest I looked at already had more than 50 entries.  My chances of winning the prize are not good.  This is just like what Sean Pollock described.  I would be using the contest as a training ground to practice my skills... or as a playground just to have fun... but not as a serious money making effort.   At best, it would be a side gig. 

I disagree with the criticism that it is underpriced.  It's not dirt cheap...  Free clip art is dirt cheap.  Some people are paying $500+ for one graphic.  The cheapest you can get one graphic at 99 designs is $89.  For a hobbyist designer, the winning prize money could be a nice side gig.

For hobby endeavors, small businesses, or startups, using the "less than top quality" graphics from 99 designs will be good enough.  It can keep costs down.  Does this devalue the graphics community?  I don't think so.  I didn't see big companies like Nike, Microsoft, or Ford launching contests on this site.  Companies that have the money to hire top designers are not replacing their designers with low cost services like this. 

99 designs fits a specific niche, where people on a budget can connect with designers willing to work for cheap. 

TECHNOLOGIES USED: Silverlight 2 Beta 1, Expression Blend 2.5 Beta, Expression Design 2 Beta, Visual Studio 2008

I decided to enter the RIA Run contest, mostly to learn Silverlight 2 while building casual games.  Since I was already learning how to make a "shoot'em up" type of game, I kept going with it - but added more interesting characters.  Upon reading the contest description and rules, I realized that this competition was perhaps more about showcasing the new features in Silverlight 2 than about the gameplay.  It makes sense - this is a Microsoft sponsored event and they always want to promote their new technologies.  For this version of my game, I made a strategic decision to focus more on the technology than on the gameplay. 

The game I made is called Solar Shooter: A Gas Guzzler's Nightmare.  Part of my score in the competition will be based on how many people play the game on the devx.com website.  As soon as I get my link, I will post it right here.  In the meanwhile, you can play the game on my new SL42.com games website. 

UPDATE: Solar Shooter was selected as a finalist!  From May 16 to June 5, 2008, support my entry into the contest by playing Solar Shooter at devx.com. 

Here's a brief description of the game:

Frustrated by the high gas prices at the pump? Blow off some steam playing “Solar Shooter: A Gas Guzzler’s Nightmare.” In this shoot’em up arcade game, it’s you vs. the gas guzzlers. Use your solar powered, electricity shooting hover car to face off against the single occupant commuter, the angry guy in the SUV, and even the dreaded gas station pump. Gotta zap them before they soak you.

The entry form asked me to briefly describe "How does this game use Silverlight 2.0 Beta features? What quirks, tips, or gotchas did you uncover?"  They were looking for a short description... but I had way more to say about Silverlight 2 features than could fit into 60 words.  Below is my complete list. 

Silverlight 2 Beta 1 Features Used in Solar Shooter

Managed code.  The application was built entirely within the Silverlight framework.  No HTML or Javascript needed.  BCL and CLR all the way!!!  Three cheers for events, delegates, strongly typed objects, object inheritance and composition. 

Layout Management.  The game makes extensive use of the built-in layout management controls (i.e., Grid, StackPanel, Canvas) in addition to the built-in layout management capabilities. 

• RotateTransforms are used for rotating the game characters (also known as "sprites")
• TranslateTransforms are used to add a shadow to text
• A ScaleTransform is used to resize the game when it's parent browser window resizes
• A Border was used to create rounded corners on for the in-game score
• ZIndex, Opacity and Visibility are used to manage the dynamic display
• Margin is typically used to position objects within a grid cell.  To remember what the 4 numbers mean when setting margins in XAML (i.e. Margin="4,12,30,2") - think of the acronym "LTRB," which sounds like "Letter B," and is short for Left,Top,Right,Bottom.

Data Binding.  The game uses databinding whenever possible to simplify connecting the UI to several data sources.

• Two-Way data binding is used to manage the audio effects.  The MediaElement playing the sounds is bound to a toggle button that can be used to mute them.  Since there is no way to automatically databind the two properties directly, I made a bindable CLR class (implements INotifyPropertyChanged) that acts as a binding surrogate to connect them. 
• One-Way data binding is used for the score and level text in TextBlocks.  In both cases, I wrote Converters to change the data content into text to show on screen.  For example, one converter modifies the score to include the thousands separator. 
• One-Way data binding is also used to display the ObservableCollection of high scores in a DataGrid.  A Factory Pattern is used to allow for multiple scoreboards (i.e., local, server, etc.)

Control template and skinning.  This game uses both Styles and ControlTemplates.

• Styles are used to format the text on the instructions page.
• ControlTemplates are used to make the custom round buttons for Mute, closing the instructions / high score screens, on the pause screen and on the game over screen.  They were also used to make irergular shaped buttons on the main screen.  The button on that screen are shaped like a car, lightning bolt, and an explosion. 
• ControlTemplates are also used to provide animated effects for events like mouseover or pressed.   
• Making templates from Expression Design was harder than I would have liked... but much easier than trying to hand-code the vector graphics.  Some of the gotchas I encountered while exporting the graphics follow. Inside a ContentTemplate, you cannot have two controls with the same x:Name... but Design likes to export XAML with the x:Name specified.  I found it easiest to export the entire graphics for the different states of my controls... leave them in the <Canvas> objects as exported by Design... and toggle the opacity of those Canvas objects in the event storyboards.  Probably not the best performance - fairly fast to build!

Core Form Controls.  Several controls are used in making this game. 

• TextBlocks are used for the current score, level transitions, game over screen, and instructions screen. 
• Buttons are used for most user interaction: show screens, start a new game, etc.
• A WatermarkedTextbox is used to get the user's name for display on the high scores list.
• A ToggleButton is used to allow the user to mute the sou