The following will do exactly what you're looking for. You can use the Up ↑ and Down ↓ keys on your keyboard to navigate forwards and backwards through the animation.
XAML
<Rectangle x:Name="imgRect">
<Rectangle.Fill>
<ImageBrush x:Name="imgBrush" ImageSource="walking_spritesheet.png" Stretch="None" AlignmentX="Left" AlignmentY="Top" />
</Rectangle.Fill>
</Rectangle>
C#
imgRect.Width = 240; //Set the width of an individual sprite
imgRect.Height = 296; //Set the height of an individual sprite
const int ximages = 6; //The number of sprites in each row
const int yimages = 5; //The number of sprites in each column
int currentRow = 0;
int currentColumn = 0;
TranslateTransform offsetTransform = new TranslateTransform();
KeyDown += delegate(object sender, KeyEventArgs e)
{
switch (e.Key)
{
case Key.Up:
currentColumn--;
if (currentColumn < 0)
{
currentColumn = ximages -1;
if (currentRow == 0)
{
currentRow = yimages - 1;
}
else
{
currentRow--;
}
}
break;
case Key.Down:
currentColumn++;
if (currentColumn == ximages)
{
currentColumn = 0;
if (currentRow == yimages - 1)
{
currentRow = 0;
}
else
{
currentRow++;
}
}
break;
default:
break;
}
offsetTransform.X = -imgRect.Width * currentColumn;
offsetTransform.Y = -imgRect.Height * currentRow;
imgBrush.Transform = offsetTransform;
For testing, try using the following image (1440x1480):
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…