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

这样做的方法是添加创建Canvas并将矩形几何分配给Canvas的Clip属性。

此Canvas将是精灵控件。接下来向Canvas添加要显示的图像并定位图像，以便显示位图的正确部分，其余部分被剪辑切断（我没有测试代码可能存在微小错误）：

<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>

如果您喜欢冒险，可以将Rect的大小绑定到Canvas的大小......

图像精灵wp7

1 个答案: