Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
When you become a Silverlight developer, you are going to spend a lot of time in Visual Studio. In this movie, we'll take a short tour of the Visual Studio interface. I'm inside Visual Studio. If you're following along with the Exercise Files, you are going to want to open the ExampleProject Solution. I picked a Solution that has multiple projects. You can see here that there are three projects inside this Solution. Let me explain those terms. A Solution in Visual Studio terms is a container for zero or more projects. A project is an item that gets compiled into an executable, and a project can have zero, or more files.
I have three projects, I've got a Silverlight project here which is in bold, that means it's a startup project, and then I have two business libraries down here. If I open this project up, you'll see that it has a Class1.cs file. When it comes time to compile my application, I can choose to compile all three of these. I can do that by going to the Build menu, and choosing Build Solution, or I can choose to compile just the one that I have selected. So if I choose the SampleControlLib project and go to the Build menu, you see I have three choices down here; Build SampleControlLib.
Let's do some editing. I am going to go up to the ExampleSilverlightApp and I am going to open this MainPage.xaml file. This is the default editor that you get inside Visual Studio; it is a Split View Editor. So on the top-half of the view, I see the designer surface, and on the bottom-half of the view, I see the text view, this is XML and it's a special syntax of XML called XAML. These two are linked. So if I make a change in the top-half of the screen, it will be reflected in the bottom-half of the screen.
Let me show you what I mean. I am going to go to my toolbox. If you don't see the toolbox on your copy of Visual Studio, it may be unpinned and sitting on the side of the window. It would look like this. It would just be this little nub over here. If you hover your mouse over this edge or over the Toolbox, the Toolbox pops up and then you can pin it permanently by clicking on the Auto Hide button. Once that's pinned, I can come over here and take one of these controls, say this button, and drag it over to my designer surface.
Notice the blue outline that's popped up there, that's signaling my target is a droppable target. I'll let go with my mouse. Here is what I want you to see. On the top-half of the screen is a little button, and on the bottom-half of the screen on line 55 is some XAML that says Button Content='Button' and so on. If I modify this button by clicking on it, and choosing a new size, you'll see that the Height and the Width properties down here in the bottom-half of the screen were modified. Visual Studio has a decent editor, but it's not as powerful as the designer that's inside Expression Blend.
So let's go over there and show you the same project in Expression Blend. Here, I am in Expression Blend. If I move over to my Projects section, and double-click on this MainPage.xaml file, you'll see the same screen. It's a little bit too big to see, so I am going to shrink it down in size by using my mouse-wheel, click, and mouse- wheel to make it a little bit smaller. And then to move it left or right, I can hold down the Spacebar, and then I get the Hand tool, then I can drag it to the center of my working area. This is called the Artboard in Expression Blend.
Notice that you don't see the button here, that's because I didn't save my project over in Visual Studio. So I will switch back to Visual Studio, click on the Save All button, and then back to Expression Blend, and Blend says, I see that there's been a change inside the solution file, would you like to reload? I am going to say, Yes. And then, I'll slide over here to the side and there is my button. So, the two were linked. They share the same file format. That implies that if I go over here and add a rectangle by clicking here in my Toolbox, choosing Rectangle and then drawing that over here, I think I'll choose a new color.
So I'll come over and choose a nice flavor of light blue. I'll save my project, and then return back to Visual Studio. Just like in Expression Blend, I'm notified that there has been a change. It says, this file has been modified, do you want to reload it? I'll say, Yes to All. And now you see my blue rectangle. So again, this proves that the two of them, they are linked. I'll tell you my daily experience, as I have both of these applications open, usually at the same time, and I switch back-and-forth based on which tool does the job best for me at that moment.
I'd like to show you some of my favorite settings in Visual Studio that help me on my daily coding jobs. Those are listed up here in the Tools>Options section. Mostly, I want to look at fonts and text editors. If you don't like the font size inside Visual Studio or the font face, you can choose Fonts and Colors. And inside this area of the Tools> Options is a rich dialog for setting every possible nuance of your font. Here, you get to pick your basic font. I am using the built-in Windows Consolas font, which is a very nice font that works on LCDs.
If you want to change the code font on-the-fly, you can go back to your Code Editor window, click. And if you hold down the Ctrl key while you're in the code window, and use your mouse-wheel, you can dynamically size the text. Next, I want to talk about the rules of the Text Editor. This is my XAML text editor. There's also a C# text editor affiliated with this file. If I press F7 while I am in this screen, you'll see that I switched over to the C# file.
Both of these text editors have certain rules on how they color keywords and how they indent the text, and I can control those using the Tools>Options. Let me show you how that works. Tools>Options, scroll down to the Text Editor section. Each editor that is currently inside Visual Studio has a node in here. So here is the C# editor, and here is the XAML editor. I am going to edit the XAML one. But, before I do that, I like to set some global settings. So I'll go to All Languages, and what I want to do here is turn on Word Wrap, I like that feature, and I always code with Line numbers turned on.
It makes it easy to reference the line of code that I am looking at, just like that. I also like to do, on my Tabs settings here, I like a 2 space tab, and Indent size for all my code windows. Next, we are going to go down and choose the XAML editor. Here we go! The settings that I like in this dialog are Single quotes over Double quotes, and then for my XAML, I go to the Spacing section, and I like to have Position each attribute on a separate line, and Collapse multiple empty lines of content into a single line.
This is easier to show than to read off this dialog. So let's go show you what that does. I'll click on OK. I'm going to switch back to my XAML window; I can do that in a couple of ways in Visual Studio. I can press F7 since I am on the code window and that will take me back to the XAML window, or I can click on this tab at the top of the screen. Here is that button I added a few minutes ago. I'm going to put a few extra spaces at the top and I am going to change the way my attributes are arranged on the screen. Put some extra spaces in here, indent them at different levels.
Now, I want to clean this up. I can force a formatting on a document at any time by going to the Edit menu, and Advanced, and then choosing Format Document, or you can use the keystroke Ctrl+K, Ctrl+D. I'll tell you that I use Ctrl+K, Ctrl+D about every two minutes when I'm programming. So let's click here, and watch what happens in the document. Those multiple lines of space got reduced to a single line, and each individual attribute inside my XAML was moved to a separate line.
I find this infinitely more readable than having them all scattered around the screen. I'll be using Visual Studio a lot in this course. You'll see more tips and tools in the later videos.
Get unlimited access to all courses for just $25/month.Become a member