Overlay WinForms controls on DirectX content - wpf

I'm trying to create a graphics library with graphics control. The control enables adding overlay controls. The graphics on the control uses DirectX and is part of the library, while the overlay controls are provided by end users of the library which are not graphics experts. Thus stability and convenient API are the most important issues.
For technical reasons I need to show the graphics by DirectX directly on the control and cannot host the DirectX scene using another framework as WPF (For more information see my previous question: Stereoscopic 3D on WPF).
I think the most problematic issues are:
Transparency (and semi-transparency...) within the area of the control itself.
Animations on the overlay control: That's why control rasterization (e.g. by WPF) is not an option.
My tries until now:
Following the lot of posts discussed similar issues I decided to use WS_EX_TRANSPARENT. I was surprised to see that although the Airspace issue, I can see the DirectX content under the transparent regions of the overlay control. However the overlay control was not shown except for when I resized the window - then it blinks and disappears again. Here is the code of the overlay control:
class GDIGraphicsControl : UserControl
{
private const int WS_EX_TRANSPARENT = 0x20;
protected override CreateParams CreateParams
{
get
{
CreateParams p = base.CreateParams;
p.ExStyle |= WS_EX_TRANSPARENT;
return p;
}
}
public GDIGraphicsControl()
{
this.Dock = DockStyle.Fill;
}
protected override void OnPaintBackground(PaintEventArgs e)
{
// Do nothing
}
protected override void OnPaint(PaintEventArgs e)
{
for (int i = 0; i < 10; ++i)
{
int alpha = 25 * i;
int yPos = 10 * i;
e.Graphics.FillRectangle(
new SolidBrush(Color.FromArgb(alpha, Color.Green)),
5, 5 + yPos, 100, 10);
}
e.Graphics.FillEllipse(new SolidBrush(Color.Red), 110, 5, 100, 100);
}
}
To analyze the blinking problem I tried to make things simpler. First for debugging purpose I tried to use GDI rendering instead of DirectX. I implemented it such that it will be very similar to the DirectX rendering - especially the Form.SetStyle and the Invalidate() call in every OnPaint() which I thought to be the cause to the problem. The problem do exist also in GDI-only rendering. Here is the GDI-rendering parent control code:
public partial class RenderingForm : Form
{
public RenderingForm()
{
InitializeComponent();
ControlStyles styles =
ControlStyles.AllPaintingInWmPaint |
ControlStyles.OptimizedDoubleBuffer |
ControlStyles.ResizeRedraw |
ControlStyles.UserPaint |
ControlStyles.Opaque;
this.SetStyle(styles, true);
Button button = new Button()
{
Text = "Just a button",
Left = 5,
Top = 210,
Width = 200
};
this.Controls.Add(button);
this.Controls.Add(new GDIGraphicsControl());
}
protected override void OnPaintBackground(PaintEventArgs e)
{
// Do nothing
}
protected override void OnPaint(PaintEventArgs e)
{
e.Graphics.Clear(Color.Blue);
this.Invalidate();
base.OnPaint(e);
}
}
I tried to add a simple overlay Button to check if the problem exist when no transparency is used (see in the above code). The button doesn't blink, but instead of the button I see garbage on the screen until resizing the control first time - then the button appears correctly.
I tried to invalidate the child overlay controls but it has no effect. I tried to invalidate it both in parent's OnPaint and in the child OnPaint to create the message-pump rendering effect and it has no effect. Setting the control's style as in parent rendering control didn't resolve the problem and caused the background to blink in black.
I also performed some tries using WPF but the question is long enough for now without hard Airspace issue...
Now for the questions:
Can someone explain how does GDI overlay over DirectX graphics work? Especially I don't understand it because I know that WinForms transparency is working by that the children controls render on the parent's Device Context - and DirectX has a hardware rendering context. Does it mean that the DirectX texture is copied back to software?
Why does overriding the CreateParams causes the Control to blink and how to prevent it?
What are performance cost do those transparency methods (overriding CreateParams, BackColorTransparency = True, Control.SetStyle+override OnPainBackground)? It is of high importance that the underlying graphics will be rendered efficiently but I don't care about the overlay performance (except for lightweight animation).

