Transcript Jeff Prosise Wintellect (www.wintellect.com) Session Code: WIA307 Page-Turn Framework Page-turn apps made simple Framework implemented in PageTurn.cs.

Jeff Prosise
Wintellect (www.wintellect.com)
Session Code: WIA307
Page-Turn Framework
Page-turn apps made simple
Framework 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 Methods
Method
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 Properties
Property
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 Events
Event
PageTurned
Description
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<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
Behaviors
Reflections
Create "wet-floor" effects programmatically
Use 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;
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 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 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 - 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 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
<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 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
<ListBox Width="600" Height="600" ...>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
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
<Image Source="Amy.jpg">
<Image.Projection>
<PlaneProjection RotationY="45" />
</Image.Projection>
</Image>
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
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
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 runtime ("Dynamic Deep Zoom")
Deep Earth project
http://www.codeplex.com/deepearth
http://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
16000,
12000,
128,
128
);
= new CustomTileSource(
// Scene width (max == 2^32)
// Scene height (max == 2^32)
// Tile width
// Tile height
Dynamic Deep Zoom
Resources
www.microsoft.com/teched
www.microsoft.com/learning
Sessions On-Demand & Community
Microsoft Certification & Training Resources
http://microsoft.com/technet
http://microsoft.com/msdn
Resources for IT Professionals
Resources for Developers
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.