XAML Playing Cards

Article
05/03/2005

Looking at the card games that ship with Windows XP, I think one of the most obvious opportunities for improvement is the look & feel of the playing cards. These games use a shared library known as cards.dll to draw cards that look like... um... this:

Don't those look so 20th century? To prepare for migrating Internet Hearts, I've created an Avalon Playing Card control with built-in animations:

It can be set to any of the 52 cards (although no jokers currently). I've also created a "Hand" control that mimics the hand dealt in the Win32 picture above:

And, of course, since they're vector graphics, they look just as good no matter how much you zoom in:

You can get the source code here, which is compatible with the March CTP of Avalon. I'll post new versions as new builds of Avalon get released.

The .zip file contains a Visual Studio solution with two projects:

Cards, which builds Cards.dll containing the Card and Hand controls pictured above
Demo, a simple application demonstrating the use of the controls

In the Cards project, Cards.xaml defines the playing card control, which is just a button styled to look like a card:

The style consists of a Viewbox (to enable scaling while maintaining the proper aspect ratio) and two rectangles: one painted with the desired card face and one painted with a shadow. This painting is done with DrawingBrushes defined in the same file. There are 53 of them: one per card face and one for the shadow. For example, here's my DrawingBrush for the 2 of Hearts:

In case you're wondering, I didn't create that XAML by hand! :) I started with Adobe Illustrator, saved the file as SVG, then dealt with it from there.

The button style also contains an event trigger for Mouse.MouseEnter and another for Mouse.MouseLeave. Each of these points to a "storyboard" that handles the card animations (such as scaling and rotating). The only piece of code I needed to write was the property that sets the face:

// The user (via code or XAML) can simply specify the
// name of the face, which must match the name of one of the
// DrawingBrushes in Card.xaml.
public string Face
{
get { return face.ToString(); }
set
{
// Let exception happen on bad input. The system handles it well.
face = value;
CardButton.Background = (Brush)Resources[face];
}
}
private string face;

For now, the Hand control in Hand.xaml just hardcodes a set of cards in specific positions and rotations on a Canvas (again wrapped in a Viewbox for uniform scaling). For example:

<c:Card Width="100" Canvas.Left="10" Face="C7" >
<c:Card.RenderTransform>
<RotateTransform Center="50,140" Angle="310" />
</c:Card.RenderTransform>
< /c:Card>

Enjoy, and don't hesitate to give me feedback!

Comments

Anonymous
May 03, 2005
Wow... awesome stuff :-)

Please tell me these are going to ship with Longhorn and not as a separate powertoy :D

I wonder how hard it would be to make a replacement for cards.dll. Does XAML support any type of inheritance or reusability?
Anonymous
May 03, 2005
Thanks! To be clear, this is just a demonstration for the sake of developer education. I don't currently know what the plans are for the card games shipping in future versions of Windows.

As for your question (ShadowChaser), there's not much benefit in creating an Avalon-based binary-compatible replacement for cards.dll. But you could reuse the controls defined in my assembly in multiple applications. I haven't looked into how easy or hard this is currently, but hopefully we'll learn something as I do this with Internet Hearts!
Anonymous
May 04, 2005
<p>&lt;ul&gt;&lt;li&gt;&lt;a href=&quot;http://fb2.hu/x10/Articles/MonoForFun.html&quot; target=&quot;_blank&quot;&gt;Mono Mania&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=&quot;http://www.imation.com.au/products/disc_stakka/view_demo.htm&quot; target=&quot
Anonymous
May 04, 2005
So, are you collaborating with Chris Sells on his plans for Longhorn Solitaire?
Anonymous
May 04, 2005
Adam Nathan's Win32 to WinFX Blog has a good post titled XAML Playing Cards. Adam takes the playing cards...
Anonymous
May 05, 2005
This is a separate effort, although I welcome Chris (or anyone else) to use my cards!
Anonymous
May 06, 2005
Cool demo, Adam. You mentioned that you drew the artwork in Illustrator, then exported to SVG, and "dealt with it from there." What types of conversion operations are needed to create an XAML document from SVG data? I'm just starting to read about XAML and all of its potential, so apologies if this is an obvious question.
Anonymous
May 08, 2005
Mike, to convert SVG to XAML have a look at:
http://www.xamlon.com/kb/article.aspx?id=10018
http://workspaces.gotdotnet.com/svg2xaml

