Enhancements in Silverlight 5 for Text, Media, Threading, and Data Binding

1. What's New in Silverlight 5 Jeff Prosise http://www.wintellect.com/CS/blogs/jprosise/default.aspx http://twitter.com/#!/jprosise

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

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

4. Character Spacing <TextBlock Text="Hello, Silverlight" CharacterSpacing="100" />

5. Text Overflow and Character Spacing

6. Media Improvements • Low-latency sound • XNA SoundEffect class • TrickPlay • Accessed through MediaElement'sPlaybackRate property • Variable-rate video and audio playback • Audio pitch correction coming post-beta • Hardware (GPU) decoding of H.264 video

7. Using the SoundEffect Class 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 effect se.Play();

8. Using TrickPlay // XAML <MediaElement x:Name="Player" Source="..." /> // C# Player.PlaybackRate = 0.5; // Slow motion (half speed)

9. TrickPlay

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

11. Using the Composition Thread <Rectangle CacheMode="BitmapCache" ...> <Rectangle.RenderTransform> <RotateTransform x:Name="Spin" /> </Rectangle.RenderTransform> <Rectangle.Resources> <Storyboard> <DoubleAnimationStoryboard.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

12. Composition Thread

13. Data Binding Improvements • Implicit data templates • Ancestor RelativeSource • Style data binding • Data binding debugging

14. Implicit Data Templates • Apply data templates by type rather than key <DataTemplateDataType="local:Audio"> <TextBlock Foreground="Red" Text="{Binding Title}" /> </DataTemplate> <DataTemplateDataType="local:Video"> <TextBlock Foreground="Blue" Text="{Binding Title}" /> </DataTemplate> . . . <ListBoxItemsSource="{Binding AudiosAndVideos}" />

15. 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={RelativeSourceAncestorType=Grid}}" Stroke="White" Grid.Row="1" Grid.Column="0" /> <Ellipse Width="90" Height="90" Fill="{Binding Background, RelativeSource={RelativeSourceAncestorType=Grid, AncestorLevel=2}}" Stroke="White" Grid.Row="1" Grid.Column="1" /> </Grid> </Grid>

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

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

18. Style Data Binding and Data Binding Debugging

19. 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.MarkupExtensionand override ProvideValue

20. Using a Custom Markup Extension // MVVM ListBox <ListBox SelectionChanged="{custom:MethodInvoke Path=ItemSelected}" /> // MVVM Button <Button Name="InvokeButton" Content="Save" Click="{custom:MethodInvoke Path=SaveData}" />

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

22. Using HelloMarkupExtension <TextBlock Text="{custom:HelloMarkup Text='Silverlight 5'}" />

23. IServiceProvider • GetService method returns a service interface IXamlTypeResolver resolver = provider.GetService(typeof(IXamlTypeResolver)) as IXamlTypeResolver;

24. Querying the Target Property IProvideValueTargetipvt = 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")

25. Custom Markup Extensions

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

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

28. Setting Permissions AllowElevatedTrustApps-InBrowser added to registry and set to 1 Certificate used to sign XAP installed in Trusted Publishers certificate store

29. Limiting Trusted Apps to Running In-Browser • AllowInstallOfElevatedTrustApps = 0 prevents trusted apps from being installed and run outside the browser

30. Accessing the File System 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; }

31. Creating Another Window 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

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

33. Trusted Applications

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

35. Enabling GPU Acceleration <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"> <imgsrc="..." alt="Get Microsoft Silverlight" style="border-style:none"/> </a> </object>

36. Detecting GPU Support public boolCanGpuRender { RenderMode mode = GraphicsDeviceManager.Current.RenderMode; return (mode == RenderMode.Hardware); }

37. Using a DrawingSurface // XAML <DrawingSurface Draw="OnDraw" /> // C# void OnDraw(object sender, DrawEventArgsargs) { GraphicsDevicegd = 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) }

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

39. Creating a Vertex Buffer VertexPositionColor[] vertices = new VertexPositionColor[3]; vertices[0].Position = new Vector3(-1, -1, 0); // left vertices[1].Position = new Vector3(0, 1, 0); // top vertices[2].Position = new Vector3(1, -1, 0); // right vertices[0].Color = new Color(255, 0, 0, 255); // red vertices[1].Color = new Color(0, 255, 0, 255); // green vertices[2].Color = new Color(0, 0, 255, 255); // blue VertexBuffervb = new VertexBuffer (GraphicsDeviceManager.Current.GraphicsDevice, VertexPositionColor.VertexDeclaration, vertices.Length, BufferUsage.WriteOnly); vb.SetData(0, vertices, 0, vertices.Length, 0);

40. Creating Vertex and Pixel Shaders GraphicsDevicerd = GraphicsDeviceManager.Current.GraphicsDevice; // Initialize a vertex shader Stream stream = Application.GetResourceStream (new Uri(@"ProjectName;component/VertexShader.vs", UriKind.Relative)).Stream; VertexShadervs = VertexShader.FromStream(rd, stream); // Initialize a pixel shader stream = Application.GetResourceStream (new Uri(@"ProjectName;component/PixelShader.ps", UriKind.Relative)).Stream; PixelShaderps = PixelShader.FromStream(rd, stream);

41. Creating a View/Projection Matrix // Initialize a view matrix for a fixed camera position Matrix view = Matrix.CreateLookAt( new Vector3(0, 0, 5.0f), // Camera position Vector3.Zero, // Camera target Vector3.Up // Camera orientation ); // Initialize a perspective projection matrix Matrix 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 SetVertexShaderConstantFloat4 Matrix viewproj = view * projection;

42. 3D Graphics

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

44. 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 • PivotViewercontrol

45. 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 DownloadMSDN/TechNet Desktop Gadgethttp://bit.ly/msdntngadget

46. TechDays 2011 On-Demand • Watchthis 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

47. THANK YOU