雪碧图wp7

Question

类似于在HTML/CSS中使用雪碧图，我想用WP7来创建它。我尝试使用：

   <Grid.Resources>
     <ImageBrush x:Key="Test"  ImageSource="/Resources/Images/thumbnails.png"
          AlignmentX="0" AlignmentY="0" Stretch="Fill"/>
   </Grid.Resources>

<Rectangle Grid.Column="2" Fill="{StaticResource Test}" Width="22" Height="18" />

如果精灵中的第一个图像从0,0开始，并且是22宽乘18高，不确定如何设置？

Answer 1

为此，一种方法是添加、创建画布并将矩形几何图形分配给画布的Clip属性。

这个画布将是精灵控件。下一步，将你想要显示的图像添加到画布上，并定位图像，这样位图的正确部分就会显示出来，其余的部分就会被剪辑掉(我没有测试代码，可能会有微小的错误)：

<Canvas Width="[Width of the sprite frame]" Height="[width of the sprite frame]">
    <Canvas.Clip>
        <RectangleGeometry 
             Rect="0,0,[width-of-the-Canvas],[height-of-the-Canvas]" />
    </Canvas.Clip>
    <Image Source="[uri]" Canvas.Left="[x-offset]" Canvas.Top="[y-offset]" />
</Canvas>

如果你喜欢冒险，你可以把矩形的大小和画布的大小绑定起来……