Jeff Prosise Wintellect ( Session Code: WIA307

Page-Turn Framework Page-turn apps made simple Framework implemented in PageTurn.cs

Using the Framework (XAML)...

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 Methods MethodDescription 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 Properties PropertyDescription 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 Events EventDescription PageTurned

Page-Turn Framework

WriteableBitmap New class in Silverlight 3 Generate bitmaps from scratch, pixel by pixel Modify existing images Subject to cross-domain security constraints Render 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 Image MyImage.Source = bitmap;

Rendering XAML to a Bitmap // Create a WriteableBitmap WriteableBitmap bitmap = new WriteableBitmap(width, height); // Render Canvas named "TargetCanvas" to the bitmap bitmap.Render(TargetCanvas, null); bitmap.Invalidate(); // Copy WriteableBitmap bits to a XAML Image MyImage.Source = bitmap;

WriteableBitmap

Magnifying Glass Movable lens magnifies anything in scene Added 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 2 No ability to clone XAML objects No ability to render XAML objects to an image Recourse is cut-and-paste Silverlight 3 Still no ability to clone XAML objects WriteableBitmap.Render to the rescue!

Magnifier

Behaviors Introduced in Silverlight 3 and Blend 3 Wrap behavioral logic in easy-to-use classes Usually pair triggers with actions e.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

Implementing a Behavior public class DisappearBehavior : Behavior { 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 "i" refers to System.Windows.Interactivity namespace in the assembly of the same name

Behaviors

Reflections Create "wet-floor" effects programmatically Use WriteableBitmap.Render to do the work

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

Reflection

Effects (Pixel Shaders) Apply pixel effects to visual XAML objects Applied through UIElement.Effect property Two shaders/effects included in Silverlight 3 BlurEffect DropShadowEffect Always rendered by CPU (never by GPU) Custom effects supported, too Library available at

BlurEffect <TextBlock Text="Silverlight" Foreground="Black" FontSize="64" FontWeight="Bold">

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

Custom Pixel Shaders Implement shader in HLSL High-Level Shader Language (DirectX) Compile HLSL into PS file with Fxc.exe Fxc.exe = Effects compiler Available 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 ) * 2.7; color += tex2D(input, pos.xy ) * 2.7; color.rgb = (0.3 * color.r) + (0.59 * color.g) + (0.11 * color.b); return color; }

Pixel Shaders

Animation Easing Add non-linear effects to animations Bounce, oscillation, and more Easing classes encapsulate effects 11 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 <DoubleAnimation Storyboard.TargetName="Ball" Storyboard.TargetProperty="(Canvas.Top)" From="200" To="0" Duration="0:0:1"> <BounceEase Bounces="10" Bounciness="2" EasingMode="EaseOut" />

Adding Realism with CircleEase

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

Radical ListBoxes

PlaneProjection Silverlight's 2.5D perspective transform Rotate objects around X, Y, and Z axes using Rotation properties Control camera position using Offset properties Applied to XAML objects through UIElement.Projection property

Using PlaneProjection

CoverFlow Popular interface for multi-item display Created by Andrew Coulter Enright Popularized by Apple (iTunes, iPhone, etc.)

CoverFlow Control Open-source component available at Derives from ItemsControl Templatable, bindable, etc. Numerous properties for customizing UI RotationAngle, Scale, ZDistance, etc. Built-in easing for added realism

CoverFlow

Dynamic Deep Zoom Most Deep Zoom apps use static image pyramids generated by Deep Zoom Composer Deep Zoom can also use imagery created at run- time ("Dynamic Deep Zoom") Deep Earth project 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 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 Zoom

Sessions On-Demand & Community Resources for IT Professionals Resources for Developers Microsoft Certification & Training Resources Resources Required Slide Speakers, TechEd 2009 is not producing a DVD. Please announce that attendees can access session recordings at TechEd Online. Required Slide Speakers, TechEd 2009 is not producing a DVD. Please announce that attendees can access session recordings at TechEd Online.

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. Required Slide