[MUSIC]
>> Hello there and welcome.
My name is Dmitry Lyalin and
I'm a Program Manager on the .NET team.
My focus is how Reload technologies in XAML tools.
Today I'm here to talk to you about both in this video.
Let's jump in. What are we going to talk about today specifically?
We've got three areas that we're going to cover.
We're going to talk about features in
each area and how Visual Studio 2022
makes all of these things much easier to do as a developer.
First, we're going to talk about design experiences.
This is about things in your XAML designer.
Since this video is for XAML developers,
we're going to look at how XAML designer has evolved
to become a great tool for you to be productive.
We'll also look at the code editor as
well as we go out through different demos.
Then we'll look at diagnostic tooling and live editing.
We have a lot of powerful features in Visual Studio 2022.
Things that allow you to understand what's
going on with your XAML binding failures.
The ability to do UI development and
do everything from tweaks to major changes to your XAML.
Even edit code behind .NET Hot Reload
a new feature only found in Visual Studio 2022.
Finally, we'll take a slightly different pivot at
the end from the design side and show you
how our XAML life previous experience
makes it easier to design beautiful applications.
We're going to do that by focusing on
demos around these technology areas.
We're going to be looking at again,
XAML Designer and Code Editor,
XAML Binding Diagnostics,
XAML Hot Reload Live Preview and .NET Hot Reload.
With that, let's jump into the demo.
Here I have Visual Studio 2022 opened,
and I have a WPF app.
We're going to use the WPF app for all of my demos today.
Let's go and take a look what's new.
The first thing I want to talk to you is
about the design team experience.
As we said in the intro,
our designer has gotten much better.
We've got a lot of improvements in it.
We've looked at performance and
its ability to render the XAML that you're building.
To have really the best experience,
you do need one thing often,
which is data and your designer.
Because if there's no data,
your designer like I have here,
looks very, very empty. That's not just great.
You have an application you're building,
there's probably a bunch of content that goes
right here in the middle and if it's not there,
it's hard to visualize your app without running it.
Let's see how our design time date feature can make it better.
Here I already have my design-time data feature in action.
Over at the top of my app,
I have air quality.
The only reason I see this is because I have set
the magical d colon in property in my code editor.
Here my normal text property for this text block
is set to a binding and because it's set on binding,
it's not going to display anything unless I go through
the trouble of marking a view model.
But I no longer have to do that.
With our new design-time data,
you can mark any property in any control.
You can even mark controls by simply typing
d colon followed by what you
normally would type, in this case, text.
Here I am able to see
exactly what I want to see and if let's say I want to
test a much bigger title, I can do that.
I can simply type it in and I could really
see what impact that's having in my application.
But this is great and I'll be able to set a text block.
But it would be much better is to be able to actually view items.
Let's take a look at my items control.
I have items controls here and it has a data template,
so it definitely could show items,
but nothing is showing up.
Let's now bring in design-time data in a much bigger way.
Here I'm going to show you
some code snippet that I've
commented out just for the purpose of this demo.
We are going to command this back
in a second and show you what it does.
Here as you can see, I'm using
the d colon properties to once again, mark something.
The colon will only appear in the designer
when you build your app,
none of this will translate to your running application.
I want to make sure you feel comfortable with
using the colon for just design-time.
In this case, I'm saying colon items control
item source and I'm giving it
a fake array of entities which will create the visual.
Let's go ahead and see that magic in action.
I'm going to go ahead and I'm going to uncommand this code.
It's going to be very quick ride right away we see,
let's zoom in a little bit, we see
items appear in the item template.
Here I've marked the data.
Let's say I want to play with what the data says.
Let's say I want to see what happens at the bottom here.
Will this data overflow?
Is it wrapping correctly?
Let's go ahead and play with it.
Will this data overflow,
I'm going to add that, save it,
and then I'm going to hit this nifty
little "Refresh" button we've added.
By doing that, as you can see,
it's not wrapping properly.
It's not something I'm going to go fix right now,
but I just wanted to show you the power
of quickly being able to mark entities,
set the values and have something that went from
being a blank designer to a much more rich designer.
I can have joke, it's like Hot Reloading the designer.
Of course, it's not really Hot Reload,
but I hope you really see that this feature
is super powerful to make things easy.
Now that I have my entities being visualized here,
I'm going to go ahead and show you
one more feature that we really love.
Again, it's a new feature in the designer.
I'm going to alt-click into good a few times till I get in
my XAML to the text block that's
representing this inside of my data template.
Here I already know I have a bug.
My designer told me that
this value should always be bold and it's not bold.
With this, I want to show you a brand new feature called
XAML Designer Quick Actions.
With XAML Designer Quick Actions,
we show you common properties for
the control through a little light bulb that appears.
When you click the light bulb,
we expand and show you-all the common properties.
We give you visualizations for setting horizontal,
vertical, change sizes.
We know which properties people often
use on controls that we create,
so we're able to show it to you.
I'm going to have to open this up again because I just zoomed.
I'm going to open it up again
and set this bold property right here.
I'm going to hit "Bold" and look at that,
all the items been bold because this is a data template.
We're using the template three times
and I was able to use Quick Actions to really
quickly make a change without having to go through
this massive properties panel that we're all used to.
You can still use the property panels,
it hasn't gotten anywhere,
but we hope the Quick Actions on
all sorts of controls and as I click around,
you'll see that it even appears on my page as well.
You can change things at the grid level,
you can change things in the window level.
We know what the common properties are,
so we hope you definitely give this a try.
We're done with the very first demo.
Let's jump into the second demo.
The next set of demos is all about live
diagnostics and editing your code
while your application is running.
Let's go ahead and start our application with the debugger and
see how we can do that in Visual Studio 2022.
Here is my app, it's running and
right away I'm going to notice something that's bugging me.
My title is missing.
What's going on here? We saw title in the designer.
We know it's using binding to set the title and we
know we have designed time data that allowed
us to visualize it in the designer,
but now in the running app it's missing
so something is going on with the binding.
Let's go ahead and take a look at a great feature in
Visual Studio called XAML Binding Failures.
XAML Binding Failures is a relatively new experience that
we've added that works really great in
this end-to-end scenario that I'm about to show you.
Here I'm already making something that
used to be really hard much my easy,
which is seeing that,
yes, my binding really is
failing and I'm able to see that inside of this pain,
this pain is very powerful.
It would show you all the binding failures,
it would allow you to scroll through them.
It even has the ability to search binding failures,
like if there was more than one here,
if I typed into the search box,
it would filter down by
any of the columns so you can basically type anything.
It's a really powerful feature that lets you
see that a binding really did fail without
having to go into your output window
and go to the drudgery of having to
scroll through this output window
and try to find your binding failure.
This is just always painfully.
Yeah, there it is but it
would have been really painful for me to find.
We also have another great feature.
If using that .NET 5 or .NET 6 with WPF,
we're able to actually not only show you the binding failure,
but show you where it's happening.
I'm going to click on this button right here.
This button, I'm going to zoom in just to show you.
If it's visible next to your binding failure,
that means we have source navigation available.
I'm going to go ahead and click it, and my cursor position
will move right to the text block where the failure is happening.
That's the first feature I really wanted to show you
the fact that you can easily see your binding failures.
Now that we know where it's happening,
let's go ahead and fix the problem.
I'm going to go ahead and take a look at
this here it looks like a spelling error,
so I'm going to just use IntelliSense to fix it.
I'm going to click equals here on the path,
but I am not getting IntelliSense.
Let me show you a second feature I wanted to demo,
and this is our ability to bring IntelliSense for
your view models for your MVVM scenario right into Visual Studio.
This works both at design time and run-time.
Red runtime, so let's go ahead and implement the feature.
I'm going to scroll up to the window and there is
more than one ways to execute this quick action,
but I like it up here at
the window where we get a tooltip that says,
would you like to set, I'm going to zoom in just to show you,
set design time data contexts?
Yes, in this case, I do.
Let's go ahead and click that again and hit "Enter" on it.
Now I have a design time data context,
but don't worry, it works at runtime too.
I'm going to scroll back to where the error was.
I'm going to hit "Equals" one more time.
Now that I'm hitting ''Equals'' look
at that and getting IntelliSense.
I can see exactly what my commands are,
about my properties and collections are,
it makes it so much easier to fix this bug.
I'm going to go ahead and set the title properly.
Now I'm going to go back to my running
application and there is my title.
That worked out really great.
But we're on a roll here.
We're going to go and show you yet
one more amazing feature for you, XAML developers.
I'm going to switch back to Visual Studio and talk
about a scenario that happens very often to me.
I'm going to single-screen device,
in my laptop and I don't have multiple displays.
I have to keep switching between
my XAML Code Editor in Visual Studio and my app
or I have to dock my app in
some awkward way with
Visual Studio and it becomes really difficult.
We've added this new feature.
I'm going to hit "Control Q",
and I'm going to type in XAML Live Preview.
XAML Live Preview, which will appear shortly here
on the left and you can choose where to dock it,
of course, well, this is
a real-time view of your running application.
Let me explain what this is because some people are
not sure exactly how this differs from the XAML designer.
XAML designer is something that you can
use while your app isn't running,
but once your app is running,
Live Preview gives you the ability to see you're running app.
It's not quite a designer.
I can't click here to move things around,
but I see what changes I'm making to my application in real-time.
Let's go ahead and do a really simple example.
I'm going to go ahead and break this text property again.
I'm going to go in here, break the text property,
and now on the left you can see the app
instantly changed and my running app changes as well.
It's just mirroring the running applications.
You can't interact with it in the Live Preview experience.
But anything you see,
if it was animation or any change,
it will be instantly visible.
Let's put that back in.
Great. I now have my path.
I'm going to go ahead and hit the "Clear" button,
to clear my binding failures because I know I've resolved
all of them and my application is ready slightly better.
But now I'm noticing something else.
I'm not seeing any of the actual items inside of my app.
I know there's a view model.
I know I've coded it and I know it should show data,
but for some reason it's not showing the data.
Let's take a look at the items control.
Well, that's interesting.
My items control has no item source being set.
That could be the problem.
Let's go ahead and set the item source.
I'm going to type in item source
and I'm going to do the binding here.
Look at that. Because I had IntelliSense,
I was just able to tab right into the results,
and because I have Live Preview,
I can see that my running app has been updated to show the items.
Very powerful. Think about it.
You are able to get IntelliSense for your problems,
see the problems as you fix them in real time.
This combination of XAML binary diagnostic,
XAML Hot Reload technology,
and XAML Live Preview,
will hopefully make you very productive.
But looking at my application,
and let's zoom in a little bit.
Something is a bit wrong.
Los Angeles, Los Angeles.
I know I have better data than that.
So my data's wrong. That could be a problem.
Typically if you interchange your C# code at this point,
you will be stopping the debugger.
Who knows how long it would take you to
rebuild and restart your app?
We want to save you that time in many situations.
In this situation, I know we can.
Let's go ahead and take a look at our view model.
I'm going to go to my solution explorer,
and I'm going to go into my air quality service.
In here, let's see what's going on.
Well, that's embarrassing.
I have a to-do flag to have removed this code.
I'm going to remove this code,
obviously that's causing everything to break.
I'm going to make it go away.
But now that I did that I
need to apply it to my running application.
This is where we're going to demo the next feature,
which is .NET Hot Reload.
Sometimes people call it C# Hot Reload.
That's fine. It's basically Hot Reload for your code.
It works for C# and VB in many situations,
and it's powered by
a new button we have up here called Hot Reload button.
Let's zoom in and take a look at it for a second.
This new button sits in
your toolbar between your Stop button and your Continue button,
and clicking on it will try to apply the code changes.
Now, there are situations where applying
code changes will be too complicated for us to do at runtime,
and we'll give you a message, we'll make it very
clear to you that we couldn't do it.
But in a lot of cases you're going to be able to
apply it to your running up.
Not only that, in many cases,
you'll be able to do this even without the debugger.
Yes, I know I'm in the debugger right now,
and the debugger is great because we get
things like XAML Hot Reload, XAML Live Preview.
But if you just control a fiving,
starting your app with that debugger,
Hot Reload will still be available to you as a WPF developer.
It's not available for every app type yet,
but if you're doing WPF,
it's definitely available to you.
But in this case everything is wired up and ready.
Now I'm going to show you one more thing. Just give you a tip.
Now you can always press this button,
and this will Hot Reload.
But sometimes you just want it to Hot Reload on save.
It's a pattern that I actually prefer.
Let's go ahead and check this box here.
I'm going to click back into the button and
checkoff Hot Reload on file save.
By doing that, now, this setting is on.
This is an actual setting.
We're making it really accessible to you.
So you can turn it on and off as you need to.
Sometime on save is good, sometimes it's not,
so you can opt in really easily and opt out really easy out of it.
I've opted in, I've made my code change,
I'm going to hit the the magic now,
control save, and it's done,
because it actually worked.
We didn't receive any messages from Visual Studio.
That means my app should be patched.
Now I have to switch back to my running app.
This is the onetime which I do have
to interact with my application.
We don't have any way to know
which code we should re-execute for you.
We can patch the code,
but you still need to do some action in your app to re-execute it.
That's a really important understanding
of the feature for .NET Hot Reload.
You've got to re-execute code you've applied.
In this case, it works out great. I have a Refresh button.
I'm going to hit the "Refresh" button.
Look at that. It worked.
All the right values have been set.
Now, what's important to note here is
that this feature didn't require breakpoint.
It applied it to your running application.
You could have made much more
significant changes than what I showed you.
But for the demo purposes,
I hope it gets the idea
across to you as you're watching out there.
We've fixed quite a few problems.
We've made the app look better before we even ran it.
We've fixed problems in
the look and feel after we run the application,
and we fixed the code behind.
That's pretty cool, I think.
Let's now switch pivots one more time.
This is the last set of demos that I'm going to show you.
We're going to now think like a designer.
Let's go ahead and go back to Visual Studio.
Live Preview.
It's something that I've shown you very briefly.
I've shown the fact that you can zoom in and out of your app.
You have the zoom button here,
and you can go pretty deep on the zooming if you had to,
and you can see your app as things are changing.
But it actually has a bunch of
great capabilities that I did not show off.
Let's talk about which capabilities you have.
There's a bunch of buttons in the top left here,
and let's start off by element selection.
Element selection allows you to hover over elements and get
a nice little preview just like you would in
F12 tools in the web scenarios of what the margins are,
render sizes, fonts, and
backgrounds involved within the item that you're showing.
So it's a powerful feature that I haven't shown before today.
But now you can see that you can see
all sorts of information from the window,
from the TextBlock, etc.,
without ever having to go and look for the XAML.
It's basically interpreting what
the runtime state of these values are.
So it's a really powerful feature.
Another amazing feature is rulers.
Rulers up here,
allow you to add both the vertical and
horizontal ruler to your application.
So this is the rulers. Let's go ahead and do that.
I'm going to add a vertical and horizontal just for fun,
and I'm going to make my Live Preview
experience slightly bigger here.
With that, I am going to set my rulers
up to some values that I know are important to me.
First of all, my designers tell me that
my alignment from the left
should be about 55 for this first item,
and if I make that right,
all the rest of the items will render correctly.
I'm going to go ahead and just align my rulers to it here.
I'm going to zoom in. I'm going
to move so I can see exactly the change.
This doesn't look quite right.
It's a 55.2. That's fine.
It's close enough. It doesn't have to be perfect.
Let's go back to the XAML file,
and take a look at what's going on there.
Now I'm going to scroll down to where we
are creating the visual look and feel.
I'm going to make this slightly bigger,
so that I get on my scroll bar back.
Let's scroll over here to the right.
Here's my AQI value.
Now I know I'm working with the right thing.
As you can see, I see my running app,
and if I start to play with the margins,
which are probably the thing that's wrong, well,
that should show me in real-time an improvement.
I'm going to go ahead and set
this margin to be, and by margin.
I'm just going to zoom in. Literally I'm just changing
the margin to see what happens on the left.
I'm going to make this five from the left.
That moved a little bit.
Let's make it six. Moved a bit more.
Seven. I'm going to make it slightly more. Let's make it eight.
Oh, eight looks perfect. I mean, again,
it's not a 100 percent perfect,
but I'm sure nobody will notice.
I've got a great improvement here in my app using these rulers.
The rulers might something's blend in.
So I have things like I can change the color of the rulers.
If I want the rules to be red or yellow,
I can go ahead and do that.
So you can always see the rulers and make quick changes to them.
You can remove a ruler.
I can click on this and hit the Delete button.
By selecting the ruler,
with a mouse click and then hitting "Delete" it removes it.
There's also a little x that appears here.
You can click on that as well.
Now I got rulers out of the way.
Let's zoom out and take a look.
That looks great, actually.
AQI value is slightly more to the right,
exactly how my designer wanted it to be.
Once again, I was able to use
Live Preview and XAML Hot Hot Reload together,
to make all this possible.
Thank you so much for watching.
I hope you enjoyed all the demos we just saw.
Here we have some resources.
These are links to documentation
for basically all the features that I've shown you.
So definitely check him out if you're interested.
We really hope you try Visual Studio 2022,
that will help you make great XAML applications.
Thanks so much for watching.