# 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:

*   **Shortcut**: region
*   **Description**: Surrounds XAML with a region
*   **Mnemonic**: 2

7.  Make sure the **Reformat** and **Surrounding** checkbox and radio button is selected.
8.  Click on the “link” text next to availability and check the “**In File matching: \*.\***” checkbox.
9.  Set the **File Mask** to \*.xaml
10.  Lastly, check the “**Show in context action**” checkbox and save the template.

The final result should look like the following:

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1664279719170/n69fFSysS.png align="left")

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

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1664279736261/ipzdNeXDs.png align="left")

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

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1664279757119/q7uZUoyoo.png align="left")

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