Click here to Skip to main content
Click here to Skip to main content
 
Add your own
alternative version

An Introduction to the Silverlight samples in the All-In-One Framework

, 12 Dec 2009 Ms-PL
This article introduces several Silverlight samples in the All-In-One Framework.
SilverlightIntroduction_src.zip
CSSL3LocalMessage
Properties
CSSL3MediaElement
CSSL3MediaElement
Properties
CSSL3MediaElement.Web
App_Data
ClientBin
CSSL3MediaElement.xap
Properties
ReadMe.mht
CSSL3PixelShader
cyclewatery.ps
Humpback Whale.jpg
Properties
CSSL3WriteableBitmap
Heart Empty.png
Properties
VBSL3Animation
My Project
VBSL3DeepZoom
VBSL3DeepZoom
images
home_hover.png
home_pressed.png
home_rest.png
My Project
Service References
DeepZoomServiceReference
configuration.svcinfo
configuration91.svcinfo
GenerateDeepZoomService.disco
GenerateDeepZoomService.wsdl
Reference.svcmap
ServiceReferences.ClientConfig
VBSL3DeepZoom.Web
App_Code
App_Data
Bin
DeepZoomTools.DLL
DeepZoomTools.DLL.refresh
ClientBin
GeneratedImages
GenerateDeepZoomService.svc
SourceImages
atom.png
background.jpg
cell.png
dna.png
Molecular.png
neutron.png
seed.png
wrap in bamboo.png
VBSL3HTMLBridge
VBSL3HTMLBridge
My Project
VBSL3HTMLBridge.Web
App_Data
ClientBin
VBSL3HTMLBridge.xap
My Project
Application.myapp
MyExtensions
Settings.settings
VBSL3Input
My Project
VBSL3LocalMessage
My Project
VBSL3MediaElement
ReadMe.mht
VBSL3MediaElement
My Project
VBSL3MediaElement.Web
App_Data
ClientBin
VBSL3MediaElement.xap
My Project
Application.myapp
MyExtensions
Settings.settings
VBSL3PixelShader
cyclewatery.ps
Humpback Whale.jpg
My Project
CSSL3Animation
Properties
CSSL3DeepZoom
CSSL3DeepZoom
images
home_hover.png
home_pressed.png
home_rest.png
Properties
Service References
DeepZoomServiceReference
configuration.svcinfo
configuration91.svcinfo
GenerateDeepZoomService.disco
GenerateDeepZoomService.wsdl
GenerateDeepZoomService1.wsdl
Reference.svcmap
ServiceReferences.ClientConfig
CSSL3DeepZoom.Web
App_Code
Bin
DeepZoomTools.DLL
DeepZoomTools.DLL.refresh
ClientBin
GeneratedImages
GenerateDeepZoomService.svc
SourceImages
atom.png
background.jpg
cell.png
dna.png
Molecular.png
neutron.png
seed.png
wrap in bamboo.png
ReadMe.mht
CSSL3HTMLBridge
CSSL3HTMLBridge
Properties
CSSL3HTMLBridge.Web
App_Data
ClientBin
CSSL3HTMLBridge.xap
Properties
CSSL3Input
Properties
========================================================================
    SILVERLIGHT APPLICATION : CSSL3PixelShader Project Overview
========================================================================

/////////////////////////////////////////////////////////////////////////////
Use:

This example demonstrates how to use new pixel shader feature in Silverlight3.
It mainly covers two parts:

1. How to use built-in Effect such as DropShadowEffect.
2. How to create a custom ShaderEffect and use it in the application.


/////////////////////////////////////////////////////////////////////////////
Prerequisites:

Silverlight 3 Tools for Visual Studio 2008 SP1
http://www.microsoft.com/downloads/details.aspx?familyid=9442b0f2-7465-417a-88f3-5e7b5409e9dd&displaylang=en

Silverilght 3 runtime:
http://silverlight.net/getstarted/

DirectX SDK: (Not required to run the application but you need fxc tool in it
to create the .ps file if you would like to create the .ps file on your own)
http://www.microsoft.com/DOWNLOADS/details.aspx?FamilyID=24a541d6-0486-4453-8641-1eee9e21b282&displaylang=en


/////////////////////////////////////////////////////////////////////////////
Creation:

