Website's navigation bar's drop-down isn't working in UWP

Question

I am currently developing an UWP application, and one of my page is to show a website in the application. However, I am facing some problem with the navigation bar's drop-down.

This application is going to run on a touch screen device, and here comes the problem. When I tried to run the application on my local machine, the drop-down is showing successfully when I hover over. As shown below:

But when I tried the application on the touch screen device, the drop-down list isn't showing and the page is navigated to the "main title" page in the navigation bar.

I was wondering if it is because when I am trying it on the touch screen, I am selecting the "main title" in the navigation bar, and it is considered as a on clicked event hence it it not performing what it did when I run on my local machine and hover over the navigation bar.

Here is my codes under .xaml :

<Page
x:Class="CitiKiosk_v2.Views.WebsitePage"
x:Name="pageRoot"
DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:CitiKiosk_v2.Views"
xmlns:common="using:CitiKiosk.Common"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">


<Grid>
    <Grid.ChildrenTransitions>
        <TransitionCollection>

        </TransitionCollection>
    </Grid.ChildrenTransitions>
    <ProgressRing Height="64"
                  Width="64"
                  Name="WebViewLoadProgressRing"
                  HorizontalAlignment="Center"
                  VerticalAlignment="Center"
                  IsActive="True"
                  Foreground="White" />

    <WebView Name="webView"
             Margin="0,0,0,20"
             Tapped="webView_Tapped"
             Source="http://www.nyp.edu.sg/schools/sit.html"
             NavigationStarting="webView_NavigationStarting"
             NavigationCompleted="webView_NavigationCompleted"
             PointerMoved="webView_PointerMoved"
             IsDoubleTapEnabled="False" 
             IsHoldingEnabled="False" 
             IsRightTapEnabled="False" 
             IsTapEnabled="False"
             FlowDirection="RightToLeft" />

    <CommandBar IsSticky="True"
                Name="WebViewCommandBar"
                Background="{StaticResource CitiKioskBackgroundBrush}"
                HorizontalAlignment="Stretch"
                VerticalAlignment="Bottom">

        <CommandBar.Transitions>
            <TransitionCollection>

            </TransitionCollection>
        </CommandBar.Transitions>



            <AppBarButton Icon="Back"
                          Label="Back"
                          IsCompact="True"
                          Foreground="White"
                          IsEnabled="{Binding CanGoBack,ElementName=webView}"
                          Name="WebViewBackButton"
                          Click="WebViewBackButton_Click"/>
            <AppBarButton Icon="Forward"
                          Label="Forward"
                          IsCompact="True"
                          Foreground="White"
                          IsEnabled="{Binding CanGoForward,ElementName=webView}"
                          Name="WebViewForwardButton"
                          Click="WebViewForwardButton_Click"
                          Margin="0 0 1500 0"/>

            <AppBarButton Icon="Refresh"
                          Label="Refresh"
                          IsCompact="True"
                          Name="WebViewRefreshButton"
                          Foreground="White"

                          Click="WebViewRefreshButton_Click"/>

    </CommandBar>

    <ProgressBar Name="WebViewProgressBar"
                 HorizontalAlignment="Stretch" 
                 Height="10"                      
                 VerticalAlignment="Bottom" 
                 IsIndeterminate="True" 
                 Foreground="White"
                 FontWeight="Bold"/>



</Grid>

This there any way to solve this? Thank You!

Answer 1

Now the thing is, you're using a webview. The golden rule is on a webview you have no control on what's rendered. The thing is, if you want to display a website, you use a webview but what's shown inside of your webview is kinda out of your control if you're not the developer of the website.

The thing is, there are two events hover over and click, when you hover over the navigation bar of the website, the hover over event is called and it's shows the drop down. Now when you tap(touch device) on the button, you're calling the click event of the button and hence it gets navigated but doesn't provide a drop down.

Unfortunately there is no way at your app level to handle this. The developer of the website needs to handle or define specific behaviors for touch events and mouse events.