wp10:TextBox with flyout not firing lost focus on every got focus - windows-phone

Existing OS version :WinowsPhone 8.1.
Device: Nokia Lumia 925.
XAML code:
<TextBox
x:Name="txtDtpEnd0"
Grid.Row="2"
Grid.Column="0"
Width="130"
Height="30"
Margin="22,0,0,0"
HorizontalAlignment="Stretch"
VerticalAlignment="Top"
BorderBrush="Gray"
BorderThickness="0.5"
FontFamily="Segoe UI"
FontSize="15"
Foreground="Black"
GotFocus="DeclarativeInlineButton_GotFocus">
<FlyoutBase.AttachedFlyout>
<DatePickerFlyout
x:Name="DtpEnd0"
Title="Select a date"
Closed="datePicker_Closed"
DatePicked="datePicker0_DatePicked" />
</FlyoutBase.AttachedFlyout>
</TextBox>
Code in c# :
private void DeclarativeInlineButton_GotFocus(object sender, RoutedEventArgs e)
{
Windows.UI.ViewManagement.InputPane.GetForCurrentView().TryHide();
TextBox TB = (TextBox)sender;
FlyoutBase.ShowAttachedFlyout(TB);
//Windows.UI.ViewManagement.InputPane.GetForCurrentView().TryShow();
}
Functionality in WP8.1
On focusing of this text box datepicker flyout appear an user can select a date from date picker.
Result In WP8.1
User able to select date and functionality work as expected.
Result In WP10
On focus of textbox softkeyboard appear but sometimes datepicker also appear.
easy Case for soft keyboard : when i hold back button for long and resume to app this and try to focus textbox soft keyboard start appearing. to remove softkeyboard i need to close app and relaunch it.
Conclusion:
But sometimes softkeyboard start appearing without back button hold.

Finally after applying latest windows 10 update(10.0.14393.693) this problem resolved without making any changes in app.

Related

Xamarin TapGestureRecognizer sometime does not work properly

I am currently building my mobile application using Xamarin.Forms and i encountered a problem (on both platform of ios and android) when i tried to use Xamarin.Forms gestures more particularly a tap gesture on a xaml Label. Because i want to use this label as a link.
The problem is that this tab gesture that i used does not work sometime ( approximately 5 times test = 1 time bug).
During DEBUG when the problem occured i see that the tabbing is still recognized but it did not respond in the action i set up.
It occurs on both iOS and Android devices.
Here is my XAML code:
<RelativeLayout>
<Image Source="icon_question" WidthRequest="15" HeightRequest="15"></Image>
<Label Margin="15, -3, 0, 0" HorizontalOptions="CenterAndExpand" HorizontalTextAlignment="Center"
Text="Some text" TextColor="Blue" FontSize="15" TextDecorations="Underline">
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="_tabLinkForgetPassword"></TapGestureRecognizer>
</Label.GestureRecognizers>
</Label>
</RelativeLayout>
and here is my code behind:
private void _tabLinkForgetPassword(object s, EventArgs e)
{
App.Current.MainPage = new ResetPasswordPage(false);
}
I expect that the tab respond everytime, not just sometime like this. I appreciate all your help.
As stated by AndroDevil, you have to handle the tap gesture on a parent (a Grid, StackLayout, ContentView, whatever you want). in your case, why don't you use the Relative layout ? Thus, you can tap either the Label or the Image.
When you think it doesn't work, it is just that when you tap on the empty space : between characters (or even inside the void of a char like O (but admit it, kind of hard to tap on those few pixels)) of your text.
Last, you don't need to set NumberOfTapsRequired because as far as I remember, it is the default value.

Getting Show Password checkbox instead of Reveal Button

Trying to add a reveal button to a PasswordBox, but instead getting "Show Password" checkbox.
Using following code:
IsPasswordRevealButtonEnabled="True"
Expected result:
http://i.stack.imgur.com/GSeFr.png
Results in emulator:
http://i.stack.imgur.com/1FQl8.png
Full PasswordBox code:
<PasswordBox
Margin="10,5,10,5"
x:Name="PasswordLogin"
Grid.Row="2"
FontSize="{StaticResource TextStyleExtraLargeFontSize}"
VerticalAlignment="Stretch"
IsPasswordRevealButtonEnabled="True"
/>
This is the default behavior in windows phone. In Windows it will show icon in the textbox where as in windows phone it will show checkbox below the password box

What prevents a Navigation between two XAML-pages?

