error when using winformhost in wpf frameless window please help

Question

the app works normally and resize works when i dont use WindowsFormsHost but when i use it and try to resize the app the WindowsFormsHost area becomes transparent and shows the background apps, please someone help i have tryed everything

    

<Window x:Class="Android_player_2.Home"
        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:local="clr-namespace:Android_player_2"
        xmlns:src="clr-namespace:Android_player_2.Src"
xmlns:pages="clr-namespace:Android_player_2.Src.Pages"

    xmlns:wf="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms"
         
    xmlns:winforms="clr-namespace:System.Windows.Forms.Integration;assembly=WindowsFormsIntegration"
    
    mc:Ignorable="d"
    Title="Home" Height="450" Width="800"
    
    
    KeyDown="Home_OnKeyDown"
    KeyUp="Home_OnKeyUp"
    Loaded="Home_OnLoaded"
    AllowsTransparency="False"
    Background="Black"
   
   
    
    
    
  
    
    >
<!-- <Window.Resources> -->
<!--     <Style TargetType="{x:Type Window}"> -->
<!--         <Setter Property="WindowChrome.WindowChrome"> -->
<!--             <Setter.Value> -->
<!--                 <WindowChrome GlassFrameThickness="0" -->
<!--                                     CornerRadius="0" -->
<!--                                     CaptionHeight="0" -->
<!--                                      /> -->
<!--             </Setter.Value> -->
<!--         </Setter> -->
<!--     </Style> -->
<!-- </Window.Resources> -->


<!-- #BF000000 -->
<WindowChrome.WindowChrome>
    <WindowChrome x:Name="chrome" CornerRadius="0" GlassFrameThickness="5" CaptionHeight="0"   ></WindowChrome>
</WindowChrome.WindowChrome>



<!-- <WindowChrome.WindowChrome> -->
<!--     <WindowChrome CornerRadius="0" GlassFrameThickness="0" CaptionHeight="0"   ></WindowChrome> -->
<!-- </WindowChrome.WindowChrome> -->


<!-- <WindowChrome.WindowChrome> -->
<!--     <WindowChrome -->
<!--         ResizeBorderThickness="6" -->
<!--         CaptionHeight="30" -->
<!--         CornerRadius="0" -->
<!--         GlassFrameThickness="0" -->
<!--         UseAeroCaptionButtons="False"/> -->
<!-- </WindowChrome.WindowChrome> -->





<Grid Margin="0" >
    
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/> <!-- Title Bar -->
        <RowDefinition Height="*"/>    <!-- Content Area -->
    </Grid.RowDefinitions>
    
    <pages:TitleBar x:Name="CustomTitleBar" 
        Grid.Row="0" 
        Title="Home"
        ParentWindow="{Binding RelativeSource={RelativeSource AncestorType=Window}}"></pages:TitleBar>
    
    <!-- <src:Video_player Grid.Row="1" ></src:Video_player> -->
    <!-- <src:Display_view Grid.Row="1" ></src:Display_view> -->
    
    <!-- <src:del_test Grid.Row="1" ></src:del_test> -->
    
    <WindowsFormsHost Grid.Row="1" x:Name="windowsFormsHost" Margin="5"  Background="Black" >
        <wf:Form x:Name="winFormsForm"
                 FormBorderStyle="None"
                 ShowInTaskbar="False"
                 
                 BackColor="Black"
    
    
    
                 TopLevel="False"/>
    </WindowsFormsHost>
    
</Grid>

</Window>