Avoiding the Gap in Dual Screen UWP Apps

Question

I am working on learning to use the TwoPaneView & Microsoft Emulator to create dual screen UWP apps. I have managed to install the Microsoft Emulator using the following pages:

https://learn.microsoft.com/en-us/dual-screen/windows/get-dev-tools
https://learn.microsoft.com/en-us/dual-screen/windows/use-emulator

I have also looked at the following page to get started with the TwoPaneView:

https://learn.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/two-pane-view

After writing the following code:

<Grid>  
	<TwoPaneView PanePriority="Pane1" Pane1Length="*" Pane2Length="*">  
		<TwoPaneView.Pane1>  
			<Grid Background="Purple">  
				<TextBlock Foreground="White" FontSize="128" TextAlignment="Center" Text="Pane1"/>  
			</Grid>  
		</TwoPaneView.Pane1>  
		<TwoPaneView.Pane2>  
			<Grid Background="Orange">  
				<TextBlock Foreground="White" FontSize="128" TextAlignment="Center" Text="Pane2"/>  
			</Grid>  
		</TwoPaneView.Pane2>  
	</TwoPaneView>  
</Grid>  

I get the following 2 screenshots (for the different orientations) from the Microsoft Emulator:

The Wide orientation looks fine, but the Tall orientation does not separate Pane1 & Pane2 the way I expect. If you look closely (as shown in the following screenshow), you will see that there is a small amount of Purple (Pane1) that crosses over the gap:

Isn't TwoPaneView supposed to split Pane1 & Pane2 (which in my case would mean a Purple screen & an Orange screen)? This is my first time using TwoPaneView or Microsoft Emulator, so the answer is probably very simple, but can somebody help me? Thanks.