With GIF's, which isn't supported in Silverlight2, transparency is fairly easy because you can just specify what color in that GIF you want to be your transparent color. With PNG's, it's a little tougher. You will need to use an editing tool to go in and "clear" out the sections of the bitmap that you do not want displayed. There are tool that do this, and I will walk you through one such scenario.
Step 1. Find a image editing tool that supports PNG file format and a feature like the "Magic Wand" that is used to clear selected areas. Open the image you want to edit in that tool. For our example, we will use this cute little attacking mage below:
Step 2. Click the "magic wand" 
button on the toolbar. If you are using a tool like Photoshop, first duplicate the layer and delete the original background layer. This way the background you clear away is transparent and not white.
If available, set the Tolerance level = 0 so that it only grabs the brown color. Also, if available, turn off Anti-Alias.
Step 3. Left click on the brown surface (plus left shift click to grab the brown piece under his cloak) and you will see that everything in brown is selected.
Step 4. Hit the delete key. The result is the background is now erased!
Step 5. Save the file as a PNG file. This image will now render in Silverlight as transparent through the spaces that you cut out of the image.
Credits: Thanks to the site http://reinerstileset.4players.de/ (Reiner "Tiles" Prokein) for these images.
Thank you,
--Mike Snow
Subscribe in a reader
Silverlight 2 provides full support for keyboard and mouse event handling. Not only can you monitor events for the entire application but you can also monitor them at the individual control level.
The following is an example of how to monitor all the keyboard and mouse events available at the application level:
Page.xaml.cs:
namespace SilverlightApplication
{
public partial class Page : UserControl
{
public Page()
{
InitializeComponent();
this.KeyDown += new KeyEventHandler(Page_KeyDown);
this.KeyUp += new KeyEventHandler(Page_KeyUp);
this.MouseEnter += new MouseEventHandler(Page_MouseEnter);
this.MouseLeave += new MouseEventHandler(Page_MouseLeave);
this.MouseLeftButtonDown += new MouseButtonEventHandler(Page_MouseLeftButtonDown);
this.MouseLeftButtonUp += new MouseButtonEventHandler(Page_MouseLeftButtonUp);
this.MouseMove += new MouseEventHandler(Page_MouseMove);
}
void Page_KeyDown(object sender, KeyEventArgs e)
{
}
void Page_KeyUp(object sender, KeyEventArgs e)
{
}
void Page_MouseEnter(object sender, MouseEventArgs e)
{
}
void Page_MouseLeave(object sender, MouseEventArgs e)
{
}
void Page_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
}
void Page_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
}
void Page_MouseMove(object sender, MouseEventArgs e)
{
}
}
}
To monitor at the control level you can add an event handler directly to the control in the XAML. In the example below, we have added a mouse left down and mouse left up button event handler to a <Textblock> control.
Page.xaml:
<UserControl x:Class="SilverlightApplication6.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<Grid x:Name="LayoutRoot" Background="White">
<TextBlock x:Name="FPS" MouseLeftButtonDown="FPS_MouseLeftButtonDown"
MouseLeftButtonUp="FPS_MouseLeftButtonUp">Hello there</TextBlock>
</Grid>
</UserControl>
Page.xaml.cs:
namespace SilverlightApplication
{
public partial class Page : UserControl
{
public Page()
{
InitializeComponent();
}
private void FPS_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
FPS.Text = "Mouse button down";
}
private void FPS_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
FPS.Text = "Mouse button up";
}
}
}
Thank you,
--Mike Snow
Subscribe in a reader
Main Game Loop
***NOTE: Please see Tip of the Day #16 – I have found that using the StoryBoard control is a better choice for your MainGameLoop. I am keeping this blog only to illustrate how to use the DispatcherTimer.
The main game loop is the heart of your game. In this function you will execute the majority of your game related tasks including:
- Game AI
- Updating objects and their positions.
- Drawing of a single frame.
- Etc...
Couple notes:
- Adding a using statement for the DispatcherTimer: using System.Windows.Threading;
- Set the timer interval to TimeSpan.Zero. This will put the rate to be in sync with your monitors refresh rate.
Page.xaml.cs:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Threading;
namespace SilverlightApplication6
{
public partial class Page : UserControl
{
private DispatcherTimer _gameLoopTimer;
private int _fps = 0;
private DateTime _lastFPS = DateTime.Now;
public Page()
{
_gameLoopTimer = new DispatcherTimer();
_gameLoopTimer.Interval = TimeSpan.Zero;
_gameLoopTimer.Tick += new EventHandler(MainGameLoop);
_gameLoopTimer.Start();
InitializeComponent();
}
void MainGameLoop(object sender, EventArgs e)
{
_fps++;
if ((DateTime.Now - _lastFPS).Seconds >= 1)
{
FPS.Text = _fps.ToString() + " FPS";
_fps = 0;
_lastFPS = DateTime.Now;
}
}
}
}
Page.xaml:
<UserControl x:Class="SilverlightApplication6.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<Grid x:Name="LayoutRoot" Background="White">
<TextBlock x:Name="FPS">Current FPS</TextBlock>
</Grid>
</UserControl>
Thank you,
--Mike Snow
Subscribe in a reader