Original subtitles

[Music]

hello there and welcome my name is

dimitrial island and i'm a program

manager on the.net team my focus is how

to reload technologies and xaml tools

and today i'm here to talk to you about

both in this video so let's jump in

so what are we going to talk about today

specifically we've got three areas that

we're going to cover and 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

so 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 for

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 xml binding

failures the ability to do ui

development and do everything from

tweaks to major changes to your xaml and

even edit codebehind.net hot reload a

new feature only found in visual studio

2022 and finally we'll take a slightly

different pivot at the end from the

design side and show you how our xaml

live preview 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 code editor xaml binding

diagnostics zamaha reload live preview

and dotnet high reload so with that

let's jump into the demo

so here i have visual studio 2022 open

and i have a wpf app so we're going to

use wpf app for all of my demos today so

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 and to

have really the best experience you do

need one thing often which is data in

your designer because if there's no data

your designer like i have here looks

very very empty and that's just not

great right 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

so let's see how our design time data

feature can make that better

so here i already have my design time

data feature in action

over at the top of my app i have air

quality and the only reason i see this

is because i have set the magical d

colon property in my in my code editor

so here my normal text property for this

text block is set to a binding and

because it sets on binding it's not

going to display anything unless i go

for the trouble of mocking a viewmodel

but i no longer have to do that with our

new design time data you can mock any

property in any control you can even

mock controls by simply typing d colon

followed by what you normally would type

in this case text so here i am able to

see exactly what i want to see and if

let's say i want to test a much

much bigger title i can do that i can

simply type it in and i can already see

what impact is having in my application

but this is great and all being able to

set a text block

but would be much better is to be able

to actually view items so let's take a

look at my items control so i have an

item controls here and it has a data

template so it definitely could show

items but nothing is showing up so let's

now bring in design time data in a much

bigger way so here i'm going to show you

some a code snippet that i've commented

out just for the purposes of this demo

so we're going to comment this in this

back in in a second and show you what it

does so here as you can see i'm using

the d colon property to once again mock

something d colon will only appear in

the designer when you build your app

none of this will translate to your

running application so i want to make

sure you feel comfortable with using d

colon for just design time and in this

case i'm saying d 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 uncomment this code and it's

going to be very quick right right away

we see

let's zoom in a little bit we see items

up here in the item template and here

i've mocked the data so 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 so let's 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 and 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 just like quickly

being able to mock entities set the

values and have something that went from

being a blank designer to a much more

rich designer i kind of joke it's like

hot reloading the designer of course

it's not really hard reload but i hope

you really see that this feature is

super powerful to make things easy so

now that i have my my entities being

listed here uh sorry being visualized

here i'm gonna go ahead and show you one

more feature that we really love and

again it's a new feature in the designer

i'm gonna 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 now here i already know

i have a bug my designer told me that

this value should always be bold and

it's not bold and with this i want to

show you a brand new feature called xaml

quick actions 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 and we know which properties

people often use on controls that you

know we create so we're able to show it

to you right so i'm going to have to

open this up again because i just zoomed

so i'm going to open it up again and set

this bold property right here so i'm

going to hit bold and look at that all

that all the items when bold because

this is a data template right it's

reusing the template three times and i

was able to use quick actions to really

quickly make a change without having to

go to this massive properties panel that

we're all used to right you can still

use the property panels it hasn't gone

anywhere but we hope the quick actions

on all sorts of controls and as they

click around you'll see that it appears

on even on my here i'll zoom scroll up a

little bit even appears on my page as

well right so you can change things at

the grid level you can change things at

the window level we know what the common

properties are so we hope you definitely

give this a try

all right so we're done with the very

first demo let's jump into the second

demo now the next set of demos is all

about live diagnostics and editing your

code while your application is running

so let's go ahead and start our

application with the debugger and see

how we can do that in visual studio 2022

all right so here's 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 a

title in the designer we know it's using

binding to set the title and we know we

have design temp 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 new experience relatively

new experience that we've added that

works really great in this end-to-end

scenario that i'm about to show you so

here i'm already making something that

used to be really hard much much easier

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 any of the columns so

you can basically type anything so 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 through the drudgery of

having to scroll through this output

window and try to find your binding

failure i mean this is just always

painful yeah there it is right but like

it would have been really painful for me

to find now we also have another great

feature if you're using.5

or net 6 with wpf we're able to actually

not only just show you the binding

failure but show you where it's

happening so 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 so 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 so 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 so

i'm going to go ahead and take a look at

this here that 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'm

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 and this works both at design

time and runtime we're at runtime so

let's go ahead and implement the feature

i'm going to scroll up to the window

and there's more than one ways to 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

and i'm going to zoom in just to show

you set design time data context so yes

in this case i do so let's go ahead and

click that again

and hit enter on it so now i have a

design time data context so don't worry

it works it works at runtime too and i'm

going to scroll back to where the error

was and i'm going to hit equals one more

time

and now that i'm hitting equals look at

