What exactly is DataBinding
How do we automatically write data to the TextBlock Manning Publications Co. Please post comments or corrections to the Author Online forum One way to accomplish this would be to have the code behind updating the TextBlock when the temperature changes. Ignore for the purposes of this example how the code behind would get that information If the application described were truly a thermostat instead of simply a thermometer, there must be a way for the user to enter text and have the value picked...
Cueballs in code and text replace below with cueballs
If the dog is entering anything but the Moving state we set its velocity to zero 1 and set the time to wait based on the game's current Delay value 2 . Otherwise the dog is entering the Moving state and we need to figure out where it is moving to and how long it will take to get there. This is done by calling the SetNextTarget method 3 . I don't think we have one of those yet. That's right so let's vreate it now. Here is the body of our SetNextTarget method double speed game.Speed double...
A very brief history lesson
Many companies have been moving away from Windows applications in favor of web applications because of some inherent problems with Windows applications. Deployment and updating of the application is difficult although this is a lot easier using ClickOnce . For most modern Windows applications, the prerequisites that need to be installed on the machine can be prohibitive. If you write a mainstream application using the .NET Framework, and it's not already installed on the target machine, it can...
Storyboard animations
In Silverlight, animations are simply a way of changing a property's value from one value to another over a period of time. These animations are grouped into Storyboards, and these Storyboards can contain one or more animations. By combining multiple animations in a single storyboard, some complex effects can be easily achieved. Let's say we wanted to move an element on a Canvas from one position to another. We would need two animations, one for the Canvas.Left property, and one for the Canvas....
Anatomy of a RIA
The term RIA was originally coined by Macromedia in 2002 in reference to applications built using their Flash technology. Applications that are categorized as RIAs typically run inside the browser while delivering an experience similar to traditional desktop application. The code to handle the user interface runs on the client and data is retrieved as needed from the web server. RIAs normally do not have full access to local resources but can save data in sandboxed file storage on the client....
RIA Services Essentials
Manning Publications Co. Please post comments or corrections to the Author Online forum WCF RIA Services is a free offering from Microsoft that sits on top of Silverlight and ASP.NET and makes your multi-tier application feel like a traditional client-server application. The term multi-tier refers to the database tier, any object tier that makes it easier to access the database, a business logic tier on the server and another on the client, and a display logic tier. In more complex...
Summary
RIAs such as Silverlight are convergent technologies and a stepping stone toward being able to write once and run anywhere. As RIAs evolve, the line between desktop applications and web application will continue to blur. Silverlight is a compelling technology for developers experienced with the .NET framework since they can use the languages and tools that they are used to. It is also attractive to developers that are currently using competing technologies since the skills they learn while...
Silverlight Controls
Chapter 1 covered the basics of Silverlight, and this chapter starts digging deeper into programming by focusing on the Controls available to you, the developer. Not all end-users realize there is a difference between running a desktop application or a web-based application, so the capability of providing a seamless look and feel across a suite of tools is a very compelling design model. USER FfllENPLT by J.P. IIHad Frazer _ _ WHAT HAPPENED TO THE ARTWORK I PRODUCED FOR OUR SITE I iUST DITHERED...
TwoWay binding
Figure 3.13 shows an addition to the OneWay example of a single Temperature TextBox. Because it is TwoWay, the lower Temperature TextBox changes as buttons are pressed just as the Upper Temperature TextBox changes. The Difference is that a new value may be entered into the lower Temperature box. As the user tabs out of the control, the upper Temperature display changes to match. Figure 3.13 TwoWay DataBinding screenshot after a value is entered in the lower Temperature TextBox. The code behind...
RichTextArea Control
rich text in Silverlight became decidedly simpler in Silverlight 4, with the arrival of the ntrol. Rich text still takes a lot of work, but the visual effect is exactly what your users Exactly how much effort is this going to take Manning Publications Co. Please post comments or corrections to the Author Online forum All the controls covered so far have been reasonably easy to layout using the Properties Window. The RichTextArea control is going to break that pattern and force the developer...
Breaking away from the boxes
The basis of HTML and Cascading Style Sheets CSS is what's called the box model. Web designers have used various methods to make their pages look less boxy, often using some cleverly constructed bitmap images. Let's say, however, that we want a video to play stretched and skewed to give it a three dimensional effect and we want to round the corners to make it look like it's playing on an old television. This is something that is difficult if not impossible to achieve using traditional web...
Customizing the photo viewer
The DataGrid isn't the best choice for this so let's remove the DataGrid and replace it with a ListBox. You can use the same itemsSource definition that the DataGrid had. Let's also add an item template that displays the thumbnail. lt ListBox ItemsSource Binding ElementName photoDomainDataSource, Path Data Name photoListBox gt lt ListBox.ItemTemplate gt lt DataTemplate gt lt Border Margin 5 Padding 5 BorderThickness 1 Manning Publications Co. Please post comments or corrections to the Author...
Converting bound data
Figure 3.14 demonstrates Date and Time TextBoxes that are formatted in readable form. The formatting could, of course, be done in the source object, or during a query, but that would mean additional code for every instance displayed. As will be demonstrated, a Value Converter can be written once and used across the entire application. A DateTime variable was added to the Thermostat class for this section. Binding a DateTime object to a TextBox would not work because the data formats are...
Full screen mode its easy
To trigger full screen mode we'll use a Button. Add the Button just before the Canvas element in the Game.xaml lt Button x Name fullScreenButton Content Toggle Full Screen HorizontalAlignment Right VerticalAlignment Top Margin 10 Foreground Black FontWeight Bold FontFamily Comic Sans MS FontSize 16 BorderThickness 0 IsTabStop False Padding 7 gt Note the isTabStop property. If the isTabStop property wasn't set to False then the Button could grab focus and steal keystrokes from the game. The...
The tools of the trade
USER FRIENDLY by J.D. Illiad Frazer USER FRIENDLY by J.D. Illiad Frazer Silverlight and WPF also share common tools for creating applications. They say that a craftsman is only as good as his tools. Fortunately, when building Silverlight applications, the tools are the some of the best available. Manning Publications Co. Please post comments or corrections to the Author Online forum
Drawing with brushes
Brushes are a very important part of Silverlight. Simply put, a brush is what you use to draw with. In the Brushes section of the Properties panel select Fill and then use the color picker to choose a new color. Figure 4.11 The Brushes section of the Properties panel. On a Rectangle you can set the Fill and Stroke colors. WHAT'S GOING ON WITH THAT FFC6C6C6 GIBBERISH Manning Publications Co. Please post comments or corrections to the Author Online forum The FFC6C6C6 is what's called a...
Meap
MEAP Edition Manning Early Access Program For more information on this and other Manning titles go to www.manning.com Manning Publications Co. Please post comments or corrections to the Author Online forum 3 Data Services in Silverlight 4 4 Learning Xaml Through Blend 6 WCF RIA Services to the Rescue 8 Game Development in Silverlight Manning Publications Co. Please post comments or corrections to the Author Online forum
Drawing a glassy ball
Manning Publications Co. Please post comments or corrections to the Author Online forum Figure 4.19 A glassy Web 2.0 style round ball Figure 4.19 A glassy Web 2.0 style round ball First since we would like the ball to be resizable let's put it in its own grid. Delete the rectangle and then select the Grid element in the toolbar and draw it. It doesn't matter how big you make it because we'll override the default settings. Reset the margins and set the width and height to 200. Now if you right...
When one color isnt enough
A gradient is an effect where colors are specified at certain offsets and then the colors gradually shift from one color to the next providing a smooth color transition. Gradients have become very popular in web design over the past few years, and can be used to provide a glassy look, subtle shading, or a 3D effect. Silverlight supports two kinds of gradient brushes. One of these is the LinearGradientBrush where the color changes uniformly along a specified line. This line is called the...
The chicken came first
The chicken is the player's character and is the one that will be controlled with the keyboard. It moves back and forth and catches the eggs. Create a new Silverlight Templated Control called Chicken. Then change the Chicken class to inherit from Sprite instead of Control. this.DefaultStyleKey typeof Chicken Width 75 Height 115 The Width and Height properties will be used in some of the game logic later. By inheriting from Sprite we will be able to define properties and methods common to all...
ListBox control data template and web service
The WebService used in this example is somewhat contrived but demonstrates not only the fundamentals of wiring up a web service to a Silverlight control, but also the fundamentals of building a WCF web service into an application. Before the WebService discussion itself, the XAML for the new ListBox should be discussed. Since the only difference between the previous ListBox population and the next is that the new one is receiving data from a WebService, there is no need to display the XAML for...
Trusted mode
When a Silverlight application is running in the browser it is running in what is called sandboxed mode. A sandboxed application can't do anything to permanently harm the computer and cannot access sensitive information. By default an out of browser Silverlight application is also restricted to this same sandbox. There are times when this is too restrictive and more access is required to system resources and the networking stack than is available in sandboxed mode. When running out of browser...
Popup notifications
If you've used Microsoft Outlook you've seen the type of notifications we're talking about here. They're the ones that show up over the system tray and tell you that a new email message has arrived. Notifications in Silverlight are only available in trusted mode. The way this works is that Silverlight gives you a rectangle that you can fill with whatever you want and it is displayed for you. Before we can handle notifications we need to have something to notify about, and in this case that...
Binding local data
Binding a TextBox to a data element was discussed in the previous section. Silverlight doesn't actually bind directly to the data element itself, it binds to a 'property'. In other words, the binding is done to a member variable of a class. This does not hamper the ability of a minimal binding example, it just necessitates the need for wrapping the data in a class. The binding can then be done to a member of the class. A simple class can be created to retrieve system information. System...
Creating a game loop
When writing a game it is very common to need to have more control over positioning and animation of elements than a storyboard can provide. You want to be able to change direction on a moment's notice based on input, or stop items that collide, or apply physics to game objects. This is usually done through a game loop. Manning Publications Co. Please post comments or corrections to the Author Online forum what's a game loop and where can i get one A game loop, as the name implies, is a piece...
The Silverlight Toolkit
The DataForm control is actually part of another free offering from Microsoft, the Silverlight Toolkit. The Silverlight Toolkit arose out of a need for Microsoft to be able to provide extra functionality for Silverlight without being tied to the release cycle of the Silverlight plug-in. It allows users to provide feedback on early releases of controls and other functionality. It contains some very useful layout Manning Publications Co. Please post comments or corrections to the Author Online...
Deploying your application
USER FRIENDLY by J.D. illiad Frazer cesiew, A.J., so im aoiu amp TO L5AV6 IT ALL UP TO YOU. J 5T BUILD M6 A 6R5AT WEBSITE, THREE CAYS OF OKM MEASURED DESJ lt 5N work pass WE WEED SOME GRADIENTS. REFLECTIONS, ROUNDED CORNERS, FLy-IH ANIMATIONS, AMD I KATE TUE COLOR SCHEME WE WEED SOME GRADIENTS. REFLECTIONS, ROUNDED CORNERS, FLy-IH ANIMATIONS, AMD I KATE TUE COLOR SCHEME To make it easier to deploy and download your Silverlight application, all of the code, layout, and assets are packaged into a...
Models and Views
As we learned in Chapter 3, data binding is essential to harnessing the full power of Silverlight. Historically, data binding has meant taking database tables or views and binding them directly to a control. In this more modern take on data binding, we are binding our view controls to a model object. The model exposes data to the view as public properties. Data binding consumes these properties and uses the values stored in these properties to display information. By using data binding the glue...
Sprites
Pretty much any game is going to need some things to move around. In game development, these things are called sprites. Manning Publications Co. Please post comments or corrections to the Author Online forum Not that kind of sprite. Sprites started out as something that lived in the graphics hardware and made it possible to quickly paint an object on a background. These hardware sprites are not in use today but the term has stuck around and now is used to refer to any game element that moves....
Design time data contexts
When you are designing the FishEyeMenuItem control it no longer knows what its data context is so you don't see anything while you're editing. We could define a data context in this user control but then it won't be able to inherit its data context from the ItemsControl. What we really need is a design time data context. Since this user control will be bound to a MenuNode let's update the MenuNode class to generate some sample data. We can do this by creating a default constructor. The...
CheckBoxes and RadioButtons
Dragging a CheckBox or RadioButton to the design surface is identical to the previously discussed experience with Buttons. Silverlight CheckBoxes and RadioButtons provide a UI experience for the user that is the same as any experienced user would expect in a Windows or non-Silverlight Web application. As with a Windows or Web application, CheckBoxes may be logically grouped, but the grouping has less meaning for CheckBoxes than for RadioButtons. CheckBoxes typically work independently of each...
Cueballs in code and text
Since the ScaleX and ScaleY properties are of type double, we use a DoubleAnimation to animate their values 1 . We need to provide the name of the element we are animating in this case we previously gave the ScaleTransform a name of Scale 2 . The properties that we are animating are the ScaleX and ScaleY properties 3 , and we want the animation to last for .3 seconds 4 . Finally when the animation is complete ScaleX and ScaleY will both have a value of 1 5 . The HyperlinkButton control knows to...
Temperature
Figure 3.15 Simple DataTemplate output There is no good coding path for the ContentTemplate and DataTemplate beyond writing XAML in MainPage.xaml. The XAML fragment below is the code necessary to produce the temperature visualization of Figure 3.15. lt dataInput Label x Name lblTemplate Height 55 Hori zontalAlignment Left Margin 231,7,0,201 VerticalAlignment Center BorderBrush Black BorderThickness 1 Width 195 gt lt dataInput Label.ContentTemplate gt lt DataTemplate gt lt StackPanel Orientation...
ToggleButton Slider TextBlock and TextBox
The second tab was created using the Items collection on the TabControl. A Grid control was then dragged to the Tab surface. Three rows and three columns were defined and the appropriate controls dragged onto the surface as shown in a design surface screenshot in Figure 2.22. Manning Publications Co. Please post comments or corrections to the Author Online forum Figure 2.22Tab Two of the example TabControl displayed from inside Visual Studio 2010's design view. Figure 2.22 clearly shows a...
The open file dialog
One way to access files for input is to use the OpenFiieDiaiog. This is very similar to the OpenFiieDialog in Windows Forms programming. There is a corresponding SaveFiieDialog for writing files. Let's add a button to Photos.xami to allow us to upload a photo. lt Button Grid.Column 1 x Name uploadButton Content Upload Photo Let's also define two rows and columns in the grid lt RowDefinition Height Auto gt lt RowDefinition Height gt lt Grid.RowDefinitions gt lt Grid.ColumnDefinitions gt lt...
The menu items are not vampires
A popular Web 2.0 technique these days is to give elements a reflection. SO FOR A REFLECTION WE NEED TO DRAW A MIRROR IMAGE OF SOMETHING, HOW DO WE DO THAT This is actually pretty easy in Silverlight using a combination of some of the techniques we've used so far along with a new one. First add another copy of the element, in our case this is the image, and set its scale to a negative number. Since we're reflecting vertically, the ScaleY is the one we'll want to set. The menu item will now have...
Vector graphics
Computer graphics typically fall into two major categories. The most common format is raster graphics, also known as bitmap graphics. This group includes photos, icons, and other files where each pixel is represented in the stored file. The other major graphics category is vector graphics. In vector graphics, the data is stored as a collection of lines and curves with supporting data such as color, thickness, what color to fill shapes with. What vector graphics are very good at is representing...
Customizing the domain service
The domain service that's generated through the New Domain Service wizard is only a starting point. You can customize it to add data validation or more methods that you want to make available to your Silverlight application. In this case we want to be able to upload the binary data for a photo, generate a thumbnail version of it, and save the original photo and its thumbnail to a folder on the web server. The contents of this method are not overly important in the context of RIA Services and...
Panels CheckBoxes and sliders oh my
To provide a somewhat realistic TabControl and at the same time demonstrate additional Silverlight controls, the second tab will contain four more controls from the list inSection 2.2 the ToggleButton, Slider, TextBlock, and TextBox. A screenshot of the running application for Tab Two is shown in Figure 2.21. Figure 2.21Tab Two of the example TabControl containing a complex grouping of other controls Figure 2.21Tab Two of the example TabControl containing a complex grouping of other controls...
Examining Isolated Storage Quota
One more important part of using Isolated Storage is knowing how much storage is available to the application. Silverlight provides a way to not only find out how much remains but a way to request more from the user. As mentioned earlier, the developer needs to be prepared for the user to deny the request, so determining the amount remaining is very important. Figure 3.22 contains a Silverlight form used to test the query available and request additional Isolated Storage functions. Manning...
Customizing DataForm layout
There are a couple of problems with our default data form. First of all, we don't want users changing the URL or thumbnail URL, only the title. It would also be good to display the image instead of the URL of the image. First let's change the size of the PhotoDetaii.xami chiidWindow element. Setting the width to 480 and the height to 420 will work well. Then change the DataForm element as follows lt dataFormToolkit DataForm x Name dataForm CurrentItem Binding AutoCommit False Manning...
Collision handling
Checking for collisions of sprites in games can be as simple as seeing if two circles overlap or as complex as comparing two sprites pixel by pixel. For this game we'll check if two rectangles intersect. Since this is a common requirement for sprites, it makes sense to add a check to the Sprite class. In the Sprite class, declare a field to hold the collision rectangle. Then in the Egg constructor, add the code to initialize this Rect based on the width and height of the sprite....
Applying easing to animations
It's great that it's so easy to animate a property from one value to another but how you get there that makes a huge difference. Even if it's a subtle transition where the value changes slowly then speeds up in the middle and slows down again at the end the user's mind registers this subconsciously as a much more pleasing effect than a linear motion. That's right but in Silverlight you don't need a separate library since these transitions are built in and are called easing function. An easing...
Navigation applications
Up to this point we have used the Silverlight Application project type to create our initial solution. There is another useful option in the Visual Studio New Project dialog called a Silverlight Navigation Application. This project type is identical to the Silverlight Application type except there are some more files and content generated to help you get started. You could add the navigation controls and other elements manually to an existing project if you wanted, but the project wizard can...
Binding to the ItemsControl
The most common usage of an ItemsControl is to bind some data to it and customize how the items appear by using templates. First let s tell the ItemsControl to expect its data to come from data binding. In the context menu for the ItemsSource property, select Apply Data Binding... and choose a Source of DataContext - MenuModel and a Path of lt None gt . This means that the ItemsSource will be data bound to the root of the MenuModel which is a list of MenuNode objects. The XAML for this binding...
OneTime binding
Figure 3.4 shows a label and TextBox for displaying the platform name, and a label and TextBox for displaying the Silverlight version. Figure 3.4 One Time DataBinding to static class variables. Figure 3.4 One Time DataBinding to static class variables. Binding the data for the TextBoxes in the screenshot of Figure 3.2 is going to mean modifying some of the XAML in MainPage.xaml. Once those changes are made, the Properties window of Visual Studio 2010 will provide the remainder of the binding...