Duplicating a complex interface without a specification of ... at least ... what its elements do, and how the user can interact with them at run-time is, in my humble opinion, probably not the best way to learn how to create complex interfaces.
Better, I think, is to pose certain problems in ui design, and application function, features, and style, to yourself, and then try and create them, experimenting with the different controls that .NET offers in Windows Forms, or WPF.
I do think there are certain design principles you can articulate looking at the screen-shot you linked to:
1. which Controls to use for certain UI elements may be very obvious ... and the more experience you have with the range of Controls provided by your "stack" (Win Forms, or WPF), and the typical "vocabulary" of Windows Applications UI, the greater your skill in identifying those Controls will be.
a. example: one quick look at your ui-graphic suggests a StatusBar at the bottom of the UI.
1. study and analyze the interface to distinguish elements that can be duplicated. The goal is to create one component which you can then re-use.
a. example: the major areas of your ui-graphic with large labels "Left Lane," "Right Lane," suggest creating one UserControl. The only difference appears to me to be the position of the "box" with a green area in the top, and body in black.
If you wish to create a UI like the one in the graphic without using (in Windows Forms) a lot of Panels, and Panels inside Panels, I sugguest you experiment with the TableLayoutPanel in Win Forms.
You can "solve" the issue of having many elements enclosed in their own borders using strategic creation and sizing of Rows and Columns of this Control.
By setting the 'ColumnSpan, and/or 'RowSpan properties of the Controls you embed in the Cells of the TableLayoutPanel, you can make individual Controls occupy any amount of vertical or horizontal space in the TableLayoutPanel.
So, for example, if I defined a TableLayoutPanel with two Columns, and several Rows, and I wanted a StatusBar to occupy the full width of the TableLayoutPanel in its bottom Row:
1. add the StatusBar to the first Cell in the bottom Row.
2. set the ColumnSpan Property of the StatusBar to #2 in the PropertyBrowser for the StatusBar.
nasib baik !
Submit an article or tip