Smarty Pants Coding - Coding with a touch of flava

I'm very happy to say that tonight I'm making public my current side project, ImageWind.Net.

ImageWind.Net is written in Silverlight 3, and is a real-time visualizer of the images being posted to Twitter via TwitPic. The stream of images is like a never ending circus of the internet - but watch out, you may not want to see some of this stuff.

The current beta doesn't have much in the way of options yet, but it does have some basic abilities including retweeting an image, viewing the tweet details for an image, and viewing the images in both thumbnail and full views. There is a lot of work left to do, and a good bit of work already done but not yet finished, so please stay tuned for future updates here and in the beta's change log.

The Facebook port of Matchingo has now been committed to the repository on CodePlex. A zipped download of the release is available as well.

Matchingo (which was released almost 5 months ago - gasp!) has now been ported to Facebook!

Michael Urvan, a member of the Atlanta Silverlight Meetup, took the initiative to add on to the Matchingo codebase and make it integrate with Facebook. Matchingo high scores are now saving, and the high scores list can be filtered to show the leaderboards across all of Facebook, or just your own friends.

I am very stoked about these changes. I have been saying for a while now that global leaderboards in games are useless - I'm lucky if I'm in the top 25,000 users in most Xbox 360 leaderboards. Being able to see your scores against only your friends makes the game a lot more fun than if it were just one big board.

I hope to have Michael's changes added into the codebase on Codeplex soon. In the mean time, check out his blog entry on the port, and get out there and play against your friends!

The initial code drop of Matchingo is now available on CodePlex at matchingo.codeplex.com. This release contains the same functionality set as is currently featured in the Server Quest Contest, but the code itself has undergone major refactoring since that initial release.

The Matchingo codebase makes use of various technologies including:

• Microsoft .Net 3.5 SP1
• Silverlight 2 SDK
• Composite Application Guidance for Silverlight (Prism)
• Silveright Unit Test Framework

It is my hope to hear back from others in the community that have interest in contributing to this open source project as well as to hear constructive discussions regarding how Matchingo can be improved going forward. Please help me spread the word about Matchingo, and please consider voting for Matchingo in the ongoing Server Quest contest and on SilverArcade.com.

I am very pleased to announce the launch of Matchingo.com. Matchingo.com is the main hosting page for my new game Matchingo - a Silverlight implementation of a matching game.

Matchingo includes several features including the ability to replay every game you play, track all your high scores, choose from various card and background image sets, and more. Matchingo was developed using C#, Silverlight, and the Composite Guidance for WPF and Silverlight (aka Prism).

Matchingo will be competing in the upcoming Server Quest Silverlight game contest, and will be posted as open source in the coming weeks on CodePlex.

But enough of all that, go check it out!
Matchingo.com

I am slowly but surely working on a new project called Memory Game. It is an attempt to create something utilizing a bunch of the newest .Net technologies including WPF, CompositeWPF (Prism), Moq, MbUnit, etc. It should also be a good starting point for other ports (Windows Mobile, Silverlight, etc.) and should be a good learning experience for me as well.

It is currently hosted on codeplex.com and will be open source, but until the source is somewhat stable I'm not going to bother linking to it. I just wanted to post something to show I am still kickin'. I hope once the codebase is at least somewhat respectable to get some feedback and insights from other devs out there.

Last time we covered breaking our theming out into an external file, and how to style all instances of a given UI element. We left off needing to know the details of how to style more complicated items like buttons and their mouse-over and mouse-down appearances - that is what we will cover in this final part of the series.

The biggest thing we need to keep in mind with items like buttons or comboboxes is that their appearance can drastically differ based on a computer's operating system. You can get a feel of this by changing the Foreground of a button in Vista and seeing how when a button has focus its fill actually pulsates from the normal appearance to the mouseover appearance and back - this animation is unique to Vista and not seen in XP.

(click 'read more' for the rest of the article..)

Last time we covered how to break out colors from our XAML dialog into separate color definitions in the Page.Resources section of our XAML. After doing this the next question is something like "how do I break out the color, font size, font face, etc. from each of my textbox definitions", and "how can I break these styling definitions out to a separate file" - those are what we will cover in this part of the series.

After breaking out my colors last time my footer definition ended up something like this:

    <!-- bottom panel (ok & cancel buttons) -->

    <StackPanel DockPanel.Dock="Bottom" Orientation="Horizontal" 

            FlowDirection="RightToLeft" Height="32" 

            Background="{StaticResource footerFillBrush}">

      <Button Width="72" TabIndex="45" Margin="2,2,2,2">Cancel</Button>      

      <Button Width="72" TabIndex="40" Margin="2,2,2,2">OK</Button>      

    </StackPanel>

It's cool that my background color isn't hard-coded now, but all the other styling elements are still hard-coded - that is where Style definitions come in. Style definitions basically allow you to define all the properties that should be set on an element in one spot. You can then assign the Style you created to a textbox, or a label, or any other UI element you might want to style. You give the Style a Key name just like you would a color definition and then tell the UI element to make use of that Style (there is another way to use styles across all items of a given type instead of specifying which one to use for every UI element - we will cover that towards the end of this article).

(click 'read more' to read the full article..)

One of the more obvious issues with the initial post of the dialog XAML code last night was all the hardcoded colors, so this post will be a quick example of how to use defined colors and gradients instead so that when you want to change the colors you don't have to go looking through all the XAML to find where the colors are to modify.

Here is a snippet of the original XAML, specifically the blue gradient header across the top of the dialog and the white text on it:

    <!-- Top Panel (icon, description, help, etc.) -->

    <StackPanel Orientation="Horizontal" Width="500" DockPanel.Dock="Top">

      <StackPanel.Background>

        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">

          <GradientStop Color="Navy" Offset="0" />

          <GradientStop Color="MidnightBlue" Offset="1" />

        </LinearGradientBrush>    

      </StackPanel.Background> 

      ..

      <TextBlock Width="358" VerticalAlignment="Stretch" Padding="4,4,4,0" 

                 TextWrapping="Wrap" Foreground="White">

      ..

    </StackPanel>

 
The easiest thing to do right off the bat is to just take the LinearGradientBrush definition and move it up to a Resources section you create for the Page (or Window, etc.) - since we are working with a Page we will create a Page.Resources section right under the main Page definition:

  <Page.Resources>

    ..

    <!-- header panel styles -->

    <LinearGradientBrush x:Key="headerPanelFillBrush" StartPoint="0,0" EndPoint="0,1">

      <GradientStop Color="Navy" Offset="0" />

      <GradientStop Color="MidnightBlue" Offset="1" />

    </LinearGradientBrush>

    <SolidColorBrush x:Key="headerTextColor" Color="White" />

    ..

  </Page.Resources>

 
There are two brushes defined in that snippet - the 'headerPanelFillBrush' which is the blue gradient fill in the header, and the 'headerTextColor' which is the white color used for the text - these brushes will be referenced by the value we set for their 'x:Key' tag.

(click 'read more' to read the full article..)

So after two or three weeks of playing around with WPF/XAML I figured the best place to go next was to try and do some dialogs like I might do today in Windows Forms. I wrote these by hand using the Kaxaml tool mentioned on the recent Scott Hanselman podcast, and if you have that installed you should be able to make use of the .xaml files attached to this post pretty easily.

Keep in mind that this XAML is by hand (with Kaxaml's intellisense), not created via Blend or VS2008, and the XAML is probably atrocious to XAML experts - that's sort of the point. I'll be referring back to this project as I improve it - this post is just the initial post.

A simple dialog

(click 'read more' to read the full article..)