Introduction
This article introduces eight Silverlight samples in the All-In-One Framework. It's specially useful if you're new to Silverlight and need straightforward samples to quickly get started.
This is only a portion of the Silverlight samples in the All-In-One Framework. You can get more samples from http://cfx.codeplex.com/.
Background
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 a frequently-asked, tested, or used coding scenario.
Using the code
How do I capture a screenshot in Silverlight 3?
Currently, you can only use WriteableBitmap to create a screenshot of a UIElement by passing the UIElement to the constructor of WriteableBitmap:
WriteableBitmap bmp = new WriteableBitmap(uiElementSource,
uiElementSource.RenderTransform);
The CSSL3WriteableBitmap/VBSL3WriteableBitmap sample demonstrates the following techniques as well:
- How to scale a source image to a specific resolution (800 * 600, in this case)
- How to modify individual pixels
- How to implement the seed fill algorithm in Silverlight
WriteableBitmap
Below is a screenshot of the CSSL3WriteableBitmap/VBSL3WriteableBitmap sample:
How do I write a custom ShaderEffect?
You need to write HLSL (High Level Shader Language) code and compile it to a .ps file first. Then, you can use the .ps file as the source of the PixelShader of your custom ShaderEffect class. Optionally, you can add a DependencyProperty in your custom ShaderEffect class:
public static readonly DependencyProperty AmplitudeProperty =
DependencyProperty.Register("Amplitude", typeof(double),
typeof(CycleWateryEffect),
new PropertyMetadata(0.1, ShaderEffect.PixelShaderConstantCallback(1)));
We can use the above DependencyProperty to pass a parameter from Silverlight to HLSL.
The CSSL3PixelShader/ VBSL3PixelShader project is a step-by-step sample that demonstrates how to create a custom ShaderEffect class and use it in Silverlight 3. Below is a screenshot of the CSSL3PixelShader/ VBSL3PixelShader sample:
How do I use MediaElement.Markers?
In general, there are two scenarios where MediaElement.Markers can be used:
- There is a file (normally in XML format) that contains your custom markers for the media
- The media file itself has embedded markers
In the first scenario, you need to download your markers file and manually create and add markers to MediaElement.Markers in the MyMediaElement.MediaOpened event. To add markers in code, you can use the following code:
this.MyMediaElement.Markers.Add(new TimelineMarker()
{
Text = "This marker is added by code!",
Time = TimeSpan.FromSeconds(8),
Type = "MyMarker"
});
For the second scenario, MediaElement.Markers will automatically be filled.
Once there are markers in MediaElement.Markers, the MyMediaElement.MarkerReached event will fire when a marker is reached. You can then handle your own code logic in the MyMediaElement.MarkerReached event handler.
For more details, you can refer to the CSSL3MediaElement/VBSL3MediaElement project. Below is a screenshot of the CSSL3MediaElement/VBSL3MediaElement project:
What is LocalMessage?
Local messaging enables you to create communication channels between multiple Silverlight plug-ins running on a single computer. The CSSL3LocalMessage/VBSL3LocalMessage project demonstrates how to use this new feature. You can also learn the basic usage of InkPresenter from this sample.
To test this CSSL3LocalMessage/VBSL3LocalMessage sample, please open TestPage.html in two browsers. Draw on one of the applications, ensuring the other one is synchronous. Shown below is the screenshot:
How do I implement drag and drop effect for controls?
You can hook a mouse event to do this. The CSSL3Input/VBSL3Input project demonstrates how to do that. It also demonstrates how to hook keyboard events. Below is the screenshot of the CSSL3Input/ VBSL3Input sample:
How do I call managed code from JavaScript and vice versa?
Please refer to the CSSL3HTMLBridge/VBSL3HTMLBridge project. This project covers:
- How to call a JavaScript method from managed code
- How to handle HTML events from managed code
- How to call a managed code method from JavaScript
- How to handle a managed code event from JavaScript
You can quickly test it out to learn the techniques above. Below is a screenshot of the CSSL3HTMLBridge/VBSL3HTMLBridge sample:
How do I let a control hover a MultiScaleImage and synchronize it with SubImages of the MultiScaleImage?
To do this, we need to manually create a MatrixTransform for the control. You can find more information in CSSL3DeepZoom/VB SL3DeepZoom.
The CSSL3DeepZoom/VB SL3DeepZoom project also demonstrates the following techniques:
- How to generate deep zoom content using Deep Zoom Composer
- How to download and work with metadata
- Hit test a sub image in a collection
- How to move a sub image in a collection
- How to generate deep zoom content programmatically with the help of DeepZoomTools.dll
Below is a screenshot of the CSSL3DeepZoom/VB SL3DeepZoom sample:
Why is my property unable to animate and how do I get a notification when a property is animated?
If we need to support animation for our property. we must use a Dependency Property.
Most built-in controls have no public event exposed when their properties are animated. If we need to receive a notification when a property is animated, we can write a custom control deriving from a built-in control. For more details, you can refer to the CSSL3Animation/VBSL3Animation project. (If you are new to custom controls, it is recommended that you check out CSSL3CustomControl/VBSL3CustomControl first. It will help you learn how to quickly create a custom control for a Silverlight application.)
The CSSL3Animation/VBSL3Animation project also demonstrates other techniques regarding animation:
- Basic point animation
- Custom easing
- How to create a Storyboard in code-behind
- How to create a KeyFrames based animation
Below is a screenshot of the CSSL3Animation/VBSL3Animation sample:
Points of interest
If there is any problem, you can have a look at the ReadMe.txt file in each sample project, which contains a step by step tutorial of how to build the project.
If you want to get more samples, please visit this link: Microsoft All-In-One Code Framework.
