What's New in Silverlight 5Jeff Prosisehttp://www.wintellect.com/CS/blogs/jprosise/default.aspxhttp://twitter.com/#!/jprosise

Text Improvements

• Text overflow areas (multi-column text)• RichTextBoxOverflow control• Link RichTextBox to one or more RichTextBoxOverflow controls

and flow text from one to the other• Controllable character spacing (leading)• CharacterSpacing property on text-input elements

• Crisper text display via pixel snapping (post-beta)• Enhanced OpenType support (post-beta)

2

Text Overflow

3

<RichTextBox x:Name="Column1" OverflowContentTarget="{Binding ElementName=Column2}"> . . .</RichTextBox>

<RichTextBoxOverflow x:Name="Column2" />

Character Spacing

4

<TextBlock Text="Hello, Silverlight" CharacterSpacing="100" />

DEMOText Overflow and Character Spacing

Media Improvements

• Low-latency sound• XNA SoundEffect class

• TrickPlay• Accessed through MediaElement's PlaybackRate property• Variable-rate video and audio playback• Audio pitch correction coming post-beta

• Hardware (GPU) decoding of H.264 video

Using the SoundEffect Class

7

using Microsoft.Xna.Framework.Audio; . . .// Create a sound effect from Gong.wav (assumes Gong.wav's// build action is "Content")SoundEffect se = SoundEffect.FromStream(Application.GetResourceStream (new Uri("Gong.wav", UriKind.Relative)).Stream);

// Play the sound effectse.Play();

Using TrickPlay

8

// XAML<MediaElement x:Name="Player" Source="..." />

// C#Player.PlaybackRate = 0.5; // Slow motion (half speed)

DEMOTrickPlay

Threading Improvements

• Dedicated composition thread• GPU animations no longer handled on UI thread• Adapted from Silverlight for Windows Phone

• Decreased network latency• HttpWebRequest calls removed from UI thread• Up to 90% less latency according to Microsoft

Using the Composition Thread

11

<Rectangle CacheMode="BitmapCache" ...> <Rectangle.RenderTransform> <RotateTransform x:Name="Spin" /> </Rectangle.RenderTransform> <Rectangle.Resources> <Storyboard> <DoubleAnimation Storyboard.TargetName="Spin" Storyboard.TargetProperty="Angle" From="0" To="360" Duration="0:0:1" RepeatBehavior="Forever" /> </Storyboard> </Rectangle.Resources></Rectangle>

Animation will run on the composition thread if GPU acceleration is enabled

DEMOComposition Thread

Data Binding Improvements

• Implicit data templates• Ancestor RelativeSource• Style data binding• Data binding debugging

Implicit Data Templates

• Apply data templates by type rather than key

<DataTemplate DataType="local:Audio"> <TextBlock Foreground="Red" Text="{Binding Title}" /></DataTemplate><DataTemplate DataType="local:Video"> <TextBlock Foreground="Blue" Text="{Binding Title}" /></DataTemplate> . . .<ListBox ItemsSource="{Binding AudiosAndVideos}" />

Ancestor RelativeSource

• Bind to ancestors in the visual tree

<Grid Background="White"> <Grid Background="Blue"> ... <Ellipse Width="90" Height="90" Fill="Red" Stroke="White" Grid.Row="0" Grid.Column="0" /> <Ellipse Width="90" Height="90" Fill="Yellow" Stroke="White" Grid.Row="0" Grid.Column="1" /> <Ellipse Width="90" Height="90" Fill="{Binding Background, RelativeSource={RelativeSource AncestorType=Grid}}" Stroke="White" Grid.Row="1" Grid.Column="0" /> <Ellipse Width="90" Height="90" Fill="{Binding Background, RelativeSource={RelativeSource AncestorType=Grid, AncestorLevel=2}}" Stroke="White" Grid.Row="1" Grid.Column="1" /> </Grid></Grid>

Style Data Binding

• Data-bind Value properties in style setters

<local:ColorTheme x:Key="Theme" /><Style TargetType="TextBlock"> <Setter Property="Foreground" Value="{Binding TextColor, Source={StaticResource Theme}}" /></Style> . . .<TextBlock Width="200" Height="36" />

TextBlock's Foreground property comes from TextColor property of ColorTheme resource

Data Binding Debugging

• Also known as "XAML Debugging"• Set breakpoints on {Binding} expressions in XAML• Analyze broken bindings, detect when target is updated, and

more

DEMOStyle Data Binding and Data Binding Debugging

Custom Markup Extensions

