如何在视图中更改图像的前景色

Posted 2023-02-22

【中文标题】如何在视图中更改图像的前景色

【英文标题】：How to Change Foreground Color of Image in View

【发布时间】：2014-01-26 01:51:26

【问题描述】：

我有一个图像和文本块的水平 StackPanel。我需要完成的是将两者的前景更改为某种颜色。我可以使用 Foreground 属性轻松更改 TextBlock，但我不确定如何使用 Image 执行此操作。图片只是一个基本的应用图标。

<StackPanel Orientation="Horizontal">
    <Image Source="/Assets/Icons/appbar.book.perspective.png" Width="50" Height="50" Margin="-8,0,-6,0"/>
    <TextBlock Text="BOOK" VerticalAlignment="Center" Foreground="Blue"/>
</StackPanel>

【问题讨论】：

真的有可能吗？

我在按下按钮时使用样式之前已经完成了这一点，改变了前景。如果我没记错的话，按钮样式的内容是边框内的图像。在 Pressed 状态下，前景发生了变化。

是的，在按钮的情况下这是可能的。但我猜不可能改变独立图像控件的前景。

请添加一个（模拟的）你想看的例子。其他问题：您希望前景始终为蓝色还是也可以有其他颜色？

今天晚些时候我将不得不添加一个示例，但我希望前台也可以更改，我将从后面的代码中设置前台。

【参考方案1】：

你想改变图像背景颜色然后用透明背景拍摄图像并设置代码如下

    <StackPanel Orientation="Horizontal">
        <Grid Background="Blue" Width="50" Height="50" Margin="-8,0,-6,0">
            <Image Source="/Assets/Icons/appbar.book.perspective.png" />
        </Grid>
        <TextBlock Text="BOOK" VerticalAlignment="Center" Foreground="Blue"/>
    </StackPanel>

【讨论】：

很遗憾只改变了背景颜色，而不是图像的前景色，就像应用栏按钮一样是纯白色的png。

你能上传img吗？？

【参考方案2】：

您不能设置图像的前景。图像的颜色嵌入在 png 文件中。

您可以做的是创建一个过滤器并将其放在彩色背景上。假设你有一张黑色（前景）和白色（背景）的书的图像。如果您希望书是蓝色（前景），您首先创建一个具有白色背景和透明前景的过滤器。然后你把那个过滤器放在一个蓝色的网格上，像这样：

<StackPanel>
    <Grid Background="Blue" Width="50" Height="50" Margin="-8,0,-6,0">
        <Image Source="/Assets/book.white.filter.png"/>
    </Grid>
</StackPanel>

如果您必须同时支持黑白主题，则需要创建一个具有黑色背景和透明前景的过滤器。然后你必须根据选择的主题来设置图片的来源。

【讨论】：

好的，当您说过滤器时，您的意思只是 png 图像本身。并根据主题正确切换显示哪个图像？我的意思是我总是可以修改paint.net中的前景，然后将新图像添加到我的解决方案中，它会具有所需的颜色，但我已经完成了在按下状态下以按钮样式更改前景，所以我想它也可以在屏幕上呈现。我想你猜对了，我可能有多个主题，因此需要支持文本和图像的多个前景。如果可能，我想避免添加多张图片

【参考方案3】：

使用 Grid 和 Textblock 代替 ImageViewer 和 Textblock。 将网格的背景作为所需的图像源。在网格内放置一个 Textblock。并将文本分配给网格内的 TextBlock。 你可以完成你的任务。

【参考方案4】：

创建图像副本并在 Photoshop、GIMP 或 Paint.NET 中编辑它可能更简单。这些应用具有交换像素颜色的工具。

然后您可以换出图像 URI 来切换图像。或者，您可以将前景色图像覆盖在主图像之上，设置其 Visibility=Collapsed。然后根据需要设置 Visibility=Visible。

如果您使用标准的黑白应用程序图标，它们有黑白和黑白两种版本。

【讨论】：

是的，这将是最后的手段。我过去也这样做过，但我只是在想办法缩小我的项目规模。

使用着色器将是一种快速且轻量级的处理方式。但手机上的 XAML 项目不支持着色器。

【参考方案5】：

BitmapIcon 对你可以使用的东西很有帮助：

<BitmapIcon Width="20" Height="20" Foreground="Red" UriSource="ms-appx:///Assets/Resources/YourImage.png" />

这就是我的方式...:)

【讨论】：

如果开发UWP应用，这应该是问题的答案。

太棒了！非常感谢！