ReSharper Tip – Creating a “Surround With” template

I’m not going to deny it. I’m a fan of ReSharper. One of it’s many feature is the ability to create your own code templates.

Whilst busy with a Xamarin Forms project. I needed a quick way to surround blocks of XAML code with a region.

Yes, you can add regions to XAML code. To give you an idea of what I mean, here is a small example of a region in XAML:

So, let’s quickly go through the steps of creating a ReSharper template to surround any piece of XAML code with the correct markup for a region.

  1. In Visual Studio, select ReSharper > Tools > Templates Explorer…
  2. Click on the Surround Templates Tab.
  3. Click the New Template toolbar button.
  4. Add the following code to the template editor window:

  5. Set the following properties for the template:

  6. Shortcut: region

  7. Description: Surrounds XAML with a region
  8. Mnemonic: 2

  9. Make sure the Reformat and Surrounding checkbox and radio button is selected.

  10. Click on the “link” text next to availability and check the “In File matching: *.*” checkbox.
  11. Set the File Mask to *.xaml
  12. Lastly, check the “Show in context action” checkbox and save the template.

The final result should look like the following:

image.png

Now, when you select a piece of XAML code, you should see region inside the ReSharper “Surround with” context menu:

image.png

The result will be the code nicely wrapped inside a region, which can be collapsed to help with readability:

image.png

Thank you for reading. Until next time, keep coding!