Random home button appears in UWP app - c#

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.
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;
}
}
}

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.

Related

Textbox event only fires the second time

question edited to provide a better explanation
I am using a treeview consisting of a stackpanel with a textblock and a textbox inside. What I would like to achieve is the total selection of the text when the textbox appears.
The textblock disappears by double-clicking or selecting an option from a context menu, giving visibility to the textbox to rename the item.
I'd like to have the selectall on the MouseLeftButtonDown on the textblock and also on click on a context menu option.
My treeview is contained in the MainWindow and, the stackpanel (with the text block and the textbox) is in a different file and I dynamically add it to the tree view depending on the user's action.
When I click on the StackPanel the first click highlights it, on double-click it opens a page and, on the MouseLeftButtonDown (and on click in a contextmenu option) I change the visibility of the textblock with the textbox and here I want the selectall() event to get fired.
I tried the following code and it only works halfway:
private void mniRename_Click(object sender, RoutedEventArgs e)
{
prevSelected.MyTextBlock.Visibility = Visibility.Collapsed;
prevSelected.MyTextBox.Visibility = Visibility.Visible;
prevSelected.MyTextBox.Focus();
if (prevSelected.MyTextBox.IsFocused)
{
prevSelected.MyTextBox.SelectAll();
}
prevSelected.MyTextBox.Text = prevSelected.MyTextBlock.Text;
}
The issue is that the SelectAll() event doesn't work on the first click while the Focus() works, then on the following clicks everything works fine.
The code is always executed in the same way.
Does anyone have any idea why this happens?
No really sure what you want to achieve. but what you describe can be achieved by the following code:
XAML
<StackPanel Orientation="Horizontal">
<TextBox x:Name="MyTextBox" LostFocus="MyTextBox_OnLostFocus" Width="100"/>
<TextBlock x:Name="MyTextBlock" Text="{Binding ElementName=MyTextBox, Path=Text}" MouseLeftButtonDown="MyTextBlock_OnMouseLeftButtonDown"/>
</StackPanel>
C#
private void MyTextBox_OnLostFocus(object sender, RoutedEventArgs e)
{
MyTextBox.Visibility = Visibility.Hidden;
MyTextBlock.Visibility = Visibility.Visible;
}
private void MyTextBlock_OnMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
MyTextBlock.Visibility = Visibility.Collapsed;
MyTextBox.Visibility = Visibility.Visible;
MyTextBox.Focus();
MyTextBox.SelectAll();
}

How to focus on an element after button click

I'm relatively new to WPF and I am struggling to manage the focus of an element at runtime.
I have a simple user control with a TextBox inside
<UserControl [...]
IsVisibleChanged="UserControl_IsVisibleChanged">
[...]
<TextBox x:Name="myTextBox" [...] />
</UserControl>
That I added on my WPF window
<ctrl:MyPanel
x:Name="myPanel"
Visibility="{Binding MyBooleanProperty}"
Panel.ZIndex="999" />
MyBooleanProperty is changing at runtime under some logic and the panel is showing up accordingly.
I need to have keyboard focus on myTextBox everytime myPanel becomes visible so user can enter data without using mouse, tab key or anything else.
Here's the logic on the event handler of IsVisibleChanged
private void UserControl_IsVisibleChanged(object sender, DependencyPropertyChangedEventArgs e)
{
if (this.Visibility == Visibility.Visible)
{
myTextBox.Focus();
myTextBox.SelectAll();
}
}
This works, but if I click any button on the window before myPanel becomes visible then I cannot set focus in myTextBox.
I've tried many things, for example setting
Focusable="False"
on the buttons with no luck.
Thanks in advance for your help!
After a little more searching I found a workaround based on this answer by Rachel:
Dispatcher.BeginInvoke(DispatcherPriority.Input,
new Action(delegate () {
myTextBox.Focus();
Keyboard.Focus(myTextBox);
myTextBox.SelectAll();
}));
Delegating the focus action actually works.

LostFocus event of an Image isn't firing

I have an image which displays a delete button when tapped. What I need is for the delete button to disappear when the image has LostFocus.
Typically, for say a textbox I'd just use something like the following.
tb.LostFocus += tbOnLostFocus;
private void tbOnLostFocus(object sender, RoutedEventArgs e)
{
delBtn.Visibility = Visibility.Collapsed;
}
My issue is that the same code just isn't firing on an image. I vaguely remember reading somewhere a while ago that LostFocus events wont fire on an image as it isn't a focusable element. Not sure if my memory is correct as I can't find a reference to it now.
Has anyone found a suitable workaround or managed to achieve a similar result?
You can achieve this by using MenuFlyout. Once the image is tapped it will show delete button. if the pointer is tapped anywhere other than clicking on delete button it will be collapsed
<Image Source="ms-appx:///Assets/1.jpg" Tapped="Image_Tapped">
<Image.Resources>
<MenuFlyout x:Name="DeleteMenuFlyout">
<MenuFlyout.Items>
<MenuFlyoutItem x:Name="delete" Click="Delete_Click" Text="Delete" />
</MenuFlyout.Items>
</MenuFlyout>
</Image.Resources>
</Image>
//C#
private void Image_Tapped(object sender,TappedRoutedEventArgs e)
{
DeleteMenuFlyout.ShowAt(sender as FrameworkElement);
}

