Code snippets are a hidden gem in Visual Studio that most of us do not pay much attention to. Utilizing them correctly can increase productivity when we have a lot to code. In Visual Studio, code snippets are available for multiple programming languages e.g. C#, F#, XML, HTML, CSS, Python, etc. They are extremely useful when we have a bunch of boiler plate code for our properties, constructors, bindable properties, etc.

Code snippets can be a huge topic, but in this post, I will list some of the XAML and C# code snippets useful when developing Xamarin.Forms mobile applications.

In this post,

• Snippets
• Creating Code Snippets
• C# Examples
• XAML Examples
• Export Templates

---

Note: Snippets in this post are created in Visual Studio for Mac, but they should work in Visual Studio on Windows as well.

Snippets

Code snippet templates are XML files that hold snippet definition,

These definitions can be imported and exported (see end of this blog) to be reused and distributed.

Creating Code Snippets

To create a code snippet, go to Visual Studio > Preferences > Code Snippets,

You will find a lot of built-in snippets that you may or may not have used yet. It is a good idea to look at some of the existing snippets to find out how they are setup. A snippet has several parts that require setup,

• Shortcut: the keyword to type when requesting this snippet
• Group: the language this snippet is used in. You can have snippets a number of supported languages e.g. C#, Html, XML, Python, Razor, CSS, F#, etc.
• Description: short description of what this snippet will generate
• Mime: to support the language in the group
• Is expandable template: Will expand from the point of insertion (cursor).
• Is surround with template: If this template will surround the selected code/text.
• Template Text: code snippet goes in this area

and a property pane for items in the code snippet. There are several code snippet functions available to get some run-time information for the items in the snippet.

C# Examples

Here is a list of code snippets that can be useful if setup correctly.

1. Constructors

---

If you have a base view model that expects something in the constructor, you will have to type a lot for each derived base view model. You can get a snippet to fill most of the code for you,

public SomeClass(IServiceA serviceA, IServiceB serviceB) {}

or pass a parameter to base,

public SomeClass(IServiceA serviceA,  IServiceB serviceB) : base (serviceB) {}

or make it flexible with $service$ variable,

public SomeClass(I$service$ $service$) : base ($service$) {}

Template:

Shortcut: sctor
Group: C#
Description: Constructor with Services Template
Mime: text/x-csharp

$modifier$$classname$ (I$service$ $service$) : base($service$)
{
     $end$
}

$modifier$ – use GetConstructorModifier() function to get the modifier for the class.
$classname$ – use GetCurrentClassName() function to get the name of the class.
$service$ – Name of the service to be injected.

2. Bindable Properties

---

One of the my most used snippet is the bindable properties.

Template:

 public static BindableProperty $some$Property = BindableProperty.Create(nameof($some$), typeof($type$), typeof($classname$));
 public $type$ $some$
 {
  get { return ($type$) GetValue($some$Property); }
  set { SetValue($some$Property, value); }
 }

$some$ – name of the property.
$type$ – type of the property.
$classname$ – use GetCurrentClassName() to get the name of the class.

Usage:

3. INotifyPropertyChanged

---

When using INotifyPropertyChanged,

private $type$ $fieldName$;
public $type$ $propertyName$
{
    get { return $fieldName$; }
    set 
    { 
        $fieldName$ = value;
        OnPropertyChanged(nameof($propertyName)); 
    }
}$end$

$type$ – type of the property.
$fieldName$ – backing field name.
$propertyName$ – Property name.

4. Prism.Forms SetProperty()

---

Property

 private $type$ $fieldName$;
 public $type$ $propertyName$
 {
     get { return $fieldName$; }
     set { SetProperty(ref $fieldName$, value); }
 }$end$

$type$ – type of the property.
$fieldName$ – backing field name.
$propertyName$ – Property name.

XAML Examples

1. Grid

---

Setting up a new Grid with RowDefinitions and ColumnDefinitions,

Template: Shortcut: grid
Group: XML
Description: Grid Template
Mime: application/xml
Is expandable template: True
Is surround with template: True

 <Grid>
     <Grid.RowDefinitions>
         <RowDefinition Height="*"/>
         <RowDefinition Height="*"/>
     </Grid.RowDefinitions>
     <Grid.ColumnDefinitions>
         <ColumnDefinition Width="*"/>
         <ColumnDefinition Width="*"/>
     </Grid.ColumnDefinitions>
     $selected$$end$
 </Grid>

$selected$ – is for the code you can select and surround by this snippet.
$end$ – is where the cursor stops after snippet is inserted.

Usage:

Template:

1.1. RowDefinitions: grd (Grid Row Definitions Template)

 <Grid.RowDefinitions>
     <RowDefinition Height="Auto"/>
     <RowDefinition Height="Auto"/>
 </Grid.RowDefinitions>

1.2. ColumnDefinitions: gcd (Grid Column Definitions Template)

 <Grid.ColumnDefinitions>
   <ColumnDefinition Width="*"/>
   <ColumnDefinition Width="*"/>
 </Grid.ColumnDefinitions>

Usage:

2. StackLayout

---

If you want to wrap something inside a StackLayout (or any container for that matter),

Template: Shortcut: stl
Group: XML
Description: StackLayout Template
Mime: application/xml
Is expandable template: True
Is surround with template: True

 <StackLayout>
     $selected$$end$
 </StackLayout>

$selected$ – is for the code you can select and surround by this snippet.
$end$ – is where the cursor stops after snippet is inserted.

Usage:

3. Resource Dictionary and Styles

---

This is also one of my most used snippet, you can also add converters resources and individual Style templates.

Template:

  <ContentPage.Resources>
     <ResourceDictionary>
         <Style TargetType="$type$">
             <Setter Property="$pName$" Value="$pValue$"/>
         </Style>
     </ResourceDictionary>
 </ContentPage.Resources>

Usage:

4. Toolbar

---

Template

 <ContentPage.ToolbarItems>
     <ToolbarItem Name="$name$" Icon="$icon$" Text="$text$" Command="On$name$Tapped" />$end$
 </ContentPage.ToolbarItems>

Usage:

5. Custom controls

---

In my previous post, Card View For Xamarin.Forms Using Custom Layouts, I have a custom layout (ShadedCard) that I am using in all my views. I can have a template to set up the card,

Template:

Shortcut: scard
Group: XML
Description: Shaded Card Template
Mime: application/xml

 <controls:ShadedCard Icon="$icon$.png" Title="$title$">
     <controls:ShadedCard.CardContent>
         <!-- Content View -->
     $selected$$end$
     </controls:ShadedCard.CardContent>
     <controls:ShadedCard.ActionView>
         <!-- Action View -->
     </controls:ShadedCard.ActionView>
 </controls:ShadedCard>

$icon$ – Icon property’s default value.
$title$ – Title property’s default value.
$selected$ – is for the code you can select and surround by this snippet.
$end$ – is where the cursor stops after snippet is inserted.

Usage:

Note: These snippets are defined at the IDE level, which means you can use them cross projects. Therefore, be mindful of creating any project specific templates (like the custom control example above.)

Export Templates

To re-use or distribute these templates on other Visual Studio IDE instance or another machine, you can simply get a copy of these snippet files from these locations,

On a Mac,

~Library/VisualStudio/<version>/Snippets

On a Windows running Visual Studio 2017,

...\Visual Studio 2017\Code Snippets\<language>

Download Templates

Here are the snippets shown in this post that you can download for VS 4 Mac,

Let us know in the comments what is your favorite snippet that you want to add to this list. Enjoy!

Icons by icons8.com