jeff prosise wintellect () session code: wia307
Post on 04-Jan-2016
229 Views
Preview:
TRANSCRIPT
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.
top related