Cool Graphics, Hot Code: Visual Effects in Silverlight

Jeff ProsiseWintellect (www.wintellect.com)Session Code: WIA307

Page-Turn Framework

Page-turn apps made simpleFramework implemented in PageTurn.cs

Using the Framework (XAML)

<Canvas x:Name="PageTurnCanvas" Width="800" Height="618"> <!-- Spread 0 --> <Canvas x:Name="Spread0a" Width="400" Height="618" ...> <Rectangle Width="400" Height="618" Fill="#202020" /> </Canvas> <Canvas x:Name="Spread0b" Width="400" Height="618" ...> <Image x:Name="FrontCover" Width="400" Source="..." /> </Canvas>

<!-- Spread 1 --> <Canvas x:Name="Spread1a" Width="400" Height="618" ...> <Image x:Name="Page00" Width="400" Source="..." /> </Canvas> <Canvas x:Name="Spread1b" Width="400" Height="618" ...> <Image x:Name="Page01" Width="400" Source="..." /> </Canvas> ...</Canvas>

Using the Framework (C#)

private PageTurn _ptf; . . .// Initialize the page-turn framework_ptf = new PageTurn();_ptf.AddSpread(Spread0a, Spread0b);_ptf.AddSpread(Spread1a, Spread1b); ..._ptf.Initialize(PageTurnCanvas);_ptf.Sensitivity = 1.2;

Page-Turn API

PageTurn MethodsMethod Description

Initialize Initializes the framework after spreads are added

AddSpread Adds a "spread" (pair of pages) to a virtual booklet

GoToSpread Displays the specified spread

Page-Turn API, Cont.

PageTurn PropertiesProperty Description

SpreadCount Returns the number of spreads

CurrentSpreadIndex Returns the 0-based index of the spread currently displayed

Sensitivity Gets or sets the mouse sensitivity (default == 1.0). The higher the value, the more mouse movement is required to perform a full page turn

Page-Turn API, Cont.

PageTurn EventsEvent Description

PageTurned

Page-Turn Frameworkdemo

WriteableBitmap

New class in Silverlight 3Generate bitmaps from scratch, pixel by pixelModify existing images

Subject to cross-domain security constraintsRender XAML objects into bitmaps

The key to all sorts of cool effects that were not possible in Silverlight 2

Generating an Image

WriteableBitmap bitmap = new WriteableBitmap(width, height);

for (int x = 0; x < width; x++){ for (int y = 0; y < height; y++) { bitmap.Pixels[(y * width) + x] = unchecked((int)0xFF000000); // ARGB (black) }}

bitmap.Invalidate();

// Copy WriteableBitmap bits to a XAML ImageMyImage.Source = bitmap;

Rendering XAML to a Bitmap

// Create a WriteableBitmapWriteableBitmap bitmap = new WriteableBitmap(width, height);

// Render Canvas named "TargetCanvas" to the bitmapbitmap.Render(TargetCanvas, null);bitmap.Invalidate();

// Copy WriteableBitmap bits to a XAML ImageMyImage.Source = bitmap;

WriteableBitmapdemo

Magnifying Glass

Movable lens magnifies anything in sceneAdded wow factor; aid to visually impaired

How It Works

What the user sees

4x shadow copy

Displayed when the left mouse button goes down and hidden when it comes up

Clipped to a circular region that forms the lens of the magnifying glass

Moves as the mouse moves so points in the scenes coincide

Generating a Shadow Copy

Silverlight 2No ability to clone XAML objectsNo ability to render XAML objects to an imageRecourse is cut-and-paste

Silverlight 3Still no ability to clone XAML objectsWriteableBitmap.Render to the rescue!

Magnifierdemo

Behaviors

Introduced in Silverlight 3 and Blend 3Wrap behavioral logic in easy-to-use classes

Usually pair triggers with actionse.g., MouseEnter -> Change opacity of element

Attach to XAML object with simple declarative syntax (or drag-and-drop in Blend)

Derive from Behavior or Behavior<T>

Implementing a Behavior

public class DisappearBehavior : Behavior<UIElement>{ protected override void OnAttached() { base.OnAttached(); AssociatedObject.MouseLeftButtonDown += OnClick; }

private void OnClick(object sender, MouseButtonEventArgs e) { AssociatedObject.Visibility = Visibility.Collapsed; }

protected override void OnDetaching() { base.OnDetaching(); AssociatedObject.MouseLeftButtonDown -= OnClick; }}

Applying a Behavior

<Rectangle Width="300" Height="200" Fill="Red"> <i:Interaction.Behaviors> <local:DisappearBehavior /> </i:Interaction.Behaviors></Rectangle>

"i" refers to System.Windows.Interactivity namespace in the assembly of the same name

Behaviorsdemo

Reflections

Create "wet-floor" effects programmaticallyUse WriteableBitmap.Render to do the work

Generating a Reflection

// XAML<Canvas x:Name="Main" Width="400" Height="400"> ...</Canvas><Image x:Name="Reflection" Opacity="0.3" Stretch="None"> <Image.RenderTransform> <ScaleTransform ScaleY="-1" /> </Image.RenderTransform></Image>

// C#WriteableBitmap bitmap = new WriteableBitmap ((int)Main.Width, (int)Main.Height);bitmap.Render(Main, null);bitmap.Invalidate();Reflection.Source = bitmap;

Reflectiondemo

Effects (Pixel Shaders)

Apply pixel effects to visual XAML objectsApplied through UIElement.Effect propertyTwo shaders/effects included in Silverlight 3

BlurEffectDropShadowEffect

Always rendered by CPU (never by GPU)Custom effects supported, too

Library available at http://wpffx.codeplex.com/

BlurEffect

<TextBlock Text="Silverlight" Foreground="Black" FontSize="64" FontWeight="Bold"> <TextBlock.Effect> <BlurEffect Radius="16" /> </TextBlock.Effect></TextBlock>

DropShadowEffect

<TextBlock Text="Silverlight" Foreground="Black" FontSize="64" FontWeight="Bold"> <TextBlock.Effect> <DropShadowEffect BlurRadius="8" ShadowDepth="8" Opacity="0.5" /> </TextBlock.Effect></TextBlock>

Custom Pixel Shaders

Implement shader in HLSLHigh-Level Shader Language (DirectX)

Compile HLSL into PS file with Fxc.exeFxc.exe = Effects compilerAvailable in DirectX SDK

Derive from System.Windows.Media.-Effects.ShaderEffect and link to PS file

Do-Nothing Shader

sampler2D input : register(s0);

float4 main(float2 pos : TEXCOORD) : COLOR {     float4 color = tex2D(input , pos.xy); return color; }

For each pixel, returns the color of the same pixel

Grayscale Shader

sampler2D input : register(s0);

float4 main(float2 pos : TEXCOORD) : COLOR { float4 color = tex2D(input, pos.xy); color.rgb = (0.3 * color.r) + (0.59 * color.g) + (0.11 * color.b); return color; }

Sets R, G, and B components to a value that equals the luminance of the pixel

Embossing Shader

sampler2D input : register(s0);

float4 main(float2 pos : TEXCOORD) : COLOR { float4 color = tex2D(input, pos.xy); color -= tex2D(input, pos.xy - 0.002) * 2.7; color += tex2D(input, pos.xy + 0.002) * 2.7; color.rgb = (0.3 * color.r) + (0.59 * color.g) + (0.11 * color.b); return color;}

Pixel Shadersdemo

Animation Easing

Add non-linear effects to animationsBounce, oscillation, and more

Easing classes encapsulate effects11 easing classes built in (BounceEase etc.)Create custom easing classes by implementing IEasingFunction

Simulate physics with simple from/to animations and make motion more realistic

Using BounceEase

<Storyboard x:Name="BallDrop"> <DoubleAnimation    Storyboard.TargetName="Ball"    Storyboard.TargetProperty="(Canvas.Top)"    From="200" To="0" Duration="0:0:1"> <DoubleAnimation.EasingFunction> <BounceEase Bounces="10" Bounciness="2" EasingMode="EaseOut" /> </DoubleAnimation.EasingFunction> </DoubleAnimation></Storyboard>

Adding Realism with CircleEasedemo

Radical Items Controls

ListBox and other ItemsControl derivatives use ItemsPanel property to expose internal layout

Default ItemsPanel is StackPanel or VirtualizingStackPanel

Default ItemsPanel can be replaced with custom layout control to achieve exotic layouts

Radial arrays, carousels, etc.

Using ItemsPanel

<ListBox Width="600" Height="600" ...> <ListBox.ItemsPanel> <ItemsPanelTemplate> <StackPanel Orientation="Horizontal" /> </ItemsPanelTemplate> </ListBox.ItemsPanel></ListBox>

Radical ListBoxesdemo

PlaneProjection

Silverlight's 2.5D perspective transformRotate objects around X, Y, and Z axes using Rotation propertiesControl camera position using Offset propertiesApplied to XAML objects through UIElement.Projection property

Using PlaneProjection

<Image Source="Amy.jpg"> <Image.Projection> <PlaneProjection RotationY="45" /> </Image.Projection></Image>

CoverFlow

Popular interface for multi-item displayCreated by Andrew Coulter EnrightPopularized by Apple (iTunes, iPhone, etc.)

CoverFlow Control

Open-source component available at http://silverlightcoverflow.codeplex.com/Derives from ItemsControl

Templatable, bindable, etc.Numerous properties for customizing UI

RotationAngle, Scale, ZDistance, etc.Built-in easing for added realism

CoverFlowdemo

Dynamic Deep Zoom

Most Deep Zoom apps use static image pyramids generated by Deep Zoom ComposerDeep Zoom can also use imagery created at run-time ("Dynamic Deep Zoom")

Deep Earth projecthttp://www.codeplex.com/deepearthhttp://deepearth.soulsolutions.com.au/

MutliScaleTileSource provides the key

Deriving from MultiScaleTileSource

public class CustomTileSource : MultiScaleTileSource{ private int _width; // Tile width private int _height; // Tile height

public CustomTileSource(int imageWidth, int imageHeight, int tileWidth, int tileHeight) : base(imageWidth, imageHeight, tileWidth, tileHeight, 0) { _width = tileWidth; _height = tileHeight; }

protected override void GetTileLayers(int level, int posx, int posy, IList<object> sources) { // TODO: Add tile's URI to "sources" }

Using CustomTileSource

// MSI is a MultiScaleImage control

MSI.Source = new CustomTileSource( 16000, // Scene width (max == 2^32) 12000, // Scene height (max == 2^32) 128, // Tile width 128 // Tile height);

Dynamic Deep Zoomdemo

question & answer

www.microsoft.com/teched

Sessions On-Demand & Community

http://microsoft.com/technet

Resources for IT Professionals

http://microsoft.com/msdn

Resources for Developers

www.microsoft.com/learning

Microsoft Certification & Training Resources

Resources

Complete an evaluation on CommNet and enter to win an Xbox 360 Elite!

© 2009 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS,

IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.