I've done a LOT of research in this area and I've come to the conclusion that Airspace is the way to go. I've collected sources from numerous projects around the web and put them into a single project that allows you to integrate WPF with XNA. I've also done a version of this that was pure DirectX, but to be honest the XNA version is a lot more straightforward and better suited to C#. I don't have enough room to post all the details here but you can download the demo from my website and probably figure out where to go from there. Good luck!

Related

Changing MediaElement source without Flicker

I have a simple video player that plays a series of videos using the WPF MediaElement. The videos together form one continuous film that move around a still image. At the end of each video the movement freezes on the final frame of the currently playing video. When I press a button the next video plays, which continues the movement around the still image. It's an application I'm going to use to give a speech. Effectively I've got a series of videos for which the last frame of each video is the same as the first frame of the next video.
I'm using a WPF MediaElement and changing the Source property when the user clicks on the mouse.
The problem that I have is that, when I change the Source property, the MediaElement becomes transparent while the next video is loaded. This means there is a flicker between videos. Is there any way of preventing this flicker? What other strategies could I use?
Here's some code:
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
this.x_MediaElement.MouseLeftButtonDown += x_MediaElement_MouseLeftButtonDown;
this.MouseLeftButtonDown += MainWindow_MouseLeftButtonDown;
this.WindowStyle = WindowStyle.None;
this.WindowState = WindowState.Maximized;
}
void MainWindow_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
MoveNext();
}
private void MoveNext()
{
_sourceIndex++;
if (_sourceIndex >= _sources.Length)
_sourceIndex = 0;
Debug.WriteLine(string.Format("Playing {0}", _sources[_sourceIndex]));
this.x_MediaElement.Source = new Uri(_sources[_sourceIndex]);
this.x_MediaElement.Play();
}
private int _sourceIndex = -1;
private string[] _sources = new string[] {
//SOURCE GO HERE
};
void x_MediaElement_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
MoveNext();
e.Handled = true;
}
}
I am gonna be honest with you. MediaElement has more bugs than you can count with fingers. Starting from that the mediaElement blows up after playing 20 videos(no more MediaEnded event, it will crash or something like that). And ofcourse the performance. Its not synchronized with vertical sync. So the video might actually seem laggy.
I advise you to look into DirectShow technology(essentially what WPF is based on, but you can switch renderer which will avoid lag). COnsidering that you will not be developing any professional application, I guess MediaElement will be fine.
However, MediaElement is the simplest option, and if it works for you, then keep working with it. As for your problem, I think there are few possible solutions:
Have two MediaElements and switch between them. If one video ends, start another vid in another MediaElement, as long as you play first frame on second mediaElement, hide the first mediaElement, and vice versa. You can poll for position, and maybe MediaStarted event. This way the flicker will be almost impossible to notice.
If you want fluent video playing without ANY flicker at all, there is GMFPlay. You can check it out. Though it's not MediaElement. But it can play videos simultaneously without any flicker.
Take screenshot of the last frame(you can take screenshots with WPF) and show it as Image while MediaElement is secretly loading.

How to implement my own scrolling in windows form

