Join Walt Ritscher for an in-depth discussion in this video Touring the Visual Studio interface, part of Silverlight 3 Essential Training.
When you become a Silverlight Developer, you're going to spend a lot of time in two tools. Visual Studio is a great tool for writing code and editing your XAML. The second tool is called Expression Blend. It has the designer that Visual Studio is missing. Visual Studio does not have a visual designer for Silverlight 3 applications. I have Visual Studio open and I'm going to go up to the File menu and choose File>Open>Project. And then I'm going to go to the Exercise Files folder, the Getting Started folder and then open this PixelSmith Tour folder, and then double-click on this sln file.
Sln stands for Solution. Solutions can contain multiple projects. I'll click on the Solution. You'll note over in the Solution Explorer on the right edge of the screen, a number of files and folders have appeared. I'll explain more about this in a couple of minutes. We also have details about the Solution Explorer in another movie in this course. I am going to open this MainPage.xaml file, and what you see here is the main programming language for Silverlight. It's called XAML. XAML is XML. There is also a code version of this.
I can press F7 while I'm in this window to launch the code version of the same control. As I mentioned, there is another tool that's called Expression Blend. I'm going to switch over to Expression Blend now. I've already opened the same solution in Expression Blend and I've opened the same MainPage.xaml file. Blend has this beautiful designer for editing your UI. I have another movie in this course detailing more about Expression Blend. For now, I just want to show you one demo. I'm going to come over to the Toolbar and click on rectangle. Then we're going to draw the rectangle in my Artboard and then we'll save the project.
I want to turn back to Visual Studio. Visual Studio detects the changes that I've made inside Expression Blend. That's because both Expression Blend and Visual Studio are sharing the same files. I'm going to click Yes to All, and now the changes have been imported into Visual Studio. For the rest of this movie, we're going to stay in Visual Studio. Let's start by looking at the Solution Explorer on the right side of the screen. Solution Explorer is a virtual representation of your file system. It contains folders and files from your project.
Below that is the Properties window. The Properties window is not used a lot during the Silverlight development, but it is in other application development like WPF or WinForms. On the left side of the screen is a dockable Toolbar. If you mouse over this section of your screen, the Toolbar will pop out. You can dock it to the side by clicking on the Auto-Hide button. Once you've done that, you can drag these items to your XAML file. Let me show you an example. I'm going to scroll down in my XAML file, to this area.
Line 101, and then I'm going to take this CheckBox control and drag it over to my XAML page. And as you can see, Visual Studios dubs in CheckBox and then CheckBox. Now it's time to compile your application. I'm going to unpin this toolbox, so we get more screen real estate to see. I'd like to spend a minute or so talking about the Build menu. In any .NET application, you have to compile your application. In Visual Studio, the compile process is handled by MS Build, which is a build engine. When I go to the Build menu, I have three choices: Build Solution, Rebuild Solution or Clean Solution.
I should say I have six choices because I also have Build, PixelSmith, three times down here. The difference is you may have more than one project inside a solution. I can choose to build the entire solution in all of its subsets or I can choose to build only one. It's also possible to right- click over here and choose Build. When you choose Build, it goes out and verifies that all your code is correct. As you can see, I have some errors in my code. The name 'media1' does not exist in the current context.
And it's having trouble finding something called PhysicsControllerBehavior and so I have got some issues to fix in my application before I can successfully deploy my application. There are three choices up here. First is a normal build process where it gathers up all the information about the Build and runs through the compile process. During the Build process, Visual Studio caches certain files to make things faster the next time. If I choose Rebuild, it throws out all the temporary cached files and starts from scratch. And lastly, if I choose Clean Solution, it throws out all the cached files but doesn't do the second half, which is to compile the application.
You must have a compiled file for Silverlight to work. I have more details on the compile process in the programming chapter. Next to the Build button is the Debug menu. In the Debug menu, I can press Start Debugging. Here's the key about the Start Debugging menu. It runs through the build process first. So, if I press F5, it does everything I just told you about the Build menu, then it starts up Internet Explorer, launches my application and attaches a Debugger to Internet Explorer. I also have more details about this in another movie. You're going to spend a lot of time looking at your XAML and your code.
To make your life more pleasant, you can go to Tools>Options and configure some settings. Let's do that. Tools>Options. The first thing I'm going to look at is Fonts and Colors. You get to pick your favorite monospace font or other font here. I like to use Consolas, which is a Windows Vista/Windows 7 font. It looks very nice on LCD screens. More important is the area called the Text Editor. Each editor inside Visual Studio has its own rules on how to color code the text and what are the allowed key words.
Therefore, in the Text Editor section, there are specific tools for configuring each of those text editors. I want to look at the XAML Text Editor. You can control things like how your words wrap on the screen, whether or not you have line numbers - as you can see, I have line numbers turned on. I can also control things like how my Tabs are constructed. The reason I like to use two spaces while teaching is that I can see more code on the screen. In the Miscellaneous section, I can auto insert Closing tags and I can auto insert Attribute quotes.
I like to have both of those enabled. And then finally, my favorite section is in the Formatting section, under Spacing. I can tell Visual Studio to layout my text according to these patterns. The pattern I like is to position each attribute on a separate line. Here's an example, right here. Header, IsSelected, FontSize and so on are all on a separate line. I like the way this looks in my screen. I also like to choose Position first attribute on the same line as start tag, which you can see here on line 110. The Header attribute is on the same line.
You can also control what happens with empty lines. I like to Collapse multiple empty lines into content into a single one. Let me show you what that does. I'll click OK here. Add a couple of spaces. I'm also going to move the FontSize up to this line. So, now it's not on a separate line and I've got these extra spaces. Now I'm going to format my document. I'll go to Edit>Advanced>Format Document, or you can use this keystroke, Ctrl+K and then Ctrl+D. Watch what happens.
It removes the blank lines. It also rearranges my attributes the way I like them. We'll be using Visual Studio a lot in this course. In other movies, I'll be providing you with more details.
- Hosting Silverlight
- Choosing a Silverlight programming language
- Understanding XAML basics
- Interacting with the user through events, dialogs, and controls
- Adding animations to the interface
- Managing application assets in Expression Blend
- Compiling and deploying a Silverlight application
- Customizing UI with Silverlight templates