CODEWITHSUNDEEP
c#xamluwpwindows-10-universal
BCRwar1
BCRwar1

Reputation: 189

Random home button appears in UWP app

Not sure if anyone has had this problem but there is a random home button that shows up on my UWP app whenever I click a button within the app. The button does not exist in my application so I'm not sure where it is coming from. it appears in the same place every time and if I drag the window it doesn't move with it. It appears every time i click on a button control, then fades away after 4-5 seconds.

enter image description here

UPDATE After further investigation I found what was happening. I have a webview control in the background and button controls in the front view. The website I navigate to (vans.co.uk) has it's store logo in the top left corner and when the mouse hovers over it, the "Home" tooltip appears. However, if I click on a button control anywhere on the screen, and change the visibility property of that button to collapsed in the click method, this "Home" tooltip appears. There must be some sort of event passed to the webview when a button is collapsed on click. This happens on any website, not just vans.co.uk, but the logo on this site is positioned in a way that the tooltip pops up. I wrote a simple app to recreate this:

XAML: 

<Page
    x:Class="HomeTootipBug.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:HomeTootipBug"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <WebView x:Name="webView" Visibility="Visible" DefaultBackgroundColor="White" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>
        <Button x:Name="btn" Background="Gray" HorizontalAlignment="Center" VerticalAlignment="Center" Width="500" Height="100" Click="btn_Click"></Button>
    </Grid>
</Page>

xaml.cs:

using System;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;


namespace HomeTootipBug
{
    public sealed partial class MainPage : Page
    {
        public bool compOut = false;

        public MainPage()
        {
            this.InitializeComponent();
            webView.Navigate(new Uri("https://www.vans.co.uk"));
        }

        private void btn_Click(object sender, RoutedEventArgs e)
        {
            btn.Visibility = Visibility.Collapsed;
            btn.Visibility = Visibility.Visible;
        }
    }
}

Upvotes: 1

Views: 162

Answers (1)

Mikael Koskinen
Mikael Koskinen

Reputation: 12926

This seems to be a compination of how the vans.co.uk works & how the UWP event handling works. In short, collapsing the button in click allows the WebView to receive focus, quite likely prompting vans web site to run JS which shows the Home-button.

You can monitor what happens by adding GotFocus event handler to the WebView. If you start from scenario where your button isn't collapsed:

    private void btn_Click(object sender, RoutedEventArgs e)
    {
        //btn.Visibility = Visibility.Collapsed;
        //btn.Visibility = Visibility.Visible;

        Debug.WriteLine("Button Clicked "+ e.OriginalSource.ToString());
    }

    private void WebView_GotFocus(object sender, RoutedEventArgs e)
    {
        Debug.WriteLine("Webview got focus");
    }

You can see the following debug output when you click the button few times:

Button Clicked Windows.UI.Xaml.Controls.Button
Button Clicked Windows.UI.Xaml.Controls.Button
Button Clicked Windows.UI.Xaml.Controls.Button
Button Clicked Windows.UI.Xaml.Controls.Button
Button Clicked Windows.UI.Xaml.Controls.Button

Now if you remove the comments from code, enabling the collapsing:

    private void btn_Click(object sender, RoutedEventArgs e)
    {
        btn.Visibility = Visibility.Collapsed;
        btn.Visibility = Visibility.Visible;

        Debug.WriteLine("Button Clicked "+ e.OriginalSource.ToString());
    }

    private void WebView_GotFocus(object sender, RoutedEventArgs e)
    {
        Debug.WriteLine("Webview got focus");
    }

You can see the following output in debug console after few clicks:

Button Clicked Windows.UI.Xaml.Controls.Button
Webview got focus
Webview got focus
Button Clicked Windows.UI.Xaml.Controls.Button
Webview got focus
Webview got focus
Button Clicked Windows.UI.Xaml.Controls.Button
Webview got focus

It's quite likely that this is related how UWP deals with event bubbling & routed events.

Upvotes: 0

Related Questions