Adam, those cards look really good.
Anonymous
May 10, 2005
Thanks for the links, William!
Anonymous
May 11, 2005
In my previous XAML-related post, Mike asked about my conversion of XAML from SVG.&nbsp; I know of two...
Anonymous
May 16, 2005
I have to admit, this is an awesome sample.

a simple thing:
I've been getting your sample code on XamlShare, tried to integrate it into a sample library that i created for learning and the PlayingCardHand class simply wont compile. The system refuse to accept Xaml for a class subclassing Viewbox. In the demo here, you provide Grid as a subclass.

Is this a limitation of the compiler ?
Will we be able to create custom controls using any base class in the future ?
Anonymous
May 18, 2005
Ah, it appears that the version I put on XAMLshare is actually for the next Avalon CTP. I've updated it to wrap the Viewbox in a Grid. But yes, that limitation will be removed very shortly!

Thanks!
Anonymous
May 23, 2005
I've posted a Beta 1 RC version of the sample at http://www.pinvoke.net/blog/downloads/CardsBeta1RC.zip.
Anonymous
May 30, 2005
I've been reading a couple of Avalon blogs lately, considering to write my HeroQuest programs in Avalon...
Anonymous
June 02, 2005
Getting an error when trying to build

A project with an Output Type of Class Library cannot be started directly.

In order to debug this project, add an executable project to this solution which references the library project. Set the Executable project as the startup project.

How do i resolve this issue?
Anonymous
June 02, 2005
You can right-click on the "Demo" project and select "Set as StartUp Project". Then you should be able to launch the app. That setting is stored in the .user file, which seemed wrong to distribute, although I should have just listed the Demo project first in the solution since that's the one VS tries to start up by default.
Anonymous
June 13, 2005
The comment has been removed
Anonymous
June 15, 2005
weight loss pill http://www.nofatonline.com/
Anonymous
July 28, 2005
After installing Windows Vista and revealing that it has no significant dependency on WinFX or the .NET...
Anonymous
February 08, 2006
I totally agree with what you're saying. I wish more people felt this way and took the time to express themselves. Keep up the great work.

Frank Gonzalez
http://www.postcardmaniafun.com
Anonymous
May 04, 2006
This blog posting was of great use in learning new information and also in exchanging our views. Thank you.
Mary Anne Martin
http://www.postcardmaniafun.com
Anonymous
May 04, 2006
This blog posting was of great use in learning new information and also in exchanging our views. Thank you.
Mary Anne Martin
http://www.postcardmaniafun.com
Anonymous
July 28, 2006
dicover credit card <a href=http://dicovercreditcard.artshost.com/>dicover credit card</a>
Anonymous
July 28, 2006
dicover credit card <a href=http://dicovercreditcard.isportsdot.com/>dicover credit card</a>
Anonymous
July 31, 2006
longues peines dans des exils en margeant
Anonymous
August 09, 2006
cardgames <a href=http://cardgames.noneto.com>cardgames</a>
Anonymous
August 30, 2006
After installing Windows Vista and revealing that it has no significant dependency on WinFX or the .NET
Anonymous
December 04, 2006
I got an email the other day that I thought I'd share (with permission from the author and with names
Anonymous
June 01, 2009
PingBack from http://uniformstores.info/story.php?id=15746
Anonymous
June 02, 2009
PingBack from http://woodtvstand.info/story.php?id=89451
Anonymous
June 09, 2009
PingBack from http://greenteafatburner.info/story.php?id=397
Anonymous
June 16, 2009
PingBack from http://fixmycrediteasily.info/story.php?id=1860

Share via

XAML Playing Cards

Comments

Additional resources