Tip:
Highlight text to annotate it
X
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.