Graphics from ScrollViewer overlays graphics outside ScrollViewer when scrolled down (WPF) - wpf

Question

I have a XAML file. In this XAML file I have a ScrollViewer to which later I add WinFormsHost -> basically place where you can put standard WinForm. When I scroll the ScrollViewer down the graphics from inside of it goes outside. Please look at the first an the second screenshot. How to deal with that drawing problem? Can I set ZIndex for that ScrollViewer?
<Window x:Class="Example.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:Example"
Title="MainWindow" WindowState="Maximized" Loaded="Window_Loaded"
>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="2*" />
<RowDefinition Height="3*" />
<RowDefinition Height="7*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" /> <!-- this column is for future purpouses -->
<ColumnDefinition Width="1366" />
</Grid.ColumnDefinitions>
<Grid Grid.Row="1" Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="3*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Border BorderBrush="Red" BorderThickness="4" Grid.Column="0" Grid.Row="0">
<ListBox x:Name="ListBox"
</ListBox>
</Border>
<Button x:Name="AcceptButton" Grid.Row="1" ></Button>
</Grid>
<Border BorderBrush="Green" BorderThickness="2" Grid.Column="1" Grid.Row="2">
<ScrollViewer Grid.Column="1" Grid.Row="2" >
<WrapPanel x:Name="WinFormsPanel" Grid.Column="1" Grid.Row="2">
</WrapPanel>
</ScrollViewer>
</Border>
</Grid>
</Window>
AT THE BEGINNING
SCROLLED DOWN - WHEN SCROLLED UP EVERYTHING GOES BACK TO NORMAL
**EDIT ** Tried, but no difference:
<Border BorderBrush="Green" BorderThickness="2" Grid.Column="1" Grid.Row="2" ClipToBounds="True">
<ScrollViewer ClipToBounds="True" Grid.Column="1" Grid.Row="2" >
<WrapPanel ClipToBounds="True" x:Name="VideoPanel" Grid.Column="1" Grid.Row="2">
</WrapPanel>
</ScrollViewer>
</Border>
EDIT 2:
XAML
<Window x:Class="HomeSecurity.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:HomeSecurity"
Title="MainWindow" WindowState="Maximized" Loaded="Window_Loaded">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="1*" />
<RowDefinition Height="9*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="8*" />
</Grid.ColumnDefinitions>
<Border BorderBrush="Green" BorderThickness="2" Grid.Column="1" Grid.Row="2">
<ScrollViewer >
<WrapPanel x:Name="VideoPanel" >
</WrapPanel>
</ScrollViewer>
</Border>
<Button Content="Button" Grid.Column="1" HorizontalAlignment="Left" Margin="23,30,0,0" VerticalAlignment="Top" Width="75"/>
</Grid>
</Window>
MAINWINDOW.XAML.CS
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Forms.Integration;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace HomeSecurity {
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window {
public MainWindow() {
InitializeComponent();
}
private void Window_Loaded(object sender, RoutedEventArgs e) {
add(); add(); add();
}
private void add() {
WindowsFormsHost formsHost = new WindowsFormsHost();
VideoStream videoStream = new VideoStream();
formsHost.Width = 400;
formsHost.Height = 400;
formsHost.Child = videoStream;
Border lineBorder = new Border();
lineBorder.BorderBrush = Brushes.Green;
lineBorder.BorderThickness = new Thickness(2);
lineBorder.Child = formsHost;
VideoPanel.Children.Add(lineBorder);
}
}
}
There has to be added reference to System.WindowsFormsIntegration, System.Windows.Forms, System.Drawing.

Answer 1

You clearly have some problem there and you should thoroughly investigate what is going on with your code to try to rectify the situation optimally. However, the code that you have shown here is not to blame. I tried it in a new project and it works as expected. As there is nothing inside the WrapPanel, there is no content in the ScrollViewer to cause your problem. When adding code to demonstrate a problem, you should ensure that your code does demonstrate the problem.
Even so, without being able to recreate your problem, there might just be a quick fix that you can use in this case. You can just set the UIElement.ClipToBounds property on the Border to True and this will clip anything that extends beyond its bounds.
<Border ClipToBounds="True" BorderBrush="Green" BorderThickness="2" ...>
<ScrollViewer Grid.Column="1" Grid.Row="2" >
<WrapPanel x:Name="WinFormsPanel" Grid.Column="1" Grid.Row="2">
</WrapPanel>
</ScrollViewer>
</Border>