XAML files are XML text file so any text editor tool will be adequate for editing and viewing the content. For a more fulfilling editing experience, use the XAML editors in Visual Studio. This tutorial looks at the auto complete features that simplify XAML editing.
- [Narrator] XAML files are XML text files, so any text editor will be adequate for editing and viewing the content. For a more fulfilling editing experience, use the XAML editors in Visual Studio. This is a WPF project. I have a MainWindow.xaml file here. I'll double click on it to open the designer. I don't want to see the designer part of the screen. All I want to do is work with the text part of this editor. What I'll do is I'll swap the panes and put the text on the top, and then click this Collapse button, which will collapse the bottom half of the screen.
Now I'm looking at just the text editor. Visual Studio has a number of tools that enhance my typing ability and make it easier to decide what to enter in my XAML. Here's some examples. In between the beginning and ending Grid tags, I'll type in the open angle bracket, or the less than sign. Visual Studio shows an auto completion list. This list contains elements and other XML that Visual Studio thinks are appropriate for this point in my text file. At the top of the list, you can see a Comment symbol there.
Now if I want to use this comment symbol, I can choose it by clicking on it with my mouse, and then double clicking. Visual Studio stubs in the rest of the comment tag. It also works with elements. I type in B-U-T, that filters down my auto completion list. You can see it just dropped down to the word Button. It's highlighted in blue. I can also scroll up and down in the auto completion list by using the up and down arrows here, or I can use the up and down arrows on my keyboard.
Once I have the item selected, I can double click on it like I did with the comment, but there's some other things I can do. For one, I can press the Tab key on my keyboard. Watch what happens up here in line 13 when I press the Tab key. Visual Studio finishes typing for me. This also works ... Let's go back here and enter the same three letters. Now you see the Button is selected in the auto complete list. It also works if I type other characters besides the Tab. For instance, what's the most common thing you would put at the beginning of the first tag? You would do the end angle bracket or the greater than sign.
Let's try that. I'll type this on my keyboard, and you see what Visual Studio did is it finished typing the word Button, then put in the character I typed, the end angle bracket, and then it put in the close tag here, then inserted my cursor between the two tags. Also, you can see at the moment that Visual Studio was highlighting the word button in a gray background color. Now these tags are linked. You always have to have a matching end tag, so if I go to this beginning tag, and I type in "TextBlock," you see what's happening as I type in T-E-X, the end tag is changing.
If I press the Tab key now, Visual Studio will auto complete this item that's highlighted in blue, and you'll see that both the tags changed to match. XML is a case sensitive language. That means if I go here, and I change this capital B to a lowercase B, it changes both the beginning and ending tags, but you'll notice that now I get an error squiggle. This blue squiggle on line 13 indicates there's something wrong with my XML syntax. This is another feature you get from Visual Studio. It's trying to warn me that something's wrong.
If I hover my mouse over the blue squiggle, I'll get a tool tip that pops up that says, "Textblock is not supported in this WPF project." It would be nice if it told me that it was misspelled, but you don't quite get that level of error details. Let's erase this and add another item. This time I'll do a TextBox. I'll hit the down arrow to select it. If you studied XML, you know that you don't have to have a closing tag. You can do what's called a self-closing tag, and this is the syntax for it. I'll type in the word "tex" like this.
Then I'll type in slash. Visual Studio finishes typing that in, and now I can have a self-closing tag. Another nice feature of Visual Studio, you notice that I have a self-closing tag here, and I have an element with the beginning and ending tag. Visual Studio has this nice feature. If you decide you want to make this a self-closing tag, I'll type in the slash here at the end of the first tag, and watch what Visual Studio does on the end of the line.
It removes that tag, because it's not needed anymore. When I erase the slash, you'll notice that it doesn't automatically put the end tag in, but that's easy to fix too. I can just go here and delete that end angle bracket and type it back in, and Visual Studio stubs in the end tag. Auto completion also works with attributes. Here's what I mean. I'll go to my TextBlock. I'll type a space here. Now Visual Studio knows that I'm no longer working with elements, so it's looking at all the available attributes that make sense on this TextBlock element.
Here's a Background. There is a Foreground one, so I'll chose this one. Press the down arrow, and press the Tab key. Now what's happening here is that it auto completed the word "Foreground," and then it entered the equal sign, and then a single quote, another single quote, and put my cursor between the two single quotes, and it's also showing me a drop-down list of the available choices that I have for this attribute. I can choose a color. Let's say I chose Azure like that, and Visual Studio stubs that value in for me.
The auto completion is set in the Tools settings. Go to Tools, Options. Go to the Text Editor node here. Then open up the XAML section. In the Miscellaneous section, you see that it has a section called Auto Insert. There's a property here called Closing tags. That's how come I got the closing tags. When I created the beginning tag, it automatically added the closing tag, and here it automatically added my Attribute quotes. Now I got single quotes. The reason I got those single quotes is because over in my Formatting section, I chose Single quotes as my default, not the default of Double quotes.
Go up to this element here. Change this to a TextBlock. That. I want to talk about something called a markup extension. I'll go to the Text property. XAML has some special characters that mean things to XAML that don't usually mean things in an XML file. For instance, I can type in a curly brace here when I'm in the attribute value, and that's called a markup extension in XAML. What Visual Studio's doing is looking through all the available markup extensions and showing them to me here.
When I pick one of them, let's say I choose the StaticResource, now when I press the space bar, Visual Studio gives me a list of the items that make sense, the properties that make sense for this StaticResource markup extension. If I change this to the Binding markup extension and press the space bar, you see I get a longer list. That's because there's more properties available for the Binding markup extension, than there was for these StaticResource markup extension. Now let's do an actual Binding. To do that, I will delete this Text.
I'll name this TextBlock, and before I do that, I want to show you the properties window. If you don't know what to type, sometimes you don't know what to type in your XAML for an attribute value, and even the IntelliSense or the auto completion's not giving you what you want, you can go to the Properties window by selecting the tag, and then you can choose from these different sections. For instance, if I want to set the Foreground property, instead of typing in red, green, or blue over here, I can click on Foreground. Visual Studio gives me this color editor, and then I can just move up and down here, select my blue color, move my mouse around, and when I let go of my mouse, you'll see that Visual Studio wrote in the Foreground hexadecimal value.
If I decide I don't like blue and want a more of a purple color, I choose that, and you'll see that it's changing the hexadecimal value. This also works for things like names. I've got to name these two TextBlocks so that I can programmatically talk to them and do what's called an Element Name Binding. I'll go up here to this section and name this one DemoTextblock, and then I'll do the same thing for this second Textblock here. Now that I've got them named, I want to show you the last demo. I want to show you how Visual Studio can look through my named elements and provide them to me in the auto completion list.
We'll add a Button. Go to its Content Property. I'll create a Binding markup extension. We'll use ElementName, and when I hit the Tab key, Visual Studio puts in the equal sign, and then it looks through all of my elements that are in scope inside this XML document and finds the ones that have names on them, because that's what you need for an ElementName property for a binding. It finds those. I'll press Space to bring that list up again. It finds those and lists them here.
I can pick this instead of having to type in the names. I'll say I want to bind to "DemoTextBlock2," double click on that, and Visual Studio puts that into my XML for me. That ends this section on the XAML editor. The XAML Tools editor is helpful. It won't take long before using it is second nature for you. There are other interesting tools in Visual Studio that enhance working in your application. For instance, there's the Edit and Continue feature, which lets you edit the XAML while debugging the application, and the Live Tree tool, which allows you to investigate the runtime XAML hierarchy.
These interesting topics will have to wait until later.
- 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