• Extend XAML with your own markup extensions• Finally supported in Silverlight!

• Many practical uses in real-world projects• Use custom markup for localization• Use custom markup for MVVM commanding• Use custom markup for dependency injection• And on and on and on

• Derive from System.Windows.Markup.MarkupExtension and override ProvideValue

Using a Custom Markup Extension

20

// MVVM ListBox<ListBox SelectionChanged="{custom:MethodInvoke Path=ItemSelected}"/>

// MVVM Button<Button Name="InvokeButton" Content="Save" Click="{custom:MethodInvoke Path=SaveData}" />

Writing a Custom Markup Extension

21

public class HelloMarkupExtension : MarkupExtension{ public string Text { get; set; } public override object ProvideValue(IServiceProvider provider) { return "Hello, " + this.Text; }}

Using HelloMarkupExtension

22

<TextBlock Text="{custom:HelloMarkup Text='Silverlight 5'}" />

IServiceProvider

• GetService method returns a service interface

IXamlTypeResolver resolver = provider.GetService(typeof(IXamlTypeResolver)) as IXamlTypeResolver;

Interface Description

IProvideValueTarget Enables markup extension to retrieve reference to target object and target property

IXamlTypeResolver Enables markup extension to convert a named XAML type reference into a CLR type reference

IRootObjectProvider Enables markup extension to retrieve reference to root element in visual tree

Querying the Target Property

24

IProvideValueTarget ipvt = provider.GetService(typeof(IProvideValueTarget)) as IProvideValueTarget;

PropertyInfo pi = ipvt.TargetProperty as PropertyInfo;

string type = pi.PropertyType.Name; // Type name (e.g., "String")string name = pi.Name; // Property name (e.g., "Text")

DEMOCustom Markup Extensions

Trusted Application Improvements

• Can now run inside the browser• Requires permissions (localhost excepted)• Can host WebBrowser controls in-browser, too

• Can now create multiple windows• Modeless dialogs, tear-off windows, and more• Only available to trusted out-of-browser apps

• Can now access entire file system

Running Trusted Apps In-Browser

• Registry requirements• 32-bit: HKLM\Software\Microsoft\Silverlight\-

AllowElevatedTrustAppsInBrowser = 1• 64-bit: HKLM\Software\Wow6432Node\Microsoft\-Silverlight\

AllowElevatedTrustAppsInBrowser = 1• XAP requirements• XAP must be signed• Certificate used for signing must be installed in Trusted

Publishers certificate store on client machine• Requirements waived for XAPs from localhost

Setting Permissions

AllowElevatedTrustApps-InBrowser added to registry and set to 1

Certificate used to sign XAP installed in Trusted Publishers certificate store

Limiting Trusted Apps to Running In-Browser

• AllowInstallOfElevatedTrustApps = 0 prevents trusted apps from being installed and run outside the browser

Accessing the File System

30

