Tim Heuer gave a well-received presentation at //BUILD13 on What's New in XAML for Windows 8.1. If you haven't watched that, you owe it to yourself to do so... I'll be here when you get back.

Additionally, Tim put up a blog post Creating XAML Code Snippets for Visual Studio 2013 helping us all get started with XAML Code Snippets. I'm going to refer back to Tim's blog past as I talk through what I learned while playing with XAML Code Snippets last night.



First off, I downloaded and ran Tim's VSIX that contains 4 snippets. I gave them a dance, and they work just great... thanks a bunch Tim!

I wanted to crack one of them open on my machine to grab the XML to play with it, so I naturally went to the normal place I'd find Snippets... in my case:

C:\Users\Dave\Documents\Visual Studio 2013\Code Snippets

In that folder I found a folder named XAML, opening that, I found one named "My XAML Snippets".

But in that folder, all I found was Tim's sp.snippet ... the vertical StackPanel one. I could right-click open with Notepad to grab the code and did, but where were the others? That took just a little investigation, but were easily found. Rather than tell you where, I'll show you how to find out where they are on your system.

Go to the Tools menu, then select "Code Snippets Manager...", or use the hotkey combination Ctrl+K, Ctrl+B:




That will open up the "Code Snippet Manager":




and as you can see, the "My XAML Snippets" location is as expected. Also note that Tim's other three snippets are listed under "Snippets", and if you select that folder:




Now you can see at least the important part of the Location for those snippets. I've also selected the first one to show the details in the right-hand panel.

If we browse our way into that folder to find the files, first I'm showing C:\Program Files (x86)\Microsoft Visual Studio 12.0\Common7\IDE\Extensions:




I'm guessing that "trbwdqq2.5mw" folder name is not going to be the same on your machine, so... as they say 'mileage may vary'... but... if you go down that one level, then into the Snippets folder you'll finally find Tim's other three snippets:






Now that I've resolved my curiosity as to where the XAML snippets are located on my machine, I want to build a new snippet based on the knowledge gained by reviewing the others.

Aside from surrounding other controls with StackPanels, probably the next biggest thing I find myself doing a lot of is making Grids. It's probably about an even split between making an empty Grid, and pushing some existing controls into a new Grid.

So my plan to learn XAML Snippets was to write a Grid snippet that would work as an Extension and Surround, and just for completeness have a name, and at least one row and one column. After that, you can easily cut and 'haste' whatever you need.

Following my normal tradition, I'll show all the code first, then follow it with an explanation:








The Header information on lines 4-13 identifies the Title, Shortcut, Description, and Author as was shown in the Code Snippets Manager screenshot above.

Also shown in that screenshot is the Snippet Types. Notice that is plural. I took a gamble on that and entered two SnippetType entries on lines 10 and 11, and that worked just fine.

Next up is the Snippet itself, with some literals declared first in lines 16-30.

I defined 3 literals: The "X:Name" for the grid, the Row Height, and the Column Width for the one row and one column in the snippet.

Finally the code itself begins in line 32. The code is surrounded some boilerplate as follows:

<Code Language="XML><![CDATA[ ... your code goes here ... $end$]]></Code>

Inside that, the Grid itself should be readable. The literals declared above are used in place of strings where appropriate, and line 39 has $selected$ which places whatever XAML was selected (if any) when the Snippet was invoked at that location, which you'll notice is inside the Grid.
gt;

Inside that, the Grid itself should be readable. The literals declared above are used in place of strings where appropriate, and line 39 has $selected$ which places whatever XAML was selected (if any) when the Snippet was invoked at that location, which you'll notice is inside the Grid.

I crafted that XML file, and saved it to a temporary location as "Grid.snippet".

Then I went back to the Code Snippets Manager as shown above and clicked "Import". I then navigated to my temporary location, selected Grid.snippet, and got to this dialog:




"My XAML Snippets" is selected already, so clicking "Finish" imports my snippet into the system. Opening the Snippet Manager, and selecting "My XAML Snippets" now shows this for the new "Grid" snippet, as I'd hoped from the code above:






Since it shows up in the Snippet Manager, we should be able to give that a dance.... opening a new 8.1 Blank Windows Store App, putting the cursor inside the Grid provided by the template and hitting Ctrl+K,E ... remember the "E" is for Expansion... this is what shows up:




Next click "My XAML Snippets" to get this:




Now select "Grid", or as the tooltip suggests, just typing "gr" to begin with would work... but I wanted to show you how to traverse the categories also:




And you can see the three literal values are right where they were expected to be.

To test the "Surround With" version, I inserted a simple Button control in the basic grid, selected that row, and this time typed Ctrl+K,S... where the S stands for "Surround With":




Then continuing as in the above Snippet selection, we end up with:




Which is pretty much what we want... now all we have to do is insert the row/column information into the button and we're good to go.



If you look in NuGet, you can find some Code Snippet tools for 'normal' code. I use one in VS2012 called Snippet Designer... this works really well for code, but doesn't do a thing for XAML.

I tried to load it up with NuGet in VS2013, and it doesn't show up, so I just installed it on my Surface to see what it would do, and all it did was install for VS2012, not VS2013. I didn't expect it to work in VS2013 ... but figured it might be a fun try :)

I'm sure there are other good Snippet tools, and I'd be shocked if someone didn't come up with a XAML one for us in VS2013. Watch my twitter feed... if I find something, I'll sure let everybody know!



That's about all there is to know about Snippets... and should be enough of a start to produce good useful ones.

If you produce some good XAML snippets for VS2013, send me an email and I'll announce them. I've only got about 6 code snippets I use all the time, but they're very useful to me... so I'm sure XAML snippets are going to be the same way.

I haven't decided what direction to go with the next post, so it'll be a surprise to me as well as you!

Keep on XAMLing, and


Stay in the 'Light!