使用图像精灵与图像控件

Question

我正在尝试在WPF中使用精灵，并遇到了一些问题。整个精灵的大小为宽度=100高度=1754。第一张图像从0,0开始，所有图标都是32x32。到目前为止，我有以下代码，但图像根本没有渲染出来

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

- bbqchickenrobot

---

桌面应用程序中使用精灵的原因在哪里？ - Hamlet Hakobyan

我不想为了在众多XAML控件上单独实现它们而不得不切割数百张图片。此外，当这些图片更新时，我只需更新一张图片（sprite.png），而不是再次切割sprite并单独更新每个已更新的控件图片。从SO的帖子中可以看出，这在使用XAML时并不罕见。您能提供任何建议吗？ - bbqchickenrobot

这个问题有一个更简单的解决方案在这里：在WPF中裁剪图像。 - Bradley Bergstrom

Answer 1

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

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

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

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

- Clemens

Answer 2

在Clemens的出色答案上，我点了赞，这里是一种实现OnMouseOver的方法。

<Rectangle Height="58" Width="375">
    <Rectangle.Style>
        <Style>                         
            <Setter Property="Rectangle.Fill">
                <Setter.Value>
                    <ImageBrush ImageSource="Image8.png" Viewbox="0,0,1,.5"/>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="Rectangle.IsMouseOver" Value="true">
                    <Setter Property="Rectangle.Fill">
                        <Setter.Value>                          
                            <ImageBrush ImageSource="Image8.png" Viewbox="0,.5,1,.5"/>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Rectangle.Style>
</Rectangle>

- Rhyous

---

你们为什么要给 @Rhyous 的回答点踩呢？ - bbqchickenrobot