I have an MdiClient derived from Form and I use the surface of this control for GDI+ drawing. I run into troubles implementing my own scrolling for this control. I set both AutoScroll and AutoSize properties to false and try to use form's own horizontal/vertical scrollbars instead of placing my own. Observed form's behavior is quite confusing. To begin with there are two properties (A) HScroll and (B) HorizontalScroll that also allows access to Visible attribute.
I ended up setting HorizontalScroll.Visible = true and leaving HScroll = false (same for vertical) but am curious why there are two of them. Documentation implies that both control visibility of horizontal scroll bar but they do not appear to access the same data. Besides, it looks like HScroll is being reset on every paint. At the moment I ignore existence of HScroll/VScroll. Is it OK for my application?
What is more critical for me is the ability control placement of the thumb on scroll bars. I set VerticalScroll attributes Minimum = 0, Maximum = 100, and Value = 50 but when form is displayed thumb is positioned at the start of scrollbar not in the middle. Why? Also when user clicks on horizontal scrollbar an event handler for horizontal scrolling is invoked but meanwhile form has already reset VerticalScroll.Value to 0 (without raising vertical scroll event). What is going on?
I probably don't understand how framework expects me to implement what I need. Can someone shed some light.
Credit goes to LarsTech who pointed me towards good solution. Setting large AutoScrollMinSize automatically does whatever needs to be done enabling and controlling form scrollbars. There is one potential trap to watch for. Be aware that programmatic attempts to set AutoScrollPosition will be ignored until form is shown. So if you want your form to open with scrollbars not in the default (0,0) position then place your code inside form_shown event handler.
Just set the AutoScrollMinSize to your desired canvas.
Quick example:
using System.Drawing;
using System.Drawing.Drawing2D;
private void Form1_Load(object sender, EventArgs e)
{
this.AutoScrollMinSize = new Size(1200, 1200);
}
private void Form1_Paint(object sender, PaintEventArgs e)
{
e.Graphics.Clear(SystemColors.Window);
using (Matrix mx = new Matrix(1, 0, 0, 1, this.AutoScrollPosition.X, this.AutoScrollPosition.Y))
{
e.Graphics.Transform = mx;
e.Graphics.FillEllipse(Brushes.Red, new Rectangle(250, 250, 100, 100));
}
}
See these links: Understanding Windows Forms AutoScroll and How to back-track the mouse to the virtual page.

How to make label transparent without any flickering at load time

I have a panel and on that I've a picturebox. There are around 20 labels that I've to show in the panel. I want the background of Label to be transparent ie the image in picturebox is shown and the label displays only the text.
Now since labels do not exhibit true transparency I made the labels child of picturebox
this.lbl1.Parent = pictureBox1;
This has solved my immediate problem but now when the form loads, all the labels take a while to become visible and do so one at a time. I'd appreciate if you guys can give some solution for this.
Thanks in advance
The standard cure for flicker is double-buffering. But that cannot solve this kind of flicker. It is a different kind, caused by having multiple windows overlapping each other. Each label is its own window. When the form needs to paint itself, it draws its background leaving holes for the child windows. Each child window then takes a turn drawing itself. And their child windows draw themselves next. Etcetera.
This becomes noticeable when one control takes a while to draw, no doubt your picture box. Especially when it displays a large image that needs to be resized. The holes for the child windows stay unpainted while the picture box draws. They have a white background, black when you use the form's TransparencyKey or Opacity property. This can contrast badly with the image in your picture box, that effect is perceived by the user as flicker.
One immediate cure is to not use controls so you don't pay for their window. A Label is very convenient but it is a massive waste of system resources to burn up a window just to display a string. You can simply implement the picture box' Paint event and draw the strings with TextRenderer.DrawText(). PictureBox has double-buffering turned on by default so the image as well as the text is drawn completely smoothly, no more flicker. The obvious disadvantage is that you lose the convenience of point-and-click, you have to write code.
There are other fixes possible. One of them is to prevent the picture box from leaving holes for the child windows. It will draw the entire image, the labels pop on top of them. That's still flicker but not nearly as noticeable. Add a new class to your project and paste this code:
using System;
using System.Windows.Forms;
internal class MyPictureBox : PictureBox {
protected override CreateParams CreateParams {
get {
var parms = base.CreateParams;
parms.Style &= ~0x02000000; // Turn off WS_CLIPCHILDREN
return parms;
}
}
}
Compile and drop the new picture box control from the top of the toolbox onto your form.
Yet another possible workaround is to make the form and all of its children double-buffered. This doesn't speed up the painting at all but all of the windows get rendered into a memory buffer, the result is blitted to the screen. You'll notice a delay but the window suddenly pops on the screen. This is called compositing. Winforms doesn't support this directly since it can have side-effects but it is easy to enable. Paste this code into your form class:
protected override CreateParams CreateParams {
get {
CreateParams cp = base.CreateParams;
cp.ExStyle |= 0x02000000; // Turn on WS_EX_COMPOSITED
return cp;
}
}
Supported by XP and later. Watch out for painting artifacts.
or you can ditch the labels and draw the text yourself:
private void pictureBox1_Paint(object sender, PaintEventArgs e)
{
TextRenderer.DrawText(e.Graphics, "Label1", SystemFonts.DefaultFont,
new Point(10, 10), Color.Black, Color.Empty);
}
The label does not support transparency, you must create your own unique custom control, you can see these code examples.
http://www.codeproject.com/KB/dotnet/transparent_controls_net.aspx http://www.codeproject.com/KB/vb/uLabelX.aspx
Bye

WPF hosting a WindowsFormHost what are my drawing options?

I have a WPF app which hosts a WindowsFormHost. The WindowsFormHost loads ESRI's ArcEngine. The ArcEngine has some drawing functions available but I'm looking for more power and control. Assuming I want to draw some images & text on the screen over the image created by the ArcEngine, what are my options, if any?
A WPF window cant render anything over any winforms elements that it contains. You either need to do the drawing within the winforms element or do a nasty hack of creating a separate WPF window with a transparent background & no border that you programatically move around to keep on top of the winforms element - then you can draw into this overlay window using WPF mechanisms. it's ugly but effective.
You can implement your Custom Layer. Inside the layer you can implement your drawing method with GDI+ or OpenGL (in Dynamic Display mode).
Create class that implements ILayer interface. In this case you can to manage your drawing as you wish.
There is an exmaple of simple implementation with GDI+
[Guid("0c745c09-a67a-4736-ba8c-23238582f78f")]
[ClassInterface(ClassInterfaceType.None)]
[ProgId("CustomLayerPan.customLayer")]
public class customLayer : ESRI.ArcGIS.ADF.BaseClasses
{
public customLayer(List<IGeometry> p_objItems)
{
}
public override void Draw(ESRI.ArcGIS.esriSystem.esriDrawPhase drawPhase, ESRI.ArcGIS.Display.IDisplay Display, ESRI.ArcGIS.esriSystem.ITrackCancel trackCancel)
{
Graphics objGraphics = Graphics.FromHdc(new IntPtr(((IScreenDisplay)Display).hDC)) as Graphics;
//Draw here using GDI+
}
}

How can I use a meter-style progress bar?

In Vista/7, the Windows Explorer shell window makes use of a special kind of static progress bar to display hard drive space.
With default styles, this bar is blue colored and non-animated. It also turns red colored when it gets close to being full (low disk space).
Using messaging, I can tell the Windows Forms ProgressBar control to update its state to Paused and Error (yellow and red colored, respectively), which works fine, but these are still specific to progress.
In the Windows User Experience Guidelines, it specifically points out this "meter" variant of the Progress Bar:
This pattern isn't a progress bar, but
it is implemented using the progress
bar control. Meters have a distinct
look to differentiate them from true
progress bars.
They say it "is implemented using the progress bar control", so... how? What message could I send to the control to have it behave this way?
I've seen that you can send messages for setting the bar color, but the documentation says these calls are ignored when visual styles are enabled. Nothing else in the Windows API documentation for raw ProgressBar controls seemed to suggest a way to do this. Am I just stuck making a custom drawn bar? I'd really like to utilize the OS whenever possible so that the application will appear consistent throughout different OS versions. I realize that pre-Vista versions probably won't support this, though.
I'm looking for a Windows Forms solution, but I wonder if it is even exposed at all via Win32 API.
It is possible, but not through ProgressBar. Nor does Win7 use a PB to draw those meters, there is no window handle associated with the bar. It must be using custom drawing. That's possible in WinForms as well with the VisualStyleRenderer class. One thing that doesn't help however is that the required visual style parts and states are not declared, not even in .NET 4.0.
This sample form reproduces the meter bar:
using System;
using System.Drawing;
using System.Windows.Forms;
using System.Windows.Forms.VisualStyles;
namespace WindowsFormsApplication1 {
public partial class Form1 : Form {
public Form1() {
InitializeComponent();
}
VisualStyleRenderer renderer = new VisualStyleRenderer(VisualStyleElement.ProgressBar.Bar.Normal);
protected override void OnPaint(PaintEventArgs e) {
renderer.SetParameters("PROGRESS", 11, 2);
renderer.DrawBackground(e.Graphics, new Rectangle(10, 10, 200, 15));
renderer.SetParameters("PROGRESS", 5, 4);
renderer.DrawBackground(e.Graphics, new Rectangle(10, 10, 100, 15));
}
}
}
I got the part and state numbers from the vsstyle.h SDK header file.

Resources