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>

Answer 1

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>

Answer 2

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>