How does Silverlight Image Clipping work?

Question

I've got a very large image which I'd like to use for sprite techniques (à la css image sprites).

I've got the code below:

<Image x:Name="testImage" Width="24" Height="12" Source="../Resources/Images/sprites.png">
     <Image.Clip>
         <RectangleGeometry Rect="258,10632,24,12" />
     </Image.Clip>
</Image>

This clips the source image to 24x12 at the relative position of 258, 10632 in the source image.

The problem is that I want the cropped image to show at 0,0 in the testImage whereas it shows it at 258, 10632. It's using the geometry as a cutting guide but also as a layout guide.

Anyone have any idea how this should be done? if at all.

Conclusion: There seems to be no good way of doing this at present, Graeme's solution seems to be the closest to achieving this with Silverlight 2.0.

That said, if anyone knows of a better way of doing this, please reply with an answer.

Answer 1

The Bitmap API of Silverlight 3.0 will allow you to grap a clip from your sprite image.

See this post on How to crop instead of clip in silverlight

Answer 2

Why do this at all, the whole point of css image sprites is to improve download time by making one request instead of many. But you can achieve the same by just putting all your images in a xap (or THE xap) and download them in one request.

Answer 3

It turns out this can be done.

<Rectangle x:Name="myRect" Width="28" Height="12" />

ImageBrush imageBrush = new ImageBrush();
imageBrush.ImageSource = //Load in image source
imageBrush.Stretch = Stretch.None;
imageBrush.AlignmentX = AlignmentX.Left;
imageBrush.AlignmentY = AlignmentY.Top;

TranslateTransform offsetTransform = new TranslateTransform();
offsetTransform.X = -258;
offsetTransform.Y = -10632;

imageBrush.Transform = offsetTransform;

Answer 4

Assuming you're on a canvas

<Image x:Name="testImage" Width="24" Height="12" Canvas.Left="-258" Canvas.Top="-10632" Source="../Resources/Images/sprites.png">
 <Image.Clip>
     <RectangleGeometry Rect="258,10632,24,12" />
 </Image.Clip>

With WPF you would use a CroppedBitmap but unfortunately that doesn't exist in Silverlight.

< Edit >

With further experimentation a solution without using a canvas:

<Image x:Name="testImage" Width="24" Height="12" Source="../Resources/Images/sprites.png">
    <Image.Clip>
        <RectangleGeometry Rect="258,10632,24,12" />
    </Image.Clip>
    <Image.RenderTransform>
        <TranslateTransform X="-258" Y="10632"/>
    </Image.RenderTransform>
</Image>

It's doing the same thing as the canvas just slightly neater.

Answer 5

This is perfectly doable -- the solution is to use negative margins rather than transforms. Just set a negative margin top and left to eat up the offset of the clip top/left (258,10632 in your example). Negative margins are also needed right and bottom to eat up the remainder of the source image; the formula for the right margin is:

-1 * (width_of_source - x_coord_of_clip - width_of_clip_region)