Using image sprite with an Image control

Question

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>

Where is the reason to use sprite in the desktop application? — Hamlet Hakobyan, Mar 18 '14 at 06:43
I don't want to have to cut up 100s of images just to implement them individually on numerous xaml controls. Also, when the images are update I simply update one image (sprite.png) instead of slicing up the sprite again and then updating each updated control image individually. From the posts in SO this is not uncommon using xaml. Can you offer any advice? — bbqchickenrobot, Mar 18 '14 at 07:08
There is an even more simple solution to this question here: [Crop an Image in WPF](https://stackoverflow.com/questions/33201128/crop-an-image-in-wpf) — Bradley Bergstrom, Jul 25 '23 at 21:55

Clemens · Accepted Answer · 2014-03-19T06:31:03.430

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>

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>

score 2 · Answer 2 · answered Apr 22 '15 at 03:03

Adding to Clemens excellent answer, which I upvoted, here is a way to do the 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>

Using image sprite with an Image control

2 Answers2

Linked

Related