Rendering issue with WPF controls inside ElementHost

Question

I am having a WinForms control, inside that I have a TableLayoutPanel which holds multiple ElementHosts and each ElementHost contains a WPF control.

Everything works fine except when the size of controls is bigger then window and ScrollBar is there; when I scroll down, the controls get rendered distorted, like this -

On maximizing the window or re-sizing it, controls render properly (reducing the size such that controls go out of visible area and then increase the size again to bring them back in visible area)

This doesn't happen with WinForms control in the same window just the WPF ones; any idea why this is happening and any solution for this?

Answer 1

this.Loaded += delegate
{
    var source = PresentationSource.FromVisual(this);
    var hwndTarget = source.CompositionTarget as HwndTarget;

    if (hwndTarget != null)
    {
        hwndTarget.RenderMode = RenderMode.SoftwareOnly;
    }
};

Try using that in the wpf control you are hosting. This is a known rendering issue of the the wpf controls that are hosted in win forms. Changing the rendering mode to software only will solve the problem.

Answer 2

I had a similar problem and solved forcing a refresh of the ElmenetHost in the scroll event of the TableLayoutPanel

Answer 3

Ok, this is gonna sound like total B.S. but it worked for me: in the Load event of your form, resize the form.

public class MyForm : Form
{
   public MyForm()
   {
      Load += (o, e) => { Width -=1; Width +=1; };
   }
}

After the form has been resized, I could not force a display issue.