Debugging The Hottest Release Of Visual Studio With Code Demos

Introduction

Alright, Let's see what the hype here is. 

Microsoft released Visual Studio 2022 on 8th November 2021. Could have just been called "Visual Studio 2021" but what's in the name anyway. Jokes apart, this version of Visual Studio is packed with some spectacular features. 

To begin with, I am very impressed with its 64-bit architecture. Finally, it's here. Now that Visual Studio has been rearchitected to be 64 bit natively it will give the performance boost and the efficient use of garbage collection causing less memory exceptions, not that GC wasn't efficient already, it was no doubt but now thanks to the extra room in 64 bit. 

Enough talk, Let's go ahead and code. To explore these new features I am using WPF application, but it's irrelevant to which framework you are using. I am using WPF because "My Article My rules", Lol.  

So to start with go ahead and search for "WPF'', Visual studio will first give you the option to create a WPF application in ".Net" (as shown in image 1), but there is still support for ".Net Framework" applications (of course). If you scroll down the list you would get an option to create an app in ".Net Framework" (See image 2)

Debugging The Hottest Release Of Visual Studio With Code Demos
Image 1

Debugging The Hottest Release Of Visual Studio With Code Demos
Image 2

Next screen will let you select the .Net version.


Image 3

New Redirecting/ Navigation features

Once you are all set, you will notice there are a lot of tweaks in dark themes which are delightful to the eyes. Moving on. Right on the bat, I noticed small icons of the left bar. To understand their purpose I have created a small hierarchy of classes and interfaces as follows.  


Chart 1

What do we have here? 

Well there is class IPhone which is implementing interface IModel which is inheriting interface iPhoneXR and iPhone13.  ( IPhone -> IModel -> iPhoneXR, iPhone13 )

So when I clicked on the (I) button on the left bar, I saw this (image 4), and I was like, Damn where was this feature all along. Since class IPhone is implementing all 3 interfaces (again refer chart 1). It's showing "Implemented interfaces"


Image 4

Now when I click on an interface IModel (image 5), it's showing us both Implementing types which is IPhone in this example, and Inherited interfaces. Just Wow. Imagine these features coming handy in large scale applications.


Image 5


Image 6: iPhone13 has 2 implementing types interface IModel and class IPhone.

That's not it, we can use these features on properties and methods as well. We have one property in both iPhoneXR and iPhone13 interfaces which is implemented by class IPhone. Have a look at code snippet in Listing 1.

internal interface iPhoneXR {
    public string ModelName {
        get;
        set;
    }
    void SetModel();
}
internal interface iPhone13 {
    public string ModelName {
        get;
        set;
    }
    void SetModel();
}
internal class IPhone: IModel {
    public string ModelName {
        get =>
            throw new NotImplementedException();
        set =>
            throw new NotImplementedException();
    }
    public void SetModel() {
        throw new NotImplementedException();
    }
}

Listing 1

So if I click on a ( I ) button on a property "ModelName" on an interface iPhone13, it shows the class that is implementing this property. Shown in image 6.


Image 6


Image 7: class IPhone is implementing abstract method SetModel of interface iPhone 13

And what if we need to know what are the interfaces our concrete classes are referring to. See image 8 and 9, implementing the SetModel method and ModelName property in a class IPhone.


Image 8: The Showing method SetModel is derived from interfaces iPhoneXR and iPhone13.

Debugging The Hottest Release Of Visual Studio With Code Demos
Image 9: The Showing property ModelName is derived from interfaces iPhoneXR and iPhone13.

The most automated feature: The Intellicode

