编写和编译HLSL代码,创建ShaderEffect。由于HLSL有自己的语言语法,本文不做讨论。这里使用一个已有的的HLSL文件,也是后边将介绍的一个HLSL编辑器工具Shazzam Shader Editor中的案例。定义像素着色器,在UI元素中使用像素着色器,并通过动画设置百叶窗动画。
public class BlindsShader : ShaderEffect { public static readonly DependencyProperty InputProperty = ShaderEffect.RegisterPixelShaderSamplerProperty("Input", typeof(BlindsShader), 0); public static readonly DependencyProperty ProgressProperty = DependencyProperty.Register("Progress", typeof(double), typeof(BlindsShader), new UIPropertyMetadata(((double)(30D)), PixelShaderConstantCallback(0))); public static readonly DependencyProperty NumberOfBlindsProperty = DependencyProperty.Register("NumberOfBlinds", typeof(double), typeof(BlindsShader), new UIPropertyMetadata(((double)(5D)), PixelShaderConstantCallback(1))); public static readonly DependencyProperty Texture2Property = ShaderEffect.RegisterPixelShaderSamplerProperty("Texture2", typeof(BlindsShader), 1); public BlindsShader() { PixelShader pixelShader = new PixelShader(); pixelShader.UriSource = new Uri("/WPFTest;component/Shader/ShaderSource/BlindsShader.ps", UriKind.Relative); this.PixelShader = pixelShader; // 堆代码 duidaima.com this.UpdateShaderValue(InputProperty); this.UpdateShaderValue(ProgressProperty); this.UpdateShaderValue(NumberOfBlindsProperty); this.UpdateShaderValue(Texture2Property); } public Brush Input { get { return ((Brush)(this.GetValue(InputProperty))); } set { this.SetValue(InputProperty, value); } } /// <summary>The amount(%) of the transition from first texture to the second texture. </summary> public double Progress { get { return ((double)(this.GetValue(ProgressProperty))); } set { this.SetValue(ProgressProperty, value); } } /// <summary>The number of Blinds strips </summary> public double NumberOfBlinds { get { return ((double)(this.GetValue(NumberOfBlindsProperty))); } set { this.SetValue(NumberOfBlindsProperty, value); } } public Brush Texture2 { get { return ((Brush)(this.GetValue(Texture2Property))); } set { this.SetValue(Texture2Property, value); } } }BlindsShader.ps是编译好的HLSL文件,Progress表示百叶窗叶片打开的进度,NumberOfBlinds是百叶窗叶片的数量,Texture2是百叶窗叶片的纹理(通常使用一个纯色的图片)。
<Window.Resources> <ImageBrush x:Key="imageBrush" ImageSource="111.jpg" /> <ImageBrush x:Key="blindsBrush" ImageSource="blinds.jpg" /> <local:BlindsShader x:Key="BlindsShader" NumberOfBlinds="4" Progress="0" Texture2="{StaticResource blindsBrush}" /> <Storyboard x:Key="DefaultBlindsShaderStoryboard" FillBehavior="HoldEnd"> <DoubleAnimation Storyboard.TargetProperty="(UIElement.Effect).(local:BlindsShader.Progress)" From="0" To="100" Duration="00:00:1.5" /> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Effect)"> <DiscreteObjectKeyFrame KeyTime="00:00:1.5" Value="{x:Null}" /> </ObjectAnimationUsingKeyFrames> </Storyboard> </Window.Resources> <Grid Background="{StaticResource imageBrush}" Effect="{StaticResource BlindsShader}"> <Grid.Triggers> <EventTrigger RoutedEvent="FrameworkElement.Loaded"> <BeginStoryboard x:Name="sbLoaded" Storyboard="{DynamicResource DefaultBlindsShaderStoryboard}" /> </EventTrigger> </Grid.Triggers> </Grid>
Shazzam Shader Editor编译HLSL后会生成XXX.ps、XXX.cs、XXX.vb三个文件,并保存在%LocalAppData%\Shazzam\GeneratedShaders目录下的XXXEffect目录中。这里的XXX就是你定义的HLSL的名称。