If you are aiming to learn more about the Business side of Silverlight then check out the following two books:. I would also recommend you read these books if you are preparing for your Silverlight 4 Certification. Learn how to use working with azure functions using powershell. Learn how to use working with azure blueprints. Learn how to use prebuilt terraform image to automate infrastructure deployment. Learn how to use set up a mean-based web application on a new azure linux virtual machine. Michael Crump Works at Microsoft on Azure. Choose to create a new Silverlight Application as shown below, then click OK.
When the following dialog box comes up asking you to optionally create a new ASP. The MainPage. XAML will open up automatically. Hit F5 or choose Start Debugging from the Debug menu. Make sure that the radio button enabling debugging is checked and click OK on the dialog box below. This dialog will only appear the first time you run a new Silverlight application. You will see a button in your default browser as follows: 9. You've just created your first Silverlight application. However, since you are already an ace.
In Chapter 2, we'll learn about developing in Blend. Have a go hero Now that we have a Silverlight application up and running, try removing the Height and Width attributes from the Button element and run the solution again. See how the button changes to take up the entire grid. That's not very useful in most circumstances: The real power of the Grid layout panel is the ability to add rows and columns to define a layout similar to a HTML table.
In our test application, let's define two columns of equal size and place the button in the right-hand column. ColumnDefinition element. To place the button in the right-hand column, we added an attribute to the Button tag. The Grid. The ColumnDefinition list is a zero based array and 1 points to the second item. Had we not defined the Grid. Column attribute, the Grid would have assumed that we meant zero and the button would appear in the left-hand column.
You can define as many rows and columns as you like, just remember the simpler the better. Let's try a completely different layout panel: the Canvas. Change the outer Grid container to Canvas and remove the Grid Column definitions until the XAML looks like this: [ 24 ] Chapter 1 Look at the design surface or run the solution again and you'll see that the button's placement has changed yet again. It's now at the top left of the application: What if you wanted the button to not be so close to the edge? Let's change the XAML for the Button to this: Our application now looks similar to the following screenshot: Feel free to explore the solution; you'll notice it has two projects: one Silverlight project and one ASP.
NET project. Additionally, you experimented with two different types of layout panel; the Grid and the Canvas. Depending on the specific needs of your user interface, you'll want to use different container objects to lay out your controls. If you want to lay out your controls in a manner similar to a HTML table, then you'd want to use a Grid. If you need absolute positioning, then use a Canvas.
There are a few other layout panel options, such as StackPanel that 'stack' the controls next to or on top of one another. This would come in handy if you wanted to create a toolbar, for example. We'll talk about the different types of containers in the next chapter. Summary In this chapter, we discussed how prior experience with.
inintajady.cf/truth-or-dare-book-1-creepover.php NET development will help you in your move to Silverlight application development. We also looked at some of the new concepts to Silverlight, such as dependency properties, XAML, and the ContentPresenter, the tools needed to develop Silverlight applications, and how to create a Silverlight application. Like many businesses, they already have a public facing website. The client would like to upgrade to the Web 2. They would also like to integrate their back end systems into the website.
This is the scenario we will be working with throughout the course of this book. Enhancing a Website with Silverlight First, we'll work on a navigation control to replace the text links on the left hand side of the page of the current website. As you will notice in the following image, the current website navigation mechanism isn't fancy, but it's simple. However, the client would like the website to be more modern, while preserving ease of use.
Adding pizzazz with Silverlight Cake-O-Rama would like to add a fancy navigation widget to their site. They've commissioned a graphic artist to create the following look for the widget. A few words on search engine optimization We could easily create a Silverlight application that would encompass all the content and functionality of a whole website. However, doing so would severely limit the website's visibility to search engines.
Search engines have programs called spiders, or robots, that 'crawl' the internet scanning for content. Generally, these programs can only see text exposed in the HTML. Search results are ranked based on this text-only content. Placing all our content inside a rich internet application platform like Silverlight would effectively hide all of our content. The net result would be reduced visibility on search engines. Until this problem is resolved, the best approach is to augment the page's HTML content on sites that you want to be found more easily by search engines. Building a navigation control from the ground up In the previous chapter, we looked at two different layout panels: the Grid and the Canvas.
Why are there so many? Well, each one serves a unique purpose. Picking the right kind of container You wouldn't fill a cardboard box with water or drink milk out of a gasoline can, would you? The same could be said of the various layout containers in Silverlight, each one serves a unique purpose and some are better at certain tasks than others. For instance, when you want to create a toolbar, you would probably use a StackPanel or WrapPanel, and not a Canvas. While you could manually code the layout logic to place all the child controls, there's no good reason to.
After all, there are already controls to do the heavy lifting for you. Below are the most common layout containers in Silverlight 4: Container Layout Behavior Canvas Manual positioning of items using X and Y coordinates Grid Lays out items using a defined grid of rows and columns InkPresenter Canvas that can handle digital ink StackPanel Stacks items on top of or next to one another WrapPanel Lines up items and wraps them around Border Draws a border around an item Viewbox Scales an item up to take up all the available space ScrollViewer Places a scroll bar around the control Silverlight also provides the means to write your own layout code.
While there may be situations where this is warranted, first think about how you can achieve the desired result with a combination of the existing containers. As the name implies, it lays out child controls in a stack, which seems like a good fit for our list of links. Time for action — building navigation buttons in Silverlight Now, let's make a StackPanel of button controls to navigate around the site.
In order to do this, we will need to do the following: 1. Choose to create a new Silverlight Application as shown in the next screen: [ 30 ] Chapter 2 3. In the MainPage. On the following screen, click OK to enable debugging. Your application should look something like this: We have now created a StackPanel of button controls to navigate around the website using Silverlight, but the application is not exactly visually appealing, not to mention, the buttons don't do anything. What we need them to do is reflect the design we've been provided with and navigate to a given page when the user clicks on them.
What just happened? What we created here is the foundation for what will eventually become a dynamic navigation control. You have created a new Silverlight application, added a StackPanel, and then added button controls to it. Now, let's move on to make this little navigation bar sparkle. Adding a little style with Styles Many people refer to Silverlight controls as being "lookless", which may sound strange at first as they clearly have a "look. That means that all the controls you've seen in Silverlight so far have no presentation logic in them.
Their look comes from a default resource file. The good news is that we can create our own resources to customize the look of any control. Styles For instance, what if we wanted the text in the buttons to be larger? We could add a FontSize attribute to every button control, so that our XAML code would look like this: [ 32 ] Chapter 2 While this would give us the desired effect, it also bloats the XAML and, should we change our minds about the font size later, forces us into a situation where we'll have to do a lot of typing.
A Style would provide a more elegant solution to this problem. For example, I can define a style that bumps up the FontSize to 18 as shown below: The above snippet of XAML actually defines a style named biggerTextStyle and declares that it is for button controls. Inside the style, there can be any number of Setter nodes.
In this style, there is only one and it sets the FontSize property to To use this style, we're going to need to do two things: place it into our application and tell our buttons to reference the style.
Microsoft Silverlight 4 Business Application Development: Beginner's Guide. Cameron Albert, Frank LaVigne. April 1, pages. 12 hours 21 minutes. Microsoft Silverlight 4 Business Application Development: Beginner's Guide [ Cameron Albert, Frank LaVigne] on yvimekac.tk *FREE* shipping on qualifying .
In Silverlight, styles are considered a Resource, which are any kind of data stored inside an object. Accordingly, we'll place the Style inside the Resources collection of our UserControl, which is the root element of the MainPage. XAML file. Many controls have a Resources collection and we can store resources in App.
Alternatively, we can even define a Resource Dictionary, which is a separate file that contains resources. Resource dictionaries can be shared across applications. The markup extension above tells the Silverlight runtime to set the style property to the resource named biggerTextStyle. In each Button we reference the same biggerTextStyle Style resource for all of our buttons. This is to make sure they all use the same Style resource. This bloats our code somewhat. Wouldn't it be great if there were a way to create a default style that would apply to all the buttons in our application?
Fortunately, for us this feature was added in Silverlight 4. We now have the option to define a default style for a particular type of control. This will make all of the buttons have a common text size. You will need to do the following: 1. Open the MainPage. Run the solution and you'll notice that the text on every button is larger.
Stop the project and return to the MainPage. Change the FontSize to 9. Add another Setter node to the style: 8. Run the project again and you'll see that the font is much smaller and the buttons have taken on a red tone: What just happened? We just created a Style and added it to our navigation application. Then we referenced the Style using a Markup Extension in the Style property of the button. We then modified the Style, which changed all the controls that referenced it.
This should give you a little taste of the power of using Styles in Silverlight. You may be thinking that editing styles "by hand" can get tedious if we try to do anything more complex, and you're right! Hand editing XAML can only get you so far. Now we'll take our design to the next level by using Expression Blend. Hand editing XAML, assisted by Intellisense, works just fine to a point, but to create anything complex requires another tool to assist with turning our vision into code.
Intellisense is a feature of Visual Studio and Blend that auto-completes text when you start typing a keyword, method, or variable name. Expression Blend may scare off developers at first with its radically different interface, but if you look more closely, you'll see that Blend has a lot in common with Visual Studio. For starters, both tools use the same Solution and Project file format. You could even have the same project open in both Visual Studio and in Blend at the same time.
Just be prepared to see the File Modified dialog box like the one below when switching between the two applications: If you've worked with designers on a project before, they typically mock up an interface in a graphics program and ship it off to the development team. Many times, a simple graphic embellishment can cause us developers to develop heartburn.
Anyone who's ever had to implement a rounded corner in HTML knows the special kind of frustration that it brings along. Here's the good news: those days are over with Silverlight. Blend can be a bit daunting at first for developers that are used to Visual Studio as Blend's interface is dense with a lot of subtle cues. Solutions and projects are opened in Blend in the same manner as you would in Visual Studio. You can move tabs around, dock, and undock them to create a workspace that works best for you as the following screenshot demonstrates: An artsy Visual Studio? If you look at the CakeNavigationButton project, on the left hand side of the application window, you have the toolbar, which is substantially different from the toolbox in Visual Studio.
The toolbar in Blend more closely resembles the toolbar in graphics editing software such as Adobe Photoshop or Adobe Illustrator. If you move the mouse over each button, you will see a tooltip that tells you what that button does, as well as the button's keyboard shortcut. In the upper-left corner, you'll notice a tab labeled Projects.
This is functionally equivalent to the Solution Explorer in Visual Studio. The asterisk next to MainPage. XAML indicates that the file has not been saved. On the upper-right of the art board, there are three small buttons to control the switch between Design view, XAML view, or Split view. On the lower edge of the art board, there are controls to modify the view of the design surface. You can zoom in to take a closer look, turn on snap grid visibility, and turn on or off the snapping to snap lines.
As you can see in this screenshot, the color picker has a lot more to offer. There's also a search feature that narrows down the items in the tab based on the property name you type in. At the lower left side of the next screen, there is the Objects and Timeline view, which shows the object hierarchy of the open document. Since we have the MainPage. Clicking on an item in this view selects the item on the art board and vice versa. Let's modify the style we made in Blend to see how to do it graphically. To do this, we will need to: 1. In the upper right corner, there are three tabs Properties, Resources, and Data.
On the Resources tab, expand the tree node marked [UserControl] and click on the button highlighted below to edit the [Button default] resource. Your art board should look something like this: [ 41 ] Enhancing a Website with Silverlight 5. Click on the Properties tab and scroll down to the Text section: 6.
Type cursor into the Search box. Notice how the Properties tab displays only the Cursor property. Next, change the value in the drop down list to Hand: 9. Type margin into the search box and put 5 into each of the text boxes as shown in the following screenshot: [ 42 ] Chapter 2 Look over to the left hand side of the screen; you'll see a tab named Objects and Timeline.
Click on the button with the up arrow that I've highlighted in the following screenshot. This will get you out of Style editing mode and back into the main level of our application: Choose Run Project from the Project menu or hit F5 to run the project. Notice what's changed. There is now a space around each button, the font's appearance has changed and the cursor changes to a hand when you mouse over each of the buttons.
Your application will now look similar to the following screenshot: The buttons have a red tint to them, but there is still some way to go. We have just edited a style in Expression Blend and the software did all the heavy lifting for us. If you take a peek at the XAML markup, you will see that the Style has been expanded to include a few more Setter nodes. Each one corresponds to the changes that we made: [ 43 ] Enhancing a Website with Silverlight You most certainly could have created this XAML by hand, but as you've just seen, it's often faster to use Blend for this.
In many real world scenarios, you will have to get your hands dirty in the XAML from time to time to tweak a value. Have a go hero So, we have a style that defines the way we would like our buttons to look. What if we wanted to override certain properties? For example, if you wanted the font size on the Home button to be different than the others, you could specify a smaller or larger value. Once again, you can do this in Blend via the Properties tab or in the XAML using the following code: By using this code, you will be presented with this screenshot: Alternatively, you could define another style; one that specifies a smaller font size.
Let's do that now. Use the Properties tab to change the font size to 9. Feel free to change some other properties too. When you are finished, click the up button on the Objects and Timeline tab to exit style editing mode. Once you are back in the main view, select the Home button.
Type style into the search box on the Properties tab. You will find the Properties tab on the right-hand side of Blend's window. Under Miscellaneous, you will see a Style property with a little square next to it as in the screenshot below. In Blend, this means that there are more properties for you to edit. Click the square to bring up the Advanced Property Options context menu. Once you click on the square, the following context menu appears.
Choose Local Resource smallerTextStyle from the sub-menu just as you see it in the following screenshot: Run the solution again or look at the art board to see how the button has changed. You can experiment with assigning this style to some of the other buttons, editing the existing styles, or creating new styles. On buttons where the smallerTextStyle is applied, the button text will be smaller. On buttons where the default style is applied, the button text will be larger. Skinning a control So far, you've seen that while styles can change the look of a control, they can only go so far.
No matter how many changes we make, the buttons still look like old-fashioned buttons. Surely, there must be a way to customize a control further to match our creative vision. There is a way, its called skinning. This flexibility stems from the fact that controls have both a VisualTree and a LogicalTree. The Visual Tree deals with all the visual elements in a control, while the Logical tree deals with all the logical elements. All controls in Silverlight come with a default template, which defines what a control should look like. You can easily override this default template by redefining a control's visual tree with a custom one.
Expression Design is one such tool. In our scenario, let us pretend that there is a team of graphic designers. From time to time graphic designers will provide us with visual elements and, if we're lucky, snippets of XAML. In this case, the designers have sent us the XAML for a rectangle and gradient for us to base our control on: After inputting the above XAML, you will be presented with this image: We need to make this rectangle the template for our buttons.
In order to achieve this we will need to do the following: 1. Open up the CakeNavigationButtons project in Blend. Switch back to Design View, either by clicking on the appropriate button on the upper right corner of the art board or choosing View Active Document View Design View from the menu bar. Right-click on the rectangle and click on Make Into Control.
You are now in template editing mode. And one is the MainControl. Click on the up button to exit template editing mode. Delete the button that our Rectangle was converted into. With all the buttons selected, go to the Properties tab, type Style into the search box. Using the techniques you've learned in this chapter, change the style to navButtonStyle, so that your screen now looks like this: The result is still not quite what we're looking for, but it's close.
Microsoft Silverlight is a programmable web browser plugin that enables features including animation, vector graphics, and audio-video playback features that characterize Rich Internet Applications. Firstly, we will need to download and install Expression Media Encoder 3. However, it is nice to know that you can easily build something so strange and complex. Cameron lives with his wife in Connecticut. Browse to a location which contains the vocals.
We need to increase the font size again; fortunately, we know how easy that is in Blend. Click on one of the buttons and choose Object Edit Style Edit Current from the menu bar to get into style editing mode. Make note of all the visual indicators. You should see the changes immediately. The cursor change will only be noticeable at run time.
Exit the template editing mode. There is a slight problem with the last button; the font is a little too large.
Click on the button and use the Properties tab to change the Font Size to Run the project and your application will look something like this: Run your mouse over the buttons. The button no longer reacts when you mouse over it, we'll fix that next. We just took a plain old button and turned it into something a little more in line with the graphic designers' vision but how did we do it? There are many places where things can "hide" in a tool like Blend or even Visual Studio.
The raw naked XAML, however, bares all. For starters, we took a chunk of XAML and, using Blend, told Silverlight that we wanted to "take control" over how this button looks. This data was encapsulated into a Style and we told all our buttons to use our new style. When the new style was created, we lost some of our formatting data. We then inserted it back in and added a few more properties. We've not done a great deal of work, yet we've generated a lot of XAML. This is where a tool like Blend really saves us all those keystrokes.
The next thing you'll see is that we're actually setting the Template property inside of a Setter node of a Style definition. It's not until toward the end of the Style definition that we see the Rectangle which we started with. There's also a lot of code here devoted to something called the Visual State Manager. Prior to us changing the control's template, you'll remember that when you moved your mouse over any of the buttons, they reacted by changing color.
This was nice, subtle feedback for the user. Now that it's gone, we really miss it and so will our users. If you carefully study the XAML, it should come as no surprise to you that the button doesn't do anything other than just sit there: we've not defined anything for any of the states listed here. The nodes are blank. It is a simple and powerful means to provide state transitions to controls, while hiding a lot of the animation mechanisms behind them.
Time for action — learning the Visual State Manager In this exercise, we are going to use the Visual State Manager to add visual cues to our control template. In order to do this, we will need to complete the following steps: 1. Click on the States tab in the upper-left part of the Blend window as shown below: 4. Click on Normal. Note how the art board gets a red border and tells you that Normal state recording is on. Use the Properties tab to change the background of the rectangle by changing the colors of the gradient.
You can do this by clicking each one of the "stops" along the gradient line as seen in the following screenshot: [ 53 ] Enhancing a Website with Silverlight 7. First click on stop, then use the color picker to choose a new color. You can pick your own colors. Repeat for each of the four gradient stops.
Click the up button on the Objects and Timeline tab to exit the template editing mode. Run the solution and each button changes color when you mouse over it : Then, close the browser and go back to Blend. While that worked, it doesn't quite have that same natural feel that the default button template had. We can quickly remedy that by going back into the template editing mode and changing the Default Transition property in the States tab to 0.
Run the solution again and notice how "natural" that feels. Experiment with different timings to see how it changes the feel of your application. You can use any time in the range of 0 to 1 second. We restored the natural "feel" of our navigation button by modifying how it transitions from one state to another. Because we used the Button control as a basis, several states were already defined and we got a lot of functionality "for free.
Yet, our button code is still simple and humble. It's largely remains unchanged from when we started this chapter: Obviously, all of the work is being done inside the Style and the Control Template. The XAML code for that is quite long winded. I will just show a snippet for brevity. Don't worry if it doesn't quite make sense yet. There's a lot going on here that relates to animation, but first let's get back to slinging code.
Adding event handlers That's right, code, good old fashioned code. We are more than halfway through this chapter and we have not written one single line of procedural code. NET code. How is this possible? Sharp-eyed readers may have already noticed that our MainPage. Curious readers may have already taken a peek at the code behind the file. Here is the complete listing of code that powers our buttons: using System.
Controls; using System. Documents; using System. Input; using System. Media; using System. Animation; using System. Let's fire up Visual Studio now and take a closer look at what's going on. Let's also wire up a few event handlers to make the navigation control interactive. In order to this, we will need to do the following: 1.
Open up the MainPage. Right-click on the InitializeComponent method call and select Go to Definition from the context menu. Notice that we are now in a file called mainpage. Close this file and go back to the MainPage.
Run the solution and watch what happens, absolutely nothing. Stop the solution either in Visual Studio or closing the host browser window. Uncomment the call to InitializeComponent. Your button node now has a binding to an event handler. Inside the event handler, add the following line of code and run the solution: MessageBox.
Click on the Home button and you will see this: Click OK and then close the host browser window. Remove the following line of code we just added that showed the Alert dialog box: MessageBox. Show "Hello from Silverlight" ; Replace it with this line of code: System. Run the project and click on the Home button once more to be taken to the Packt Publishing home page. This should look awfully familiar to ASP. NET developers: you have a mark-up file that wires up event handlers defined in an associated code behind file.
Where are we really? Now is a good time to remind ourselves where our code will run. Yes, we all know that Silverlight is cross-browser and cross-platform and can run on Windows, Macintoshes, Linux, and even on mobile devices. Despite the name, you are actually running in a browser via some clever sleight of hand. The animation model in Silverlight is time based, meaning that movements occur based on a set timeline. At the heart of every animation is a StoryBoard, which contains all the animation data and independent timeline.
Silverlight controls can contain any number of Storyboards. StoryBoards contain one or more Key frame elements, which are responsible for making objects on screen change position, color, or any number of properties. The table below illustrates what each one does: Key frame type Description Linear Moves from the starting state to the end state in a smooth, linear fashion. Discrete Jumps from the starting state to the end state instantaneously.
Spline Moves from the starting state to the end state varying speed based on mathematically defined curve.. Easing A more evolved version of the Spine, this type of key frame moves from the starting state to the end state based on an Easing function. Very different than Flash The animation model in Silverlight is markedly different than the one found in Adobe Flash.
Animations in Flash are frame-based, whereas in Silverlight they are time-based. The term StoryBoard comes from the motion picture industry, where scenes are drawn out before they are filmed. Time for action — animation time The client would like to transform their text-only logo into something a little more elaborate. The designers have once again given us a XAML snippet of code exported from their graphic design tool. We will need to do the following: 1. Blend should have automatically loaded the MainControl. In the Objects and Timeline tab, you'll see a list of objects that make up this vector drawing.
There is Path object for every character. Let's add an animation. You'll notice a couple of changes to your screen. For one, the art board is surrounded by a red border and a notification that: intoAnimationStoryboard timeline recording is on just like in this screenshot: 7. If you take a look at the Objects and Timeline tab, you'll see the timeline for our newly created introAnimationStoryboard: 8. Let's add a key frame at the very beginning.
The vertical yellow line is the play head, which marks where you currently are in the timeline. Select the canvas1 object. You can switch to the Animation Workspace in Blend by pressing F6. Click on the square icon with a green plus sign to create a new Key frame here at position 0. A white oval appears representing the Key frame that you just created.
It should look similar to the following screenshot: Move the play head to 0. Click the same button you did in step 9 to create a new key frame here so that your timeline looks like this: [ 63 ] Enhancing a Website with Silverlight Move the play head back to zero. Make sure the canvas1 object is still selected, click and drag the logo graphic up, so that all of it is in the grey area. This moves the logo "off stage". Hit the play button highlighted in the below screenshot, to preview the animation and enjoy the show!
Now all we need to do is tell Silverlight to run the animation when our control loads, but first we need to get out of recording mode. To do this, click the x button on the Objects and Timeline tab. Click on [UserControl] in the Objects and Timeline tab. On the Properties tab, you'll see an icon with a lightning bolt on it. Click on it to see the events associated with a UserControl object: [ 64 ] Chapter 2 Once you hit Enter, the code behind will immediately pop up with your cursor inside the event handler method.
Add this line of code to the method: introAnimationStoryboard. Begin ; Run the solution via the menu bar or by pressing F5. You should see the logo graphic smoothly and evenly animate into view. If for some reason the animation doesn't get displayed, refresh the page in your browser.
You should see it now. You just created your first animation in Silverlight. First you created a Storyboard and then added a couple of Key frames. You changed the properties of the canvas on one key frame and Silverlight automatically interpolated them in between points to create a nice smooth animation. If your animation didn't show up on the initial page load but did when you reloaded the page, then you've just experienced how seriously the Silverlight animation engine respects time.
Since our animation length is relatively short 0. Silverlight noticed that and "jumped" ahead to that part of the timeline to keep everything on schedule. Resources section towards the top of the document. Don't worry if the values are slightly different in your project: There are a couple of things going on here, so let's dissect the animation XAML starting with the Storyboard declaration which creates a Storyboard and assigns the name we gave it in the dialog box: That's easy enough, but what about the next node?
This line tells the Storyboard that we will be modifying a Double value starting at 0 seconds. It also further specifies a target for our animation: canvas1 and a property on our target: Clear enough, but what does the TargetProperty value mean? Here is that value highlight below. Children . TranslateTr ansform. Y We know that the net effect of the animation is that the logo moves from above the visible area back to its original position.
If we're familiar with X, Y coordinates, where X represents a horizontal coordinate and Y a vertical coordinate, then the TranslateTransform. Y part makes sense. We are changing or, in Silverlight terms, transforming the Y property of the canvas. But what's all this TransformGroup about? You should see the following lines of XAML that weren't there earlier: Blend automatically inserted them into the Canvas when we created the animation. They have no properties. Think of them as stubbed declarations of these objects. If you remove them, Silverlight will throw an exception at runtime like the one below complaining about not being able to resolve TargetProperty: Clearly this code is important, but what's really going on here?
The TranslateTransform object is a type of Transform object which determines how an object can change in Silverlight. UIElement is the base class for any kind of visual element. Children  refers to the fourth element in a zero-based collection. Changing the order of the transforms in the XAML will also cause an exception at runtime.
This corresponds to when the logo was above the visible area. This corresponds to the initial state of the logo, where it was before any transformations were applied. Silverlight handles all changes to the value in between the start and the end point. Silverlight's default frame rate is 60 frames per second, but Silverlight will adjust its frame rate based on the hardware that it is running on.
Silverlight can adjust the amount by which it changes the values to keep the animation on schedule. If you had to reload the web page to see the animation run, then you've already experienced this. Once again, notice how few lines technically only one line of procedural code you had to write. Have a go hero — exploring animation options The animation we just created worked, but it feels too mechanical. What if there was a way, we could change the rate at which it "fell down" onto the screen. In the real world, objects typically bounce when they hit a hard surface. Let's replicate that here by using a built in Easing function.
To do this, we will need to do the following: 1. Go back to Expression Blend and click on the drop down button highlighted here: 2. Click on introAnimationStoryboard to edit that timeline. Click on the key frame oval at 0. You'll notice that the Properties tab on the right has a combo box that has an angled straight line next to the word None like this: 5. Click on the items marked Bounce in the Out Column and the text in the combo box should read Bounce Out like this: 6.
Run the solution via the menu bar or pressing F5,. You can also tweak the parameters of the bounce effect by changing the Bounces and Bounciness values. To further experiment, you could click on KeySpline where the graph appears, representing the rate of animation. By default, it starts out as a straight line: 9. Hit the play button to preview the animation. You can change the line by clicking and dragging the yellow circles around or by inserting values into the x1,x2, y1,y2 text boxes, so that your graph looks something like this: [ 70 ] Chapter 2 Preview the animation again and note the changes.
Click on the Hold In button highlighted here: Preview the animation once more to see how it just simply "jumps" from one value to the other. Feel free to experiment with different options for animating this logo. Getting on the same page So far, we've created two different Silverlight projects; one for the navigation buttons and one for the animated logo. Each resided in their own projects, on their own page. How can we integrate the two projects onto the HTML that we already have for our client's home page? To do that we should take a look at the test page Blend and Visual Studio automatically created for us and see how to embed a Silverlight application onto a web page.
In this exercise, we're going to bring some new life to our old page: 1. Let's take a closer look at the CakeNavigationButtons. Web project. The project looks much like any other ASP. NET project, except for the ClientBin directory. The object tag contains a number of param tags, which pass along parameters to the object. Combined with the CSS rule silverlightControlHost, both are Silverlight applications and will be much larger than they need to be. The source parameter points to the CakeNavigationButtons. The XAP file contains the compiled content of our Silverlight control. The minRuntimeVersion parameter indicates that the user must have at least Silverlight 4 in order to run the embedded Silverlight content.
The HTML inside the object tag is what displays if the user does not have Silverlight installed on their computer. Further up on the page, you'll see a reference to a Silverlight. This contains all the plugin detection code. We could name this directory anything we wanted, but for now, let's stick to the naming convention. Copy the CakeNavigationButtons. If you're running locally on your file system, you may get an error like this: Or, if you are a user who hasn't installed Silverlight, you may see the following when you load the page: 9. Right-click on the security warning bar on the top of the browser window and choose Allow Blocked Content.
The page will reload and you will now see the client's home page in all its Silverlight glory. We took the output of our two Silverlight projects and combined them onto one page. In the process, we saw how Silverlight is embedded onto a static web page. The client's home page right now is just static HTML, but it can get quite dynamic once you add Silverlight to it. The important thing to remember is that Silverlight is a client-side technology and the backend server could run on any platform. We covered a lot of ground in this chapter and it lays the foundation for the work ahead of us.
We took a drab website and turned it into something a little more modern. Certainly, the websites you will be migrating to Silverlight will not be this plain. I wanted to demonstrate with something as simple as possible, so that the concepts stood out. Think about it: we really have only written two lines of C code three if you count the one that we deleted. In the next chapter, we will look at kicking our website up a notch by incorporating sound and video. Once thought to be impossible or impractical, watching everything from movie trailers to entire movies online is now commonplace.
Silverlight provides great support for rich media content. Media can enrich any application. Whether it's a sound to indicate that you've received a new email, help in the form of a video tutorial, or a greeting message from your company's CEO, incorporating multimedia into your application can give it extra depth and an edge over the competition.
One of the key features of Silverlight is the integration of multimedia. A full discourse on delivering rich media over the internet could fill an entire book. However, for all but the most sophisticated applications, a little knowledge will go a long way. Silverlight hides a lot of the complicated parts of deploying media over the web. The process for adding media to Silverlight projects is relatively easy to do; you may find yourself dreaming up all kinds of ways to enhance all your projects with rich media.
You could add background music to create ambience or add sounds to provide feedback that a button has been clicked or a process completed, the options are endless. Tread carefully Just because you can add media to your Silverlight applications doesn't mean you should. There are a number of factors to consider, such as additional bandwidth usage, media rights, and the patience of your users. Add media when it adds value, not just to show off your Silverlight skills! Time for action — adding background music Let's see how we can add some background music to the animated logo application that we created in the previous chapter.
By doing this, we will add a little bit of atmosphere to our homepage. In order to get started, we will need to complete the following steps: 1. We're going to enhance that solution with sound and video. Browse to the mp3 or WAV audio file that you'd like to use and place it in our project. You can use the one included in the downloadable content for this book vocals. Now we need to add a MediaElement control to play our sound file. Click on the Assets button on the toolbar. It has chevrons pointing to the right: 3. When the dialog appears, type Media to limit the list to controls that contain the word 'media'.
Click on MediaElement: 4. Double-click anywhere on the art board to insert the MediaElement control. Since we're only playing audio, the control can be invisible. By default, the newly created MediaElement control will be selected. Use the Properties tab to name it mediaMusic. Further down in the Properties tab are the Media properties. Make sure that AutoPlay is checked. Run the solution.
The animation will work as it did before, and you will hear the music in the background. We just added some music to our logo application to add a fun atmosphere to our site. As you can see, it didn't take a single line of procedural code. We simply added a music file to our project, created a MediaElement control and set the source of the control to our music file.
That's all there was to it. However, behind the scenes a few things happened here. When Blend added the audio file to the solution, it set the file's Build Action to Content: If you open up the solution in Visual Studio, you can verify this for yourself. This tells the compiler to embed the sound file into the XAP deployment file.
Blend did the extra step for you. Now it's over k! Generally, this is not a good idea. However, for smaller sound effects, embedding the sound file makes more sense. For larger media files, the best approach would be to place the media file in the web project or on a web server and then tell Silverlight to load it from there.
This keeps the size of your XAP file smaller, so that it downloads and starts executing faster. Your application is still going to need time to download the larger media file, but you'll be able to control the experience. When it comes to the time to deploy your solution, make sure you copy over all your media files as well as your XAP file. Have a go hero — improving the experience Currently, the sound on our CakeORama Logo solution isn't interactive and plays only once. To keep up the atmospheric effect, we may wish to have the sound repeat indefinitely. Users should also have the ability to mute the sound.
Additionally, the music file is contained within the XAP file. We want to display the logo as quickly as possible. The best way to do this is to take the music file of the Silverlight solution and place it into our web project. Let's make both of these improvements now: 1. Browse to a location which contains the vocals. Next, let's remove the vocals. Right-click on the vocals. Click Yes in the confirmation dialog box. Click the Events button in the Properties tab to show all the events the MediaElement control exposes: Among the events listed is the MediaEnded event.
It fires when the media reaches the end. Add the following lines of code into the event handler that Blend automatically created: mediaMusic. Stop ; mediaMusic. Play ; Run the solution again. The original clip is 22 seconds long. You'll notice that after it finishes playing, it starts over again. Close the browser window and go back into Blend.