Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,389 --> 00:00:06,960
[Music]
2
00:00:04,960 --> 00:00:08,800
hello there and welcome my name is
3
00:00:06,960 --> 00:00:11,519
dimitrial island and i'm a program
4
00:00:08,800 --> 00:00:13,359
manager on the.net team my focus is how
5
00:00:11,519 --> 00:00:15,120
to reload technologies and xaml tools
6
00:00:13,359 --> 00:00:18,960
and today i'm here to talk to you about
7
00:00:15,119 --> 00:00:20,320
both in this video so let's jump in
8
00:00:18,960 --> 00:00:22,000
so what are we going to talk about today
9
00:00:20,320 --> 00:00:23,039
specifically we've got three areas that
10
00:00:22,000 --> 00:00:24,960
we're going to cover and we're going to
11
00:00:23,039 --> 00:00:27,920
talk about features in each area and how
12
00:00:24,960 --> 00:00:30,000
visual studio 2022 makes all of these
13
00:00:27,920 --> 00:00:31,199
things much easier to do as a developer
14
00:00:30,000 --> 00:00:33,759
so first we're going to talk about
15
00:00:31,199 --> 00:00:36,000
design experiences this is about things
16
00:00:33,759 --> 00:00:37,759
in your xaml designer since this video
17
00:00:36,000 --> 00:00:39,679
is for xaml developers we're going to
18
00:00:37,759 --> 00:00:41,280
look at how xaml designer has evolved to
19
00:00:39,679 --> 00:00:43,200
become a great tool for you to be
20
00:00:41,280 --> 00:00:45,039
productive we'll also look at the code
21
00:00:43,200 --> 00:00:46,320
editor as well as we go out for
22
00:00:45,039 --> 00:00:48,559
different demos
23
00:00:46,320 --> 00:00:50,320
then we'll look at diagnostic tooling
24
00:00:48,558 --> 00:00:52,878
and live editing we have a lot of
25
00:00:50,320 --> 00:00:54,320
powerful features in visual studio 2022
26
00:00:52,878 --> 00:00:55,919
things that allow you to understand
27
00:00:54,320 --> 00:00:58,320
what's going on with your xml binding
28
00:00:55,920 --> 00:01:00,160
failures the ability to do ui
29
00:00:58,320 --> 00:01:02,719
development and do everything from
30
00:01:00,159 --> 00:01:05,118
tweaks to major changes to your xaml and
31
00:01:02,719 --> 00:01:07,118
even edit codebehind.net hot reload a
32
00:01:05,118 --> 00:01:09,680
new feature only found in visual studio
33
00:01:07,118 --> 00:01:10,959
2022 and finally we'll take a slightly
34
00:01:09,680 --> 00:01:13,360
different pivot at the end from the
35
00:01:10,959 --> 00:01:15,280
design side and show you how our xaml
36
00:01:13,359 --> 00:01:17,359
live preview experience makes it easier
37
00:01:15,280 --> 00:01:19,759
to design beautiful applications we're
38
00:01:17,359 --> 00:01:21,599
going to do that by focusing on demos
39
00:01:19,759 --> 00:01:23,359
around these technology areas we're
40
00:01:21,599 --> 00:01:25,199
going to be looking at again xaml
41
00:01:23,359 --> 00:01:28,000
designer code editor xaml binding
42
00:01:25,200 --> 00:01:30,560
diagnostics zamaha reload live preview
43
00:01:28,000 --> 00:01:32,159
and dotnet high reload so with that
44
00:01:30,560 --> 00:01:34,719
let's jump into the demo
45
00:01:32,159 --> 00:01:36,960
so here i have visual studio 2022 open
46
00:01:34,719 --> 00:01:39,438
and i have a wpf app so we're going to
47
00:01:36,959 --> 00:01:41,438
use wpf app for all of my demos today so
48
00:01:39,438 --> 00:01:42,798
let's go and take a look what's new the
49
00:01:41,438 --> 00:01:44,559
first thing i want to talk to you is
50
00:01:42,799 --> 00:01:46,640
about the design team experience as we
51
00:01:44,560 --> 00:01:48,478
said in the intro our designer has
52
00:01:46,640 --> 00:01:50,478
gotten much better we've got a lot of
53
00:01:48,478 --> 00:01:52,640
improvements in it we've looked at
54
00:01:50,478 --> 00:01:54,560
performance and its ability to render
55
00:01:52,640 --> 00:01:56,239
the xaml that you're building and to
56
00:01:54,560 --> 00:01:58,000
have really the best experience you do
57
00:01:56,239 --> 00:01:59,839
need one thing often which is data in
58
00:01:58,000 --> 00:02:02,159
your designer because if there's no data
59
00:01:59,840 --> 00:02:03,680
your designer like i have here looks
60
00:02:02,159 --> 00:02:05,200
very very empty and that's just not
61
00:02:03,680 --> 00:02:06,640
great right you have an application
62
00:02:05,200 --> 00:02:08,000
you're building there's probably a bunch
63
00:02:06,640 --> 00:02:09,840
of content that goes right here in the
64
00:02:08,000 --> 00:02:11,280
middle and if it's not there it's hard
65
00:02:09,840 --> 00:02:13,360
to visualize your app without running it
66
00:02:11,280 --> 00:02:15,039
so let's see how our design time data
67
00:02:13,360 --> 00:02:16,959
feature can make that better
68
00:02:15,039 --> 00:02:19,120
so here i already have my design time
69
00:02:16,959 --> 00:02:21,199
data feature in action
70
00:02:19,120 --> 00:02:23,520
over at the top of my app i have air
71
00:02:21,199 --> 00:02:26,079
quality and the only reason i see this
72
00:02:23,520 --> 00:02:29,439
is because i have set the magical d
73
00:02:26,080 --> 00:02:31,360
colon property in my in my code editor
74
00:02:29,439 --> 00:02:33,519
so here my normal text property for this
75
00:02:31,360 --> 00:02:35,120
text block is set to a binding and
76
00:02:33,519 --> 00:02:36,719
because it sets on binding it's not
77
00:02:35,120 --> 00:02:38,800
going to display anything unless i go
78
00:02:36,719 --> 00:02:40,560
for the trouble of mocking a viewmodel
79
00:02:38,800 --> 00:02:42,800
but i no longer have to do that with our
80
00:02:40,560 --> 00:02:44,560
new design time data you can mock any
81
00:02:42,800 --> 00:02:47,040
property in any control you can even
82
00:02:44,560 --> 00:02:48,640
mock controls by simply typing d colon
83
00:02:47,039 --> 00:02:51,039
followed by what you normally would type
84
00:02:48,639 --> 00:02:53,039
in this case text so here i am able to
85
00:02:51,039 --> 00:02:56,239
see exactly what i want to see and if
86
00:02:53,039 --> 00:02:58,639
let's say i want to test a much
87
00:02:56,239 --> 00:03:00,560
much bigger title i can do that i can
88
00:02:58,639 --> 00:03:02,799
simply type it in and i can already see
89
00:03:00,560 --> 00:03:04,400
what impact is having in my application
90
00:03:02,800 --> 00:03:06,000
but this is great and all being able to
91
00:03:04,400 --> 00:03:07,680
set a text block
92
00:03:06,000 --> 00:03:09,519
but would be much better is to be able
93
00:03:07,680 --> 00:03:11,360
to actually view items so let's take a
94
00:03:09,519 --> 00:03:13,599
look at my items control so i have an
95
00:03:11,360 --> 00:03:15,040
item controls here and it has a data
96
00:03:13,598 --> 00:03:17,439
template so it definitely could show
97
00:03:15,039 --> 00:03:20,079
items but nothing is showing up so let's
98
00:03:17,439 --> 00:03:22,479
now bring in design time data in a much
99
00:03:20,080 --> 00:03:24,319
bigger way so here i'm going to show you
100
00:03:22,479 --> 00:03:26,000
some a code snippet that i've commented
101
00:03:24,318 --> 00:03:27,439
out just for the purposes of this demo
102
00:03:26,000 --> 00:03:28,878
so we're going to comment this in this
103
00:03:27,439 --> 00:03:30,719
back in in a second and show you what it
104
00:03:28,878 --> 00:03:33,439
does so here as you can see i'm using
105
00:03:30,719 --> 00:03:35,519
the d colon property to once again mock
106
00:03:33,439 --> 00:03:37,120
something d colon will only appear in
107
00:03:35,519 --> 00:03:38,480
the designer when you build your app
108
00:03:37,120 --> 00:03:39,680
none of this will translate to your
109
00:03:38,479 --> 00:03:41,199
running application so i want to make
110
00:03:39,680 --> 00:03:43,439
sure you feel comfortable with using d
111
00:03:41,199 --> 00:03:45,439
colon for just design time and in this
112
00:03:43,439 --> 00:03:47,280
case i'm saying d colon items control
113
00:03:45,439 --> 00:03:48,959
item source and i'm giving it a fake
114
00:03:47,280 --> 00:03:51,039
array of entities which will create the
115
00:03:48,959 --> 00:03:52,959
visual let's go ahead and see that magic
116
00:03:51,039 --> 00:03:54,719
in action i'm going to go ahead and i'm
117
00:03:52,959 --> 00:03:56,799
going to uncomment this code and it's
118
00:03:54,719 --> 00:03:57,840
going to be very quick right right away
119
00:03:56,799 --> 00:03:59,599
we see
120
00:03:57,840 --> 00:04:01,280
let's zoom in a little bit we see items
121
00:03:59,598 --> 00:04:02,959
up here in the item template and here
122
00:04:01,280 --> 00:04:04,719
i've mocked the data so let's say i want
123
00:04:02,959 --> 00:04:06,479
to play with what the data says let's
124
00:04:04,719 --> 00:04:08,560
say i want to see what happens at the
125
00:04:06,479 --> 00:04:10,878
bottom here will this data overflow is
126
00:04:08,560 --> 00:04:13,840
it wrapping correctly so let's let's go
127
00:04:10,878 --> 00:04:15,438
ahead and play with it will this data
128
00:04:13,840 --> 00:04:16,798
overflow
129
00:04:15,438 --> 00:04:18,079
i'm going to add that save it and then
130
00:04:16,798 --> 00:04:20,000
i'm going to hit this nifty little
131
00:04:18,079 --> 00:04:22,000
refresh button we've added and by doing
132
00:04:20,000 --> 00:04:23,360
that as you can see it's not wrapping
133
00:04:22,000 --> 00:04:25,040
properly it's not something i'm going to
134
00:04:23,360 --> 00:04:26,800
go fix right now but i just wanted to
135
00:04:25,040 --> 00:04:28,720
show you the power of just like quickly
136
00:04:26,800 --> 00:04:30,879
being able to mock entities set the
137
00:04:28,720 --> 00:04:32,880
values and have something that went from
138
00:04:30,879 --> 00:04:34,879
being a blank designer to a much more
139
00:04:32,879 --> 00:04:36,719
rich designer i kind of joke it's like
140
00:04:34,879 --> 00:04:38,240
hot reloading the designer of course
141
00:04:36,720 --> 00:04:39,680
it's not really hard reload but i hope
142
00:04:38,240 --> 00:04:42,240
you really see that this feature is
143
00:04:39,680 --> 00:04:44,800
super powerful to make things easy so
144
00:04:42,240 --> 00:04:47,040
now that i have my my entities being
145
00:04:44,800 --> 00:04:48,879
listed here uh sorry being visualized
146
00:04:47,040 --> 00:04:50,400
here i'm gonna go ahead and show you one
147
00:04:48,879 --> 00:04:52,879
more feature that we really love and
148
00:04:50,399 --> 00:04:54,959
again it's a new feature in the designer
149
00:04:52,879 --> 00:04:57,519
i'm gonna alt click into good a few
150
00:04:54,959 --> 00:04:59,359
times till i get in my xaml to the text
151
00:04:57,519 --> 00:05:02,399
block that's representing this inside of
152
00:04:59,360 --> 00:05:05,120
my data template now here i already know
153
00:05:02,399 --> 00:05:06,719
i have a bug my designer told me that
154
00:05:05,120 --> 00:05:08,560
this value should always be bold and
155
00:05:06,720 --> 00:05:10,880
it's not bold and with this i want to
156
00:05:08,560 --> 00:05:12,879
show you a brand new feature called xaml
157
00:05:10,879 --> 00:05:15,279
quick actions xaml designer quick
158
00:05:12,879 --> 00:05:17,199
actions with xaml designer quick actions
159
00:05:15,279 --> 00:05:19,198
we show you common properties for the
160
00:05:17,199 --> 00:05:20,960
control through a little light bulb that
161
00:05:19,199 --> 00:05:22,400
appears when you click the light bulb we
162
00:05:20,959 --> 00:05:24,478
expand and show you all the common
163
00:05:22,399 --> 00:05:27,120
properties we give you visualizations
164
00:05:24,478 --> 00:05:29,360
for setting horizontal vertical change
165
00:05:27,120 --> 00:05:31,280
sizes and we know which properties
166
00:05:29,360 --> 00:05:33,199
people often use on controls that you
167
00:05:31,279 --> 00:05:35,038
know we create so we're able to show it
168
00:05:33,199 --> 00:05:36,720
to you right so i'm going to have to
169
00:05:35,038 --> 00:05:38,639
open this up again because i just zoomed
170
00:05:36,720 --> 00:05:40,080
so i'm going to open it up again and set
171
00:05:38,639 --> 00:05:42,478
this bold property right here so i'm
172
00:05:40,079 --> 00:05:44,159
going to hit bold and look at that all
173
00:05:42,478 --> 00:05:45,439
that all the items when bold because
174
00:05:44,160 --> 00:05:47,439
this is a data template right it's
175
00:05:45,439 --> 00:05:49,199
reusing the template three times and i
176
00:05:47,439 --> 00:05:51,279
was able to use quick actions to really
177
00:05:49,199 --> 00:05:53,520
quickly make a change without having to
178
00:05:51,279 --> 00:05:54,719
go to this massive properties panel that
179
00:05:53,519 --> 00:05:56,478
we're all used to right you can still
180
00:05:54,720 --> 00:05:58,560
use the property panels it hasn't gone
181
00:05:56,478 --> 00:06:00,399
anywhere but we hope the quick actions
182
00:05:58,560 --> 00:06:02,639
on all sorts of controls and as they
183
00:06:00,399 --> 00:06:05,359
click around you'll see that it appears
184
00:06:02,639 --> 00:06:07,519
on even on my here i'll zoom scroll up a
185
00:06:05,360 --> 00:06:10,080
little bit even appears on my page as
186
00:06:07,519 --> 00:06:11,599
well right so you can change things at
187
00:06:10,079 --> 00:06:13,038
the grid level you can change things at
188
00:06:11,600 --> 00:06:14,639
the window level we know what the common
189
00:06:13,038 --> 00:06:16,478
properties are so we hope you definitely
190
00:06:14,639 --> 00:06:17,680
give this a try
191
00:06:16,478 --> 00:06:19,519
all right so we're done with the very
192
00:06:17,680 --> 00:06:22,000
first demo let's jump into the second
193
00:06:19,519 --> 00:06:24,079
demo now the next set of demos is all
194
00:06:22,000 --> 00:06:26,000
about live diagnostics and editing your
195
00:06:24,079 --> 00:06:27,199
code while your application is running
196
00:06:26,000 --> 00:06:28,560
so let's go ahead and start our
197
00:06:27,199 --> 00:06:31,919
application with the debugger and see
198
00:06:28,560 --> 00:06:33,918
how we can do that in visual studio 2022
199
00:06:31,918 --> 00:06:35,758
all right so here's my app it's running
200
00:06:33,918 --> 00:06:37,519
and right away i'm going to notice
201
00:06:35,759 --> 00:06:39,360
something that's bugging me my title is
202
00:06:37,519 --> 00:06:41,839
missing what's going on here we saw a
203
00:06:39,360 --> 00:06:44,479
title in the designer we know it's using
204
00:06:41,839 --> 00:06:46,159
binding to set the title and we know we
205
00:06:44,478 --> 00:06:48,318
have design temp data that allowed us to
206
00:06:46,160 --> 00:06:49,759
visualize it in the designer but now in
207
00:06:48,319 --> 00:06:51,520
the running app it's missing so
208
00:06:49,759 --> 00:06:52,879
something is going on with the binding
209
00:06:51,519 --> 00:06:54,399
let's go ahead and take a look at a
210
00:06:52,879 --> 00:06:56,399
great feature in visual studio called
211
00:06:54,399 --> 00:06:58,719
xaml binding failures xaml binding
212
00:06:56,399 --> 00:07:00,318
failures is a new experience relatively
213
00:06:58,720 --> 00:07:01,840
new experience that we've added that
214
00:07:00,319 --> 00:07:03,840
works really great in this end-to-end
215
00:07:01,839 --> 00:07:05,598
scenario that i'm about to show you so
216
00:07:03,839 --> 00:07:07,679
here i'm already making something that
217
00:07:05,598 --> 00:07:09,918
used to be really hard much much easier
218
00:07:07,680 --> 00:07:11,840
which is seeing that yes my binding
219
00:07:09,918 --> 00:07:13,680
really is failing and i'm able to see
220
00:07:11,839 --> 00:07:15,679
that inside of this pain this pain is
221
00:07:13,680 --> 00:07:17,120
very powerful it would show you all the
222
00:07:15,680 --> 00:07:18,879
binding failures it would allow you to
223
00:07:17,120 --> 00:07:20,879
scroll through them it even has the
224
00:07:18,879 --> 00:07:22,240
ability to search binding failures like
225
00:07:20,879 --> 00:07:23,598
if there was more than one here if i
226
00:07:22,240 --> 00:07:26,240
typed into the search box it would
227
00:07:23,598 --> 00:07:28,079
filter down by any any of the columns so
228
00:07:26,240 --> 00:07:29,519
you can basically type anything so it's
229
00:07:28,079 --> 00:07:30,959
a really powerful feature that lets you
230
00:07:29,519 --> 00:07:32,478
see that a binding really did fail
231
00:07:30,959 --> 00:07:34,638
without having to go into your output
232
00:07:32,478 --> 00:07:36,478
window and go through the drudgery of
233
00:07:34,639 --> 00:07:38,319
having to scroll through this output
234
00:07:36,478 --> 00:07:39,598
window and try to find your binding
235
00:07:38,319 --> 00:07:41,280
failure i mean this is just always
236
00:07:39,598 --> 00:07:42,639
painful yeah there it is right but like
237
00:07:41,279 --> 00:07:44,799
it would have been really painful for me
238
00:07:42,639 --> 00:07:47,120
to find now we also have another great
239
00:07:44,800 --> 00:07:49,918
feature if you're using.5
240
00:07:47,120 --> 00:07:51,280
or net 6 with wpf we're able to actually
241
00:07:49,918 --> 00:07:52,639
not only just show you the binding
242
00:07:51,279 --> 00:07:54,239
failure but show you where it's
243
00:07:52,639 --> 00:07:56,000
happening so i'm going to click on this
244
00:07:54,240 --> 00:07:57,680
button right here this button i'm going
245
00:07:56,000 --> 00:07:59,279
to zoom in just to show you if it's
246
00:07:57,680 --> 00:08:00,720
visible next to your binding failure
247
00:07:59,279 --> 00:08:01,918
that means we have source navigation
248
00:08:00,720 --> 00:08:03,120
available so i'm going to go ahead and
249
00:08:01,918 --> 00:08:04,959
click it
250
00:08:03,120 --> 00:08:06,879
and my cursor position will move right
251
00:08:04,959 --> 00:08:08,799
to the text block where the failure is
252
00:08:06,879 --> 00:08:10,080
happening so that's the first feature i
253
00:08:08,800 --> 00:08:12,000
really wanted to show you the fact that
254
00:08:10,079 --> 00:08:13,439
you can easily see your binding failures
255
00:08:12,000 --> 00:08:15,120
now that we know where it's happening
256
00:08:13,439 --> 00:08:16,478
let's go ahead and fix the problem so
257
00:08:15,120 --> 00:08:17,759
i'm going to go ahead and take a look at
258
00:08:16,478 --> 00:08:18,878
this here that looks like a spelling
259
00:08:17,759 --> 00:08:20,800
error so i'm going to just use
260
00:08:18,879 --> 00:08:23,039
intellisense to fix it i'm going to
261
00:08:20,800 --> 00:08:25,360
click equals here on the path but i'm
262
00:08:23,038 --> 00:08:27,038
not getting intellisense let me show you
263
00:08:25,360 --> 00:08:28,319
a second feature i wanted to demo and
264
00:08:27,038 --> 00:08:29,918
this is our ability to bring
265
00:08:28,319 --> 00:08:32,080
intellisense for your view models for
266
00:08:29,918 --> 00:08:33,679
your mvvm scenario right into visual
267
00:08:32,080 --> 00:08:35,680
studio and this works both at design
268
00:08:33,679 --> 00:08:36,958
time and runtime we're at runtime so
269
00:08:35,679 --> 00:08:39,120
let's go ahead and implement the feature
270
00:08:36,958 --> 00:08:40,958
i'm going to scroll up to the window
271
00:08:39,120 --> 00:08:43,038
and there's more than one ways to to
272
00:08:40,958 --> 00:08:44,319
execute this quick action but i like it
273
00:08:43,038 --> 00:08:46,639
up here at the window where we get a
274
00:08:44,320 --> 00:08:47,920
tooltip that says would you like to set
275
00:08:46,639 --> 00:08:50,480
and i'm going to zoom in just to show
276
00:08:47,919 --> 00:08:52,479
you set design time data context so yes
277
00:08:50,480 --> 00:08:55,039
in this case i do so let's go ahead and
278
00:08:52,480 --> 00:08:57,120
click that again
279
00:08:55,039 --> 00:08:58,879
and hit enter on it so now i have a
280
00:08:57,120 --> 00:09:00,959
design time data context so don't worry
281
00:08:58,879 --> 00:09:02,480
it works it works at runtime too and i'm
282
00:09:00,958 --> 00:09:04,479
going to scroll back to where the error
283
00:09:02,480 --> 00:09:05,519
was and i'm going to hit equals one more
284
00:09:04,480 --> 00:09:06,879
time
285
00:09:05,519 --> 00:09:08,560
and now that i'm hitting equals look at
286
00:09:06,879 --> 00:09:10,240
that i'm getting intellisense i can see
287
00:09:08,559 --> 00:09:12,479
exactly what my commands are what my
288
00:09:10,240 --> 00:09:14,159
properties and collections are it makes
289
00:09:12,480 --> 00:09:15,360
it so much easier to fix this bug i'm
290
00:09:14,159 --> 00:09:17,600
going to go ahead and set the title
291
00:09:15,360 --> 00:09:19,120
properly and now i'm going to go back to
292
00:09:17,600 --> 00:09:20,639
my running application and there's my
293
00:09:19,120 --> 00:09:22,720
title all right so that worked out
294
00:09:20,639 --> 00:09:24,240
really great but we're on a roll here
295
00:09:22,720 --> 00:09:25,759
we're going to go and show you yet one
296
00:09:24,240 --> 00:09:27,278
more amazing feature for you xaml
297
00:09:25,759 --> 00:09:29,200
developers i'm going to switch back to
298
00:09:27,278 --> 00:09:31,039
visual studio and talk about a scenario
299
00:09:29,200 --> 00:09:33,759
that happens very often to me i'm in a
300
00:09:31,039 --> 00:09:35,360
single screen device on my laptop and i
301
00:09:33,759 --> 00:09:37,519
just don't have multiple displays i have
302
00:09:35,360 --> 00:09:39,839
to keep switching between my xaml code
303
00:09:37,519 --> 00:09:42,000
editor and visual studio and my app or i
304
00:09:39,839 --> 00:09:43,600
have to dock my app in some awkward way
305
00:09:42,000 --> 00:09:45,039
with visual studio and just it becomes
306
00:09:43,600 --> 00:09:46,879
really difficult so we've added this new
307
00:09:45,039 --> 00:09:50,079
feature i'm going to hit control q and
308
00:09:46,879 --> 00:09:52,240
i'm going to type in xaml live preview
309
00:09:50,080 --> 00:09:54,240
so xaml live preview which will appear
310
00:09:52,240 --> 00:09:55,919
shortly here on the left and you can
311
00:09:54,240 --> 00:09:58,159
choose where to dock it of course well
312
00:09:55,919 --> 00:10:00,399
this is a real-time view of your running
313
00:09:58,159 --> 00:10:02,799
application let me explain what this is
314
00:10:00,399 --> 00:10:05,120
because some people are not sure exactly
315
00:10:02,799 --> 00:10:06,799
how this differs from the xaml designer
316
00:10:05,120 --> 00:10:08,879
xaml designer is something that you can
317
00:10:06,799 --> 00:10:10,719
use while your app isn't running but
318
00:10:08,879 --> 00:10:12,480
once your app is running
319
00:10:10,720 --> 00:10:14,079
live preview gives you the ability to
320
00:10:12,480 --> 00:10:16,079
see your running app so it's not quite a
321
00:10:14,078 --> 00:10:18,639
designer i can't like click here to move
322
00:10:16,078 --> 00:10:20,879
things around but i see what changes i'm
323
00:10:18,639 --> 00:10:22,559
making to my application in real time so
324
00:10:20,879 --> 00:10:24,480
let's go ahead and just do a really
325
00:10:22,559 --> 00:10:25,919
simple example i'm going to go ahead and
326
00:10:24,480 --> 00:10:27,680
break this text property again so i'm
327
00:10:25,919 --> 00:10:29,919
going to go in here
328
00:10:27,679 --> 00:10:31,599
break the text property and now on the
329
00:10:29,919 --> 00:10:33,278
left you can see the app instantly
330
00:10:31,600 --> 00:10:35,120
changed and my running app changed as
331
00:10:33,278 --> 00:10:36,480
well right it's just mirroring the
332
00:10:35,120 --> 00:10:38,159
running application so you can't
333
00:10:36,480 --> 00:10:40,399
interact with it in the live preview
334
00:10:38,159 --> 00:10:42,879
experience but anything you see if it
335
00:10:40,399 --> 00:10:45,200
was an animation or any change it'll be
336
00:10:42,879 --> 00:10:47,439
instantly visible so let's put that back
337
00:10:45,200 --> 00:10:48,800
in great i now have my path i'm going to
338
00:10:47,440 --> 00:10:50,480
go ahead and hit the clear button to
339
00:10:48,799 --> 00:10:52,000
clear my binding failures because i know
340
00:10:50,480 --> 00:10:54,159
i've resolved all of them and my
341
00:10:52,000 --> 00:10:56,078
application is already slightly better
342
00:10:54,159 --> 00:10:58,240
but now i'm noticing something else i'm
343
00:10:56,078 --> 00:10:59,759
not seeing any of the actual items
344
00:10:58,240 --> 00:11:01,759
inside of my app i know there's a view
345
00:10:59,759 --> 00:11:03,600
model i know i've coded it and i know it
346
00:11:01,759 --> 00:11:05,278
should show data but for some reason
347
00:11:03,600 --> 00:11:07,040
it's not showing the data
348
00:11:05,278 --> 00:11:09,519
let's take a look at the items control
349
00:11:07,039 --> 00:11:11,759
well that's interesting my items control
350
00:11:09,519 --> 00:11:13,120
has no item source being set okay that
351
00:11:11,759 --> 00:11:14,720
could be the problem let's go ahead and
352
00:11:13,120 --> 00:11:17,360
set the item source i'm going to type in
353
00:11:14,720 --> 00:11:21,120
item source
354
00:11:17,360 --> 00:11:21,120
and i'm going to do the binding here
355
00:11:21,440 --> 00:11:24,320
and look at that because i had
356
00:11:22,559 --> 00:11:25,919
intellisense i was just able to tab
357
00:11:24,320 --> 00:11:28,560
right into the results and because i
358
00:11:25,919 --> 00:11:30,319
have live preview i can see that my
359
00:11:28,559 --> 00:11:31,278
running app has been updated to show the
360
00:11:30,320 --> 00:11:32,800
items
361
00:11:31,278 --> 00:11:34,720
very very powerful think about it you
362
00:11:32,799 --> 00:11:36,479
were able to get intellisense for your
363
00:11:34,720 --> 00:11:39,680
problems see the problems as you fix
364
00:11:36,480 --> 00:11:42,079
them in real time so this combination of
365
00:11:39,679 --> 00:11:44,078
xaml binary diagnostic xaml heart reload
366
00:11:42,078 --> 00:11:46,399
technology and xaml live preview will
367
00:11:44,078 --> 00:11:48,078
hopefully make you very very productive
368
00:11:46,399 --> 00:11:50,000
but looking at my application and let's
369
00:11:48,078 --> 00:11:52,479
let's zoom in a little bit
370
00:11:50,000 --> 00:11:54,639
something is is a bit wrong los angeles
371
00:11:52,480 --> 00:11:57,039
los angeles okay i know i have better
372
00:11:54,639 --> 00:11:58,399
data than that so my data is wrong now
373
00:11:57,039 --> 00:12:00,078
okay that could be a problem right
374
00:11:58,399 --> 00:12:01,839
typically if you need to change your c
375
00:12:00,078 --> 00:12:03,199
sharp code at this point you would be
376
00:12:01,839 --> 00:12:04,480
stopping the debugger and who knows how
377
00:12:03,200 --> 00:12:06,320
long it would take you to rebuild and
378
00:12:04,480 --> 00:12:08,159
restart your app and we want to save you
379
00:12:06,320 --> 00:12:10,399
that time in many situations and in this
380
00:12:08,159 --> 00:12:11,919
situation i know we can let's go ahead
381
00:12:10,399 --> 00:12:14,000
and take a look at our view model i'm
382
00:12:11,919 --> 00:12:15,360
going to go to my solution explorer and
383
00:12:14,000 --> 00:12:16,320
i'm going to go into my air quality
384
00:12:15,360 --> 00:12:18,320
service
385
00:12:16,320 --> 00:12:20,879
and in here let's see what's going on
386
00:12:18,320 --> 00:12:23,200
well that's embarrassing i have a to-do
387
00:12:20,879 --> 00:12:24,720
flag to have removed this code all right
388
00:12:23,200 --> 00:12:26,480
i'm going to remove this code obviously
389
00:12:24,720 --> 00:12:29,200
that's causing everything to break i'm
390
00:12:26,480 --> 00:12:30,480
going to make it go away but now that i
391
00:12:29,200 --> 00:12:32,240
did that i need to apply it to my
392
00:12:30,480 --> 00:12:33,600
running application and this is where
393
00:12:32,240 --> 00:12:36,159
we're going to demo the next feature
394
00:12:33,600 --> 00:12:38,000
which is dot net hot reload sometimes
395
00:12:36,159 --> 00:12:39,600
you can you people call it c-sharp hot
396
00:12:38,000 --> 00:12:41,440
wheels that's fine
397
00:12:39,600 --> 00:12:44,000
it's basically hot reload for your code
398
00:12:41,440 --> 00:12:46,800
right it works for c-sharp and vb in
399
00:12:44,000 --> 00:12:48,320
many situations and it's powered by a
400
00:12:46,799 --> 00:12:49,919
new button we have up here called the
401
00:12:48,320 --> 00:12:51,680
hot reload button let's zoom in and take
402
00:12:49,919 --> 00:12:54,078
a look at it for a second this new
403
00:12:51,679 --> 00:12:55,519
button sits next to new toolbar between
404
00:12:54,078 --> 00:12:58,000
like your stop button and your continue
405
00:12:55,519 --> 00:12:59,600
button and clicking on it will try to
406
00:12:58,000 --> 00:13:01,440
apply the code changes now there are
407
00:12:59,600 --> 00:13:03,040
situations where applying code changes
408
00:13:01,440 --> 00:13:04,320
will be too complicated for us to do at
409
00:13:03,039 --> 00:13:06,000
runtime and we'll give you a message
410
00:13:04,320 --> 00:13:07,839
we'll make it very clear to you that we
411
00:13:06,000 --> 00:13:09,200
couldn't do it but in a lot of cases
412
00:13:07,839 --> 00:13:10,560
you're going to be able to apply it to
413
00:13:09,200 --> 00:13:12,879
your running app
414
00:13:10,559 --> 00:13:14,159
not only that in many cases you'll be
415
00:13:12,879 --> 00:13:16,320
able to do this even without the
416
00:13:14,159 --> 00:13:18,240
debugger yes i know i'm in the debugger
417
00:13:16,320 --> 00:13:19,760
right now and the debugger is great
418
00:13:18,240 --> 00:13:21,919
because we get things like xaml heart
419
00:13:19,759 --> 00:13:23,519
reload xaml live preview but if you just
420
00:13:21,919 --> 00:13:25,679
control fiving you know starting your
421
00:13:23,519 --> 00:13:27,759
app.debugger hot reload will still be
422
00:13:25,679 --> 00:13:29,919
available to you as a wpf developer it's
423
00:13:27,759 --> 00:13:32,000
not available for every app type yet but
424
00:13:29,919 --> 00:13:33,439
if you're doing wpf it's definitely
425
00:13:32,000 --> 00:13:35,278
available to you but in this case
426
00:13:33,440 --> 00:13:36,480
everything is wired up and ready and now
427
00:13:35,278 --> 00:13:38,399
i'm going to show you one more thing
428
00:13:36,480 --> 00:13:39,839
just give you a tip now you can always
429
00:13:38,399 --> 00:13:41,360
press this button and this will how to
430
00:13:39,839 --> 00:13:43,199
reload but sometimes you just want it
431
00:13:41,360 --> 00:13:45,120
hot reload and save it's a pattern that
432
00:13:43,198 --> 00:13:47,278
i actually prefer so let's go ahead and
433
00:13:45,120 --> 00:13:49,360
check this box here i'm going to click
434
00:13:47,278 --> 00:13:51,919
back into the button and check off hard
435
00:13:49,360 --> 00:13:54,159
reload on file save by doing that now
436
00:13:51,919 --> 00:13:55,838
this this setting is on and we're just
437
00:13:54,159 --> 00:13:57,039
making this this this is an actual
438
00:13:55,839 --> 00:13:58,639
setting we're making it really
439
00:13:57,039 --> 00:14:00,639
accessible to you so you can turn it on
440
00:13:58,639 --> 00:14:02,480
and off as you need to sometime unsave
441
00:14:00,639 --> 00:14:04,240
is good sometimes it's not so you can
442
00:14:02,480 --> 00:14:06,639
opt in really easily and opt out really
443
00:14:04,240 --> 00:14:08,320
easy out of it so i've opted in i've
444
00:14:06,639 --> 00:14:11,120
made my code change i'm going to do the
445
00:14:08,320 --> 00:14:12,000
magic now control save
446
00:14:11,120 --> 00:14:13,519
and
447
00:14:12,000 --> 00:14:15,039
it's done right because it actually
448
00:14:13,519 --> 00:14:16,799
worked right we didn't receive any
449
00:14:15,039 --> 00:14:19,039
messages from visual studio that means
450
00:14:16,799 --> 00:14:20,559
my app should be patched so now i have
451
00:14:19,039 --> 00:14:22,480
to switch back to my running app this is
452
00:14:20,559 --> 00:14:24,638
the one time which i do have to interact
453
00:14:22,480 --> 00:14:26,639
with my application and we don't have
454
00:14:24,639 --> 00:14:28,959
any way to know which code we should
455
00:14:26,639 --> 00:14:30,720
re-execute for you we can patch the code
456
00:14:28,958 --> 00:14:32,319
but you still need to do some action in
457
00:14:30,720 --> 00:14:34,320
your app to re-execute it that's a
458
00:14:32,320 --> 00:14:35,760
really important feature understanding
459
00:14:34,320 --> 00:14:37,680
of the feature for dot net how to reload
460
00:14:35,759 --> 00:14:38,799
you've got to re-execute code you've
461
00:14:37,679 --> 00:14:40,399
applied
462
00:14:38,799 --> 00:14:41,599
in this case it works out great i have a
463
00:14:40,399 --> 00:14:43,519
refresh button i'm going to hit the
464
00:14:41,600 --> 00:14:45,120
refresh button and look at that it
465
00:14:43,519 --> 00:14:47,519
worked right all the right values are
466
00:14:45,120 --> 00:14:49,198
being set and now
467
00:14:47,519 --> 00:14:50,959
what's important to note here is that
468
00:14:49,198 --> 00:14:51,919
this feature didn't require a breakpoint
469
00:14:50,958 --> 00:14:53,518
it applied it to your running
470
00:14:51,919 --> 00:14:55,039
application you could have made much
471
00:14:53,519 --> 00:14:56,959
more significant changes than what i
472
00:14:55,039 --> 00:14:59,278
showed you but for the demo purposes i
473
00:14:56,958 --> 00:15:01,039
hope it gets the idea across to you as
474
00:14:59,278 --> 00:15:02,799
you're watching out there all right so
475
00:15:01,039 --> 00:15:04,559
we fixed quite a few problems we made
476
00:15:02,799 --> 00:15:07,278
the app look better before we even ran
477
00:15:04,559 --> 00:15:09,518
it we've fixed problems in the look and
478
00:15:07,278 --> 00:15:11,439
feel after we run the application
479
00:15:09,519 --> 00:15:13,198
and we fixed the code behind that's
480
00:15:11,440 --> 00:15:15,680
pretty cool i think
481
00:15:13,198 --> 00:15:17,278
all right so let's now switch pivots one
482
00:15:15,679 --> 00:15:18,559
more time and this is the last set of
483
00:15:17,278 --> 00:15:20,879
demos that i'm going to show you and
484
00:15:18,559 --> 00:15:22,559
we're going to now think like a designer
485
00:15:20,879 --> 00:15:24,720
so let's go ahead and go back to visual
486
00:15:22,559 --> 00:15:26,078
studio so live preview it's something
487
00:15:24,720 --> 00:15:27,278
that i've shown you very briefly right
488
00:15:26,078 --> 00:15:28,719
i've shown the fact that you can kind of
489
00:15:27,278 --> 00:15:30,639
zoom in and out of your app so you have
490
00:15:28,720 --> 00:15:32,240
the zoom button here and you can go
491
00:15:30,639 --> 00:15:35,360
pretty pretty deep on the zooming if you
492
00:15:32,240 --> 00:15:36,879
had to um and you can you can see your
493
00:15:35,360 --> 00:15:37,839
app as things are changing but it
494
00:15:36,879 --> 00:15:39,519
actually has a bunch of great
495
00:15:37,839 --> 00:15:41,040
capabilities that i did not show off so
496
00:15:39,519 --> 00:15:42,480
let's think about
497
00:15:41,039 --> 00:15:44,799
sorry let's talk about which
498
00:15:42,480 --> 00:15:46,720
capabilities you have so there's a bunch
499
00:15:44,799 --> 00:15:48,319
of buttons in the top left here let's
500
00:15:46,720 --> 00:15:50,240
start off by element selection element
501
00:15:48,320 --> 00:15:52,959
selection allows you to hover over
502
00:15:50,240 --> 00:15:54,959
elements and get a nice little preview
503
00:15:52,958 --> 00:15:57,198
just like you would in f12 tools in the
504
00:15:54,958 --> 00:15:59,599
web scenarios of like what the margins
505
00:15:57,198 --> 00:16:01,039
are render sizes fonts and backgrounds
506
00:15:59,600 --> 00:16:03,600
involved within the item that you're
507
00:16:01,039 --> 00:16:05,278
showing so it's a powerful feature that
508
00:16:03,600 --> 00:16:07,519
i haven't shown before today but now you
509
00:16:05,278 --> 00:16:09,360
can see that you can see all sorts of
510
00:16:07,519 --> 00:16:11,278
information from from the window from
511
00:16:09,360 --> 00:16:12,800
the text block etc
512
00:16:11,278 --> 00:16:14,720
without ever having to go and look for
513
00:16:12,799 --> 00:16:16,399
the xaml it's basically interpreting
514
00:16:14,720 --> 00:16:18,240
what the runtime state of these values
515
00:16:16,399 --> 00:16:21,278
are so it's a really powerful feature
516
00:16:18,240 --> 00:16:23,919
another amazing feature is rulers rulers
517
00:16:21,278 --> 00:16:26,078
up here allow you to add both a vertical
518
00:16:23,919 --> 00:16:28,159
and horizontal ruler to your application
519
00:16:26,078 --> 00:16:30,638
so this is the rulers and let's go ahead
520
00:16:28,159 --> 00:16:32,480
and do that i'm going to add a vertical
521
00:16:30,639 --> 00:16:33,919
and horizontal just for fun and i'm
522
00:16:32,480 --> 00:16:37,120
going to make my live preview experience
523
00:16:33,919 --> 00:16:39,759
slightly bigger here so with that i am
524
00:16:37,120 --> 00:16:41,919
going to set my rulers up to some values
525
00:16:39,759 --> 00:16:42,720
that i know are important to me first of
526
00:16:41,919 --> 00:16:45,919
all
527
00:16:42,720 --> 00:16:48,320
my designers tell me that my
528
00:16:45,919 --> 00:16:50,958
alignment from the left should be about
529
00:16:48,320 --> 00:16:52,160
55 for this first item and if i make
530
00:16:50,958 --> 00:16:53,599
that right then all the rest of the
531
00:16:52,159 --> 00:16:55,360
items will render correctly so i'm going
532
00:16:53,600 --> 00:16:58,079
to go ahead and just align my my rulers
533
00:16:55,360 --> 00:16:59,360
to it here and i'm going to zoom in
534
00:16:58,078 --> 00:17:01,359
and i'm going to move so i can see
535
00:16:59,360 --> 00:17:02,639
exactly the change right so this doesn't
536
00:17:01,360 --> 00:17:05,519
doesn't look quite right right it's
537
00:17:02,639 --> 00:17:06,798
definitely you know it's at 55.2 that's
538
00:17:05,519 --> 00:17:08,000
fine right it's close enough it doesn't
539
00:17:06,798 --> 00:17:10,959
have to be perfect
540
00:17:08,000 --> 00:17:12,798
let's go back to the xaml file
541
00:17:10,959 --> 00:17:15,439
and take a look at what's going on there
542
00:17:12,798 --> 00:17:17,679
so now i'm going to scroll down to
543
00:17:15,439 --> 00:17:20,959
where we are we are setting the
544
00:17:17,679 --> 00:17:20,959
creating the visual look and feel
545
00:17:21,279 --> 00:17:26,160
i'm going to make this slightly bigger
546
00:17:23,519 --> 00:17:27,918
so that i get my scroll bar back
547
00:17:26,160 --> 00:17:30,240
all right let's scroll over here to the
548
00:17:27,919 --> 00:17:31,679
right all right so here's my aqi value
549
00:17:30,240 --> 00:17:33,679
so now i know i'm working with the right
550
00:17:31,679 --> 00:17:35,120
thing and as you can see i see my
551
00:17:33,679 --> 00:17:36,559
running app and if i start to play with
552
00:17:35,119 --> 00:17:38,798
the margins which are probably the thing
553
00:17:36,558 --> 00:17:39,918
that's wrong well that should show me in
554
00:17:38,798 --> 00:17:41,359
real time
555
00:17:39,919 --> 00:17:44,080
an improvement so i'm going to go ahead
556
00:17:41,359 --> 00:17:45,359
and set this margin to be and by margin
557
00:17:44,079 --> 00:17:47,119
i'm just going to zoom in just literally
558
00:17:45,359 --> 00:17:49,038
i'm just changing the margin to see what
559
00:17:47,119 --> 00:17:49,918
happens on the left i'm going to make
560
00:17:49,038 --> 00:17:53,038
this
561
00:17:49,919 --> 00:17:55,200
5 from the left okay that moved a little
562
00:17:53,038 --> 00:17:57,359
bit right let's make it 6
563
00:17:55,200 --> 00:17:58,960
moved a bit more 7
564
00:17:57,359 --> 00:18:00,639
i'm going to make it slightly more let's
565
00:17:58,960 --> 00:18:02,798
make it eight oh eight looks perfect
566
00:18:00,640 --> 00:18:04,559
right i mean again it's not 100 perfect
567
00:18:02,798 --> 00:18:05,359
but i'm sure nobody will notice and i've
568
00:18:04,558 --> 00:18:07,519
got
569
00:18:05,359 --> 00:18:09,038
a great improvement here in my app using
570
00:18:07,519 --> 00:18:10,639
these rulers and the rulers might
571
00:18:09,038 --> 00:18:12,480
sometimes blend in so i have things like
572
00:18:10,640 --> 00:18:14,720
i can change the color of the rulers if
573
00:18:12,480 --> 00:18:16,000
i want the rulers to be red or yellow i
574
00:18:14,720 --> 00:18:18,000
can go ahead and do that so you can
575
00:18:16,000 --> 00:18:19,919
really always see the rulers and make
576
00:18:18,000 --> 00:18:21,359
quick changes to them you can remove a
577
00:18:19,919 --> 00:18:23,919
ruler i can click on this and hit the
578
00:18:21,359 --> 00:18:25,038
delete button and by selecting the ruler
579
00:18:23,919 --> 00:18:26,960
with a mouse click and then hitting
580
00:18:25,038 --> 00:18:28,640
delete it removes it there's also a
581
00:18:26,960 --> 00:18:30,319
little x that appears here you can click
582
00:18:28,640 --> 00:18:32,799
on that as well so now i got rulers out
583
00:18:30,319 --> 00:18:34,879
of the way let's zoom out and take a
584
00:18:32,798 --> 00:18:36,720
look all right that looks great actually
585
00:18:34,880 --> 00:18:38,880
all of my items and now
586
00:18:36,720 --> 00:18:41,600
aqi value is slightly more to the right
587
00:18:38,880 --> 00:18:43,200
exactly how my designer wanted it to be
588
00:18:41,599 --> 00:18:44,399
so once again i was able to use live
589
00:18:43,200 --> 00:18:46,640
preview
590
00:18:44,400 --> 00:18:48,480
and xaml had reload together to make all
591
00:18:46,640 --> 00:18:49,919
this possible
592
00:18:48,480 --> 00:18:52,000
thank you so much for watching i hope
593
00:18:49,919 --> 00:18:53,679
you enjoyed all the demos we just saw
594
00:18:52,000 --> 00:18:55,839
and here we have some resources these
595
00:18:53,679 --> 00:18:57,519
are links to documentation for basically
596
00:18:55,839 --> 00:18:58,720
all the features that i've shown you so
597
00:18:57,519 --> 00:19:00,319
definitely check them out if you're
598
00:18:58,720 --> 00:19:02,558
interested and we really hope you try
599
00:19:00,319 --> 00:19:04,558
visual studio 2022 that will help you
600
00:19:02,558 --> 00:19:07,720
make great xaml applications thanks so
601
00:19:04,558 --> 00:19:07,720
much for watching
45493
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.