WinForms Dental Clinic Demo and SvgImageBox Control

WinForms Team Blog
29 October 2019

Last month, we previewed our brand new Dental Clinic demo. Our thanks to everyone who shared their initial thoughts with us via blog comments and within our WinForms RWA forum. In this post, I’d like to share detailed design mock-ups and explain how we used our newest WinForms Editor within this sample app (a control we built specifically for this demo).

As you can see in the image below, the Dental Clinic app includes a vertical sidebar with buttons that allow users to navigate between application modules. The “Patients” module displays a grid with relevant patient data.

Staff can activate a multi-tab patient card to add new patient information or modify existing patient data. The first patient card tab stores/displays “Personal Information”, medical procedures (both upcoming procedures and those completed in the past), and important health advisories.

If a patient requires treatment, the dentist can navigate to the “Procedures” tab (wherein all procedures are grouped into categories). The doctor chooses the category (i.e., “Restoration”) and uses the interactive “tooth map” to select the appropriate procedure for each tooth.

As you probably know by now, this “tooth map” was built with a new DevExpress WinForms control - the SvgImageBox editor (part of our v19.2 distribution).

Vector images are comprised of simple elements (paths, groups, etc.) rather than pixels. SvgImageBox analyzes the elements contained within a vector image, and allows you to highlight them or change visibility settings when necessary. In the Dental Clinic demo, the control displays/hides elements like "root canal" or "sealant" based upon selections made by the doctor.

Our v19.2 installation includes a new module within the XtraEditors demo. This module demonstrates another use case for the SvgImageBox - ticket booking (users can reserve a spot in a theater with a simple mouse click). The seats inside the demo are drawn using three simple elements (seat number, the rectangle around it, and an element that represents armrests) organized into a group. A user can click or hover any of these three elements, and the entire group automatically “lights up” (the control fires a series of events that allows you to identify which element was hovered\clicked, and highlight this or any other element in response).

The third tab of a patient card is “Treatment Plan.” As its name implies, this tab allows a doctor to review all prescribed procedures and schedule them as needed.

The “Calendar” module allows you to browse all scheduled procedures.

The final module of the app displays various graphs and charts, and full appointment history within the second tab.


In the next post of this blog series, we’ll dive into the technical details – we’ll detail the controls used for each module and how we wired up the app’s internal logic.

Feel free to share your questions and thoughts below, and stay tuned for the next blog post.

13 comment(s)
Heiko Mueller
Heiko Mueller
Am I right that this demo uses a special skin instead of an existing default skin and some custom controls that are not included in DevExpress by default (e.g. the list of 'Latest procedures' in the second screenshot)?

If so, I think it would be better to find a solution that can be created with what customers have out of the box.

If I'm wrong, it would be very nice because the application itself is very attractive.


29 October, 2019
Dmitry (DevExpress)
Dmitry (DevExpress)
@Heiko
these are design mock-ups. The demo itself is at the active development stage, and the result may slightly differ from these screenshots. It goes without saying that we won't use anything that is not available to our customers. There won't be any internally created skins or controls, because our primary goal is not just to create a nice-looking demo, but to make a sample that is close to real customer needs.

Another benefit is sharing our experience as we turn this design concept into a working application. For instance, as you rightfully noticed, the "Latest Procedures" panel: it looks like a TileView, but not quite. We'll pay attention to such UI elements, and explain which control suites the task and why, what issues and challenges we've faced, and why we had to deviate from this initial concept (if that happens).
29 October, 2019
Customer94192
Customer94192
how can i download demo file ?
29 October, 2019
Phillip Brand
Phillip Brand

I'm interested in seeing how you create the skin. Could you also create a post on how you use the skin editor? I find it really powerful but totally overwhelming and mostly confusing.

29 October, 2019
Dmitry (DevExpress)
Dmitry (DevExpress)

@Customer94192 there's no demo yet, only a prototype.

@Phillip great idea, thanks. Sure thing, if a demo requires a custom skin - there will be a post explaining how to do this. In the meantime, did you try a tutorial from our Skin Editor documentation? Skin Editor is, indeed, a powerful app that requires some basic understanding of how DevExpress skins work, and it would be extremely helpful if you'd share what exactly you find confusing.

29 October, 2019
dbSoft
dbSoft
Where can i found a demo? Is it included in version 19.2.3?
29 October, 2019
dbSoft
dbSoft
Perfect work by the way!
29 October, 2019
Appy Developers
Appy Developers
Very nice use of the svgImageBox.
29 October, 2019
Christopher Jay
Christopher Jay
Looks great!
29 October, 2019
Customer104222
Customer104222
Where is it's demo ?
30 October, 2019
Alvis Kums
Alvis Kums
This new control scgImageBox actually is really awsome!! Cant wait, till i get some projects where i can use it!
30 October, 2019
Svetlana (DevExpress Support)
Svetlana (DevExpress Support)

@Customer104222
@dbSoft 

Dental Clinic Demo is not shipped with version 19.2.3. We are currently working on this. We will definitely publish updates regarding this demo in our blog posts.

5 November, 2019
Customer117813
Customer117813
Congratulations, the demo in general looks very nice. Have you set a date for demo distribution?
21 November, 2019

Please login or register to post comments.