Jeff Prosise Wintellect () Session Code: WIA307.
-
Upload
egbert-newman -
Category
Documents
-
view
229 -
download
2
Transcript of Jeff Prosise Wintellect () Session Code: WIA307.
![Page 1: Jeff Prosise Wintellect () Session Code: WIA307.](https://reader031.fdocuments.net/reader031/viewer/2022012922/56649f115503460f94c23d4a/html5/thumbnails/1.jpg)
![Page 2: Jeff Prosise Wintellect () Session Code: WIA307.](https://reader031.fdocuments.net/reader031/viewer/2022012922/56649f115503460f94c23d4a/html5/thumbnails/2.jpg)
Cool Graphics, Hot Code: Visual Effects in Silverlight
Jeff ProsiseWintellect (www.wintellect.com)Session Code: WIA307
![Page 3: Jeff Prosise Wintellect () Session Code: WIA307.](https://reader031.fdocuments.net/reader031/viewer/2022012922/56649f115503460f94c23d4a/html5/thumbnails/3.jpg)
Page-Turn Framework
Page-turn apps made simpleFramework implemented in PageTurn.cs
![Page 4: Jeff Prosise Wintellect () Session Code: WIA307.](https://reader031.fdocuments.net/reader031/viewer/2022012922/56649f115503460f94c23d4a/html5/thumbnails/4.jpg)
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>
![Page 5: Jeff Prosise Wintellect () Session Code: WIA307.](https://reader031.fdocuments.net/reader031/viewer/2022012922/56649f115503460f94c23d4a/html5/thumbnails/5.jpg)
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 6: Jeff Prosise Wintellect () Session Code: WIA307.](https://reader031.fdocuments.net/reader031/viewer/2022012922/56649f115503460f94c23d4a/html5/thumbnails/6.jpg)
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 7: Jeff Prosise Wintellect () Session Code: WIA307.](https://reader031.fdocuments.net/reader031/viewer/2022012922/56649f115503460f94c23d4a/html5/thumbnails/7.jpg)
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 8: Jeff Prosise Wintellect () Session Code: WIA307.](https://reader031.fdocuments.net/reader031/viewer/2022012922/56649f115503460f94c23d4a/html5/thumbnails/8.jpg)
Page-Turn API, Cont.
PageTurn EventsEvent Description
PageTurned
![Page 9: Jeff Prosise Wintellect () Session Code: WIA307.](https://reader031.fdocuments.net/reader031/viewer/2022012922/56649f115503460f94c23d4a/html5/thumbnails/9.jpg)
Page-Turn Frameworkdemo
![Page 10: Jeff Prosise Wintellect () Session Code: WIA307.](https://reader031.fdocuments.net/reader031/viewer/2022012922/56649f115503460f94c23d4a/html5/thumbnails/10.jpg)
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
![Page 11: Jeff Prosise Wintellect () Session Code: WIA307.](https://reader031.fdocuments.net/reader031/viewer/2022012922/56649f115503460f94c23d4a/html5/thumbnails/11.jpg)
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;
![Page 12: Jeff Prosise Wintellect () Session Code: WIA307.](https://reader031.fdocuments.net/reader031/viewer/2022012922/56649f115503460f94c23d4a/html5/thumbnails/12.jpg)
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;
![Page 13: Jeff Prosise Wintellect () Session Code: WIA307.](https://reader031.fdocuments.net/reader031/viewer/2022012922/56649f115503460f94c23d4a/html5/thumbnails/13.jpg)
WriteableBitmapdemo
![Page 14: Jeff Prosise Wintellect () Session Code: WIA307.](https://reader031.fdocuments.net/reader031/viewer/2022012922/56649f115503460f94c23d4a/html5/thumbnails/14.jpg)
Magnifying Glass
Movable lens magnifies anything in sceneAdded wow factor; aid to visually impaired
![Page 15: Jeff Prosise Wintellect () Session Code: WIA307.](https://reader031.fdocuments.net/reader031/viewer/2022012922/56649f115503460f94c23d4a/html5/thumbnails/15.jpg)
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
![Page 16: Jeff Prosise Wintellect () Session Code: WIA307.](https://reader031.fdocuments.net/reader031/viewer/2022012922/56649f115503460f94c23d4a/html5/thumbnails/16.jpg)
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!
![Page 17: Jeff Prosise Wintellect () Session Code: WIA307.](https://reader031.fdocuments.net/reader031/viewer/2022012922/56649f115503460f94c23d4a/html5/thumbnails/17.jpg)
Magnifierdemo
![Page 18: Jeff Prosise Wintellect () Session Code: WIA307.](https://reader031.fdocuments.net/reader031/viewer/2022012922/56649f115503460f94c23d4a/html5/thumbnails/18.jpg)
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>
![Page 19: Jeff Prosise Wintellect () Session Code: WIA307.](https://reader031.fdocuments.net/reader031/viewer/2022012922/56649f115503460f94c23d4a/html5/thumbnails/19.jpg)
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; }}
![Page 20: Jeff Prosise Wintellect () Session Code: WIA307.](https://reader031.fdocuments.net/reader031/viewer/2022012922/56649f115503460f94c23d4a/html5/thumbnails/20.jpg)
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
![Page 21: Jeff Prosise Wintellect () Session Code: WIA307.](https://reader031.fdocuments.net/reader031/viewer/2022012922/56649f115503460f94c23d4a/html5/thumbnails/21.jpg)
Behaviorsdemo
![Page 22: Jeff Prosise Wintellect () Session Code: WIA307.](https://reader031.fdocuments.net/reader031/viewer/2022012922/56649f115503460f94c23d4a/html5/thumbnails/22.jpg)
Reflections
Create "wet-floor" effects programmaticallyUse WriteableBitmap.Render to do the work
![Page 23: Jeff Prosise Wintellect () Session Code: WIA307.](https://reader031.fdocuments.net/reader031/viewer/2022012922/56649f115503460f94c23d4a/html5/thumbnails/23.jpg)
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;
![Page 24: Jeff Prosise Wintellect () Session Code: WIA307.](https://reader031.fdocuments.net/reader031/viewer/2022012922/56649f115503460f94c23d4a/html5/thumbnails/24.jpg)
Reflectiondemo
![Page 25: Jeff Prosise Wintellect () Session Code: WIA307.](https://reader031.fdocuments.net/reader031/viewer/2022012922/56649f115503460f94c23d4a/html5/thumbnails/25.jpg)
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/
![Page 26: Jeff Prosise Wintellect () Session Code: WIA307.](https://reader031.fdocuments.net/reader031/viewer/2022012922/56649f115503460f94c23d4a/html5/thumbnails/26.jpg)
BlurEffect
<TextBlock Text="Silverlight" Foreground="Black" FontSize="64" FontWeight="Bold"> <TextBlock.Effect> <BlurEffect Radius="16" /> </TextBlock.Effect></TextBlock>
![Page 27: Jeff Prosise Wintellect () Session Code: WIA307.](https://reader031.fdocuments.net/reader031/viewer/2022012922/56649f115503460f94c23d4a/html5/thumbnails/27.jpg)
DropShadowEffect
<TextBlock Text="Silverlight" Foreground="Black" FontSize="64" FontWeight="Bold"> <TextBlock.Effect> <DropShadowEffect BlurRadius="8" ShadowDepth="8" Opacity="0.5" /> </TextBlock.Effect></TextBlock>
![Page 28: Jeff Prosise Wintellect () Session Code: WIA307.](https://reader031.fdocuments.net/reader031/viewer/2022012922/56649f115503460f94c23d4a/html5/thumbnails/28.jpg)
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
![Page 29: Jeff Prosise Wintellect () Session Code: WIA307.](https://reader031.fdocuments.net/reader031/viewer/2022012922/56649f115503460f94c23d4a/html5/thumbnails/29.jpg)
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
![Page 30: Jeff Prosise Wintellect () Session Code: WIA307.](https://reader031.fdocuments.net/reader031/viewer/2022012922/56649f115503460f94c23d4a/html5/thumbnails/30.jpg)
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
![Page 31: Jeff Prosise Wintellect () Session Code: WIA307.](https://reader031.fdocuments.net/reader031/viewer/2022012922/56649f115503460f94c23d4a/html5/thumbnails/31.jpg)
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;}
![Page 32: Jeff Prosise Wintellect () Session Code: WIA307.](https://reader031.fdocuments.net/reader031/viewer/2022012922/56649f115503460f94c23d4a/html5/thumbnails/32.jpg)
Pixel Shadersdemo
![Page 33: Jeff Prosise Wintellect () Session Code: WIA307.](https://reader031.fdocuments.net/reader031/viewer/2022012922/56649f115503460f94c23d4a/html5/thumbnails/33.jpg)
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
![Page 34: Jeff Prosise Wintellect () Session Code: WIA307.](https://reader031.fdocuments.net/reader031/viewer/2022012922/56649f115503460f94c23d4a/html5/thumbnails/34.jpg)
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>
![Page 35: Jeff Prosise Wintellect () Session Code: WIA307.](https://reader031.fdocuments.net/reader031/viewer/2022012922/56649f115503460f94c23d4a/html5/thumbnails/35.jpg)
Adding Realism with CircleEasedemo
![Page 36: Jeff Prosise Wintellect () Session Code: WIA307.](https://reader031.fdocuments.net/reader031/viewer/2022012922/56649f115503460f94c23d4a/html5/thumbnails/36.jpg)
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.
![Page 37: Jeff Prosise Wintellect () Session Code: WIA307.](https://reader031.fdocuments.net/reader031/viewer/2022012922/56649f115503460f94c23d4a/html5/thumbnails/37.jpg)
Using ItemsPanel
<ListBox Width="600" Height="600" ...> <ListBox.ItemsPanel> <ItemsPanelTemplate> <StackPanel Orientation="Horizontal" /> </ItemsPanelTemplate> </ListBox.ItemsPanel></ListBox>
![Page 38: Jeff Prosise Wintellect () Session Code: WIA307.](https://reader031.fdocuments.net/reader031/viewer/2022012922/56649f115503460f94c23d4a/html5/thumbnails/38.jpg)
Radical ListBoxesdemo
![Page 39: Jeff Prosise Wintellect () Session Code: WIA307.](https://reader031.fdocuments.net/reader031/viewer/2022012922/56649f115503460f94c23d4a/html5/thumbnails/39.jpg)
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
![Page 40: Jeff Prosise Wintellect () Session Code: WIA307.](https://reader031.fdocuments.net/reader031/viewer/2022012922/56649f115503460f94c23d4a/html5/thumbnails/40.jpg)
Using PlaneProjection
<Image Source="Amy.jpg"> <Image.Projection> <PlaneProjection RotationY="45" /> </Image.Projection></Image>
![Page 41: Jeff Prosise Wintellect () Session Code: WIA307.](https://reader031.fdocuments.net/reader031/viewer/2022012922/56649f115503460f94c23d4a/html5/thumbnails/41.jpg)
CoverFlow
Popular interface for multi-item displayCreated by Andrew Coulter EnrightPopularized by Apple (iTunes, iPhone, etc.)
![Page 42: Jeff Prosise Wintellect () Session Code: WIA307.](https://reader031.fdocuments.net/reader031/viewer/2022012922/56649f115503460f94c23d4a/html5/thumbnails/42.jpg)
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
![Page 43: Jeff Prosise Wintellect () Session Code: WIA307.](https://reader031.fdocuments.net/reader031/viewer/2022012922/56649f115503460f94c23d4a/html5/thumbnails/43.jpg)
CoverFlowdemo
![Page 44: Jeff Prosise Wintellect () Session Code: WIA307.](https://reader031.fdocuments.net/reader031/viewer/2022012922/56649f115503460f94c23d4a/html5/thumbnails/44.jpg)
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
![Page 45: Jeff Prosise Wintellect () Session Code: WIA307.](https://reader031.fdocuments.net/reader031/viewer/2022012922/56649f115503460f94c23d4a/html5/thumbnails/45.jpg)
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" }
![Page 46: Jeff Prosise Wintellect () Session Code: WIA307.](https://reader031.fdocuments.net/reader031/viewer/2022012922/56649f115503460f94c23d4a/html5/thumbnails/46.jpg)
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);
![Page 47: Jeff Prosise Wintellect () Session Code: WIA307.](https://reader031.fdocuments.net/reader031/viewer/2022012922/56649f115503460f94c23d4a/html5/thumbnails/47.jpg)
Dynamic Deep Zoomdemo
![Page 48: Jeff Prosise Wintellect () Session Code: WIA307.](https://reader031.fdocuments.net/reader031/viewer/2022012922/56649f115503460f94c23d4a/html5/thumbnails/48.jpg)
question & answer
![Page 49: Jeff Prosise Wintellect () Session Code: WIA307.](https://reader031.fdocuments.net/reader031/viewer/2022012922/56649f115503460f94c23d4a/html5/thumbnails/49.jpg)
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
![Page 50: Jeff Prosise Wintellect () Session Code: WIA307.](https://reader031.fdocuments.net/reader031/viewer/2022012922/56649f115503460f94c23d4a/html5/thumbnails/50.jpg)
Complete an evaluation on CommNet and enter to win an Xbox 360 Elite!
![Page 51: Jeff Prosise Wintellect () Session Code: WIA307.](https://reader031.fdocuments.net/reader031/viewer/2022012922/56649f115503460f94c23d4a/html5/thumbnails/51.jpg)
© 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.