What alternatives do I have to flyout/ContentDialog? (c#, xaml)

I currently have a program where you can load a text in it.
Now I created a button that Pops up a flyout/ContentDialog but Im not happy with it because Limits me of what Im trying to achieve.
When I click the button it opens a flyout, the flyout gets the full Focus. That means I cannot scroll to the text WHILE the flyout-box is open. And if I click outside the flyout-box the flyout-box disappears.
I have a similar Problem to the ContentDialog.
When I click the button and the ContentDialog Pops up, everything behind the ContentDialog goes a bit into White/Grey Color. Also the ContentDialog does not allow any Focus outside the ContentDialog itself.
So what do I want to have?
I want that when I click on the button that a Window appears. I should be able to customize the window (writing text in it and it should have a button).
While this Window is open I want to be able to do Actions outside that window without the window Closing. For example Scrolling through the text I loaded.
Is there something I can achieve this with?
Take a look at the Popup class. This will let you display content on top of other content within your app's window. It's similar to the Flyout but without all of the built-in Flyout behavior that you don't want. The Popup class documentation has more details and commentary on when and how to use it.
Here's a really bland example with no styling.
<Grid>
<Popup x:Name="popup">
<StackPanel>
<TextBlock Text="Poppity pop pop" />
<Button Click="ClosePopup_Click">Close</Button>
</StackPanel>
</Popup>
<Button Click="OpenPopup_Click">Open Popup</Button>
</Grid>
private void OpenPopup_Click(object sender, RoutedEventArgs e)
{
popup.IsOpen = true;
}
private void ClosePopup_Click(object sender, RoutedEventArgs e)
{
popup.IsOpen = false;
}
There is a slightly more complicated example in the Popup documentation
I just hide and show grids with whatever I want inside.

WPF Popup vs Tooltip

I have seen a lot of debate about when to use tooltip and when to use popup but I don't know which one is better for my case.
I have a button. When I click on it, the popup panel will appear and it has a lot of text and a small image (so it will be a quite big panel). The panel must stay there until I move my cursor OFF THE BUTTON (it must still close when the cursor is still on the panel but off the button).
<Button Click="clicked" MouseLeave="mouseleaved"/>
<Popup Name="mypopup">
<stuff>
</Popup>
private void clicked(object sender, RoutedEventArgs e) {
mypopopup.isopen = true;
}
private void mouseleaved(object sender, MouseEventArgs e) {
mypopup.isopen = false;
}
This is where I got to so far. The problem is that sometimes, the Popup appears on top of the button (which blocks the view of the button and so MouseLeave event kicks off, and Popup instantly disappears). I want the Popup to stay until i move the cursor away off the button.
So I did some google, and I think Tooltip may avoid this problem. But how to get Tooltip to appear on button click and not button hover?
Which one is better for me? Tooltip or Popup?
EDIT
I think I was not too clear with my question. I am asking which one i should use- Tooltip vs Popup based on MY SPECIFIC SITUATION (paragraph 2) and not in general. I think Popup is the right one to use but I have problems with using it (paragraph 3). so my question is can I solve this problem with Popup or should I use Tooltip better for this?
But how to get Tooltip to appear on button click and not button hover?
Handle the Click event for the Button and set the IsOpen property of the Popup to true:
private void Button_Click(object sender, RoutedEventArgs e)
{
popup1.IsOpen = true;
}
<Popup x:Name="popup1" StaysOpen="False">
<TextBlock>popup content...</TextBlock>
</Popup>
<Button Click="Button_Click" Content="op" />
Which one is better for me? Tooltip or Popup?
Popup is preferable whenever you want to customize the behaviour in any way.
Edit: If I understand your issue correctly, this should work:
<Button x:Name="button" Content="Button" Click="clicked" MouseLeave="mouseleaved"/>
<Popup Name="popup" PlacementTarget="{Binding ElementName=button}" StaysOpen="True" MouseLeave="mouseleaved">
<Border Background="Yellow">
<TextBlock>contents...</TextBlock>
</Border>
</Popup>
private void clicked(object sender, RoutedEventArgs e)
{
popup.IsOpen = true;
}
private void mouseleaved(object sender, MouseEventArgs e)
{
if (!button.IsMouseOver && !popup.IsMouseOver)
popup.IsOpen = false;
}

Categories