2. Jeff Prosise Wintellect (www.wintellect.com) Session Code: WIA307

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

4. Using the Framework (XAML)...

5. 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;

6. 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

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

8. Page-Turn API, Cont. PageTurn Events EventDescription PageTurned

9. Page-Turn Framework

10. 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

11. 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;

12. 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;

13. WriteableBitmap

14. Magnifying Glass Movable lens magnifies anything in scene Added wow factor; aid to visually impaired

15. 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

16. 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!

17. Magnifier

18. 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

19. 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; }

20. Applying a Behavior "i" refers to System.Windows.Interactivity namespace in the assembly of the same name

21. Behaviors

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

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

24. Reflection

25. 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 http://wpffx.codeplex.com/

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

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

28. 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

29. 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

30. 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

31. 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; }

32. Pixel Shaders

33. 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

34. 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" />

35. Adding Realism with CircleEase

36. 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.

37. Using ItemsPanel

38. Radical ListBoxes

39. 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

40. Using PlaneProjection

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

42. 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

43. CoverFlow

44. 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 http://www.codeplex.com/deepearth http://deepearth.soulsolutions.com.au/ MutliScaleTileSource provides the key

45. 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" }

46. 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 );

47. Dynamic Deep Zoom

49. 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 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.

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

51. © 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