A. Create a .ps file to be used in custom ShaderEffect. (Skip this step if 
you want to use the existing .ps file in this project directly)

Step1. Create a new .txt file. Open it and paste following HLSL(High Level 
Shader Language) code to it:

sampler2D input : register(S0);
float2 center:register(C0);
float amplitude:register(C1);

float4 main(float2 uv : TEXCOORD) : COLOR
{
	if(pow((uv.x-center.x),2)+pow((uv.y-center.y),2)<0.15)
	{
		uv.y = uv.y  + (sin(uv.y*100)*0.1*amplitude);
	}
	return tex2D( input , uv.xy);
}

Step2. Save the .txt file. Close it. Rename it as cyclewatery.fx.

Step3. Open DirectX SDK Command Prompt and run the following command:

fxc /T ps_2_0 /Fo "<OutputPath>\cyclewatery.ps" "<InputPath>\cyclewatery.fx"

The <InputPath> is the path of the .fx file.
The <OutPutpat> is the path of the .ps file you want to create.

B. Create the Silverlight project.

Step1. Create a Visual C# Silverlight Application project named 
CSSL3PixelShader in Visual Studio 2008 SP1.

C. Add the .ps file to the project.

Step1. Right click the project node in the Solution Explorer window, select 
Add-> Existing Item to add the .ps file (craeted in step3 of A) to the 
project.

D. Add the "Humpback Whale.jpg" file to the project.

Step1. Right click the project node in the Solution Explorer window, select
Add-> Existing Item to add the "Humpback Whale.jpg" (you can find it in this 
project) file to the project.

E. Edit xaml.

Step1. Double click MainPage.xaml in the Solution Explorer window to view the 
xaml code. Replace the <Grid> with the following code:

	<Grid x:Name="LayoutRoot">
		<Grid.RowDefinitions>
			<RowDefinition Height="1*"/>
			<RowDefinition Height="9*"/>
        </Grid.RowDefinitions>
        <TextBlock HorizontalAlignment="Center" Foreground="Red" FontSize="32" 
			Text="Please Click the Image">
            <TextBlock.Effect>
                <DropShadowEffect Color="Black">    
                </DropShadowEffect>
            </TextBlock.Effect>
		</TextBlock>
			<Image Grid.Row="1" Width="640" Height="480"  
				x:Name="ImagePixelShader" Source="Humpback Whale.jpg">
		</Image>
	</Grid>

The above code mainly adds two controls:

A TextBlock used to show how to use the built-in DropShadowEffect.
An Image control used to show how to use custom ShaderEffect.

Step2. Replace <UserControl> tag with the following code:

<UserControl x:Class="CSSL3PixelShader.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:c="clr-namespace:CSSL3PixelShader" 
    MouseLeftButtonDown="UserControl_MouseLeftButtonDown"
    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">

This step mainly does two things:

Hook the MouseLeftButtonDown event of the UserControl:
MouseLeftButtonDown="UserControl_MouseLeftButtonDown"

Define a new xmlns:
xmlns:c="clr-namespace:CSSL3PixelShader"

F. Edit xaml.cs.

Step1. Double click MainPage.xaml.cs to view the code. Add following code 
after the last "using System.Windows.Shapes;":

using System.Windows.Threading;
using System.Windows.Media.Effects;

Step2. Replace the MainPage class with the following code:

	public partial class MainPage : UserControl
    {
        //A timer used to reduce the value of _amplitude gradually.
        private DispatcherTimer _timer = new DispatcherTimer();
        //Amplitude that is used to pass to PixelShaderConstantCallback
        private double _amplitude;
        //Center (mouse position) that is used to pass to PixelShaderConstantCallback
        private Point _center;
        
        public MainPage()
        {

            InitializeComponent();
            //Initialize timer and hook Tick event.
            _timer.Interval = TimeSpan.FromMilliseconds(50);
            _timer.Tick += new EventHandler(_timer_Tick);
        }

        /// <summary>
        /// This event handler reduce the amplitude and apply a new 
        /// CycleWateryEffect on each tick.
        /// </summary>
        void _timer_Tick(object sender, EventArgs e)
        {
            if (this._amplitude > 0.0)
            {
                CycleWateryEffect effect = new CycleWateryEffect(new Uri(@"/CSSL3PixelShader;component/cyclewatery.ps", UriKind.Relative));
                effect.Center = this._center;
                effect.Amplitude = this._amplitude;
                this.ImagePixelShader.Effect = effect;
                this._amplitude -= 0.05;
            }
            else
            {
                this._timer.Stop();
            }

        }

        /// <summary>
        /// This event handler get the current mouse position, assign it to a private field
        /// and start the timer to apply new CycleWateryEffect.
        /// </summary>
        private void UserControl_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            this._center = new Point(e.GetPosition(this.ImagePixelShader).X / this.ImagePixelShader.ActualWidth, e.GetPosition(this.ImagePixelShader).Y / this.ImagePixelShader.ActualHeight);
            this._amplitude = 0.5;
            _timer.Start();
        }
    }

