Discover how to use Visual Studio 2008 SP1 and Expression Blend to create a cool interface for a Silverlight 2 application with your original knowledge of .NET.
Introduction to Silverlight
Silverlight has been in the news since it was announced last year. In fact, Silverlight began as what was known as WPF/E (Windows Presentation Foundation/Everywhere). When Microsoft introduced WPF for the desktop and deployment through Clickonce, it felt that it had to enter the RIA (Rich Internet Applications) market that was dominated by Flash. Because Silverlight is built on WPF and uses XAML as the declarative language for building the pages, however, there are certain differences between using WPF and Silverlight.
Microsoft recommends using Windows Presentation Foundation to build rich immersive applications and experiences that can take full advantage of the Windows platform, including UI, Media, offline communication, OS integration, Office integration, peripheral access, Document support, and more. Silverlight will be used for broad reach interactive media content and browser-based rich interactive and high-performance applications and experiences. By using Silverlight's support for .NET, high definition video, cost-effective advanced streaming, unparalleled high-resolution interactivity with Deep Zoom technology, and controls, businesses can reach out to new markets across the Web, desktop, and devices.
Tools that You Need to Create Silverlight Apps
Because this article is oriented towards the developer who wants to create rich interactive applications, you will be looking at how to get started with developing for Silverlight. Microsoft has released a set of tools to develop applications. They are:
- Visual Studio 2008 with Service Pack 1
- Silverlight 2 Beta 2 SDK
- Expression Blend 2 July 2008 Preview
Most of you are familiar with Visual Studio to develop .NET-based applications. But, what is Expression Blend and how does it help to create Silverlight applications?
Microsoft Expression Blend is Microsoft's user interface design tool for creating graphical interfaces for web and desktop applications that blend the features of these two types of applications. Expression Blend is itself written using the .NET Framework 3.0 and Windows Presentation Foundation (WPF). Expression Blend is effectively an interactive, WYSIWYG front-end for designing XAML-based interfaces for WPF and Silverlight (Blend version 2.0 onwards).
Expression Blend was code-named Sparkle, and originally the product was announced as Microsoft Expression Interactive Designer, before it was renamed Expression Blend in December 2006.
Expression Blend supports the WPF text engine with advanced OpenType typography and ClearType, vector-based 2D widgets, and 3D widgets with hardware acceleration via DirectX. It is completely written using WPF, as opposed to Windows' older GDI or GDI+ graphics technologies. It is one of the applications in the Microsoft Expression Studio suite.
Those of you who are familiar with Adobe Photoshop to edit your images as well as add effects to existing images will see that Microsoft Expression Blend does the same for WPF. The only difference is that it works with XAML files rather than image files. And, the files are compiled before they can be used. Microsoft thought beyond the paradigm of developing graphics for websites. Its idea was to have a single solution that consists of multiple XAML files. On one side, the developer can use Visual Studio 2008 to create the skeleton page and then write code behind the page. Note that this code doesn't touch the design interface, so the designer will be able to work on the designer part of the XAML file in Expression Blend. You will see shortly in a demo how this is possible.
Getting Started with Silverlight
Now that you have seen the tools needed to create a Silverlight application, you will see how simple it is to get started creating an application for the Silverlight platform. The steps are outlined below.
- Use Visual Studio 2008 SP1 to create a new Silverlight project based on the Silverlight 2 Beta 2 Template. Visual Studio will do the necessary steps to add a single HTML page or a single website to host your Silverlight application. This is because Silverlight is a plug-in that renders in the browser.
- Add your necessary XAML files needed for the user interface. This is similar to the forms that you would add to a Windows Form application.
- Edit the XAML page using Expression Blend 2 July 2008 preview. Note that Because each page in Silverlight 2 Beta 2 is treated as a user control, only Expression Blend 2 July 2008 preview will be capable of opening these particular XAML files. Any older version of Expression Blend will throw an error message saying that it is unable to open that file type.
- Switch to Visual Studio 2008 SP1 to write code behind files for the controls and pages that you created in Step 2.
- Build and compile the application.
- Host the same in IIS or any web server of your choice. For this demonstration, you will rely on Windows Vista for development and IIS for hosting the application.
What About a Database. Can I Use That?
Because Silverlight applications run in the browser context, they run in a sandbox and cannot access local resources directly. Developers think that Silverlight is similar to ASP.NET that can access servers and databases, but this is not so. Data access is provided through web services such as Windows Communications Foundation (WCF) or ASMX. That means you will have to create a web service to access your favorite database and then use that web service from within Silverlight to access the data or modify existing data. The reason for this is explained below.
Data stored in a database typically resides on a remote server whereas a Silverlight application resides on a client workstation. To retrieve data from a database stored on a remote server, requests must be sent to the server to retrieve the data just as with any other web application.
Due to the security constraints placed upon a Silverlight application, a Silverlight application cannot read files from the client machine unless they are stored in isolated storage. Hence, a Silverlight application is fairly limited in its capability to store data locally; however, simple files can be created for storing simple data and settings. But, files are not reliable for storing simple data as well as settings. Users will want data to be pulled and pushed and databases are the only solutions for storing data.
Silverlight applications can make calls to a server by calling a web service. Calls made to a web service from a Silverlight application can currently transport data by using plain old XML or JSON. Additionally, a web service being called by a Silverlight application must currently reside in the same domain as the Silverlight application. This restriction is imposed as a security precaution and limits the ability for the Silverlight application to make calls to web services; however, it does not limit what a web service being called by Silverlight can do. A web service being called by Silverlight acts as a proxy for the Silverlight application and can make calls to any resource on behalf of the Silverlight application and return the results. For example, a Silverlight application may call a web service that resides in the same domain as the application and that service may, in turn, call another web service outside of the domain or may query a database. This is the standard method available for a Silverlight application to retrieve server resources.
Conclusion: Yes, you can use a database to host the data, but you will have to do the additional work of creating web services to do the plumbing and then call them from within Silverlight.
Working Through the Sample Application
You will walk through an application that will keep track of your expenses. This application will be developed in Silverlight and access a SQL Server 2008 Express Edition database. This will have three screens. The first screen will show you the total amount that you have spent for the current month (because most people are interested in the current month's expenditure) as well as the top three categories in which you have spent the money. This will be the home page of the application and will load whenever you call this application via an URL in the browser. On this home page, there will be two buttons to navigate to other pages. One will be for entering the amount as well as selecting the category of expense and the other page will show a report for the current month's expenditure. Because the data will be stored in SQL Server 2008 Express Edition, this can be tweaked to show you the data for any month. This will be left as an exercise for you to test out.
The final screens for the application are outlined below. Note that you will use Expression Blend for this demo and not write any code. After this demo, you will be able to understand the first three steps as outlined in Section 1, "Getting Started with Silverlight."
Figure 1: The home page of the Expenditure application
Figure 2: The page where you will add a new expenditure
Figure 3: The page where you will view the summary of expenses for the current month
The Stages of the Application
To begin, you need to have the following tools installed on your machine. It can be either Vista or XP.
- Visual Studio 2008 SP1. Henceforth, I will refer to this as VS2008.
- Expression Blend 2 June 2008 Preview.
- Silverlight Development SDK Beta 2.
Open VS2008 and select New Project. Select Silverlight from the left-hand side and choose Silverlight application from the right-hand side. Make sure that you select .Net Framework 3.5 because you will be using LINQ and other new features of the .NET 3.5 SP1. Give it a name of your choice and then select a folder where the solution will reside. Name the solution ExpenditureSL.
Figure 4: Selecting the Silverlight template from Visual Studio 2008 SP1
Because Silverlight is a plug-in for the web browser, you will have to host this application inside a web application. So, VS2008 prompts you to create a simple HTML page or use a new web application to host this control. Select the first option and leave the default name as ExpenditureSLWeb. Once you are finished, click OK.
Figure 5: VS 2008 automatically creates a website to host your Silverlight application
Now, VS2008 will open the default page, Page.xaml. This is similar to a Windows Form and, because you are working with WPF, the default page is of type .xaml.
Figure 6: The default file type is Page.xaml when creating Silverlight/WPF applications
Because Silverlight 2 is a beta product, drag and drop isn't supported in VS2008 right now. You can drag and drop only in the code window and then see the preview. Support for WYSIWYG will be available only in the final version. At the time of writing this, the latest news is that Silverlight 2 will be officially released shortly. This demonstration is based on Silverlight 2 Beta 2. So, some features are likely to be changed in the final version.
That is all you have to do in Visual Studio 2008 SP1. You will focus on Expression Blend in the rest of this demonstration.
Leave VS2008 open as it is and then click on Expression Blend June 2008 Preview. Ensure that you are opening the latest version of Expression Blend, as seen in Figure 7. Note that earlier versions of Blend will not support Silverlight applications. They support only XAML pages and, because Silverlight treats every XAML page as a user control, you will need the latest version of Blend.
Figure7: Make sure that you select the right version of Expression Blend to work with Silverlight applications
The home page of Expression Blend is seen in Figure 8; don't be surprised if you see a black interface. Expression blend is all black, but you will be able to see the controls and work with ease.
Figure 8: The home page of Expression Blend
Now, click File | Open Project (the same way as you would in VS2008). Navigate to the same path where you created your project with VS2008. You will see that the file types of .sln and .csproj are all visible from Blend. Select the ExpenditureSL.sln and watch as the project loads in Blend.
Figure 9: Note the same look and feel for the Project Explorer as in VS 2008
Notice that the right-hand side is similar to VS2008 where you can see the project explorer and properties window. The solution is similar to what you see in VS2008; that is the beauty of Blend. Whatever you edit in Blend will be updated when you open VS2008 and vice versa. Note that you can open the page for editing in another way. You can right-click on the Page.xaml file in VS2008 and choose "Open in Expression..." Now, the same page will open in Expression Blend, where you can edit it.
Figure 10: You also can open the page in Expression from within VS 2008
Rename the Page.xaml file to Home.xaml. You will be adding new pages and want this page to be the default home page for the application. This is similar to what you would do in a web site.
Double-click on the Home.xaml file and you will be presented with a blank screen where you can drag and drop controls. Select LayoutRoot from the Objects and Timeline toolbox and change the height and width as 640 X 480. Now, select the Usercontrol from the Objects and Timeline toolbox and change the width and height to Auto. This will stretch it to fit the layoutroot.
Now, drag and drop some controls on this canvas and design your page as per the application's flow. You can drag and drop any controls that are available from the Toolbox and then arrange them. Finally, you will use a rectangle to group them together.
Click on the arrow at the bottom of the left-hand screen and you will see the Assets Toolbox pop out. This is where you will drag and drop the controls from.
Figure 11: The Asset Library in Expression Blend. This is the same as the toolbox in VS2008
Draw a screen where you can add your expenses. This screen will be similar to a calculator with buttons and a textbox. When you click on the buttons, the numbers will be visible in the textbox. You will also add another control to select the type of expenditure. This can be like Fuel, Water, Food, Provisions, Train, Bus, and so forth.
Right-click on the ExpenditureSL project in Project Explorer and click on Add new item. Select Silverlight user control and name this AddExpenditure.xaml. This file will enable you to enter new expenditures as well as select the category for which the expenditure was made.
Now, click the Asset Library and select the Button control and draw it on the screen, as shown in Figure 12. This will be the button for the number "1".
Figure 12: Drag and drop the button control on the page
Click on the Properties tab on the right-hand side. Now, modify the following properties of the button as follows.
The output is seen in Figure 13.
Figure 13: Setting the color and font properties for the button control
Similarly, create another eight buttons and lay them out as you would see on a calculator. Number them from 2 to 9 and name the remaining buttons 0, C, and the dot (decimal point). They are Zero, Cancel, and Dot for entering decimal values. The layout is seen in Figure 14. You can select the first button, press Ctrl+C to copy it, and then press Ctrl+V to paste it. Then, use the mouse to adjust the layout of the newly created button.
Figure 14: Copying and pasting the same button and creating multiple controls
Now, add two more controls (one textbox and one list box). Note that Silverlight 2 Beta 2 doesn't support a drop-down list box, so you will have to use a list box control to show multiple values from which you can select one. Adjust them as seen in Figure 15.
Add two more buttons on the right of the numeric buttons so that you will be able to save the expenditure as well as exit from the screen. The final output is seen in Figure 15.
Figure 15: Add the listbox and the TextBlock controls
Now remember, as said earlier, that you have opened both the solution files in VS2008 as well as Expression Blend. So, as you were editing the file in Expression Blend, VS2008 was in the background. If you switch to VS2008, you will get a dialog box saying that the file was updated outside of the editor and prompting if you want to update those changes.
Figure 16: You are prompted to reload the new changes in Visual Studio if the solution is open at the same time in both Expression Blend as well as Visual Studio
Click "yes to all" and you will now see the new changes in VS2008 as well. Wasn't that easy for you to design instead of writing out the XAML code line by line? That is how Microsoft has fitted the Expression Blend tool nicely into the VS2008 environment to enable editing of the files as well as writing code.
Now, it is time to add a dash of color to all the controls instead of having that dreary silver look that is common for all Windows controls. Go back to Expression Blend and select the first button, "1". You will modify the color of this button and apply the same style to all the other buttons.
Edit the Background color with RGB values as follows: 40, 80, and 174. Do the same for all the remaining controls. The final screen is seen in Figure 17.
Figure 17: Editing the background color for the entire screen
See how this looks in the browser. You can press F5 from either VS2008 or Expression Blend. Do that from VS2008. The preview looks like Figure 18.
Figure 18: The preview of the screen in the browser
That is all it took to create an appealing webpage in Silverlight using Expression Blend.
This article was originally published on Tuesday Oct 21st 2008
Now, you will focus on the other pages and design them with Expression Blend. Right-click on the project either in Expression Blend or VS2008 and click New Item. Select the XAML file and give it a suitable name. The home page will show the total expenditure for the current month. The history page will give the breakup of the expenditures for that month and display the details in a grid.
The final look and feel for those pages are seen in Figures 19 and 20.
Figure 19: The home page for the expenditure application
Figure 20: The summary of expenditure for the current month
You have seen what it takes to create a Silverlight application by using a combination of Expression Blend and Visual Studio 2008 SP1. You were able to use some creativity to design the forms and add a dash of color to the controls as well as the background.
In the next article, you will focus on Visual Studio 2008 completely to write a web service and then hook up the pages of the application to communicate with the backend SQL Server 2005/2008.
About the Author
M. Rajesh works as a Technical Expert in a leading software company in Chennai, India. He has around 14 years of expertise in the Microsoft platform and has worked since the days of MS-DOS and FoxPro. He was an MVP (Microsoft Valuable Professional) in .NET, Windows Shell, and Tablet PC for the period 2002-06. Now, he focuses on the Windows Mobile Platform and is working on mission-critical operations for a leading provider in New York City. Recently, he has jumped on the Silverlight wagon and can't resist the curiosity of developing and designing visually appealing applications with Expression Blend. His favorite pastimes include reading blogs, learning about new technology, and he is an avid F1 fan.