How to make flipview adaptive in UWP?

Question

I've been going crazy because I can't seem to make my flipview adaptive. I've tried every codes online and it's just not working! I used windows studio template for my UWP app and I have a simple flipview.I refered to this https://xamlbrewer.wordpress.com/2017/02/27/creating-a-fluid-adaptive-ui-with-variablesizedwrapgrid-and-implicit-animations/

MainPage.xaml:

  <ScrollViewer VerticalScrollMode="Auto" HorizontalAlignment="Stretch" Margin="-117,66,0,0" VerticalAlignment="Stretch">
        <VariableSizedWrapGrid x:Name="VariableSizedWrapGrid"
                               ItemHeight="1000"
                               ItemWidth="1392"
                               Orientation="Vertical"
                               Margin="20 20 0 0"
                               ScrollViewer.VerticalScrollBarVisibility="Auto">

            <Grid VariableSizedWrapGrid.ColumnSpan="5"
                  VariableSizedWrapGrid.RowSpan="5"
                  HorizontalAlignment="Left"
                  VerticalAlignment="Top"
                  Padding="0 0 20 20"
                   Margin="0,0,0,10"
                  Background="Transparent">
                <FlipView x:Name="TheFlipView"
            SelectionChanged="DisplayedItemChanged" Margin="-117,66,0,20"  Height="1000">
                    <FlipView.ItemTemplate>
                        <DataTemplate>
                            <Grid Margin="0,0,0,10" >
                                <Image HorizontalAlignment="Center"  VerticalAlignment="Top"  Source="{Binding}"
                        Stretch="Fill" Margin="123,0,0,0" Width="1400" Height="1000"/>
                            </Grid>
                        </DataTemplate>
                    </FlipView.ItemTemplate>
                </FlipView>

            </Grid>

        </VariableSizedWrapGrid>
    </ScrollViewer>

Output