if (Application.Current.HasElevatedPermissions){ List<string> list = new List<string>();

// Enumerate files in C:\Windows\System32 directory foreach (string file in Directory.EnumerateFiles(@"C:\Windows\System32")) list.Add(file.Substring(file.LastIndexOf('\\') + 1)); // Bind enumerated list to a ListBox FileListBox.ItemsSource = list;}

Creating Another Window

31

if (Application.Current.HasElevatedPermissions && Application.Current.IsRunningOutOfBrowser){ Window popup = new Window(); popup.Width = 300; popup.Height = 400; popup.Top = 100; popup.Left = 200; popup.Title = "Popup Window"; popup.Content = new PopupWindowUserControl(); popup.Visibility = Visibility.Visible;}

User control containing content for popup window

Enumerating Windows

32

foreach (Window window in Application.Current.Windows){ if (window == Application.Current.MainWindow) { // Main window } else { // Another window }}

DEMOTrusted Applications

3D Graphics

• Silverlight 5 includes robust 3D support• Hardware (GPU) accelerated• Immediate-mode XNA-based API• Built-in shaders/effects coming post-beta• Supports textures, bump mapping, etc.

• DrawingSurface control represents 3D canvas• Draw event signals opportunity to redraw

• Requires Shader Model 2.0-compatible hardware• Requires consent or trust on Windows XP

Enabling GPU Acceleration

35

<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%"> <param name="enableGPUAcceleration" value="true" /> <param name="source" value="ClientBin/CubeSample.xap"/> <param name="onError" value="onSilverlightError" /> <param name="background" value="white" /> <param name="minRuntimeVersion" value="5.0.60211.0" /> <param name="autoUpgrade" value="true" /> <a href="..." style="text-decoration:none"> <img src="..." alt="Get Microsoft Silverlight" style="border-style:none"/> </a> </object>

Detecting GPU Support

36

public bool CanGpuRender{ RenderMode mode = GraphicsDeviceManager.Current.RenderMode; return (mode == RenderMode.Hardware);}

Using a DrawingSurface

37

// XAML<DrawingSurface Draw="OnDraw" />

// C#void OnDraw(object sender, DrawEventArgs args){ GraphicsDevice gd = args.GraphicsDevice;

gd.Clear(...); // Clear the drawing surface gd.SetVertexBuffer(...); // Pass vertex buffer to GPU gd.SetVertexShader(...); // Pass vertex shader to GPU gd.SetVertexShaderConstantFloat4(...); // Pass transform matrix gd.SetPixelShader(...); // Pass pixel shader to GPU gd.DrawPrimitives(...); // Draw contents of vertex buffer

gd.InvalidateSurface(); // Force another redraw (optional)}

3D Models

• Models are formed from meshes of 3D triangles• Define vertices using X-Y-Z coordinates• Connect vertices to form triangles• Connect triangles to form meshes

• Triangles can be shaded with colors or textures

Creating a Vertex Buffer

39

VertexPositionColor[] vertices = new VertexPositionColor[3];

vertices[0].Position = new Vector3(-1, -1, 0); // leftvertices[1].Position = new Vector3(0, 1, 0); // topvertices[2].Position = new Vector3(1, -1, 0); // rightvertices[0].Color = new Color(255, 0, 0, 255); // redvertices[1].Color = new Color(0, 255, 0, 255); // greenvertices[2].Color = new Color(0, 0, 255, 255); // blue VertexBuffer vb = new VertexBuffer (GraphicsDeviceManager.Current.GraphicsDevice, VertexPositionColor.VertexDeclaration, vertices.Length, BufferUsage.WriteOnly);

vb.SetData(0, vertices, 0, vertices.Length, 0);

Creating Vertex and Pixel Shaders

40

GraphicsDevice rd = GraphicsDeviceManager.Current.GraphicsDevice;

// Initialize a vertex shaderStream stream = Application.GetResourceStream (new Uri(@"ProjectName;component/VertexShader.vs", UriKind.Relative)).Stream;VertexShader vs = VertexShader.FromStream(rd, stream);

// Initialize a pixel shader stream = Application.GetResourceStream (new Uri(@"ProjectName;component/PixelShader.ps", UriKind.Relative)).Stream;PixelShader ps = PixelShader.FromStream(rd, stream);

Creating a View/Projection Matrix

41

// Initialize a view matrix for a fixed camera positionMatrix view = Matrix.CreateLookAt( new Vector3(0, 0, 5.0f), // Camera position Vector3.Zero, // Camera target Vector3.Up // Camera orientation);

// Initialize a perspective projection matrixMatrix projection = Matrix.CreatePerspectiveFieldOfView( MathHelper.PiOver4, // Field of view, in radians 1.0f, // Aspect ratio 1.0f, // Distance to near view plane 100.0f // Distance to far view plane);

// Calculate the final matrix for SetVertexShaderConstantFloat4Matrix viewproj = view * projection;

DEMO3D Graphics

Other New Features

• Numerous performance optimizations• Multi-core JIT compilation for faster startup• Faster XAML parser and improved graphics stack• Improved text-layout performance

• MouseButtonEventArgs.ClickCount property• ComboBox type-ahead with text searching• Default file names in SaveFileDialog

Features Not in the Beta

• PostScript vector printing support• WS-Trust support• 64-bit support• P/Invoke support• COM interop support for trusted in-browser apps• DataContextChanged event• PivotViewer control

Stay up to date with MSDN Belux

• Register for our newsletters and stay up to date:http://www.msdn-newsletters.be• Technical updates• Event announcements and registration• Top downloads

• Follow our bloghttp://blogs.msdn.com/belux

• Join us on Facebookhttp://www.facebook.com/msdnbehttp://www.facebook.com/msdnbelux

• LinkedIn: http://linkd.in/msdnbelux/ • Twitter: @msdnbelux

Download MSDN/TechNet Desktop Gadget

http://bit.ly/msdntngadget

TechDays 2011 On-Demand

• Watch this session on-demand via Channel9http://channel9.msdn.com/belux

• Download to your favorite MP3 or video player• Get access to slides and recommended resources by the speakers

THANK YOU