Overlay Style Designs in .NET

Question

I am currently working on an application that will create a TV Guide application in C# .NET. The issue is that when a user selects an option to open the TV Guide, I would like to keep the current stream playing, but minimize it to the upper right corner and keep it playing while allowing the user to browse the EPG data and have a smaller video playing.

Should I just place all of the labels/buttons/etc. over the top of the Panel (what I use to display the actual video in), and hide/show them as needed, or is there a better approach to this?

On a side note, I am assuming Labels will be the best solution for the displaying the current channel information in, but if there are any better options, I would love to hear them.

Answer 1

I am going to answer based on the assumption that this is a native windows winforms app running in windows. If this is incorrect, please edit your question and provide more details about your project and target platform.

Choice #1 is DirectX

These kind of multimedia apps are really best written using DirectX. You are essentially writing a "game" from a video performance perspective (and possible user input perspective too). You want to maintain video streaming while displaying a menu (perhaps even animating the menu). DirectX will allow you take advantage of modern graphics processors to draw/render a nice menu/ui with video somewhere on the screen.

Could you do this without writing your own menu rendering using DirectX? Probably. But it would be heavy and likely to impact system perfrmance or at the very least video performance and overall application performance.

So Choice #1 is DirectX - There will be examples of this kind of programming by searching the web for 'C# game programming'.

Using something like DirectX and handling user input over the entire app surface will allow a lot more control over user input too. For example you might decide to support drag style scrolling. The whole menu could smoothly scroll up to expose more channel below, etc... This is going to be very dificult with a collection of numerous winform controls like buttons and rather easy (or at least realistic) with DirectX.

Choice #2 - Winforms

Ok now Choice #2 that you were hinting at in your question was using native C# controls like button, label, panel, etc. You could make this work, but you will be sacrificing a lot feature capabilities and costing a lot in performance.

For example lets look at the screen shot you posted. I assume that table would be divided up into buttons where each cell is one button on the panel? You could click a channel to select it or click a show to start watching that one? (I'm guessing here.) It looks like at least 22 buttons in that screen shot. Now lets say you scroll the screen either down to expose more channels or right to look later in the timeline, that operations will need to destroy/dispose of all your buttons, figure out what new buttons it needs, create them all, size/position them and add them to your panel (particularly in the shows area where the length of show/block size will change for every chanel at any point in time). That operation of destroying buttons and creating buttons is clunky, its costs a lot of performance, will likely blink the UI at least once and won't animate smoothly. Also the user interaction is local to each individual button, it would be very dificult to implement something like swipe style scrolling as each button has its own mouse events, etc..

Ok I just thought of one more winforms technique, an aweful one but I know it'll pop into your head! What if you made a panel with scrollbars that contained a massive array of buttons for all the available channels? This gives you smoother scrolling and reduces the destroy/create new button issues, right? Well that'll be a performance nightmare too! Try putting 100-200 buttons in a scrolling panel and you'll find out quickly this is a bad idea.

Better Winforms Techniques

If you must go the winforms route (because you can't/won't use DirectX) then you should implement the menu in a DirectX style way.

1. Create a menu control class which inherits from a panel
2. Override the drawing/painting (Control.OnPaintBackground and Control.OnPaint), override keyboard and mouse handlers, etc.
3. Draw the menu inside the panel using the .Net Graphics class (provided in the OnPaint event PaintEventArgs)
4. Handle all mouse/keyboard events and redraw your control when necessary (using Control.Invalidate() or Control.Refresh().

You won't get DirectX performance, but it'll be way better than a large array of controls. (You'll have the technique correct, but may not get the performance benefits of graphics processor acceleration that DirectX can harness.)