how to implement this kind of editor

[Robert Ludig]

I am about to implement an editor that has the following features:

A scrollable and zoomable panel (drawing pane , "stage") holds a large
number of items that are arranged on a timeline from left to right.

These items must repsond to use interaction (click, doubleclick, drag,
keystrokes) and must be rearangable on the timeline via drag&drop. In
their client area they can contain text, an icon, text and simple
controls (textbox, dropdown, button).

The stage can contain up to 400 of those items. When the user zooms
the stage the timeline tightens or widens an all of the items on the
timeline get scaled respectively. The more real estate an item
currently has the more information is displayed inside (and the more
controls become visible).

The whole thing behaved sort of like in a video editing software such
as Adobe Premiere or MS Moviemaker (with timeline activated).

-------------------

How would this ideally be implemented. Are there best practises how to
go about this?

How would I implement the stage? I was thinking about a usercontrol
that holds a panel on wich the items get drawn. I would add a Custom
Control the Panel.Controls collection for each item that gets added to
the stage. The position and size of each custom control depends on
Item.StartTime, Item.EndTime and the current scale of the timeline.
The Item Custom Control handles its OnPaint to draw its content. When
the timeline gets zoomed Panel.With and Panel.Height change an all
Item Controls inside the panel get repostioned and repainted. Since we
are in a composite usercontrol the scrollbars would update
automatically.

Are there any downsides with this approach performancewise? Would the
Panel be able to handle up to 400 custom controls ? When I zoom in a
lot the panel would become very large ... Do I need some sort of
virtualization technique?

Any tips on how to approach this are welcome. Thanks !

 

[Kevin Spencer]

Use Managed Direct3D. Since it uses vector graphics, scalability is not a
problem. In addition, you can take advantage of the 3D rendering
capabilities to create a more intuitive user interface. If you go with your
Windows Forms Control-based solution, it will take at least as long to build
it, and it will perform more poorly. You might also want to take a look at
the Vista/.Net 3.0 platform Windows Preentation Foundation, which is also
basically Direct3D-driven. See
http://msdn2.microsoft.com/en-us/xna/aa937781.aspx

--
HTH,

Kevin Spencer
Microsoft MVP

Help test our new betas,
DSI PrintManager, Miradyne Component Libraries:
http://www.miradyne.net

 

[Robert Ludig]

Use Managed Direct3D. Since it uses vector graphics, scalability is not a
problem. In addition, you can take advantage of the 3D rendering
capabilities to create a more intuitive user interface. If you go with your
Windows Forms Control-based solution, it will take at least as long to build
it, and it will perform more poorly. You might also want to take a look at
the Vista/.Net 3.0 platform Windows Preentation Foundation, which is also
basically Direct3D-driven. Seehttp://msdn2.microsoft.com/en-us/xna/aa937781.aspx

--
HTH,

Kevin Spencer
Microsoft MVP

Help test our new betas,
DSI PrintManager, Miradyne Component Libraries:http://www.miradyne.net













- Zitierten Text anzeigen -

I am well aware that this whole thing would be a no-brainer with WPF.
Unfortunately it has to be a windows forms 2.0 / GDI+ ONLY
application. WPF and MDX are not an option. I would be interested in
input on how do design my class hierarchy using winForms/GDI+.

 

[Fabio]

"Robert Ludig" <[email protected]> ha scritto nel messaggio

I am well aware that this whole thing would be a no-brainer with WPF.
Unfortunately it has to be a windows forms 2.0 / GDI+ ONLY
application. WPF and MDX are not an option. I would be interested in
input on how do design my class hierarchy using winForms/GDI+.

In this case you can start taking a look at my simple graphic library at
http://www.neodatatype.net

 

[Bob Powell [MVP]]

Pretty simple as far as zooming and mouse interactions go. You just need
a canvas type component that supports back-tracking.

I just mailed you some code too large to post here. I hope it helps.

--
Bob Powell [MVP]
Visual C#, System.Drawing

Ramuseco Limited .NET consulting
http://www.ramuseco.com

Find great Windows Forms articles in Windows Forms Tips and Tricks
http://www.bobpowell.net/tipstricks.htm

Answer those GDI+ questions with the GDI+ FAQ
http://www.bobpowell.net/faqmain.htm

All new articles provide code in C# and VB.NET.
Subscribe to the RSS feeds provided and never miss a new article.

 

[Kevin Spencer]

Hi Robert,

That's a shame, but I can certainly understand your situation. We work
within the parameters we are given.

Just thinking it over, of course, managing 400 controls on a single Windows
Form is going to cause performance issues. However, it is fairly obvious
that you can't actually view the details of 400 controls at one time. In
other words, there will be times/scales when a "control" is going to be not
much more than a sliver, if that, possibly not even visible to the eye.

So, what I'm thinking is that you actually need to create 2 classes of
controls. One would be the timeline itself, which would draw all of the
items itself, proportionally, representing them as slivers, or chunks, or
some sort of symbolism that represents the relative size of the item. The
timeline would handle click events, relating them to the underlying items.
When the timeline is zoomed in sufficiently, you begin to populate the
zoomed-in area with the second control, which graphically represents the
item with more user interaction available via its' event model. That way,
you might only have to draw at most 20-50 controls at a time.

--
HTH,

Kevin Spencer
Microsoft MVP

Help test our new betas,
DSI PrintManager, Miradyne Component Libraries:
http://www.miradyne.net

 

[Peter Lewis]

I am about to implement an editor that has the following features:

A scrollable and zoomable panel (drawing pane , "stage") holds a large
number of items that are arranged on a timeline from left to right.

These items must repsond to use interaction (click, doubleclick, drag,
keystrokes) and must be rearangable on the timeline via drag&drop. In
their client area they can contain text, an icon, text and simple
controls (textbox, dropdown, button).

........ deleted ..

Something like Microsoft Excel should be doable using nothing but GDI
+. See http://timios.net/Gantt for another example, look for the
colophon page.

P.