DevExpress Desktop Components

On today’s Visual Studio Toolbox, Julian is going to show us what’s new with DevExpress Desktop Components, you are going to want to see this. [MUSIC]. >> 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? >> Great. Julian is the CTO at DevExpress, and I think everybody knows or certainly should know that DevExpress is one of the premier component 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.

00:40 - I love these shows, I love when I have you guys on to talk about new stuff, and we’re going to talk about WinForms and WPF controls and components, right? >> That’s exactly what we’re going to be talking about, user interfaces for Windows. >> You guys still make and still sell those? Yeah. >> Oh, yes, absolutely, asp.net core, and 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, right? >> Exactly. Corporates, they tend to prefer their standard Windows applications. So yeah, absolutely, so let me start.

01:34 - 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 CodeRush 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 CodeRush with Visual Studio, this is our product which helps you write your code be it WinForms or WPF, or even sba.net or JavaScript. So please do have a look and download CodeRush. >> Giving away free staff in this show, man, if you have free staff to giveaway, we’re going to have you more often.

02:35 - >> As you basically said, DevExpress, we engineer hundreds of UI components across many different development platforms. We offer reporting, virtual analytics, business app frameworks, even web regression testing software and so on. There is no practical way that aren’t going to be able to demonstrate it all. 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 WinForms.

03:23 - As I said, there’s no practical way to get where we think, so I’m just going to demonstrate a couple of major controls. The first thing I’m going to do is one that we’re very famous for, is our data grid control. 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 distributions, 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.

04:13 - It already can display tabular data, what you might 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 car 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. Cars are one option like we have here, so I can skip through the cars for each set cars 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.

05:02 - We’re showing a file explorer type demo here. We can show you tiles, and obviously those tiles can be modified in certain ways, in this case we’re showing real type information here. We have a couple of other views, but now I’ll jump to the Kanban board. This is something that we’ve added recently and we just updated in motion 20.1. So you can display information in a Kanban board type tiles essentially, the tiles can incorporate images like we have two here and so on so forth, you can move these between different columns.

05:51 - >> This is a grid? >> This is the grid, yes. It’s just another display or view base for the grid. 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 wants it to be. 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.

06:33 - Here’s a grid, it’s obviously fold, is a outlook inbox type thing, the grid is the list of e-mails there. But notice there is 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 style scroll bar, you can just get back to the Excel demo here and there is the old style scroll bar. Now, time for a quick demo of a spreadsheet control. So let me jump over to the spreadsheet.

07:22 - The thing about spreadsheets is your end-users are probably very familiar with Excel. Once they know all about Excel, they’re probably going to be very familiar with our spreadsheet control. In fact, what you see here is the control. >> Well, I hope this is outdated. It shows Microsoft at $28 a share. I hope that’s fake data. >> That was the share price when I left Microsoft, I think. >> Okay. >> Them years. >> Higher these days. >> So if you dropped 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.

08:13 - 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 SL X-Files, you can manage everything in code via the spreadsheet API. Version 20.1, we have a vastly improved print in 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.

08:48 - 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”. I know if I go to “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? Let me save it here. Let me open it in Adobe Acrobat which is over here and there we are. >> Very nice. >> But it works just nicely, that’s an improvement in version 20.1. It’s a huge UI components and we’ll be here all day so as to go into all of its capabilities. So let me just close this preview. Excel, as I said, very popular in the business world. 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.

10:06 - 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 is 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 WinForms, for example, with bunch of field editors and command buttons and so on 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 we change the sales rep. We can also do things once we have created this invoice. I’m going to ship it by air and change the terms. But notice the custom cell editors are something that’s baked into the spreadsheet control. Let me quickly save that. We’re going to save it over on my desktop and just save over sales.

11:17 - I’m going to open it up in “Print Preview”, and there it is in Print Preview. A normal invoice that you can print out off. >> Yeah, very cool. >> Now, one final [inaudible]. Before I get to DirectX and GDI, which is very important for WinForms. Simple invoice, we just solve maybe a Profit and Loss report, yes, or even a vehicle inspection report. The things you can do with our report component.

11:53 - The interesting thing about our report component is also available in WPF and in web set of components. They all include a Visual Studio Designer or Document Viewer for each platform and an End-User Report Designer. Let me just quickly show you the End-User Report Designer. Here’s the balance sheet example. Let me click on “Designers” to bring up the designer. The interesting thing about this is it’s yet again a control that you can incorporate inside your own applications.

12:31 - 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 that label to 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. Let me keep it to over maybe make it more 18, maybe bold, and let’s center it. Here, we go. So the report designers, an example of the features you can have with DevExpress WinForms controls.

13:19 - 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 demos center, we have a bunch of indications that you can run these demos either with DirectX or with GDI+. The reason for us doing that is we have created our own DirectX Rendering engine. >> 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 is a superior option? So yeah, back in the beginning, our WinForms components used GDI or GDI+ for rendering operations.

