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.

Showcase Your Apps on DevExpress.com

Highlight your business app and share your development experiences with the DevExpress community. To include your app in our upcoming App Showcase, please forward an application screenshot to clientservices@devexpress.com and tell us which DevExpress products you currently use within your organization.
20 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
Ferhat Sunar
Ferhat Sunar
Congratulations, the demo in general looks very nice. Have you set a date for demo distribution?
21 November 2019
Svetlana (DevExpress Support)
Svetlana (DevExpress Support)

@Customer117813


We do not have a release date for this demo. We are planning to post blogs each time we have something new regarding this demo and its implementation to share. Follow our blog posts to not miss news. 

22 November 2019
_Vincent
_Vincent

This looks really good! I've "stolen" the idea for the label style values in the payment status column by using the row custom draw cell event. Don't know if there's a build in way of doing this but yea. :)

Note for anyone wanting to use it: This is not perfect, so feel free to improve it. Also, change the column name..


Public Function RoundedRectangle(ByVal Rect As Rectangle, ByVal CornerSize As Integer) As GraphicsPath

        Dim _GraphicsPath As New GraphicsPath()

        Dim ArcRect As New RectangleF(Rect.Location, New SizeF(CornerSize, CornerSize))

        'top left Arc

        _GraphicsPath.AddArc(ArcRect, 180, 90)

        _GraphicsPath.AddLine(Rect.X + CInt(CornerSize / 2), Rect.Y, Rect.X + Rect.Width - CInt(CornerSize / 2), Rect.Y)

        ' top right arc
        ArcRect.X = Rect.Right - CornerSize

        _GraphicsPath.AddArc(ArcRect, 270, 90)

        _GraphicsPath.AddLine(Rect.X + Rect.Width, Rect.Y + CInt(CornerSize / 2), Rect.X + Rect.Width, Rect.Y + Rect.Height - CInt(CornerSize / 2))

        ' bottom right arc
        ArcRect.Y = Rect.Bottom - CornerSize

        _GraphicsPath.AddArc(ArcRect, 0, 90)

        _GraphicsPath.AddLine(Rect.X + CInt(CornerSize / 2), Rect.Y + Rect.Height, Rect.X + Rect.Width - CInt(CornerSize / 2), Rect.Y + Rect.Height)

        ' bottom left arc
        ArcRect.X = Rect.Left

        _GraphicsPath.AddArc(ArcRect, 90, 90)

        _GraphicsPath.AddLine(Rect.X, Rect.Y + CInt(CornerSize / 2), Rect.X, Rect.Y + Rect.Height - CInt(CornerSize / 2))

        Return _GraphicsPath

    End Function

    Public Function ShrinkRectangle(Rec As Rectangle, L As Integer, T As Integer, R As Integer, B As Integer) As Rectangle
        Return New Rectangle(Rec.Left + L, Rec.Top + T, Rec.Width + L - R, Rec.Height - T - B)
    End Function

    Private Sub GridView1_CustomDrawCell(sender As Object, e As RowCellCustomDrawEventArgs) Handles GridView1.CustomDrawCell

        If e.Column.Name = "colCurrentStepNamed" Then


            e.Cache.FillPath(Brushes.Green, RoundedRectangle(ShrinkRectangle(e.Bounds, 0, 10, e.Bounds.Width - e.Cache.Graphics.MeasureString(e.CellValue, e.Appearance.Font).Width - 15, 10), 3))

        End If
    End Sub
29 December 2019
Ken Gliddon
Ken Gliddon
Hello Team, its been 8 months and 2 releases since this post, is this still on the cards?
26 June 2020
Dmitry (DevExpress)
Dmitry (DevExpress)

@Ken Gliddon

Hi Ken. Of course, it's still on the cards. The delay is caused by our internal disagreements. Turned out the management team had a different vision of what the demo should look like, and how it should operate. We are doing our best to resolve all conflicts and release it ASAP. But at the same time, we want to make sure this demo will not just showcase our controls, but be of service to our customers. Hopefully, we'll be able to find balance and your long wait will be rewarded :)

26 June 2020
CRM-81acf039-e5bf-4d6c-8b81-0dbfe5d475e2
Customer103454
I could realy use this demo in my business
13 July 2020
Emanuel De Sousa
Emanuel De Sousa
Demo?
27 August 2020
Bitahwa Bindu
Bitahwa Bindu

Any expected date for athe release of this demo?


29 September 2020

Please login or register to post comments.