Bringing AI into action, type less code more (that's how Microsoft is advertising this feature, what it means for the developer community is copy less and because we have copied for you).

You can call it the advanced version of intellisense. The AI predicts the code for you and suggests possible code.

But how does it know? It is based on a machine learning model and the model is trained on public code. It also learns from your code. It does not read your logic, it just learns your style of writing a code and the great news about this is the whole AI runs locally. So you can leave that airplane mode on to avoid your boss's call.

This is how it works: AI will suggest you some code, you just have to press tab to accept the code else you can ignore.

Let's see this in action.

Example 1

Intellicode suggests the name of the property in image 10, Based on the one property I already have in the same class.

Debugging The Hottest Release Of Visual Studio With Code Demos
Image 10: Suggested Name: ModelVersion, suggested type: string based on existing property.

Example 2

Intellicode suggests the method's body based on its name in image 11.


Image 11: Name of the method is Multiply and it knows it has 2 parameters, So Intellicode is suggesting multiplication logic for these 2 parameters as a body of the method.

Example 3

Default values for variables based on their type. In image 12 Intellicode is suggesting value for type double.


Image 12

Example 4

Intellicode also suggests names of the classes, interfaces, files, etc. In the below example in image 13 Intellicode is suggesting the name of the class based on the existing class in the same file. It learns the pattern of writing code and then suggests the most relevant code, with the name it is also suggesting the proper syntax of a class.


Image 13: Intellicode is suggesting the name IPhone2 and also inheriting the interface IModel as it learns this behaviour from the class IPhone

XAML Live Preview

To see the live changes in WPF application, we usually run the application and make changes into XAML then see if changes have been applied to the app or not, If you have 2 monitors then you can have visual studio running on one monitor and app running in second monitor and see the changes as you type them. See the setup of my machine shown in image 14.

Debugging The Hottest Release Of Visual Studio With Code Demos
Image 14: Left monitor is the one with dark theme visual studio running and right monitor is the white background where application is running. 

This feature comes handy when you have a single monitor because with a single monitor there will be a lot of switching back and forth to the visual studio and the running application to see the changes. but with Visual Studio's XAML Live Preview, you don't need to jump back and forth between running applications and visual studio.

This tool will display your running application in a separate window and split the screen.

First run the application and search for XAML live preview in the search box as shown in image 15.

Debugging The Hottest Release Of Visual Studio With Code Demos
Image 15

Once you have selected this option, visual studio will open a running application in the second window as shown in image 16.

Debugging The Hottest Release Of Visual Studio With Code Demos

Image 16

Now let me change the values of all the labels to “replaced labels” and the second window will reflect the changes on the fly as shown in image 17.

Debugging The Hottest Release Of Visual Studio With Code Demos

Image 17


The hottest feature: Hot reload

We already know how to reflect XAML or Blazor changes on the fly. Let's talk about C#. Yeah no kidding. This feature works on C# and C++. In the following example shown in image 18, we have TextBox, UserName and a Refresh button. In listing 2, we have a Refresh() method which sets the value of UserName to "Microsoft User" on a Refresh button's click.

Note: This is WPF app and Listing 2 is ViewModel for MainWindow.

Image 18

using Prism.Commands;
using Prism.Mvvm;
namespace VS2022 {
    class MainWindowViewModel: BindableBase {
        #region Properties
        private string _userName;
        public string UserName {
            get {
                return _userName;
            }
            set {
                SetProperty(ref _userName, value);
            }
        }
        public DelegateCommand RefreshButtonClicked {
            get;
            set;
        }
        #endregion
        #region Constructor
        public MainWindowViewModel() {
            RefreshButtonClicked = new DelegateCommand(Refresh);
        }
        #endregion
        private void Refresh() {
            UserName = "Microsoft User";
        }
    }
}

Listing 2

Now if I add one more method say, ChangeNameToHotReload() and call it inside a Refresh method while the application is running, The compiler will give me a warning on a dialog box as shown in image 19. Reason being that newly added code needs to be recompiled.

Image 19

Now with Hot Reload, I can do this without any issue. Make code changes (Highlighted in image 20) and then click on the Hot Reload button again highlighted in image 20, and hurray you got your latest code change reflecting on the UI. I must say this is the best use of JIT I have seen in ages. 

Debugging The Hottest Release Of Visual Studio With Code Demos

Image 20

Following listing 3 has a newly added method.

private void Refresh() {
    UserName = "Microsoft User";
    ChangeNameToHotReload();
}
private void ChangeNameToHotReload() {
    UserName = "Hot Reload";
}

Listing 3

And at last, image 21 showing changes being applied on the fly, you'd notice that UserName has been changed to "Hot Reload". I didn't even have to stop the solution, recompile and run it again to see the code changes. Beautiful.

Image 20

There are more interesting features for WPF which I will cover in the next article since this article is getting longer than necessary. Before I summarize, let me give a shout out to a few great articles on Visual Studio 2022.

First one by Mahesh Chand: What Is New In Visual Studio 2022

Second by Miguel Teheran: Visual Studio 2019 Vs Visual Studio 2022

Watch Microsoft's lauch event here: Visual Studio 2022 is now available

Summary

This version is packed with awesome features, No doubt. Some of those I tried to cover in this article were 64-bit architecture, New navigations, Intellicode and Hot reload. These features are going to add a lot of value, especially for large scale applications. 

Microsoft also promised that they have increased the performance of some tools we often use such as Find, FindAll, FindAndReplace. 3 times performance boost to be exact. Well, this sounds all great. I would highly recommend upgrading Visual studio to 2022 so you can enjoy .Net 6, The potential is enormous. 

With that being said, I hope you enjoyed this article and see you in the next one. Till then keep coding. 

Connect with me if you have any doubt or just wants to know me 

Linkedin | Github


Similar Articles