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>

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>

Answer 2

添加到克莱门斯的优秀答案，我赞成，这是一种做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>

将图像精灵与Image控件一起使用

2 个答案: