 On today's Visual Studio Toolbox, Julian's going to show us what's new with DevExpress' desktop components. You are going to want to see this. Hi, welcome to Visual Studio Toolbox. I'm your host Robert Green, and joining me today is Julian Bucknall. Hey, Julian. Hey, Robert, how are you doing? Right. Julian is the CTO at DevExpress, and I think everybody knows or certainly should know that DevExpress is one of the premier components and control vendors. We love them. They've been around for a very, very long time, and today we're going to talk about some new things. I love these shows. I'm going to have you guys on to talk about new stuff. We're going to talk about windforms and WPF controls and components. That is exactly it. We're going to be talking about user interfaces for Windows. You guys still make and still sell those, yeah? Oh, yes, absolutely. xp.net core, let me tell you. We have a lot of people who have, I don't want to call them legacy apps, maybe traditional. Legacy is shorthand for runs the business. Exactly. Corporates, they tend to prefer their standard Windows applications. Yeah, absolutely. So let me start. We have, before we actually start, let me throw up a little teaser, shall we say, for everybody. So what we want to do is to give away a free copy of our Code Rush for Visual Studio. We're going to keep this offer open for a couple of months. So until June 30th, 2020, download your free copy of Code Rush for Visual Studio. This is our product, which helps you write your code, be it windforms or WPF or even ASP.net or JavaScript. So please do have a look and have a look and download Code Rush. DevExpress. Giving away free stuff in this show. Man, you guys got free stuff to give away. We're going to have you on more often. As you basically said, DevExpress, we engineer hundreds of UI components across many different development platforms. We offer reporting, data analytics, business app frameworks, even web regression testing software, and so on. And there is no practical way that I'm going to be able to demonstrate it all. And so I just want to show you a few quick demos to illustrate what we can and cannot do with regard to Windows. So basically, we have over 180 different components for windforms. And as I said, there's no practical way to get to everything. So I'm just going to demonstrate a couple of major controls. And the first thing I'm going to do is one that we are very famous for is our data grid control. OK, so first things first, let me open up our demo center. Let me just quickly close this. And our demo center has the various platforms that we support. So it's part of our standard distribution. So if you wish to have a try, you can download our 30-day trial. And the demo center will be, as you see here, I'm going to open up the data grid. It's a view-based architecture. As you see here, it can display tabular data, what you would expect from a grid, and with a bunch of data shaping and filtering type options. But our grid is more than that. And let me move to the card view example to show you. As I said, it's a view-based architecture. So you can present your information to your end-users via several different presentation metaphors. Cards are one option like we have here. So I can skip through the cards for each set of cards here. Let me switch to the file manager demo. File manager works in exactly the same way as you'd expect from a file manager. But it's still the grid. We're showing a file explorer type demo here. We can show you tiles. And obviously those tiles can be modified in certain ways, so in this case, we're showing kind of real-ter type information here. And we have a couple of other views, but now I'll jump to the Kanban board. This is something we've added recently, and we just updated in version 20.1. So you can display information in a Kanban board type tiles, essentially. The tiles can incorporate images like we have to here and so on and so forth. You can move these between different columns. And this is a grid, right? This is the grid, yes. Wow. Just another display or a view-base for the grid. So I can't type today, so I'm just using a simple example, hello world. So yes, this is our grid. It's loaded for bear, as someone once said to me. And before I move that, before I leave the grid, I do want to show something we introduced a few years ago and that something is indicative of how we approach our user interfaces. Here's a grid. It's obviously full. It's a kind of outlook, kind of inbox type thing. The grid is the list of emails there. But notice there's no scroll bar. Obviously, the grid is longer than the screen until I hover over the grid. So here's a scroll bar. Once I hover over the grid, the scroll bar appears, and I can move the thumb. If you want the old star scroll bar, you can just get back to the Excel demo here, and there is the old star scroll bar. Now, time for a quick demo of our spreadsheet control. So let me jump over to the spreadsheet. The thing about spreadsheets is your end users are probably very familiar with Excel. And once they know all about Excel, they're probably going to be very familiar with our spreadsheet control. In fact, our spreadsheet control, what you see here is the control. Well, I hope this is old data. It shows Microsoft at $28 a share. I hope that's fake data. That was the share price when I left Microsoft, I think. OK. Something down there. And you're here. And higher these days. So if you drop a spreadsheet control on the form, you will actually get not only the spreadsheet itself, but also the ribbon with all of the commands preset. And in your code, you can adjust and limit whatever functionality you like. If you don't need the user interface, but do need to read and write Excel SS file, SLX files, you can manage everything in code via the spreadsheet API. In version 20.1, we have a vastly improved print and export rendering engines. Let me quickly show you what that looks like. I'll hit the pivot table. I'll highlight the information in the pivot table here. Let's just go down to the bottom. Here we are. Go to the page layout. And I'm going to set the print area to that selection I made. I'm going to change the orientation to landscape. And now if I get a file, print preview, and drag this over to the right screen, here we are, print preview, and let's export it to PDF. Why not? And let me save it here. And let me open it in Adobe Acrobat, which is over here. And there we are. Very nice. So it works just nicely. That's an improvement in version 20.1. It's a huge UI component. And we're over here all day for us to go into all of its capabilities. Let me just close this preview. And Excel is very, as I said, very popular in the business world. And here's a feature that I think deserves more attention. So let me show you how people could actually use a spreadsheet for data entry. So what I'm going to do is show a data entry form to explain. So we have a nice invoice here. At its core, it's no different from a standard Excel type invoice. What this invoice is unique is it's actually a data entry form. So rather than create a data entry form with width forms, for example, with a bunch of field editors and command buttons and so on and so forth, what we're going to do is just use a spreadsheet for data entry. People know what a data entry form allows you to do. So let me change the sales rate. And we could also do things like once we have created this invoice, ship it by air and change the terms. But notice the custom cell editors are something that's baked into the spreadsheet control. OK, let me quickly save that. I'm going to save it over on my desktop and just save over its setters. And I'm going to open it up in print preview. And there it is in print preview, a normal invoice that you can print off or. Yeah, very cool. Now one final demo before I get to DirectX and GDI, which is very important for wing forms, simple invoice. We just saw maybe a profit and loss report, yes, or even a vehicle inspection report. The kind of things you can do with our report component. The interesting thing about our report component is it's also available in WPF and in our web set of components. They all include a visual studio designer, document viewer for each platform, and an end user report design. Let me just quickly show you the end user report designer. Here's the balance sheet example. Let me click on designer to bring up the designer. And it's the interesting thing about this is it's yet again a control that you can incorporate inside your own applications. You do not have to run a separate application. This is available. So let me just drag a text field over here and add it to the form, change the label. So say, hello world, I can change the background color. Notice over here we have a property editor, which is very visual studio-like in a sense. I'll keep it to home and maybe make it more 18 maybe, maybe bold, and let's center it. There we go. And so the report design is an example of the kind of features that you can have with DevExpress WinForms controls. Having just shown you a few of the user interface controls that we have as part of the WinForms set of controls, I'd just like to point out within our demo center, we have a bunch of indications that you can run these demos either with DirectX or with GDI+. And the reason for us doing that is we have created our own DirectX rendering engine. And that's exciting. We started off with the data grid and we have now added DirectX support to a whole range of different UI controls. So why do this? Why do we think it's a superior option? So yeah, back in the beginning, our WinForms components used GDI or GDI+, for rendering operations gave us all of this, all programmers, the ability to draw shapes, text, images at well, anywhere on the screen, but at the expense of some additional complexity and often some poor performance. And if you've ever developed desktop apps with WinForms, you know that GDI+, was more than good enough a classic desktop enterprise application. But fast forward a couple of decades since those days, we now have 4K displays, high DPI, and so on and so forth. And obviously GDI+, has evolved. Certain operations are now hardware accelerated. But advanced UI components and modern desktop apps still have to deal with a pixel density that's like eight times higher than when GDI+, was first created or envisaged. So we had a choice, either live with the performance bottlenecks and the rendering issues or roll our own DirectX rendering engine, and obviously we did that. Now in 2020, all of these different WinForms controls now can render with DirectX rendering. And should make them much faster, I would imagine. And exactly. The performance benefits for controls like our data grade are impressive. Are there also memory benefits or is it just speed? It's there are actually memory benefits. The thing about GDI+, is it generates the display of the screen, if you like, in normal memory, whereas DirectX talks directly to the GPU. And that's where the screen is going to be generated. The other thing about performance wise is GDI+, essentially has just one command stream for all applications on the system, whereas DirectX, they're all independent command streams to directly to the GPU. So there's lots of different ways that DirectX is faster and uses less memory than straight GDI+. I will note that we have ditch GDI+, for our legacy projects, essentially. Our customers can specify which rendering engine they want to use. And as I mentioned before, our WinForms demo navigator, as you saw, allows you to select and compare for yourself the different rendering engines. And while we were preparing for this VS toolbox episode, Robert, we thought in various different ways we could actually show the difference between our controls under DirectX and the equivalent under GDI+. And so we recorded a little video to show you the real speed. We recorded videos? I love it. Oh, yeah. But no one say this show is the same format, week after week after week. We're breaking some ground here. I love it. All right. So we're going to demonstrate with this video. And you can have a look at the video yourself. It's at devexpress.com slash DirectX video. And let me show you the difference between DirectX and GDI+. So in this video, we're going to be showing data grid scrolling. We have 80 columns in each grid. And we have 830 rows. On the left-hand side, we have the standard grid view. And on the right, which is already finished, we have the DirectX view. And now we're going to do page by page. And this is pretty impressive. So the standard grid on the side, left-hand side, and us on the right. Oh, we finished. Holy cow. So that's scrolling from top to bottom in a fraction of a time. Page by page. That's great. So there we are. And with the memory improvements, I imagine you can have more data in there, more controls in there. We were trying to show you with that particular video how quickly DirectX can render more information on the screen. And as we're scrolling through the grid, obviously if you have thrown more UI controls on there, there's still a difference going on. That was fairly simple demo if you like. But with the range of controls that we have that do support DirectX now, you can add more information within your applications. Charting, especially if you're doing real-time charts, for example, DirectX makes a great difference for that kind of feature and requirement of your app. And will there be a lot more coming soon? Or have you done the most important ones at this point? Right? We've also done the most important ones, those which actually render a lot of information or a lot of changing information on the screen at once. Those are the places where obviously DirectX is going to make a great deal more difference. Obviously DirectX was developed essentially for gaming. So anywhere where you're having rapid changes of information being displayed, that's where you're going to see the most effect from a DirectX implementation rather than GDO plus. Very cool. Yeah. OK, let me quickly move to our WPF controls, go over a couple of our newest features. We have a lot of parity in feature and product parity between WinForms and WPF. So I'm not going to show what I've just shown for WinForms. So let me with WPF, let me quickly show you a couple of new controls for WPF that we've implemented. So let me kill off that, start off with WPF. There are a couple I want to show, which are quite interesting in a way. The first one is our diagram control. Diagram control is our Visio-inspired user interface control for WPF. It's also available in WinForms. What this gives you is the opportunity to write your application and have some kind of diagram. So you can show things like flowcharts within your application. For example, you have a standard looking flowchart. We all remember these from when we were learning how to program. Plan, that's always an interesting one. I'd hate to actually work in this particular office, but it's a database diagram. What are all those armchairs behind that person? It's like coding in front of a live audience of your peers. The interesting thing about the database diagram is you can show, and here we're showing a pan and zoom effect within our diagram control so you can concentrate on a particular area within your own particular database schema and so on and so forth. Orchart, that's always a good, fun thing. So diagram control has been improved with version 20.1. And I think, yeah, it's good fun. We also have a designer as well, so you can incorporate that within your application so you don't have to use, if you like, our own designer. So we have some basic shapes you can put in there. Let's put in an ellipse. Notice how we have these alignment things going on so that you can line up your shapes nicely. There was a connector option, so let me add a connector there and a connector there and so on and so forth. So designer for WPF as well as the diagram control itself. Another great one to show off is our Gantt control. We all know what a Gantt control is, especially we've been doing some kind of project. We have this kind of ability to be able to plot out who's going to do what and when and who they're relying on to finish first and so on so forth. The nice thing about this is Gantt charts are not just for projects. You could also do, as we've done here, we're emulating some website downloading and installing a whole bunch of JavaScript and images and what have you. Again, it's a Gantt chart, so we're showing here a real time update of the Gantt chart to show, just like you have your developer tools in your browser and so on and so forth. So that was a Gantt chart and the pivot grid quickly show you we're doing some Excel style filtering across all of our grid based components, whether it's WinForms or WPF. And as you see down here, this particular demo is showing just body style with sedan and sport utility vehicle. If I nip up to the body style, it has a little filter icon there and just a kind of Excel style format, I can then say, I want to show all pickup. Notice as I click pick up the grid, the pivot grid actually refreshed with that particular filter. So we have pick up sedan, sport utility vehicles and so on and so forth. I can if I want to turn off the filter, show everything, turn on the filter again, or I can edit the filter in a more visual style, if you like, to create your filters and so on and so forth. And that is essentially all I really want to show you with regard to WPF. Obviously, there's a lot more to WPF and WinForms. But that is pretty much it. Yeah, absolutely. It's a great overview of the controls. Some of them that have obviously been in there for forever. Some new. I love the DirectX support. That's really going to speed things up. Well, having the show notes, links to, of course, your website to the free 30-day trial. Also, how people can get their free version of Code Rush. Thank you guys so much for that. Of course, and I hope everyone enjoys it. And this has been awesome. People can sign up for newsletters and get told what's happening, I assume. Yes, you'll be able to sign up for newsletters and the like at our website, devexpress.com. Thanks so much, Julien. This has been awesome, a lot of fun. Thanks for coming on the show. And thank you, Robert. Thank you for inviting me and a DevExpress, of course. And see you next time. Awesome demo. See you next time on Visual Studio Toolbox.