WEBVTT 00:00:03.806 --> 00:00:08.210 Hi, I'm Jon Chu, a Program Manager on the Visual Studio Team. 00:00:08.210 --> 00:00:11.020 Today, I'm excited to share with you all the new features that are in 00:00:11.020 --> 00:00:12.810 Visual Studio 2017 and 00:00:12.810 --> 00:00:15.620 how they can further empower you in developing desktop apps. 00:00:16.740 --> 00:00:19.970 Whether you're developing a WPF, WinForm, or 00:00:19.970 --> 00:00:23.150 Win32 console app in leveraging the .NET Framework. 00:00:23.150 --> 00:00:26.960 Visual Studio 2017 comes loaded with many features to help you 00:00:26.960 --> 00:00:30.270 be even more productive when building great desktop apps. 00:00:30.270 --> 00:00:32.010 So let's dive into the new Visual Studio. 00:00:34.050 --> 00:00:36.690 The first thing you'll notice about this is how much faster 00:00:36.690 --> 00:00:37.930 everything is. 00:00:37.930 --> 00:00:40.770 This is reflected in many aspects of the product from faster 00:00:40.770 --> 00:00:43.990 solution load times to quick document tab switches. 00:00:43.990 --> 00:00:46.560 In creating this release, we were guided by the mission 00:00:46.560 --> 00:00:51.110 of enabling you as a developer to be more productive, faster. 00:00:51.110 --> 00:00:53.520 From the moment you acquire Visual Studio 2017, 00:00:53.520 --> 00:00:55.380 we want to get you up and running faster. 00:00:56.630 --> 00:00:58.970 With a streamlined acquisition experience, 00:00:58.970 --> 00:01:02.350 you can select only the tools you want for your development needs. 00:01:02.350 --> 00:01:04.220 For developing desktop apps, 00:01:04.220 --> 00:01:08.200 all you need is a .NET desktop development workload to build WPF, 00:01:08.200 --> 00:01:12.200 Windows Forms, and console applications for .NET. 00:01:12.200 --> 00:01:14.520 If you'd also like to create Win32 C++ apps, 00:01:14.520 --> 00:01:18.070 you should select the desktop development with C++ workload. 00:01:19.560 --> 00:01:21.940 While installing Visual Studio 2017, 00:01:21.940 --> 00:01:24.590 you'll notice how much faster it is to install. 00:01:24.590 --> 00:01:27.490 Through some of my own testing, I found that installing all the same 00:01:27.490 --> 00:01:31.660 capabilities for desktop development, Visual Studio 2017 00:01:31.660 --> 00:01:36.400 installs 33% faster and 50% smaller than Visual Studio 2015. 00:01:36.400 --> 00:01:37.660 With faster install times and 00:01:37.660 --> 00:01:40.930 smaller install sizes, you can get to coding sooner. 00:01:40.930 --> 00:01:42.480 Once inside Visual Studio, 00:01:42.480 --> 00:01:45.640 you'll be able to experience the many new features aimed at enabling 00:01:45.640 --> 00:01:49.320 you to be more productive by saving you time and effort. 00:01:49.320 --> 00:01:52.250 One area that has seen many new productivity enhancements is with 00:01:52.250 --> 00:01:55.540 the code editor for C# and XAML. 00:01:55.540 --> 00:01:58.970 By leveraging the .NET Compiler Platform known as Roslyn, 00:01:58.970 --> 00:02:03.520 Visual Studio 2017 delivers faster and more powerful code navigation, 00:02:03.520 --> 00:02:06.870 analysis, generation, and organization. 00:02:06.870 --> 00:02:08.240 Let me show this in action. 00:02:08.240 --> 00:02:12.090 I have here, a sample app for managing a health clinic. 00:02:12.090 --> 00:02:16.090 It's a WPF app that connects to an Azure service that allows clinic 00:02:16.090 --> 00:02:20.050 receptionists to view and edit upcoming patient appointments. 00:02:20.050 --> 00:02:22.484 Let's run this app to get an idea of what we're working with. 00:02:26.259 --> 00:02:27.940 The app is looking pretty good. 00:02:27.940 --> 00:02:30.610 There are a couple of appointments already in the system. 00:02:30.610 --> 00:02:33.880 There's a lot of functionality already built into this app. 00:02:33.880 --> 00:02:37.440 However, right off the back, I can see a couple of areas that I can 00:02:37.440 --> 00:02:39.370 tweak to make it look even better. 00:02:39.370 --> 00:02:42.360 The first one being is I should probably add a little title at 00:02:42.360 --> 00:02:45.330 the top of this dashboard to indicate that these appointments 00:02:45.330 --> 00:02:47.140 are the upcoming appointments. 00:02:47.140 --> 00:02:48.102 So let's add that. 00:02:52.008 --> 00:02:54.990 I need to figure out where to add that title. 00:02:54.990 --> 00:02:56.390 I know that the view for 00:02:56.390 --> 00:02:59.499 that page is located in the MainView.xaml file. 00:02:59.499 --> 00:03:01.960 Instead of searching through my Solution Explorer, 00:03:01.960 --> 00:03:04.210 I have a new way of finding that file. 00:03:04.210 --> 00:03:08.800 I'll use the new feature Go to All, using the menu option Edit, 00:03:08.800 --> 00:03:13.740 Go To, Go To All, or the keyboard shortcut CTRL+T, 00:03:13.740 --> 00:03:17.920 and I'll type in MainView. 00:03:17.920 --> 00:03:19.010 As you can see, 00:03:19.010 --> 00:03:23.450 I have a complete list of all the occurrences of the string MainView. 00:03:23.450 --> 00:03:27.640 Go To All conducts a fast and complete search across file name, 00:03:27.640 --> 00:03:30.650 type, members, or symbol declarations and 00:03:30.650 --> 00:03:35.310 I can even further filter this list by using these icons at the bottom. 00:03:35.310 --> 00:03:36.620 So, since I am only looking for 00:03:36.620 --> 00:03:40.338 a file, I'll click on this file icon and it will only show files. 00:03:40.338 --> 00:03:41.332 There we can go. 00:03:41.332 --> 00:03:43.873 There is MainView.xaml and I can click on that and 00:03:43.873 --> 00:03:45.096 navigate to that page. 00:03:45.096 --> 00:03:50.200 Looking at the XAML, I can see where I need to add that title. 00:03:50.200 --> 00:03:52.659 I should add it inside of this grid element right here. 00:03:53.800 --> 00:03:58.080 So, I've already gone through and created a separate user control for 00:03:58.080 --> 00:04:02.280 this title and I've titled it NextAppointmentTitle.xaml. 00:04:02.280 --> 00:04:06.040 It's a simple text box that says next appointments. 00:04:06.040 --> 00:04:09.950 I think I created this user control in a separate namespace, but I'm not 00:04:09.950 --> 00:04:14.140 too sure, so I'm just gonna try to add it to my MainView anyways. 00:04:14.140 --> 00:04:17.670 So, let me go back into my MainView and type that out. 00:04:17.670 --> 00:04:22.230 Let me type in NextAppointmentTitle 00:04:25.290 --> 00:04:27.350 and that declaration. 00:04:27.350 --> 00:04:29.950 There's Intellisense Squiggles because the name space 00:04:29.950 --> 00:04:32.370 has not been referenced in the XAML page. 00:04:32.370 --> 00:04:35.070 However, there's a light bulb suggestion. 00:04:35.070 --> 00:04:37.170 So, clicking on this suggestion, 00:04:37.170 --> 00:04:41.710 I can easily add this reference to this new namespace. 00:04:41.710 --> 00:04:42.530 By clicking on it, 00:04:42.530 --> 00:04:45.600 the reference is added to the page with the proper prefix. 00:04:45.600 --> 00:04:49.500 This is one of the cool new features with XAML intellisense. 00:04:49.500 --> 00:04:52.250 Another cool feature is intellisense filtering. 00:04:52.250 --> 00:04:55.070 I need to set some properties on this user control. 00:04:55.070 --> 00:05:00.870 And, so what I can do is I can type CS for the grids column-span. 00:05:00.870 --> 00:05:03.520 The return results are filtered due to the camel casing 00:05:03.520 --> 00:05:05.020 of the column-span. 00:05:05.020 --> 00:05:07.650 I can easily select it, and add-in a value. 00:05:07.650 --> 00:05:09.621 Let me also add-in the row value. 00:05:12.203 --> 00:05:17.680 Another way I can easily manipulate namespaces is by renaming prefixes. 00:05:17.680 --> 00:05:21.840 I have another namespace in here with the prefix CTR. 00:05:21.840 --> 00:05:24.520 I don't think this is very clear or descriptive, so 00:05:24.520 --> 00:05:27.770 I'm going to change this into something more descriptive. 00:05:27.770 --> 00:05:35.960 I can select this prefix and use the menu option, Edit, Refactor, Rename, 00:05:35.960 --> 00:05:40.230 or the keyboard shortcut, CTRL+R+R and enter a new prefix name. 00:05:40.230 --> 00:05:41.890 So I'm gonna name this controls. 00:05:43.850 --> 00:05:47.960 All the prefixes are changes in the XAML file. 00:05:47.960 --> 00:05:51.489 These were only a couple of the code editor improvements that are in 00:05:51.489 --> 00:05:52.881 Visual Studio 2017. 00:05:52.881 --> 00:05:55.710 There are so many more that enhance your productivity. 00:05:55.710 --> 00:05:58.450 The last one I wanted to quickly point out is on the side of 00:05:58.450 --> 00:06:00.080 the XAML file. 00:06:00.080 --> 00:06:03.000 There's some dotted lines for each code block 00:06:03.000 --> 00:06:05.810 to show the structure visualization of that block. 00:06:05.810 --> 00:06:09.550 Hovering over this dotted line gives me a preview of that block. 00:06:10.710 --> 00:06:13.929 This is a good way of visualizing what's inside of your code. 00:06:14.980 --> 00:06:18.605 So now, let's try to run this app and see our changes. 00:06:27.441 --> 00:06:31.380 And there we have it, our title is now at the top of this dashboard. 00:06:31.380 --> 00:06:34.470 I can go on about all the many new editor improvements 00:06:34.470 --> 00:06:37.310 because there's so much more to Visual Studio 2017. 00:06:37.310 --> 00:06:41.090 But one of the things I do notice while running this app is that 00:06:41.090 --> 00:06:42.510 I don't know what I was thinking but 00:06:42.510 --> 00:06:45.330 it looks like the days of the week are way too big. 00:06:45.330 --> 00:06:47.285 I should really fix that. 00:06:47.285 --> 00:06:49.660 And comes one of my favorite new features. 00:06:49.660 --> 00:06:51.640 XAML Edit and Continue. 00:06:51.640 --> 00:06:54.610 Using this new feature to augment your UI debugging tools, 00:06:54.610 --> 00:06:59.170 you're probably already familiar with, I can easily fix UI issues. 00:06:59.170 --> 00:07:02.290 Back in my app, at the top, you might notice a new menu. 00:07:03.380 --> 00:07:07.480 This in-app tool menu has all the features I need to diagnose my UI 00:07:07.480 --> 00:07:08.910 issues. 00:07:08.910 --> 00:07:11.530 First, I'll enable selection mode, so 00:07:11.530 --> 00:07:15.120 I can choose parts of the UI that I want to drill down into. 00:07:15.120 --> 00:07:18.010 Let me click on the element that I want to drill down into, 00:07:18.010 --> 00:07:20.029 this being the TextBlock for the day of the week. 00:07:22.110 --> 00:07:25.910 What this will do is it will select in the Live Visual Tree, and 00:07:25.910 --> 00:07:29.850 I can follow that up by clicking the button Go to Live Visual Tree. 00:07:31.420 --> 00:07:35.230 With that selected, the Live Visual Tree is put into focus and 00:07:35.230 --> 00:07:36.560 the element is selected. 00:07:37.740 --> 00:07:41.841 I can use UI debugging tools to dig into this XAML and view the source. 00:07:46.935 --> 00:07:51.227 The font size is set to 60, and that's probably too big. 00:07:51.227 --> 00:07:52.920 Let me try to make that smaller. 00:07:52.920 --> 00:07:56.954 I'll set it to 35. 00:07:56.954 --> 00:07:58.690 Let me go back into my app. 00:08:02.585 --> 00:08:03.890 And there it is. 00:08:03.890 --> 00:08:07.500 The run time has been changed and the sizing looks much better. 00:08:07.500 --> 00:08:11.690 XAML Edit and Continue makes it easy to make tweaks to your UI and 00:08:11.690 --> 00:08:13.860 have it immediately reflected. 00:08:13.860 --> 00:08:17.120 These changes stay in your code after you stop debugging, and 00:08:17.120 --> 00:08:19.330 are persisted after you save. 00:08:19.330 --> 00:08:24.030 Debugging XAML is made easier and faster with Visual Studio 2017. 00:08:24.030 --> 00:08:27.320 So, what about other areas of debugging? 00:08:27.320 --> 00:08:30.840 We know that debugging is a major part of your development process. 00:08:30.840 --> 00:08:32.700 With Visual Studio 2017, 00:08:32.700 --> 00:08:35.750 we're introducing some new features to help you step through your code 00:08:35.750 --> 00:08:38.730 and better diagnose and solve issues with your apps. 00:08:38.730 --> 00:08:41.370 So, let's go back to the app that's already been running. 00:08:41.370 --> 00:08:43.890 I'm pretty curious about the transitioning between pages 00:08:43.890 --> 00:08:44.910 in this app. 00:08:44.910 --> 00:08:47.390 So, I want to drill down into that. 00:08:47.390 --> 00:08:50.530 I know that I have a navigation helper class that helps swap out 00:08:50.530 --> 00:08:51.570 pages. 00:08:51.570 --> 00:08:53.650 When I click the New Appointment button, 00:08:53.650 --> 00:08:56.030 it should uses this class to swap out to the next page. 00:08:57.520 --> 00:09:00.935 Let me use Go To All to find that navigation helper file. 00:09:00.935 --> 00:09:06.200 Ill use CTRL+T and search for navigation helper. 00:09:07.420 --> 00:09:11.140 I can filter down to just files, and I find the code for 00:09:11.140 --> 00:09:12.060 navigation helper. 00:09:13.460 --> 00:09:15.940 Let me look at this code And 00:09:15.940 --> 00:09:18.620 at the bottom, I see a function for Navigate. 00:09:18.620 --> 00:09:22.910 I'm pretty sure this is what will be used when I want to switch pages. 00:09:22.910 --> 00:09:25.990 I'm going to add a breakpoint to the beginning of this code block. 00:09:27.860 --> 00:09:30.400 Let me go back into my app and see what happens. 00:09:31.510 --> 00:09:34.860 So with this, when I click the New Appointment button, 00:09:34.860 --> 00:09:36.231 it hits the breakpoint as expected. 00:09:37.540 --> 00:09:40.280 If I wanted to see how each of these lines in this block of code 00:09:40.280 --> 00:09:43.640 evaluated, I would either have to use the step through, or 00:09:43.640 --> 00:09:46.080 set a breakpoint at the end of the block to run. 00:09:47.330 --> 00:09:51.430 Instead, I can use a new feature called Click-to-Run. 00:09:51.430 --> 00:09:54.040 As you can see, by hovering over a line of code, 00:09:54.040 --> 00:09:55.940 there's a play button icon. 00:09:55.940 --> 00:09:57.920 When I click this play button icon, 00:09:57.920 --> 00:10:00.450 the app runs to that line that I clicked on. 00:10:00.450 --> 00:10:03.790 This is really useful in that I no longer have to set multiple 00:10:03.790 --> 00:10:07.050 temporary breakpoints to get to a target line. 00:10:07.050 --> 00:10:10.180 This is a quick and easy way to maintain context while debugging. 00:10:11.320 --> 00:10:13.650 We've always been proud of the debugging experience with 00:10:13.650 --> 00:10:16.740 Visual Studio, but we know we can always do better. 00:10:16.740 --> 00:10:19.690 These are some of the features we've developed after talking to our 00:10:19.690 --> 00:10:21.970 developers and hearing their feedback. 00:10:21.970 --> 00:10:25.350 I hope this video gave you a better idea of some of the new features 00:10:25.350 --> 00:10:26.300 that are available for 00:10:26.300 --> 00:10:29.930 developing desktop applications with Visual Studio 2017. 00:10:29.930 --> 00:10:33.060 If you'd like to learn more about any of the features I covered, or 00:10:33.060 --> 00:10:36.470 what else is new, please visit the Visual Studio Blog. 00:10:36.470 --> 00:10:39.050 There's so many more features I wasn't able to cover, so 00:10:39.050 --> 00:10:42.430 go download Visual Studio 2017 and try it for yourself. 00:10:42.430 --> 00:10:44.880 It's available now for download on the Visual Studio site. 00:10:46.300 --> 00:10:49.160 All of us here on the Visual Studio Team are really excited to share 00:10:49.160 --> 00:10:51.420 this new release of Visual Studio with you, and 00:10:51.420 --> 00:10:54.490 I hope it helps make you more productive in all your projects. 00:10:54.490 --> 00:10:55.099 Thank you.