This tutorial looks at helpful settings for the editor, that help you be more productive when reading and writing XAML.
- [Instructor] I'll use the XAML editor in Visual Studio for this course. I'd like to share some of my favorite IDE settings for the editor, ones that I feel make me more productive when reading and writing XAML. This is a WPF project, but what I'm showing here is the same in the other flavors of XAML. In the Solution Explorer I can click on this XAML file and that'll open something called the Designer. In this case it has a visual designer on the top half of the screen, and this is where I can see a visual representation of the UI, I can manipulate it with the tool box, the property window, I can move things with my mouse or move 'em around with my keyboard.
On the bottom half of the screen is the Text Editor. This is the XML or the XAML, it works like most text editors you're familiar with. In this designer I can switch the panes by clicking on this button, this is called the Swap Panes button and it'll move the text to the top of the window and the designer to the bottom of the window if I prefer that layout, and if I don't like this layout I can click on this button to swap them back to their original position. In the Designer I can zoom in to see more or less of the UI by clicking on this drop-down here.
This is called the zoom drop-down. So I can pick a large zoom in, I can pick a smaller zoom, I can choose to Fit All, and finally, I can use my mouse to zoom in and out. To do that, hold down your Control key, then use the wheel on your mouse to zoom out or zoom in. To move the content on the screen, you can use the normal Windows scroll bars, but here is the trick that I prefer. Hold down your space bar, your cursor turns into a hand, and now you can drag the designer surface around to the position that you want.
I prefer a mode called the vertical split mode. I can get to that mode here, Vertical Split and Horizontal Split. In Vertical Split mode, the text moves to the right side of the screen, and the designer surface to the left side of the screen. And of course I can swap those panes by clicking on this button. Another mode that you can use is Collapse Pane. Whatever is on the left side of the screen will take up the entire screen and it'll collapse the pane that's on the right side. So you'll see what happened is now I don't see the XAML, I only see the Designer.
To bring back the split view, click on this Expand Pane button, and naturally, if I move the text over to the left side of the screen and then collapse, now I just have the XAML text and I don't see the designer. So there are occasions when you will want to work in this mode where you'll want to see all the XAML or all the Designer. But you know to switch back, you're clicking on the Expand Pane button. One feature that some developers like is the drag and drop tool box, where you go over to the side of the window, you may not see all of these items over here.
In fact, if you don't see the tool box, you can go to the View menu to bring that up. Here it is. When the tool box is on the side of the window you can pick up these items, in this case, these WPF controls, I can pick one of these up and drag it over to the Designer surface like this. You see this a lot in other visual editors like HTML editors and some XML editors. What happens is you see a visual representation of the button, and you also see the XML that it created. For most of this course I will not be using the visual designer, but I thought I'd show you how it works.
Now you see that it created this Button XAML here and there's a number of attributes in here. I'll leave this in my XAML code so that I can show you the Settings pane inside of Visual Studio. Go to Tools and then to Options, and then I'll scroll down to the Text Editor section. One of my favorite settings here in All Languages is I usually turn on Word wrap so that the lines will wrap when the reach the edge of the screen. So I can do that for the entire Visual Studio by going into All Languages and doing that.
And I always turn on Line Numbers so I can see what XML line or C# line or XAML line I'm on. It's especially helpful if I'm doing classes or doing demonstrations in front of your peers. You can also do that specifically at the XAML level, so I can go down here into the XAML tab, go to General, and turn on Line numbers and Word wrap. Now the rest of the settings I'll show you are some of my favorites for just the XAML editor. And you can see those in this area, the Tabs section, I like to use Tab size equal to and Index size equal to because I feel that it gives me more items to see on the screen.
I'll go back and show what I mean, is every time I press the Tab key, it's only going over two spaces instead of four, and that gives me more of a compact view of my code, C# code, or in this case, the XAML. Now I'm going to format the document. This is a feature I'll be showing you in a minute in the Tools options. If my XAML is messed up, not tabbed correctly or I've got some extra spaces in here, I can go to Edit, Advanced, Format Document, and what Visual Studio does is it looks up a set of rules for XAML files and it arranges my elements and attributes in the correct location according to the rules, and you can modify those rules.
I'll go and show you how to do that. It's in the Formatting section. Before is how you the other rules, here is one that I usually change. I prefer to have a single quote, I think it makes my code a little more readable, or my XAML a little more readable, so I'll usually use single quotes instead of double quotes, and then I'll expand this node and we'll look at what's called Spacing. I'm not sure what you have for your spacing but these are the ones that I prefer. For element spacing, I tell it to remove empty lines in content. You see I've got three choices, Preserve new lines, which means don't touch my text, second choice is Collapse multiple empty lines of content into a single line, and the third one is to remove all empty lines.
That's what I've got set right now, Remove empty lines in content. So if I go in here and I add an empty line there, and a couple empty lines here, format the document, you'll see that it removes all of those blank lines. I prefer this one, Collapse multiple empty lines in content to a single line. I'm sure you can figure out what that does, but here's a demo, there's three blank lines there and two blank lines here, this time I'll format document, before I do it, I'll show you this keystroke.
In my copy of Visual Studio it's Control + K, Control + D, I use this keystroke all the time to format my XAML document. See how it collapsed those three blank lines into one blank line, and these two blank lines into a single blank line. That's my favorite setting for that option. The next one to look at is this one, Attribute Spacing, so it's talking about the attributes on an XML element. Preserve new lines and spaces between attributes, and again, this means don't touch my XML, leave it alone.
This one says Insert a single space between attributes. Let's see what that one looks like. So let's look at this Button tag here. Now, remember the keystroke? It was Control + K, Control + D. It took all my attributes, put them on a single line with one space between them. In my case because I had word wrap turned on, I get these blue arrows on the side and they're all scrolling down the page, but if I make my window wider you'll see they'll start to pop up to the next line.
The last one is my favorite, Position each attribute on a separate line and Position the first attribute on the same line as the starting tag. Control + K, Control + D, what it does is it puts them all in a little stack here so that I can see them all lined up neat and tidy. I prefer to have a vertical scrolling look at my XAML as opposed to a horizontal scrolling look. I'm sure your tastes may not agree with mine, but these are the settings that I like and these are the settings that I'll be using throughout the course.
So that's a quick tour of my favorite XAML settings. Next I'll look at the basic editing features of the XAML editor.
- What is XAML?
- What frameworks use XAML?
- Working with XAML and Visual Studio
- Exploring XAML namespaces
- Instantiating objects
- Subscribing to events
- Using XAML in Windows Presentation Foundations, Universal Windows, and more