that i'm getting intellisense i can see

exactly what my commands are what 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 and now i'm going to go back to

my running application and there's my

title all right so 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 in a

single screen device on my laptop and i

just don't have multiple displays i have

to keep switching between my xaml code

editor and visual studio and my app or i

have to dock my app in some awkward way

with visual studio and just it becomes

really difficult so we've added this new

feature i'm going to hit control q and

i'm going to type in xaml live preview

so 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 your running app so it's not quite a

designer i can't like click here to move

things around but i see what changes i'm

making to my application in real time so

let's go ahead and just do a really

simple example i'm going to go ahead and

break this text property again so 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 changed as

well right it's just mirroring the

running application so you can't

interact with it in the live preview

experience but anything you see if it

was an animation or any change it'll be

instantly visible so 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 already 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 okay 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

and 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 very powerful think about it you

were able to get intellisense for your

problems see the problems as you fix

them in real time so this combination of

xaml binary diagnostic xaml heart reload

technology and xaml live preview will

hopefully make you very very productive

but looking at my application and let's

let's zoom in a little bit

something is is a bit wrong los angeles

los angeles okay i know i have better

data than that so my data is wrong now

okay that could be a problem right

typically if you need to change your c

sharp code at this point you would be

stopping the debugger and who knows how

long it would take you to rebuild and

restart your app and we want to save you

that time in many situations and 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

and in here let's see what's going on

well that's embarrassing i have a to-do

flag to have removed this code all right

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 and this is where

we're going to demo the next feature

which is dot net hot reload sometimes

you can you people call it c-sharp hot

wheels that's fine

it's basically hot reload for your code

right it works for c-sharp and vb in

many situations and it's powered by a

new button we have up here called the

hot reload button let's zoom in and take

a look at it for a second this new

button sits next to new toolbar between

like 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 app

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 heart

reload xaml live preview but if you just

control fiving you know starting your

app.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 and 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 how to

reload but sometimes you just want it

hot reload and save it's a pattern that

i actually prefer so let's go ahead and

check this box here i'm going to click

back into the button and check off hard

reload on file save by doing that now

this this setting is on and we're just

making this this 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 unsave

is good sometimes it's not so you can

opt in really easily and opt out really

easy out of it so i've opted in i've

made my code change i'm going to do the

magic now control save

and

it's done right because it actually

worked right we didn't receive any

messages from visual studio that means

my app should be patched so now i have

to switch back to my running app this is

the one time which i do have to interact

with my application and 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 feature understanding

of the feature for dot net how to 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 and look at that it

worked right all the right values are

being set and now

what's important to note here is that

this feature didn't require a 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 all right so

we fixed quite a few problems we 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

all right so let's now switch pivots one

more time and this is the last set of

demos that i'm going to show you and

we're going to now think like a designer

so let's go ahead and go back to visual

studio so live preview it's something

that i've shown you very briefly right

i've shown the fact that you can kind of

zoom in and out of your app so you have

the zoom button here and you can go

pretty pretty deep on the zooming if you

had to um and you can you can see your

app as things are changing but it

actually has a bunch of great

capabilities that i did not show off so

let's think about

sorry let's talk about which

capabilities you have so there's a bunch

of buttons in the top left here 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 like 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 from the window from

the text block 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 a vertical

and horizontal ruler to your application

so this is the rulers and 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 so 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 then all the rest of the

items will render correctly so i'm going

to go ahead and just align my my rulers

to it here and i'm going to zoom in

and i'm going to move so i can see

exactly the change right so this doesn't

doesn't look quite right right it's

definitely you know it's at 55.2 that's

fine right 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

so now i'm going to scroll down to

where we are we are setting the

creating the visual look and feel

i'm going to make this slightly bigger

so that i get my scroll bar back

all right let's scroll over here to the

right all right so here's my aqi value

so now i know i'm working with the right

thing and 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 so i'm going to go ahead

and set this margin to be and by margin

i'm just going to zoom in just literally

i'm just changing the margin to see what

happens on the left i'm going to make

this

5 from the left okay that moved a little

bit right let's make it 6

moved a bit more 7

i'm going to make it slightly more let's

make it eight oh eight looks perfect

right i mean again it's not 100 perfect

but i'm sure nobody will notice and i've

got

a great improvement here in my app using

these rulers and the rulers might

sometimes blend in so i have things like

i can change the color of the rulers if

i want the rulers to be red or yellow i

can go ahead and do that so you can

really 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 and 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 so now i got rulers out

of the way let's zoom out and take a

look all right that looks great actually

all of my items and now

aqi value is slightly more to the right

exactly how my designer wanted it to be

so once again i was able to use live

preview

and xaml had reload together to make all

this possible

thank you so much for watching i hope

you enjoyed all the demos we just saw

and here we have some resources these

are links to documentation for basically

all the features that i've shown you so

definitely check them out if you're

interested and we really hope you try

visual studio 2022 that will help you

make great xaml applications thanks so

much for watching