灰白色很多时候用于纪念，哀悼等。那么使用 WPF如何来做到这种效果呢？要实现的这种效果，我们会发现，它其实不仅仅是要针对图片，而是要针对整个窗口来实现灰白色。
如果只是针对图片的话，我可以可以对图片进行灰阶转换，即可达到灰色效果。
以下是图片转灰阶的代码，当然方法不仅仅是这一种：
//……省略……FormatConvertedBitmap grayImage = new FormatConvertedBitmap();grayImage.BeginInit();grayImage.Source = originImage as BitmapSource;grayImage.DestinationFormat = PixelFormats.Gray32Float;grayImage.EndInit();//……省略……
上述方法也可以直接在 xaml里面表示。
<Image.Source><FormatConvertedBitmap DestinationFormat="Gray32"><FormatConvertedBitmap.Source><BitmapImage UriSource="Images\1.png" /></FormatConvertedBitmap.Source></FormatConvertedBitmap></Image.Source>
如果我们想针对整个窗口应用这种灰色的效果，那我们可以用着色器特效（ ShaderEffect）来实现。
说明：
-
*.fx格式文件：是一种应用特效效果文件，也叫渲染管线的配置文件。编写该文件语言名为高阶着色器语言（High Level Shader Language，简称HLSL），由微软拥有及开发的一种语言。 -
*.ps格式文件：是通过*.fx文件编译出来的文件，该文件是通过ShaderEffect所指定的原始文件。通过ShaderEffect类，将其应用于WPF。
灰阶相关 fx, ps等文件已有大佬写好了，我们直接拿来用即可跳转下载（https://github.com/abursjoo/GrayscaleEffectSample/tree/master/WpfApplication1/WpfApplication1）。相关解释，会在注释中说明。
渲染管线配置文件（*.fx）
//sampler2D 2D纹理采样器//s0中，s表示取样器，0是表示取样器的子组件编号sampler2D implicitInput : register(s0);//c 表示缓冲区偏移量float factor : register(c0);//TEXCOORD 表示纹理坐标；COLOR 漫反射/镜面反射颜色float4 main(float2 uv : TEXCOORD) : COLOR{//返回纹理implicitInput在uv位置的颜色。float4 color = tex2D(implicitInput, uv);//将颜色转成灰阶float gray = color.r * 0.3 + color.g * 0.59 + color.b *0.11;float4 result;result.r = (color.r - gray) * factor + gray;result.g = (color.g - gray) * factor + gray;result.b = (color.b - gray) * factor + gray;result.a = color.a;return result;}
应用WPF中特效类
//灰阶特效
public class GrayscaleEffect : ShaderEffect
{
//将像素着色器映射到灰阶着色器
private static PixelShader _pixelShader = new PixelShader() { UriSource = new Uri(@"pack://application:,,,/GrayscaleEffect;component/GrayscaleEffect.ps") };
public GrayscaleEffect()
{
PixelShader = _pixelShader;
//更新着色器的值
UpdateShaderValue(InputProperty);
//该属性可以不要，该熟悉用于彩色到灰色过渡效果
UpdateShaderValue(DesaturationFactorProperty);
}
public static readonly DependencyProperty InputProperty = ShaderEffect.RegisterPixelShaderSamplerProperty("Input", typeof(GrayscaleEffect), 0);
public Brush Input
{
get { return (Brush)GetValue(InputProperty); }
set { SetValue(InputProperty, value); }
}
public static readonly DependencyProperty DesaturationFactorProperty = DependencyProperty.Register("DesaturationFactor", typeof(double), typeof(GrayscaleEffect), new UIPropertyMetadata(0.0, PixelShaderConstantCallback(0), CoerceDesaturationFactor));
//用于调节过渡效果
public double DesaturationFactor
{
get { return (double)GetValue(DesaturationFactorProperty); }
set { SetValue(DesaturationFactorProperty, value); }
}
private static object CoerceDesaturationFactor(DependencyObject d, object value)
{
GrayscaleEffect effect = (GrayscaleEffect)d;
double newFactor = (double)value;
if (newFactor < 0.0 || newFactor > 1.0)
{
return effect.DesaturationFactor;
}
return newFactor;
}
}在 WPF里面的使用示例:
<!--effect 代表GrayscaleEffect所在的命名空间-->
<Grid.Effect>
<effect:GrayscaleEffect/>
</Grid.Effect>需要应用到哪个根元素上，就将该特效给对应元素的 Effect 赋值即可。
这种实现方法，性能还是很不错的，如果想对 Shader有更深入的认识，可以阅读 《DirectX3DHLSL高级实例精讲》.