Because it’s quite long I’ve posted the XAML at the foot of this post. It’s pretty straight forward though. In Silverlight 1.0 XAML, you’re restricted to using a Canvas for your containers.
In this case I use 10 child canvases, one for each of the photos. At the start of the XAML for each image canvas I have two Storyboards in the Canvas.Resources section. One storyboard fades the question mark out then the photo in. The other reverses it, fading out the photo and in the question mark.
Next I put a rectangle around the entire game, then display the title bar. After that I display the instructions at the bottom using colors similar to the title bar.
A series of 10 canvases come next, each one holds two image controls, one for the question mark and one for the picture of the host. When the app starts, the Javascript replaces the Source property for each of the Answer images with a photo of the host, but you’ll see that tomorrow.
The only other thing to note is how mouse clicks are captured. There is no Click even as you might be used to with WPF, instead you have to capture the MouseLeftButtonDown. I route all 10 images’ MouseLeftButtonDown events to the same Javascript method, and use the Sender parameter to differentiate which of the 10 Canvases were clicked.
The final thing to note is the Reset Game button, which really isn’t a button but a canvas, which holds a rectangle with some cool gradients and a text block. Just like with the images, the canvas’ MouseLeftButtonDown is captured and the corresponding Javascript routine is called.
OK, enough explanation for today, here’s the code:
<Canvas xmlns=“http://schemas.microsoft.com/client/2007“
xmlns:x=“http://schemas.microsoft.com/winfx/2006/xaml“
x:Name=“mainCanvas“
Width=“800“ Height=“500“ Background=“Black“>
<Canvas.Resources>
<Storyboard x:Name=“mainRevealAnimation“ >
<DoubleAnimation Duration=“00:00:01.5“ From=“0“ To=“1“
Storyboard.TargetName=“mainCanvas“
Storyboard.TargetProperty=“Opacity“ />
</Storyboard>
<Storyboard x:Name=“mainHideAnimation“ >
<DoubleAnimation Duration=“00:00:01.5“ From=“1“ To=“0“
Storyboard.TargetName=“mainCanvas“
Storyboard.TargetProperty=“Opacity“ />
</Storyboard>
<Storyboard x:Name=“img00RevealAnimation“ >
<DoubleAnimation Duration=“00:00:00.5“ From=“1“ To=“0“
Storyboard.TargetName=“imgQuestion00“
Storyboard.TargetProperty=“Opacity“ />
<DoubleAnimation Duration=“00:00:00.5“ From=“0“ To=“1“
Storyboard.TargetName=“imgAnswer00“
Storyboard.TargetProperty=“Opacity“ />
</Storyboard>
<Storyboard x:Name=“img00HideAnimation“ >
<DoubleAnimation Duration=“00:00:00.5“ From=“1“ To=“0“
Storyboard.TargetName=“imgAnswer00“
Storyboard.TargetProperty=“Opacity“ />
<DoubleAnimation Duration=“00:00:00.5“ From=“0“ To=“1“
Storyboard.TargetName=“imgQuestion00“
Storyboard.TargetProperty=“Opacity“ />
</Storyboard>
<Storyboard x:Name=“img01RevealAnimation“ >
<DoubleAnimation Duration=“00:00:00.5“ From=“1“ To=“0“
Storyboard.TargetName=“imgQuestion01“
Storyboard.TargetProperty=“Opacity“ />
<DoubleAnimation Duration=“00:00:00.5“ From=“0“ To=“1“
Storyboard.TargetName=“imgAnswer01“
Storyboard.TargetProperty=“Opacity“ />
</Storyboard>
<Storyboard x:Name=“img01HideAnimation“ >
<DoubleAnimation Duration=“00:00:00.5“ From=“1“ To=“0“
Storyboard.TargetName=“imgAnswer01“
Storyboard.TargetProperty=“Opacity“ />
<DoubleAnimation Duration=“00:00:00.5“ From=“0“ To=“1“
Storyboard.TargetName=“imgQuestion01“
Storyboard.TargetProperty=“Opacity“ />
</Storyboard>
<Storyboard x:Name=“img02RevealAnimation“ >
<DoubleAnimation Duration=“00:00:00.5“ From=“1“ To=“0“
Storyboard.TargetName=“imgQuestion02“
Storyboard.TargetProperty=“Opacity“ />
<DoubleAnimation Duration=“00:00:00.5“ From=“0“ To=“1“
Storyboard.TargetName=“imgAnswer02“
Storyboard.TargetProperty=“Opacity“ />
</Storyboard>
<Storyboard x:Name=“img02HideAnimation“ >
<DoubleAnimation Duration=“00:00:00.5“ From=“1“ To=“0“
Storyboard.TargetName=“imgAnswer02“
Storyboard.TargetProperty=“Opacity“ />
<DoubleAnimation Duration=“00:00:00.5“ From=“0“ To=“1“
Storyboard.TargetName=“imgQuestion02“
Storyboard.TargetProperty=“Opacity“ />
</Storyboard>
<Storyboard x:Name=“img03RevealAnimation“ >
<DoubleAnimation Duration=“00:00:00.5“ From=“1“ To=“0“
Storyboard.TargetName=“imgQuestion03“
Storyboard.TargetProperty=“Opacity“ />
<DoubleAnimation Duration=“00:00:00.5“ From=“0“ To=“1“
Storyboard.TargetName=“imgAnswer03“
Storyboard.TargetProperty=“Opacity“ />
</Storyboard>
<Storyboard x:Name=“img03HideAnimation“ >
<DoubleAnimation Duration=“00:00:00.5“ From=“1“ To=“0“
Storyboard.TargetName=“imgAnswer03“
Storyboard.TargetProperty=“Opacity“ />
<DoubleAnimation Duration=“00:00:00.5“ From=“0“ To=“1“
Storyboard.TargetName=“imgQuestion03“
Storyboard.TargetProperty=“Opacity“ />
</Storyboard>
<Storyboard x:Name=“img04RevealAnimation“ >
<DoubleAnimation Duration=“00:00:00.5“ From=“1“ To=“0“
Storyboard.TargetName=“imgQuestion04“
Storyboard.TargetProperty=“Opacity“ />
<DoubleAnimation Duration=“00:00:00.5“ From=“0“ To=“1“
Storyboard.TargetName=“imgAnswer04“
Storyboard.TargetProperty=“Opacity“ />
</Storyboard>
<Storyboard x:Name=“img04HideAnimation“ >
<DoubleAnimation Duration=“00:00:00.5“ From=“1“ To=“0“
Storyboard.TargetName=“imgAnswer04“
Storyboard.TargetProperty=“Opacity“ />
<DoubleAnimation Duration=“00:00:00.5“ From=“0“ To=“1“
Storyboard.TargetName=“imgQuestion04“
Storyboard.TargetProperty=“Opacity“ />
</Storyboard>
<Storyboard x:Name=“img05RevealAnimation“ >
<DoubleAnimation Duration=“00:00:00.5“ From=“1“ To=“0“
Storyboard.TargetName=“imgQuestion05“
Storyboard.TargetProperty=“Opacity“ />
<DoubleAnimation Duration=“00:00:00.5“ From=“0“ To=“1“
Storyboard.TargetName=“imgAnswer05“
Storyboard.TargetProperty=“Opacity“ />
</Storyboard>
<Storyboard x:Name=“img05HideAnimation“ >
<DoubleAnimation Duration=“00:00:00.5“ From=“1“ To=“0“
Storyboard.TargetName=“imgAnswer05“
Storyboard.TargetProperty=“Opacity“ />
<DoubleAnimation Duration=“00:00:00.5“ From=“0“ To=“1“
Storyboard.TargetName=“imgQuestion05“
Storyboard.TargetProperty=“Opacity“ />
</Storyboard>
<Storyboard x:Name=“img06RevealAnimation“ >
<DoubleAnimation Duration=“00:00:00.5“ From=“1“ To=“0“
Storyboard.TargetName=“imgQuestion06“
Storyboard.TargetProperty=“Opacity“ />
<DoubleAnimation Duration=“00:00:00.5“ From=“0“ To=“1“
Storyboard.TargetName=“imgAnswer06“
Storyboard.TargetProperty=“Opacity“ />
</Storyboard>
<Storyboard x:Name=“img06HideAnimation“ >
<DoubleAnimation Duration=“00:00:00.5“ From=“1“ To=“0“
Storyboard.TargetName=“imgAnswer06“
Storyboard.TargetProperty=“Opacity“ />
<DoubleAnimation Duration=“00:00:00.5“ From=“0“ To=“1“
Storyboard.TargetName=“imgQuestion06“
Storyboard.TargetProperty=“Opacity“ />
</Storyboard>
<Storyboard x:Name=“img07RevealAnimation“ >
<DoubleAnimation Duration=“00:00:00.5“ From=“1“ To=“0“
Storyboard.TargetName=“imgQuestion07“
Storyboard.TargetProperty=“Opacity“ />
<DoubleAnimation Duration=“00:00:00.5“ From=“0“ To=“1“
Storyboard.TargetName=“imgAnswer07“
Storyboard.TargetProperty=“Opacity“ />
</Storyboard>
<Storyboard x:Name=“img07HideAnimation“ >
<DoubleAnimation Duration=“00:00:00.5“ From=“1“ To=“0“
Storyboard.TargetName=“imgAnswer07“
Storyboard.TargetProperty=“Opacity“ />
<DoubleAnimation Duration=“00:00:00.5“ From=“0“ To=“1“
Storyboard.TargetName=“imgQuestion07“
Storyboard.TargetProperty=“Opacity“ />
</Storyboard>
<Storyboard x:Name=“img08RevealAnimation“ >
<DoubleAnimation Duration=“00:00:00.5“ From=“1“ To=“0“
Storyboard.TargetName=“imgQuestion08“
Storyboard.TargetProperty=“Opacity“ />
<DoubleAnimation Duration=“00:00:00.5“ From=“0“ To=“1“
Storyboard.TargetName=“imgAnswer08“
Storyboard.TargetProperty=“Opacity“ />
</Storyboard>
<Storyboard x:Name=“img08HideAnimation“ >
<DoubleAnimation Duration=“00:00:00.5“ From=“1“ To=“0“
Storyboard.TargetName=“imgAnswer08“
Storyboard.TargetProperty=“Opacity“ />
<DoubleAnimation Duration=“00:00:00.5“ From=“0“ To=“1“
Storyboard.TargetName=“imgQuestion08“
Storyboard.TargetProperty=“Opacity“ />
</Storyboard>
<Storyboard x:Name=“img09RevealAnimation“ >
<DoubleAnimation Duration=“00:00:00.5“ From=“1“ To=“0“
Storyboard.TargetName=“imgQuestion09“
Storyboard.TargetProperty=“Opacity“ />
<DoubleAnimation Duration=“00:00:00.5“ From=“0“ To=“1“
Storyboard.TargetName=“imgAnswer09“
Storyboard.TargetProperty=“Opacity“ />
</Storyboard>
<Storyboard x:Name=“img09HideAnimation“ >
<DoubleAnimation Duration=“00:00:00.5“ From=“1“ To=“0“
Storyboard.TargetName=“imgAnswer09“
Storyboard.TargetProperty=“Opacity“ />
<DoubleAnimation Duration=“00:00:00.5“ From=“0“ To=“1“
Storyboard.TargetName=“imgQuestion09“
Storyboard.TargetProperty=“Opacity“ />
</Storyboard>
</Canvas.Resources>
<Rectangle Width=“800“ Height=“500“ Canvas.Left=“0“ Canvas.Top=“0“>
<Rectangle.Fill>
<LinearGradientBrush>
<GradientStop Color=“#00000000“ Offset=“0.0“ />
<GradientStop Color=“#55555555“ Offset=“0.25“ />
<GradientStop Color=“#00000000“ Offset=“0.75“ />
<GradientStop Color=“#88888888“ Offset=“1.0“ />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<!– Title bar –>
<Rectangle x:Name=“TitleBar“ Canvas.Left=“25“ Canvas.Top=“10“
Width=“750“ Height=“75“ RadiusX=“16“ RadiusY=“16“
Stroke=“#E0F0F0“ StrokeThickness=“8“>
<Rectangle.Fill>
<LinearGradientBrush StartPoint=“0.5,0“ EndPoint=“0.5,1“ >
<GradientStop Color=“#FFC4E1F0“ Offset=“0“/>
<GradientStop Color=“#FF64E1F0“ Offset=“1“/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock Canvas.Left=“50“ Canvas.Top=“33“
FontFamily=“Arial“ FontSize=“28“ FontWeight=“Bold“>
Arcane Code’s Match the Dot Net Rocks Hosts Game
</TextBlock>
<!– Instructions –>
<Canvas Canvas.Left=“50“ Canvas.Top=“390“>
<Rectangle x:Name=“Instructions“ Canvas.Top=“0“ Canvas.Left=“0“
Width=“625“ Height=“105“ RadiusX=“16“ RadiusY=“16“
Stroke=“#E0F0F0“ StrokeThickness=“4“>
<Rectangle.Fill>
<LinearGradientBrush StartPoint=“0.5,0“ EndPoint=“0.5,1“ >
<GradientStop Color=“#FFC4E1F0“ Offset=“0“/>
<GradientStop Color=“#FF64E1F0“ Offset=“1“/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock Canvas.Left=“10“ Canvas.Top=“15“
FontFamily=“Arial“ FontSize=“16“ FontWeight=“Bold“>
Instructions
</TextBlock>
<TextBlock Canvas.Left=“15“ Canvas.Top=“38“ Width=“550“
FontFamily=“Arial“ FontSize=“12“ TextWrapping=“Wrap“ >
Click on the question marks to reveal the hosts of Dot Net Rocks. Carl Franklin,
Richard Campbell, Rory Blyth, Mark Dunn and Mark Miller challenge you to find them.
Watch the message bar in the middle for quotes from the DNR hosts.
(Yes, I know, technically Mark Miller isn’t a host, but every time he’s on he thinks he
is, so I decided to let him live out his fantasies in this game.)
</TextBlock>
</Canvas>
<!– The images –>
<Canvas x:Name=“img00“ Canvas.Left=“050“ Canvas.Top=“100“ Height=“100“
MouseLeftButtonDown=“imgMouseLeftButtonDown“ Tag=“00“ >
<Image x:Name=“imgQuestion00“ Height=“100“ Width=“100“ Source=“Dunno.png“ />
<Image x:Name=“imgAnswer00“ Height=“100“ Source=“Carl01.png“ Opacity=“0“ />
</Canvas>
<Canvas x:Name=“img01“ Canvas.Left=“200“ Canvas.Top=“100“ Height=“100“
MouseLeftButtonDown=“imgMouseLeftButtonDown“ Tag=“00“ >
<Image x:Name=“imgQuestion01“ Height=“100“ Width=“100“ Source=“Dunno.png“ />
<Image x:Name=“imgAnswer01“ Height=“100“ Source=“Carl01.png“ Opacity=“0“ />
</Canvas>
<Canvas x:Name=“img02“ Canvas.Left=“350“ Canvas.Top=“100“ Height=“100“
MouseLeftButtonDown=“imgMouseLeftButtonDown“ Tag=“00“ >
<Image x:Name=“imgQuestion02“ Height=“100“ Width=“100“ Source=“Dunno.png“ />
<Image x:Name=“imgAnswer02“ Height=“100“ Source=“Carl01.png“ Opacity=“0“ />
</Canvas>
<Canvas x:Name=“img03“ Canvas.Left=“500“ Canvas.Top=“100“ Height=“100“
MouseLeftButtonDown=“imgMouseLeftButtonDown“ Tag=“00“ >
<Image x:Name=“imgQuestion03“ Height=“100“ Width=“100“ Source=“Dunno.png“ />
<Image x:Name=“imgAnswer03“ Height=“100“ Source=“Carl01.png“ Opacity=“0“ />
</Canvas>
<Canvas x:Name=“img04“ Canvas.Left=“650“ Canvas.Top=“100“ Height=“100“
MouseLeftButtonDown=“imgMouseLeftButtonDown“ Tag=“00“ >
<Image x:Name=“imgQuestion04“ Height=“100“ Width=“100“ Source=“Dunno.png“ />
<Image x:Name=“imgAnswer04“ Height=“100“ Source=“Carl01.png“ Opacity=“0“ />
</Canvas>
<Canvas x:Name=“img05“ Canvas.Left=“050“ Canvas.Top=“250“ Height=“100“
MouseLeftButtonDown=“imgMouseLeftButtonDown“ Tag=“00“ >
<Image x:Name=“imgQuestion05“ Height=“100“ Width=“100“ Source=“Dunno.png“ />
<Image x:Name=“imgAnswer05“ Height=“100“ Source=“Carl01.png“ Opacity=“0“ />
</Canvas>
<Canvas x:Name=“img06“ Canvas.Left=“200“ Canvas.Top=“250“ Height=“100“
MouseLeftButtonDown=“imgMouseLeftButtonDown“ Tag=“00“ >
<Image x:Name=“imgQuestion06“ Height=“100“ Width=“100“ Source=“Dunno.png“ />
<Image x:Name=“imgAnswer06“ Height=“100“ Source=“Carl01.png“ Opacity=“0“ />
</Canvas>
<Canvas x:Name=“img07“ Canvas.Left=“350“ Canvas.Top=“250“ Height=“100“
MouseLeftButtonDown=“imgMouseLeftButtonDown“ Tag=“00“ >
<Image x:Name=“imgQuestion07“ Height=“100“ Width=“100“ Source=“Dunno.png“ />
<Image x:Name=“imgAnswer07“ Height=“100“ Source=“Carl01.png“ Opacity=“0“ />
</Canvas>
<Canvas x:Name=“img08“ Canvas.Left=“500“ Canvas.Top=“250“ Height=“100“
MouseLeftButtonDown=“imgMouseLeftButtonDown“ Tag=“00“ >
<Image x:Name=“imgQuestion08“ Height=“100“ Width=“100“ Source=“Dunno.png“ />
<Image x:Name=“imgAnswer08“ Height=“100“ Source=“Carl01.png“ Opacity=“0“ />
</Canvas>
<Canvas x:Name=“img09“ Canvas.Left=“650“ Canvas.Top=“250“ Height=“100“
MouseLeftButtonDown=“imgMouseLeftButtonDown“ Tag=“00“ >
<Image x:Name=“imgQuestion09“ Height=“100“ Width=“100“ Source=“Dunno.png“ />
<Image x:Name=“imgAnswer09“ Height=“100“ Source=“Carl01.png“ Opacity=“0“ />
</Canvas>
<!– Message Bar across Middle of Screen –>
<Rectangle Width=“700“ Height=“26“ Stroke=“#FF000000“ Canvas.Left=“50“ Canvas.Top=“212“>
<Rectangle.Fill>
<LinearGradientBrush EndPoint=“1,0.5“ StartPoint=“0,0.5“>
<GradientStop Color=“#FFDDDDDD“ Offset=“1“/>
<GradientStop Color=“#FF464646“ Offset=“0.393“/>
<GradientStop Color=“#FE8B8B8B“ Offset=“0.723“/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock x:Name=“StatusArea“ Canvas.Left=“55“ Canvas.Top=“215“
FontSize=“14“ FontWeight=“Medium“ Foreground=“White“ >
Match the Hosts!
</TextBlock>
<!– Reset Game Button–>
<Canvas Canvas.Top=“455“ Canvas.Left=“690“ MouseLeftButtonDown=“ResetGame“>
<Rectangle Stroke=“Black“ StrokeThickness=“2“
Width=“100“ Height=“40“
RadiusX=“10“ RadiusY=“10“>
<Rectangle.Fill>
<LinearGradientBrush>
<GradientStop Color=“Gray“ Offset=“0“/>
<GradientStop Color=“Snow“ Offset=“0.6“/>
<GradientStop Color=“Gray“ Offset=“1“/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock Canvas.Top=“10“ Canvas.Left=“10“
FontSize=“14“ FontWeight=“Bold“
Text=“Reset Game“ />
</Canvas>
</Canvas>
Arcane Code 