Step3. Add a new class CycleWateryEffect after the MainPage class:

	public class CycleWateryEffect : ShaderEffect
    {
        /// <summary>
        /// The following two DependencyProperties are the keys of this custom ShaderEffect.
        /// They create a bridge between managed code and HLSL(High Level Shader Language).
        /// The PixelShaderConstantCallback will be triggered when the propery get changed.
        /// The parameter of the callback represents the register.
        /// For instance, here the 1 in PixelShaderConstantCallback(1) represents C1 of the
        /// following HLSL code. In another word, by changing
        /// the Amplitude property we assign the changed value to the amplitude variable of the
        /// following HLSL code:
        /// 
        /// sampler2D input : register(S0);
        /// float2 center:register(C0);
        /// float amplitude:register(C1);
        /// float4 main(float2 uv : TEXCOORD) : COLOR
        /// {
        /// if(pow((uv.x-center.x),2)+pow((uv.y-center.y),2)<0.15)
        /// {
        /// uv.y = uv.y  + (sin(uv.y*100)*0.1*amplitude);
        /// }
        /// return tex2D( input , uv.xy);
        /// }
        /// </summary>
        public static readonly DependencyProperty AmplitudeProperty = DependencyProperty.Register("Amplitude", typeof(double), typeof(CycleWateryEffect), new PropertyMetadata(0.1, ShaderEffect.PixelShaderConstantCallback(1)));
        public static readonly DependencyProperty CenterProperty = DependencyProperty.Register("Center", typeof(Point), typeof(CycleWateryEffect), new PropertyMetadata(new Point(0.5, 0.5), ShaderEffect.PixelShaderConstantCallback(0)));
        

        public CycleWateryEffect(Uri uri)
        {
            Uri u = uri;
            PixelShader psCustom = new PixelShader();
            psCustom.UriSource = u;
            PixelShader = psCustom;

            base.UpdateShaderValue(CenterProperty);
            base.UpdateShaderValue(AmplitudeProperty);
        }

        public double Amplitude
        {
            get
            {
                return (double)base.GetValue(AmplitudeProperty);
            }
            set
            {
                base.SetValue(AmplitudeProperty, value);
            }
        }

        public Point Center
        {
            get
            {
                return (Point)base.GetValue(CenterProperty);
            }
            set
            {
                base.SetValue(CenterProperty, value);
            }
        }
    }


/////////////////////////////////////////////////////////////////////////////
References:

Programming Guide for HLSL
http://msdn.microsoft.com/en-us/library/bb509635(VS.85).aspx

Dependency Properties Overview
http://msdn.microsoft.com/en-us/library/cc221408(VS.95).aspx

Pixel Shader Effects
http://msdn.microsoft.com/en-us/library/dd901594(VS.95).aspx


/////////////////////////////////////////////////////////////////////////////

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Microsoft Public License (Ms-PL)

Share

About the Author

Microsoft All-In-One Code Framework delineates the framework and skeleton of Microsoft development techniques through typical sample codes in three popular programming languages (Visual C#, VB.NET, Visual C++). Each sample is elaborately selected, composed, and documented to demonstrate one frequently-asked, tested or used coding scenario based on our support experience in MSDN newsgroups and forums. If you are a software developer, you can fill the skeleton with blood, muscle and soul. If you are a software tester or a support engineer like us, you may extend the sample codes a little to fit your specific test scenario or refer your customer to this project if the customer's question coincides with what we collected.
http://cfx.codeplex.com/

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.150224.1 | Last Updated 12 Dec 2009
Article Copyright 2009 by All-In-One Code Framework
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid