our

Latest Blogs

How to generate Code from XAML in Visual studio?

iFour Team -July 05, 2021

Listening is fun too.

Straighten your back and cherish with coffee - PLAY !

  •  
  •  
  •  
 How to generate Code from XAML in Visual studio?

Visual studio has been crushing with new feature refactoring, IntelliSense, and intelliCode. The release of visual studio 2019 v16.9 comes with code generation from XAML. Now, we have a visual studio that will automatically create properties and commands directly from XAML. One thing XAML developers have always been hoping for is deeper connectivity between XAML and the View model, this feature will provide deeper connectivity between the XAML and the View model. In this blog, we will see how to use the code generation feature for Xamrin.Forms, WPF and UWP. First of all let's understand what is code generation, in computing terms, Code Generation is a process in which the compiler's code generator converts some source code to machine code. Using code generation we are able to generate the skeleton of the application from simple models and generate the entire application from high-level DSLs. The main reason to use code generation is it provides us productivity, simplification, Portability, and Consistency.

Visual studio has been crushing with new feature refactoring, IntelliSense, and intelliCode. The release of visual studio 2019 v16.9 comes with code generation from XAML. Now, we have a visual studio that will automatically create properties and commands directly from XAML. One thing XAML developers have always been hoping for is deeper connectivity between XAML and the View model, this feature will provide deeper connectivity between the XAML and the View model. In this blog, we will see how to use the code generation feature for Xamrin.Forms, WPF and UWP. First of all let's understand what is code generation, in computing terms, Code Generation is a process in which the compiler's code generator converts some source code to machine code. Using code generation we are able to generate the skeleton of the application from simple models and generate the entire application from high-level DSLs. The main reason to use code generation is it provides us productivity, simplification, Portability, and Consistency.

 
public class BaseViewModel : INotifyPropertyChanged 
{ 
public event PropertyChangedEventHandler PropertyChanged; 
protected virtual void OnPropertyChanged([CallerMemberName]string propertyName
= null ) 
{ 
PropertyChanged?.Invoke( this, 
new PropertyChangedEventArgs( ( propertyName) ) ); 
} 
protected bool SetProperty(ref T storage,
T value, [CallerMemberName]string propertyName = null) 
{ 
if ( EqualityComparer.Default.Equals(storage, value) ) 
{ 
return false ; 
} 
storage = value; 
OnPropertyChanged( propertyName ) ; 
return true; 
} 
} 
			

Now create a control with binding like this:

 

			

After adding this code, we can see little dots under Text binding and bulb. Light bulb suggests assigning X:DataType in Xamarin.Forms application and in WPF or UWP it will suggest d:DataContext. When we will select the option, it will automatically add this code.

 
xmlns:app1 = "clr-namespace:App1"
x:DataType = "app1:MyViewModel"
			

X:DataType is compiled time-binding. This is an awesome feature of Xamarin.Forms, it makes bindings and application faster. After doing this the dots are still over there and a new light bulb shows to create a property called Text. This is recommending to add the property and create a set of property methods to invoke PropertyChanged. At that point we probably want to refactor the code and create BaseViewModel so that we can put this method and then in the future, ViewModel will not create the code, it will just add the property. If we are using MVVM Helpers we can use this code as a base:

 
			public class ViewModelBase : BaseViewModel 
{ 
public bool SetProperty(ref T field, T newValue, [CallerMemberName] string propertyName = null ) => SetProperty(ref field, newValue, propertyName, null, null ) ;
}
			

Like this, we can add other controls with binding and it will generate tight code. Now we want to add button control and command for it then this feature also generates code for commands in Xamarin.Forms but for WPF or UWP we cannot generate code. The reason is the core framework does not have an implementation of ICommand but, if a framework or library such as MVVM Helper is used then it will recommend the code. We will notice that code for Xamarin.Forms and WPF/ UWP are different. It is happening because of a different version of c#. we can adjust it by adding to our csporj. Once we will upgrade it will show the updated code this:

 
public ICommand ClickCommand
{ 
Get
{ 
if (clickCommand == null)
{
clickCommand = new Command (Click) ;
} 
return clickCommand ; 
}
}
private void Click() 
{ 
}
			

One Stop Solution for Xamarin Mobile App Development ? Your Search ends here.

To this tight code:

 
private ICommand clickCommand; 
public ICommand ClickCommand => clickCommand ??= new Command(Click ); 
private void Click() 
{
} 
				

This feature generates neat code because it will not only generate commands and methods but it is also put the correct name-space to use the Xamarin.Forms Command.

We have seen visual studio generates code in the View Model class but what about Models? The models that are bounded to ItemSource in ListView or CollectionView. This feature will also generate code for Models as well. All we need to do is set X:DataType on DataTemplate.


 
 



 

				

After adding this code light bulb will show on any control inside DataTemplate. This is it with the new version of visual studio 2019 v16.9 we can create models and view models with the use of XAML!

Conclusion

The new version of the visual studio 2019 v16.9 comes along with a new feature called code generation from XAML. This feature allows us to create code from XAML. In this blog, we have seen how to generate code from the XAML file to the Models and View Models class. We have generated code for control as well as a command for button control with the use of this feature. This is an awesome feature of visual studio that will allow us to generate code from the XAML file. There are more features are available but for now, this feature is available on the visual studio on windows, but Visual studio for mac uses the same engine so maybe it will also available for VSM ( Visual studio for Mac ) soon.

Work with us

Well do everything we can to make our next best project!

Our Insights

Check out our most recent blogs

An in-depth guide on Angular Dependency Providers
An in-depth guide on Angular Dependency Providers

What is Angular? Angular is a frontend development framework used for building single-page client applications using HTML and Typescript. It is written in Typescript. What...

A simple guide to Build Angular Reactive Templates with Ngif and Async Pipe
A simple guide to Build Angular Reactive Templates with Ngif and Async Pipe

Angular Templates seamlessly help to expedite the development process with flawless assistance of components and other specific elements. These are dynamic and renders according...

A simple guide on AOT Compilation in Angular
A simple guide on AOT Compilation in Angular

What is a Compiler? A compiler is nothing but a part of code that converts one programming language to another. If we talk about some simple programming languages like C, C++,...

Our Partners

Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo

Work With Us

Well do everything we can to make our next best project!