View moves apart

General
1

So my login view is similar to the video login example. However every time the keyboard on my phone is brought up to type or brought down again, the top StackPanel of the Grid which contains the image and text moves away a slight bit from the bottom StackPanel containing the TextInputs. It does this until the top StackPanel has risen above and beyond the perimeters of my screen. The lower TextInput grid doesn’t move at all. Why and how can I stop this?

<!-- Login View -->
        <DockPanel Visibility="{LoginVisibility}">
            <!-- login view style -->
            <Style>
                <Text TextColor="#ffffff" />
                <TextInput PlaceholderColor="#f0f0f0" TextColor="#f0f0f0" CaretColor="#3366EE" />
            </Style>

            <!-- Button colors -->
            <float4 ux:Key="C600" ux:Value="#3366EE" />
            <float4 ux:Key="C700" ux:Value="#336699" />
            <float4 ux:Key="CFillFore" ux:Value="#3366EE" />

            <StatusBarBackground Dock="Top" />
            <BottomBarBackground Dock="Bottom" />


            <Video Layer="Background" Volume="0.0" File="Assets/video.mp4" IsLooping="true" AutoPlay="true" StretchMode="UniformToFill" ContentAlignment="CenterRight" Opacity="0.3" Padding="0">
                <Blur Radius="3.31" />
            </Video>


            <DockPanel>

                <Grid Rows="1*,1*">
                    <StackPanel Alignment="VerticalCenter">
                        <Image File="Assets/logo.jpg" StretchMode="PointPrecise" />
                        <Text Alignment="HorizontalCenter" FontSize="50" TextColor="#FFFFFF">SSMXC</Text>
                        <Text Alignment="HorizontalCenter" FontSize="46" TextColor="#FFFFFF">Booking In</Text>
                        <Text Alignment="HorizontalCenter" Opacity=".5" TextColor="#FFFFFF">book into the next event fast and easy</Text>
                    </StackPanel>
                    <StackPanel Margin="50,0,50,0">
                        <TextInput PlaceholderText="email" Value="{email}" />
                        <TextInput PlaceholderText="password" IsPassword="true" Value="{password}" />
                        <Button Text="Log in" IsEnabled="{areCredentialsValid}" Clicked="{Login}"/>
                        <Button Margin="10" Alignment="BottomCenter" Text="Need an account? Click here to register" Clicked="{goToRegister}"/>

                    </StackPanel>

                </Grid>
            </DockPanel>
         </DockPanel>

I’ve tried it without the surrounding DockPanel but the same effect happens.

2

Fixed it by replacing the inner DockPanel with a ScrollView.