I am experiencing a very strange bug in my c++/cx XAML app:
I have a back-button that checks if the progress you made is saved and (in case it isn't) pops up a flyout that lets you save or leave without saving. This is done with this->frame->goBack() in both cases, however:
When the progress was saved, the app halts at a __debugbreak() however, when goBack() is called by the button on the flyout, everything works out fine. Why could that possibly be the case?
Things that might help you:
The app is based on the "Blank App" template, the pages itself are based on the "Basic Page" template provided by Visual Studio 2013
The Controls in BoardPage.xaml are defined as follows:
<AppBarButton x:Name="backButton" Icon="Back" Height="95"
Click="backButton_Clicked">
<AppBarButton.Resources>
<Flyout x:Key="WarningFlyoutBase">
<Grid Height="150" Width="200">
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<TextBlock Text="Unsaved progress, what do you want to do?"
HorizontalAlignment="Center" TextWrapping="Wrap"
FontSize="14" Margin="4,10" TextAlignment="Center"/>
<Button x:Name="WarningSaveButton"
Content="Save now."
Grid.Row="1" HorizontalAlignment="Center"
Click="WarningSaveButton_Clicked"/>
<Button x:Name="WarningLeaveButton"
Content="Leave without saving."
Grid.Row="2" HorizontalAlignment="Center"
Click="WarningLeaveButton_Clicked"/>
</Grid>
</Flyout>
</AppBarButton.Resources>
<AppBarButton.Flyout>
<StaticResource ResourceKey="WarningFlyoutBase"/>
</AppBarButton.Flyout>
</AppBarButton>
so these three controls (backButton, WarningSaveButton and WarningLeaveButton) all have their respective Clicked event handlers, though only two of them are relevant right now:
backButton:
void Tackle::BoardPage::backButton_Clicked(Platform::Object^ sender,
Windows::UI::Xaml::RoutedEventArgs^ e)
{
if (saved && Frame->CanGoBack) /* saved is a bool */
this->Frame->GoBack();
else
backButton->Flyout->ShowAt((FrameworkElement^)sender);
}
Note: I also tried replacing GoBack() with Navigate(TypeName(CreateGamePage::typeid)), but that didn't help.
WarningLeaveButton:
void Tackle::BoardPage::WarningLeaveButton_Clicked(Platform::Object^ sender,
Windows::UI::Xaml::RoutedEventArgs^ e)
{
if (Frame->CanGoBack)
this->Frame->GoBack();
}
other strange stuff:
I tried to examine the reasons for this crash/debugbreak for quite some time, and found the following:
the page in question is navigated to with this->Frame->Navigate(TypeName(BoardPage::typeid), ref new CGameSession(job));. leaving out the second argument fixes the crash magically.
When the breakpoint is triggered in App.g.hpp, opening a watch on the value errorMessage reveales:
"Placement target needs to be in visual tree."
How come the Flyout is in the visual tree, but the Button it's been attached to isn't?
The target page is in fact constructed, but the NavigationHelper->OnNavigatedTo(e) method fails in the last line LoadState(this, ref new LoadStateEventArgs(e->Parameter, safe_cast<IMap<String^, Object^>^>(frameState->Lookup(_pageKey))));, wich seems paritularly odd, because LoadState() gets called easily and only contains two (void) typecasts. (I have not modified a single one of these methods.)
The Problem here lies within the way flyouts and event handlers work with XAML-Controls, there are 2 mayor points that cause my code to crash:
Flyouts are always shown when the button they're attached to is clicked or tapped.
Event Handlers seem to be executed before the flyout gets shown.
What follows from this?
Well, when the backButton is pressed, backButton_Clicked gets triggered first.
When the game is not saved, the flyout opens and you can go back without a Problem.
But if the game was saved previously, the event handler immediately calls this->Frame->GoBack(), wich does exactly what it should, constructs the previous page, loads its state and draws it.
BUT after that, it tries to open the flyout, and this is the problem here: The flyout doesn't exist anymore, hence the strange error Message.
I am kind of embarassed it took me this long to figure it out, but maybe someone will find this useful in the future, so I'm going to leave this question here.
Workaround:
The workaround I'm using for this now is to move the FlyoutBase to the <Page.Resources> and attach it to a button with a size of 0x0 px. Triggering the flyout then done like so: Flyout::ShowAttachedFlyout(InvisibleButton);

Bing Maps on Windows Store Apps (C#/XAML) display popup when pushpin tapped

I'm using Bing Maps in my Windows Store app, I display some pushpins with some locations on it.
What I want to do is when the user taps on a pushpin, a popup appears with some info related to the location of that push pin. something similar to the popup when the user taps on my location in Microsoft maps application
How can this be done ?
Very easy, you can use the Tapped event of your Pushpin to trigger a popup then use a MapLayer.SetPosition to position your popup see http://msdn.microsoft.com/en-us/library/hh846488.aspx
Like this
currentLocationPushpin.Tapped += Current_location_pushpin_tapped;
then
void Current_location_pushpin_tapped(object sender, TappedRoutedEventArgs e)
{
MapLayer.SetPosition(placesAroundYou,location);
MapLayer.SetPositionAnchor(placesAroundYou, new Point(-200, 40));
BingMap.Children.Add(_mapLayer);
}
Try using a Popup control or fake one like this
You can either use a Popup control (see MSDN documentation here) or toggle visibility of a Border element to fake a Popup using Visibility="Collapsed", try this
<Border Background="#FFC3C2BF" Opacity="50" Margin="38,0,0,376" BorderThickness="1" BorderBrush="Black" CornerRadius="8" HorizontalAlignment="Left" MinWidth="50" Width="126" Height="auto">
<TextBlock x:Name="PushpinText" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" Foreground="Black" Padding="10,10,10,10" />
</Border>

Auto-complete box under a text box in Windows 8 / Metro UI

I want to implement auto-complete on a textbox in a Windows 8 UI / Metro UI app using C#/XAML.
At the moment, when the soft / touch keyboard shows, it obscures the auto-complete box. However, on the text box focus, Windows 8 automatically scrolls the entire view up and ensures the text box is in focus.
In reality, all I want is the view to scroll up a little more (in fact, by the height of the auto-complete box).
I realise I can intercept the Showing event of InputPane.GetForCurrentView()
I can set InputPaneVisibilityEventArgs.EnsuredFocusedElementInView to true inside the Showing event fine (so Windows won't try to do anything).... however, how can I invoke the same scrolling functionality that Windows 8 would do, but ask it to scroll a little more!?
Here's the code for the main page:
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<StackPanel VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0,200,0,0">
<TextBlock HorizontalAlignment="Center" FontSize="60">App 1</TextBlock>
<TextBlock HorizontalAlignment="Center">Enter text below</TextBlock>
<TextBox HorizontalAlignment="Center" Margin="-10,0,10,0" Width="400" Height="30"/>
<ListBox HorizontalAlignment="Center" Width="400">
<ListBoxItem>Auto complete item 1</ListBoxItem>
<ListBoxItem>Auto complete item 2</ListBoxItem>
<ListBoxItem>Auto complete item 3</ListBoxItem>
<ListBoxItem>Auto complete item 4</ListBoxItem>
<ListBoxItem>Auto complete item 5</ListBoxItem>
</ListBox>
</StackPanel>
</Grid>
If you start up the simulator with the lowest resolution, use the hand to "touch" the textbox, this will bring up the soft keyboard. In the real app, the auto complete list will appear with items as the user enters text.
So in a nutshell, how can I move the screen up a bit more so the user can see the entire autocomplete list?
Bear in mind, in the real app, it'll be worse, as the user may not even notice the autocomplete list appearing "underneath" the keyboard.
I really would appreciate some advice, many thanks!
I have created an AutoCompleteBox for Windows Store apps, the nuget package is available at https://nuget.org/packages/AutoCompleteBoxWinRT
Ok, here is how I would tackle this since I cannot seem to find any way to control the scrolling of the app based on the appearance of the keyboard. I would create a user control that would form the basis for the auto-complete textbox.
<UserControl
x:Class="App6.MyUserControl1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App6"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">
<Grid>
<TextBox x:Name="textBox" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" GotFocus="textBox_GotFocus" LostFocus="textBox_LostFocus" />
<ListBox x:Name="listBox" Height="150" Margin="0,-150,0,0" VerticalAlignment="Top" Visibility="Collapsed"/>
</Grid>
This is an incredibly basic implementation, so you will have to tweak to meet your needs.
Then, I would add the following code-behind to the user control
public sealed partial class MyUserControl1 : UserControl
{
// Rect occludedRect;
bool hasFocus = false;
public MyUserControl1()
{
this.InitializeComponent();
InputPane.GetForCurrentView().Showing += MyUserControl1_Showing;
}
void MyUserControl1_Showing(InputPane sender, InputPaneVisibilityEventArgs args)
{
if (hasFocus)
{
var occludedRect = args.OccludedRect;
var element = textBox.TransformToVisual(null);
var point = element.TransformPoint(new Point(0, 0));
if (occludedRect.Top < point.Y + textBox.ActualHeight + listBox.ActualHeight)
{
listBox.Margin = new Thickness(0, -listBox.ActualHeight, 0, 0); // Draw above
}
else
{
listBox.Margin = new Thickness(0, textBox.ActualHeight, 0, 0); // draw below
}
}
}
private void textBox_GotFocus(object sender, RoutedEventArgs e)
{
listBox.Visibility = Windows.UI.Xaml.Visibility.Visible;
hasFocus = true;
}
private void textBox_LostFocus(object sender, RoutedEventArgs e)
{
listBox.Visibility = Windows.UI.Xaml.Visibility.Collapsed;
hasFocus = false;
}
}
Next steps would be to expose properties to pass data to be bound to the ListBox. Hard core would be ListBoxItem templating and more, depending on how reusable you wanted it to be.