UWP: Placing a ScrollViewer within a ScrollViewer

A ScrollViewer enables content to be displayed in a smaller area than its actual size. When the content of the ScrollViewer is not entirely visible, the ScrollViewer displays scrollbars that the user can use to move the content areas that is visible. The area that includes all of the content of the ScrollViewer is the extent. The visible area of the content is the viewport.

The following contain a ScrollViewer in their templates:

ListView
GridView
TextBox
RichEditBox

In this post you will see a ScrollViewer inside a GridView. The ScrollViewer has two contents, an Image and a TextBox.

The TextBox has its own ScrollViewer with only horizontal scrolling. The default text which is 'Rose' changes to a longer sentence (Event: ViewChanged="SV_ViewChanged") which can be scrolled using your finger or, with the left/right arrow keys when the cursor is anchored in the text box.

The image and the text as a whole can be scrolled both vertically and horizontally.

Here is the project's design view. The default text is 'Rose':

Here is the XAML of the project.

The following is the image when deployed to Local. Notice that the event fired and text box content has changed and the text in the textbox can be scrolled.

This is when deployed to a 4" emulator.

!!I am still trying to figure out why there is a white strip at the top of the image in emulator.