CHAPTER 15 WPF 4.0 AND SILVERLIGHT 3.0 394 9. You now need to add code to receive the messages and update the text box with the messages you have received. To receive messages, handle the MessageReceived event on an instance of LocalMessageReceiver. Open MainPage.xaml.cs in the receiver project and import the following namespace: using System.Windows.Messaging; 10. Amend MainPage.xaml.cs to the following: public partial class MainPage : UserControl { LocalMessageReceiver Channel1Receiver = new LocalMessageReceiver("Channel1"); public MainPage() { Channel1Receiver.MessageReceived += new EventHandler<MessageReceivedEventArgs>(Channel1Receiver_MessageReceived); Channel1Receiver.Listen(); InitializeComponent(); } void Channel1Receiver_MessageReceived(object sender, MessageReceivedEventArgs e) { txtMessage.Text="" + e.Message.ToString(); } } NOTE The LocalMessageReceiver constructor sets the parameter to Channel1 (the same channel that messages are being sent on). 11. Press F5 to run the project. 12. Click the Send Message button. A message should then be sent using the local connection API and the results displayed in the text box in the receive project. Styles Styles in Silverlight 3.0 can now be modified at runtime and support inheritance. Applying Styles Dynamically The following code shows how to apply a style to a button at runtime: myButton.Style=(Style)Application.Current.Resources["MyHorridFuciaStyle"]; CHAPTER 15 WPF 4.0 AND SILVERLIGHT 3.0 395 Style Inheritance Silverlight 3.0 allows you to create styles that inherit from another style (sort of like CSS) by specifying a parent style in the BasedOn property. The following code creates a style inheriting from MyHorridFuciaStyle: <Style x:Key="HybridStyle" TargetType="Button" BasedOn="{StaticResource MyHorridFuciaStyle}"></Style> Merge Dictionary Support It is now possible to refer to external resource dictionary files within your application: <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="myExternalResources.xaml" /> </ResourceDictionary.MergedDictionaries> </ResourceDictionary> Save File Dialog A major issue in previous versions of Silverlight was that there was no capability of transferring files to a user. Silverlight 3.0 has a new file save dialog that allows users to save content to their local machine rather than to isolated storage. This example creates a text file and then gives the user the option to save it: void cmdSave_Click(object sender, RoutedEventArgs e) { SaveFileDialog SaveDialog = new SaveFileDialog(); if (SaveDialog.ShowDialog() == true) { System.IO.Stream fs = null; try { fs = SaveDialog.OpenFile(); byte[] info = (new System.Text.UTF8Encoding(true)).GetBytes("Test text to write to file"); fs.Write(info, 0, info.Length); } finally { fs.Close(); } } } CHAPTER 15 WPF 4.0 AND SILVERLIGHT 3.0 396 Filtering Files in SaveDialog Files shown in the SaveDialog window can be filtered by type using the Filter and FilterIndex properties. The Filter property allows you to specify a pipe-delimitated list of file types and FilterIndex (0 based) sets the default filter to use. This example shows how to show two filter options with the default filter option set to all files: SaveDialog.Filter = "Text Files (.txt)|*.txt|All Files|*.*"; //Set default filter to All Files SaveDialog.FilterIndex = 1; Element to Element Binding In Silverlight 3.0 and WPF4.0, you can now bind directly to another element. This example binds a TextBlock’s Text property to the Text property of the text box txtValue: <TextBox x:Name="txtValue" Width="200" Canvas.Top="50" ></TextBox> <TextBlock Text="{Binding Text, ElementName=txtValue}"></TextBlock> Effects and Transformations WPF 4.0 and Silverlight 3.0 introduce some great new effects functionality. Let’s take a look at these now. Plane Projection Plane Projection is a new effect that allows you to rotate XAML elements around a 3D axis. Figure 15-27 shows the results of a Plane Projection transformation: CHAPTER 15 WPF 4.0 AND SILVERLIGHT 3.0 397 Figure 15-27. RotationY transformation to an image The effect was created with this XAML: <Image Source="/pic1.jpg"> <Image.Projection> <PlaneProjection RotationY="130"></PlaneProjection> </Image.Projection> </Image> Note the transformation effect simulates rotating elements around the X, Y, or Z axis, but does not apply light or shading effects. CHAPTER 15 WPF 4.0 AND SILVERLIGHT 3.0 398 THE RESULT OF A ROTATIONX TRANSFORM? You might have expected Figure 15-27 to be the result of a X rather than Y axis rotation. It can help to imagine that the Y axis is like a vertical pole, and the image is placed in front of this pole (see Figure 15-28). When the transformation is applied the image is rotated around whichever pole is specified (in this case, the Y pole). Figure 15-28. How Silverlight 3.0 views rotation transformations Don’t think that perspective transforms can be used only on images. Perspective transformations can also be applied to any WPF element allowing you to create some really weird and cool animation effectsand the best part is that the control will still function as per normal, detecting clicks and events! This can be used for some silly (and unfriendly UI design), as Figure 15-29 shows. Figure 15-29. Projection transform applied to stack panel CHAPTER 15 WPF 4.0 AND SILVERLIGHT 3.0 399 Easing Effects Earlier, I discussed some of the new easing effects in WPF4.0. Let’s take a look at the BounceEase effect, which animates an element to makes it look like a ball bouncing up and down that gradually loses height with each bounce. The level of springiness can be controlled through the adeptly named Bounciness property, in which lower numbers are more bouncy (e.g., a rubber ball) than higher numbers (e.g., a cricket ball). This XAML shows how to apply a BounceEase effect to an image (note you will have to start this storyboard to see the animation): <Canvas> <Canvas.Resources> <Storyboard x:Name="bounceyAnim"> <DoubleAnimation Duration="0:0:3" From="0" To="300" Storyboard.TargetName="myPic" Storyboard.TargetProperty="(Canvas.Top)"> <DoubleAnimation.EasingFunction> <BounceEase Bounciness="2" Bounces="5" EasingMode="EaseOut"></BounceEase> </DoubleAnimation.EasingFunction> </DoubleAnimation> </Storyboard> </Canvas.Resources> <Image Source="/pic1.jpg" Width="200" Height="200" Canvas.Left="50" Canvas.Top="50" x:Name="myPic"></Image> </Canvas> Pixel Shaders Pixel shaders manipulate a rendered element at the pixel level and can be used to apply cool effects such as shadows and blurs. Figure 15-30 shows the shadow effect applied to an image. CHAPTER 15 WPF 4.0 AND SILVERLIGHT 3.0 400 Figure 15-30. Shadow pixel shader This effect was created with the following code: <Image x:Name="myPic" Source="sydney2.jpg"> <Image.Effect> <DropShadowEffect ShadowDepth="15"></DropShadowEffect> </Image.Effect> </Image> Silverlight contains another great built-in pixel shader called Blur (shown in Figure 15-31). CHAPTER 15 WPF 4.0 AND SILVERLIGHT 3.0 401 Figure 15-31. Blur pixel shader effect Applying the Blur effect is very similar to applying DropShadow: <Image Source="/pic1.jpg" Width="700" Height="500" Canvas.Left="50" Canvas.Top="20" x:Name="myPic"> <Image.Effect> <BlurEffect Radius="15"></BlurEffect> </Image.Effect> </Image> TIP Although you cannot apply two pixel shader effects to the same element, you can wrap an element with another element (e.g., add a Canvas element) and then apply effects to the outer element. TIP Pixel shader effects are always rendered on the CPU, so they do not benefit from GPU acceleration. Creating Your Own Pixel Shaders You can create your own pixel shaders by utilizing a language called High Level Shader Language (HLSL).). CHAPTER 15 WPF 4.0 AND SILVERLIGHT 3.0 402 Renew Schulte created an excellent filter that simulates an old movie tape effect. For more information on how René created this effect and an example of this applied to a movie please refer to http://kodierer.blogspot.com/2009/08/ye-olde-pixels-silverlight-3-old-movie.html. Media One of Silverlight's strengths has always been its rich media capabilities (indeed version 1.0 wasn’t good for much else). Silverlight 3.0 now contains support for a number of new formats and smooth streaming when used in conjunction with IIS Media Services (http://www.iis.net/media). New Formats Silverlight 3.0 supports the following additional formats: • HD (720p+) • MPEG-4–based H.264/AAC Audio ( known as HD TV) • HD playback to full screen by utilizing GPU Silverlight DRM Silverlight 3.0 contains built-in DRM support using PlayReady with AES encryption. NOTE To utilize PlayReady-protected content, you will need access to a PlayReady licensed server. . effects such as shadows and blurs. Figure 15- 30 shows the shadow effect applied to an image. CHAPTER 15 WPF 4. 0 AND SILVERLIGHT 3 .0 40 0 Figure 15- 30. Shadow pixel shader This effect was created. </Canvas.Resources> <Image Source="/pic1.jpg" Width=" 200 " Height=" 200 " Canvas.Left=" 50& quot; Canvas.Top=" 50& quot; x:Name="myPic"></Image> </Canvas>. DropShadow: <Image Source="/pic1.jpg" Width=" 700 " Height=" 500 " Canvas.Left=" 50& quot; Canvas.Top=" 20& quot; x:Name="myPic"> <Image.Effect>