WindowsFormHost items in a WPF ListBox - Z-Order

Question

I have been to the end of the web and back and I can't seem to find any solution for my Z-Ordering WindowsFormsHost Issue. My issue is specific to rendering a ListBox where the items are WindowsFormsHost wrapped WinForm controls. When rendered all the items are displayed even those outside the bounds of the ListBox -- which makes the entire screen look horrible.

I am attaching a quick code sample. Do I have any options? Do I need to rethink my layout?

    <Window x:Class="WFH_ZOrderIssue.Window1"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:wf="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms"
  xmlns:wfi="clr-namespace:System.Windows.Forms.Integration;assembly=WindowsFormsIntegration"
  Title="WFH ListBox ZOrder" Height="300" Width="600">
 <Grid>
  <ListBox Background="LightBlue" HorizontalAlignment="Left" ItemsSource="{Binding}" MaxWidth="400" BorderThickness="0" 
     ScrollViewer.VerticalScrollBarVisibility="Hidden" ScrollViewer.CanContentScroll="False" 
     ScrollViewer.HorizontalScrollBarVisibility="Auto"
     SelectionMode="Extended" x:Name="lstDisplays" 
     >
   <ListBox.ItemTemplate>
    <DataTemplate>
     <ScrollViewer x:Name="viewer" VerticalScrollBarVisibility="Hidden" >
      <wfi:WindowsFormsHost Margin="20,0" x:Name="host">
       <wf:Button Text="WindowFormsHost - The Ugly" />
      </wfi:WindowsFormsHost>
     </ScrollViewer>
    </DataTemplate>
   </ListBox.ItemTemplate>
   <ListBox.ItemsPanel>
    <ItemsPanelTemplate>
     <StackPanel Orientation="Horizontal" />
    </ItemsPanelTemplate>
   </ListBox.ItemsPanel>
  </ListBox>
 </Grid>
</Window>

and the codebehind:

    /// <summary>
 /// Interaction logic for Window1.xaml
 /// </summary>
 public partial class Window1 : Window
 {
  public Window1()
  {
   InitializeComponent();
   this.DataContext = System.Linq.Enumerable.Range(0, 30);
  }
 }

Please help :)

Answer 1

This is known as the AirSpace issue. Winforms will render above WPF since both use different rendering technologies. There are a few solutions around but are not straight forward.

Have a look at this blog entry or here which you might be able to get working.

If this doesn't work I suggest do not place WinForms anywhere lower than the top level (ie on the window) and make sure you do not do anything fancy with layouts.