Hosting a Windows Control in WPF Application

Question

I am very new with WPF. I am using a panel from winforms control using the reference WindowsFormsHost. Panel is shown over the controls of wpf controls. When I am scroll down the page panel moves over the controls of wpf controls.

 

Here is the Xaml source code

 

<Page x:Class="first_wpf_application.Page1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:wf="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms"
xmlns:af="clr-namespace:System.Windows.Forms.Integration;assembly=WindowsFormsIntegration"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300"
Title="Page1">

<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<Grid>
<Grid Background="White" Height="480" HorizontalAlignment="Left" Margin="132,68,0,0" Name="gridAddDiseaseSub" VerticalAlignment="Top" Width="856">
<Label Content="PAGE1" Height="33" HorizontalAlignment="Left" Margin="4,48,0,0" Name="label1" VerticalAlignment="Top" Width="65" FontSize="16" FontWeight="Bold" />
<WindowsFormsHost Name="windowFormHostDiseases" Background="White" Margin="-2,-3,2,3">
<wf:Panel x:Name="pnlDisease" Dock="Fill" BackColor="Red" BorderStyle="FixedSingle"></wf:Panel>
</WindowsFormsHost>
<Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="0,-42,0,0" Name="button1" VerticalAlignment="Top" Width="75" Click="button1_Click" />
</Grid>
</Grid>
</ScrollViewer>
</Page>

 

Output

 

 

 

Thank you....