将图像精灵与图像控件一起使用 [英] Using image sprite with an Image control

问题描述

我正试图在WPF中使用Sprite，但遇到了一些麻烦。整个精灵大小为width = 100 height = 1754。第一张图片从0,0开始，图标全为32x32。到目前为止，我已经有了这个，但是图像根本没有渲染

I'm attempting to use sprites with WPF and am having some trouble. The entire sprite size is width=100 height=1754. The first image starts at 0,0 and the icons are all 32x32. So far I have this but the image is not rendering at all

<UserControl x:Class="Exemplify.Word.Addin.Presentation.ImageTestUserControl"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         mc:Ignorable="d" 
         d:DesignHeight="300" d:DesignWidth="300">
<UserControl.Resources>
    <BitmapImage x:Key="SpriteImage" UriSource="Assets/sprites2.png"/>
</UserControl.Resources>
<Grid>
    <Button Name="Test">
        <Image Height="32" Width="32" Source="{StaticResource SpriteImage}">
            <Image.Clip>
                <RectangleGeometry Rect="100, 1754, 32, 32"></RectangleGeometry>
            </Image.Clip>
            <Image.RenderTransform>
                <TranslateTransform X="-100" Y="1754">

                </TranslateTransform>
            </Image.RenderTransform>
        </Image>
    </Button>
</Grid>

推荐答案

您可以使用 CroppedBitmap 作为图像的源。例如，要剪切出第三行中的第二张图像（x = 32，y = 64），您将这样写：

You could use a CroppedBitmap as the Source of your image. For example to cut out the second image in the third row (at x=32, y=64) you would write:

<Image Height="32" Width="32">
    <Image.Source>
        <CroppedBitmap Source="{StaticResource SpriteImage}"
                       SourceRect="32,64,32,32"/>
    </Image.Source>
</Image>

或者使用带有 ImageBrush 的矩形代替图片控件的位置，您可以在其中设置 Viewbox ：

Or use a Rectangle with an ImageBrush instead of an Image control, where you could set the Viewbox:

<Rectangle Height="32" Width="32">
    <Rectangle.Fill>
        <ImageBrush ImageSource="{StaticResource SpriteImage}"
                    ViewboxUnits="Absolute" Viewbox="32,64,32,32"/>
    </Rectangle.Fill>
</Rectangle>

这篇关于将图像精灵与图像控件一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！