14:27 - Gave us all of this, all programmers, the ability to draw shapes, text, images of, well, anywhere on the screen, but at the expense of some additional complexity and often some poor performance. If you’ve ever developed desktop apps with WinForms, you know that GDI+ was more than good enough, a classic desktop enterprise applications. But fast forward a couple of decades since those days, we now have 4K displays, high DPI, and so on so forth. Also, GDI+ has evolved, certain operations are now hardware accelerated. But advanced UI components, a modern desktop apps still have to deal with the pixel density that’s like eight times higher than when GDI+ was first created or envisaged.

15:17 - So we had a choice either live with the performance bottlenecks and the rendering issues or rolled around DirectX rendering engine, and obviously, we did that. Now in 2020, and all of these different WinForms controls now can render with DirectX Rendering. >> It should make them much faster, I would imagine. >> Exactly. The performance benefits for controls like our data grid are impressive. >> There are also memory benefits, or is it just speed? >> There are actually memory benefits.

16:00 - Think about GDI+, it generates the display, 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 commands streams 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 haven’t ditch GDI+ for legacy projects, essentially.

16:47 - Our customers can specify which rendering engine they want to use. As I mentioned before, WinForms demo navigators as you saw allows you to select and compare for yourself the different rendering engines. While we were preparing for this VS toolbox episode, Robert, we thought of various different ways we could actually show the difference between our controls under DirectX and the equivalent under GDI+. So we recorded a little video to show the real speed. >> Recorded videos. I love it. >> Oh, yeah. >> That was the same format week after week after week.

17:32 - We’re breaking some ground here, I love it. >> So we’re going to demonstrate with this video. You can have a look at the video yourself. It’s devexpress.com/directxvideo, 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 on each grid, and we have 830 rows. On the left-hand side, we have the standard grid view. On the right, which is already finished, we have the DirectX view. Now, we’re going to do page by page. This is pretty impressive. So the standard grid on the left hand side, and as on the right, oh, we finished. >> Holy cow. So that scrolling from top to bottom in a fraction of time? That’s great. >> Page by page, exactly. So there we are.

18:33 - >> With the memory improvements, I imagine you can have more data in there, more controls in there. >> We were trying to show with that particular video how quickly DirectX can render more information on the screen. As we’re scrolling through the grid, obviously, if you have thrown more rewind controls on there, there’s still a difference going on. >> Awesome. > 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.

19:18 - Charting especially, if you’re doing real-time charts, for example. DirectX makes a great difference to that feature requirement of your app. >> Will there going to be a lot more coming soon, or you’ve done the most important ones at this point, right? >> Of course, we’ve 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.

19:52 - Obviously, DirectX was developed essentially for gaming, so anyway 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 GDI+. >> Very cool. >> Let me quickly move to our WPF Controls. Go over a couple of our newest features. >> Cool. >> We have a lot of feature product parity between WinForms and WPF, so I’m not going to show what I’ve just shown for WinForms and select 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.

20:44 - 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 you’ve got opportunity to write your application and have some kind of diagram, so you can show things like flowcharts within your application. For example, here is standard-looking flowchart. We all remember these from when we had a program plan.

21:28 - That’s always an interesting one, I’d take to actually work in this particular office, but this database diagram- >> What are 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. Org chart, that’s always a good fun thing. So diagram control is been improved with Version 20.1, and I think it’s good fun. We also cover Designer as well, so you can incorporate that within your application if you’d like our own Designer.

22:29 - 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 a Gantt control.

23:05 - We all know what a Gantt control is, especially we’ve been doing some kind of project. We have this ability to be able to plot out who’s going to do what and when, and who they are relying on to finish first, and so on and so forth. The nice thing about this is, this 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 the Gantt charts, 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. 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.

24:05 - As you see down here, this particular demo is showing just body style with Sedan and Sport Utility Vehicle. If I only pop to the body style, it has a little filter icon there, and just Excel-style format. I can then say, I want to show all pick up. Notice as I click “Pickup,” the pivot grid actually refreshed with that particular filter, so we have pickup Sedan, Sport Utility Vehicle, 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, just to create your filters and so on and so forth.

24:54 - That is essentially all I really want to show you with regards to WPF. Obviously, there’s a lot more to WPF and WinForms, but that is pretty much. >> Fantastic. >> Absolutely. >> That’s a great overview of the controls. Some of them, they’ve obviously been in there forever, some new. I love the DirectX support that’s really going to speed things up. We’ll have in the show notes links to, of course, your website to the free 30-day trial. Also, how people can get their free version of CodeRush. Thank you guys so much for that. >> Of course, and I hope everyone enjoys. >> This has been awesome. People can signup for newsletters and get told what’s happening, I assume? >> Yes, you’ll be able to signup for newsletters and the like at our website, devexpress.com. >> Thanks so much, Julian. This been awesome, lot of fun. Thanks for coming on the show. >> Thank you, Robert. Thank you for inviting me and DevExpress, of course, and see you next time. >> Awesome demo. See you next time on Visual Studio Toolbox. [MUSIC] .