Watch videos with subtitles in your language, upload your videos, create your own subtitles! Click here to learn more on "how to Dotsub"


0 (0 Likes / 0 Dislikes)
  • Embed Video

  • Embed normal player Copy to Clipboard
  • Embed a smaller player Copy to Clipboard
  • Advanced Embedding Options
  • Embed Video With Transcription

  • Embed with transcription beside video Copy to Clipboard
  • Embed with transcription below video Copy to Clipboard
  • Embed transcript

  • Embed transcript in:
    Copy to Clipboard
  • Invite a user to Dotsub
[Windows Presentation Foundation Application Development] [Harikrishna Menon, Senior Program Manager] Hi, my name is Harikrishna Menon, and I'm a program manager on the Visual Studio team. Windows Presentation Foundation, or WPF, is a rich presentation system for building Windows desktop applications. You can build visually stunning user experiences that incorporate UI, media, and complex business models. You can rapidly develop enterprise class line of business applications with a comprehensive set of features like controls, data binding, animation, and styles. In this video, let's take a quick look at the authoring, debugging, diagnostic capabilities for WPF applications in Visual Studio 2015. We redesigned Blend for Visual Studio 2015 to provide you with great user interface development experiences. You can use Blend to create beautiful XAML apps. Blend has a sleek new look consistent with Visual Studio for improved workflow between the two products. Now, let's take a quick look at the new and improved Blend. The first thing that you notice when you open Blend for Visual Studio 2015 is the theme. It is much darker than Visual Studio's dark theme. It helps pop the content out. That means it's easier for you to visualize and design your content in Blend. They have also made a couple of other design changes, like your tool strip is now much closer to the board. It allows you to easily manipulate and design your content. Various features, like Solution Explorer and the Team Explorer, have made its way into Blend. With the support that we offer in Solution Explorer, you can now use solution folders and be benefited by the awesome performance that Visual Studio offers for large-scale solutions. Blend favorites, like the assets pane, states, triggers, and data have also made its way into new Blend. Blend still remains the tool of choice to create complex animations. They also have support for full-fledged IntelliSense in Blend. The same language service that is used in Visual Studio now covers IntelliSense in Blend as well. In Visual Studio 2015, we have rebuilt the XAML language servers on top of the Darknet compiler platform, or Roslyn, to provide an improved XAML editing experience with rich IntelliSense that is faster and more reliable. This is the first step in enabling a number of new, powerful features in the XAML language service. On the docket are features such as cross-language refactoring operations, improved IntelliSense filtering, and better data binding IntelliSense. In addition to this fundamental change, we have enabled a couple of new features, like in-place editing in Visual Studio, support for Peak, and the ability to add regions in a XAML code. Let's take a look at Peak first. I'm going to select this border, and I really want to change its background. Traditionally, I would have to go to that product list style by going go to definition and editor. No longer do I have to do that. All I have to do is right-click Peak Definition, and this brings my style from a different resource dictionary in the same view that I'm editing. That's super cool. Now I'm going to change the value, gray to red, hit Enter and Save. And when I go back to design surface, you can see the change is instantly reflected. Now, you might be wondering, will this work off a code? Absolutely. Let me go find an event. So here you can see that I have a projects loaded event. I will right-click on Projects Loaded, and do Peak Definition. You can see that we now allow you to edit your C# code within the view you're editing in XAML, so that is very useful. In Visual Studio 2015, we have also introduced a new feature called in-place editing. In-place editing was generally available in Blend, but now it is available in Visual Studio as well. Let me show you what I mean by in-place editing. I have this button here, and I really would like to change its template. And I'm going to right-click, do an edit template, and edit current. What you can notice is that we bring in the template of the button inside your current view. You no longer have to go to a different document to edit the template of that button. I'm going to go change the background. So I have here the background is set to button link color. I'm going to delete that and change to red, and hit Save. You can see that we instantly update every single instance of that button into red. Now for the final demo. We got a lot of feedback from users saying that they really wanted to annotate parts of the XAML code. Unfortunately, annotation is not really something we had supported before, but what if you want to demarcate or split your XAML code into logical chunks? You can now do that by using the region feature in XAML editor. So I'm going to start typing. Select region, name my region, now I'm going to add an end region tag, and you can see that we instantly allow you to collapse that region. And once collapsed, it just shows the name of the region. This makes it super easy for you to logically differentiate chunks of your large visual trees. One of the top requests developers has been tools for inspecting the XAML at runtime. With Visual Studio 2015, we are pleased to introduce the new UI debugging tools for XAML. These tools enable you to inspect the visual tree of your running WPF application as well as the properties on any element in the tree. Visual Studio integrates these UI debugging tools directly into the debugging experience so they fit seamlessly into the development cycle. As soon as an app is launched by the debugger, when I switch back to Visual Studio, I can see two new panes. The first one is called a live visual tree, and the second one is called a live property explorer. The live visual tree shows all the elements in the visual tree of the running application. And when I select an element, you can see the live property explorer is updated in real time with the values of the properties of the elements selected. The live visual tree updates in real time. That means if my new elements are added or removed from the visual tree, this tree will update automatically. To demonstrate that, let's take a look at the element count now. There are 6700 elements. I'm going to switch to the running application and scroll toward right. Now let's switch back to Visual Studio. You can see the element count has now increased from 6000 elements to 8000. So this makes it super easy for you to visualize your ever-changing visual tree. Let's go back to the app. I don't really like the fact that this date text block is actually center aligned. I want to move all this left. Let's go back to VS and see how we can make that happen in a running application. I'm going to use the selection button, which enables me to select elements on the running app. I'm going to switch back to the application and select the date text block. Then I'm going to switch back to Visual Studio, and you can see that we have instantly synchronized the live visual tree to the element that we had selected on the app, as well as the properties have also been updated. I'm going to travel up the tree to select the data grid column header, and you can see the horizontal content alignment is set to center. I'm going to change this to left. As soon as it changes, we update the running application with this value. One thing you can notice on the live property explorer is how the attributes are categorized based on where the value is coming from. For example, local values that you set in XAML are shown here, values that are coming from styles are shown here, etcetera. So this makes it very easy for you to understand what property events in your running application. Now let's go back to the app to see the change that we have made. You can see that both column headers are now aligned to the left, which is pretty awesome. In the future, we will even enable you to process these changes into your source code while you are making the changes to a running application, a true XAML edit and content experience. Performance is a critical aspect of any application. Customers expect applications to load fast, as well as interactions with them to be jitter-free and fluid. The application timeline tool helps you improve the performance of your WPF applications by providing a semantically rich, scenario-centric view of the applications resource consumption. You can analyze the time spent by your application, preparing UI frames, servicing network requests, and much more in the context of scenarios like application startup and page load. I have here a simple stock ticker application that shows the value of shares for a specified set of stocks over the last one year. Right off the bat you can notice that the startup is super slow. And I'm going to use the new application timeline tool to figure out what could be wrong in my application. I'm going to close this app, switch back to Visual Studio, and open the performance and diagnostics hub. I can do that by going to the debug menu and clicking on Start Diagnostic Tools Without Debugging. This opens up the performance and diagnostics hub in Visual Studio. You can see the new application timeline tool, and the CPU usage tool is already selected. I'm going to now launch the application under the profiler. The application is launched, and if I switch back to VS you can see that a live CPU utilization graph is shown that shows the amount of CPU that's being consumed by your application. It looks like the application has completed loading. I'm going to switch back to VS and hit Stop Collection. As collection might take some time, I'm going to switch back to my preprepared session file. When the session report comes up, you can see that we show you three graphs. The first graph is a UI thread utilization graph. The UI thread utilization breaks down the utilization of your UI thread into its components that is understandable to users. For example, we tell you the time taken by parsing, layout, render, audio, and application code. You can see that there's a lot of application code running during application startup. The second graph is the visual throughput graph. It tells you the frame rate of your application in the desktop window manager in the composition thread and on the UI thread. You can see the frame rate was pretty much zero for the UI thread during application startup. That means it was completely busy. Now let's take a look at the details view. In the details view, you can see we have created a top-level event called application startup. This event measures the time between the application is launched by the operating system and the time taken for your application to show its first frame. So this is super interesting. So I'm going to right-click on this event and do filter to event time range. When I do that, my view is filtered by the time taken for application startup, and I can view all the events that happened during startup. I can see my application spent 117 milliseconds in parsing. When I open that, it shows me all the files that are parsed as a result of parsing app.xaml. The parsing cost is inclusive of the time taken to parse the file and the time taken to create the object. It also shows me layout cost of each individual element. It tells me what the cost was for each element to layout during the layout parse. This is very interesting, since it will help me troubleshoot complex custom panels and their logic if they take too much time during layout. We also support a number of filters and sort functions to make it easier for you to slice and dice your data. We also allow you to group by frames, and there are a number of search functionalities available as well. Now let's take a look at the CPU usage tools, since none of these events can explain why it took so much time for my application startup. I'm going to shift to the CPU usage tool, and you can see that the main is taking almost 95% of the time. I'm going to keep drilling down to see which function is responsible for this. And here I can see that model.getdata is the function that's responsible for spending so much time on the CPU during application startup. Let me take a look at that code. This GetData function looks like it's doing a lot of computation and network request on the UI thread. And let's see how much time this is taking. I'm going to put a breakpoint at the start of the function, and I'm going to put a breakpoint at the end of the function. Now I'm going to start debugging. You can see that the first breakpoint gets hit. Now I'm going to continue execution. As you can see, it's taking quite a lot of time to execute this function. And you can see here the new feature called PerfTips. tells me the time taken between these two breakpoints, and it's a good 8 seconds, which is not that great. But I know I can quickly fix this by running all this logic on a different thread. So I'm going to stop debugging, go to my toolbox. I already have a snippet created to optimize this function. I'm going to delete this and drag my snippet over here. And you can see that it's pretty easy for me to run this score on a separate thread. This is how you can use the new diagnostic experiences in Visual Studio to successfully troubleshoot you XAML applications. I would like to thank you for taking the time today to learn about WPF application development. [] [] The Visual Studio and WPF blog have more details around the capabilities of the platform and the tooling available in Visual Studio. You should download Visual Studio 2015 today and try out the new features available for WPF application developers. Thank you.

Video Details

Duration: 15 minutes and 49 seconds
Country: United States
Language: English
License: All rights reserved
Genre: None
Views: 65
Posted by: duncanma on May 14, 2015

----- (Please provide translations for these languages: Chinese (Simplified) (chi_hans), Chinese (Traditional) (chi_hant), Czech (cze), English (eng), French (France) (fre_fr), German (ger), Italian (ita), Japanese (jpn), Korean (kor), Polish (pol), Portuguese (Brazil) (por_br), Russian (rus), Spanish (spa), Turkish (tur).)

Caption and Translate

    Sign In/Register for Dotsub to translate this video.