Creating a Silverlight 2 Application by Combining Expression Blend and Visual Studio 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
Page 5 of 8