UWP Split view opens for one second

Question

I have a uwp app that needs to load a list of videos into a splitview pane. The pane should overlay a (video player)"mediaplayer element". the problem is that the pane when i click open button it makes ui unresponsive and opens for a second(literally) then automatically closes. it needs to open and stay open until the user decides to close it or selects a video from the list. Here is the full XAML Code for the page. Any help would be highly appreciated. the list of videos loads.

i tried

<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:MultiViewer"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:data="using:MultiViewer.Model"
    xmlns:Custom="using:Microsoft.UI.Xaml.Controls"
    x:Class="MultiViewer.VideosPage"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid Background="Transparent">
        <SplitView x:Name="vsplitView" PaneBackground="Transparent" PaneOpening="vsplitView_PaneOpening" PaneOpened="vsplitView_PaneOpened" PaneClosing="vsplitView_PaneClosing"
           IsPaneOpen="False" OpenPaneLength="500" CompactPaneLength="20" DisplayMode="Overlay">
            <SplitView.Pane>
                <Grid Background="{ThemeResource SystemControlAcrylicWindowBrush}" Margin="0,0,0,0">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <Pivot Title="Videos">
                        <PivotItem Header="All">
                            <ListView x:Name="otherVideosListView">
                                <ListView.ItemTemplate>
                                    <DataTemplate x:DataType="data:VideoModel">
                                        <ListViewItem Height="80">
                                            <StackPanel Orientation="Horizontal">
                                                <Image Height="70" Width="70"/>
                                                <StackPanel Orientation="Vertical">
                                                    <TextBlock Margin="0,0,0,20" Text="{x:Bind Path=title}" FontSize="23" FontFamily="Century Gothic" MaxLines="2"/>
                                                    <TextBlock VerticalAlignment="Bottom" Text="12/12/2012"/>
                                                </StackPanel>
                                                <Button Margin="230,0,0,0" FontFamily="Segoe MDL2 Assets" Content="&#xE712;" Height="70"/>
                                            </StackPanel>
                                        </ListViewItem>
                                    </DataTemplate>
                                </ListView.ItemTemplate>
                            </ListView>
                        </PivotItem>
                        <PivotItem Header="Movies"/>
                    </Pivot>

                    <Button x:Name="vcloseNavBtn" Click="vcloseNavBtn_Click" Background="Transparent" FontFamily="Segoe MDL2 Assets" Content="&#xE00E;" Height="47" Width="53" RenderTransformOrigin="0.54,0.5" Margin="427,0,0,0" VerticalAlignment="Top"/>

                </Grid>
            </SplitView.Pane>
            <Grid Background="Black">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <MediaPlayerElement
                    AutoPlay="True"
                    x:Name="vidPlayer"
                    AreTransportControlsEnabled="True"
                    Margin="0,0,0,0" 
                    Grid.RowSpan="2"/>

            </Grid>
        </SplitView>
        <Button
            Click="vopenNavBtn_Click"
            x:Name="vopenNavBtn"
            Background="Transparent"
            Content="&#xE00F;"
            FontFamily="Segoe MDL2 Assets"
            Width="53"
            ToolTipService.ToolTip="Select a video"
            ToolTipService.Placement="Bottom"
            Height="47" Margin="0,0,0,0" VerticalAlignment="Top"/>
        <Custom:TeachingTip Title="Select other videos!" Subtitle="You can now select videos from here without going back." x:Name="selectOtherVidsTip" Target="{x:Bind vopenNavBtn}" Content="It's all in one page now.">
            <Custom:TeachingTip.IconSource>
                <Custom:SymbolIconSource Symbol="Video"/>
            </Custom:TeachingTip.IconSource>
        </Custom:TeachingTip>
    </Grid>
</Page>