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.
Related
ImageButtons on a ListView is giving me a headache. Take a look at the gif here.
As you can see, the ImageButtons (3 vertical dots on the right of every ListView row) which were hidden gets super small as the ListView is scrolled up and down.
This is the corresponding XAML:
<ImageButton
Source="more_options"
HorizontalOptions="End"
WidthRequest="21"
BackgroundColor="Transparent"
Clicked="OnMoreOptionsTapped"
CommandParameter="{Binding .}"
Grid.Column="2"
Grid.Row="0"/>
Full XAML is here. ImageButton is at line 56.
I'm doing something wrong? How can I fix this?
Also, I know I could use just an Image with a TapGestureRecognizer but that's being a big issue for me, because I need access to the Image element to get it's coordinates and spawn the menu on the right location. Doing that with an ImageButton is a piece of cake, but it's not so easy with a TapGestureRecognizer. I did something like this:
XAML
<Image
Source="more_options"
Aspect="AspectFit"
HorizontalOptions="End"
WidthRequest="21"
BackgroundColor="Transparent"
Grid.Column="2"
Grid.Row="0">
<Image.GestureRecognizers>
<TapGestureRecognizer
Tapped="OnMoreOptionsTapped"
CommandParameter="{Binding .}"/>
</Image.GestureRecognizers>
</Image>
Code-behind:
private void OnMoreOptionsTapped(object sender, TappedEventArgs args)
{
var tapGesture = sender as TapGestureRecognizer;
var button = tapGesture.Parent as Image;
...
}
Basically, with an ImageButton element, the object sender is an ImageButton element, but with an Image, the object sender is a TapGestureRecognizer and I can't find a way to get the Image parent while I have only the TapGestureRecognizer child. Also, tapGesture.Parent is null and tapGesture.Parent.Parent is null too. I've tried both.
So:
ImageButtons on ListView are bugging out hard. Anyone have a fix?
Anyone could tell me how to get the Image parent having only the child TapGestureRecognizer?
I believe answering any of those two questions would solve my problem hehe.
Also, this is one of my first experiences asking questions here, I beg your pardon if I did something wrong.
Thanks all :)
The reason behind your issue is a bug that is currently in the xamarin listview which can be found here :
https://github.com/xamarin/Xamarin.Forms/issues/5200
Solution is to downgrade to v3.4 for now until we get an intimate from XF side
Goodluck revert if you have queries
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);
I'm new to Windows Phone apps development, and I've created a scrolling menu using the following xaml code :
<ScrollViewer HorizontalAlignment="Left" Margin="18,0,0,0" Name="scrollViewer1" VerticalAlignment="Top" Width="450" HorizontalScrollBarVisibility="Auto" Grid.Row="1">
<StackPanel Height="Auto" Name="stackPanel1" Width="Auto">
<Button Height="620" FontSize="120" Name="gotoGmail" Width="Auto">Gmail</Button>
<Button Height="620" FontSize="120" Name="gotoYahoo" Width="Auto">Yahoo</Button>
</StackPanel>
</ScrollViewer>
I'd like to know whether it's possible to start an event once the user scrolls the menu from one button to another. If it is possible, i'd be grateful if you could explain how. If it's not , i'd like to hear about how could I do it using different tools rather than ScrollViewer. Thanks in advance !
There's no "Scrolled" event on the ScrollViewer, but what you can do is two-way bind a property to VerticalOffset. That lets you trigger an event/command from your view/viewmodel when the scroll changes.
Something like this:
<ScrollViewer VerticalOffset="{Binding VerticalOffset,Mode=TwoWay}" ...
And then in the data context:
public double VerticalOffset
{
get { return _verticalOffset; }
set
{
_verticalOffset = value;
// call "on scroll changed" actions here
}
}
private double _verticalOffset = 0;
how could I do it using different tools rather than ScrollViewer
You can of course make a scrolling menu using other approaches. I'll bet there is some nifty approach you could figure, using the WinRT transitions/animations stuff, but I'm not familiar enough with those to say. Here are some others (not sure which would be best/easiest for your scenario):
Probably using Canvas would be a quick-and-dirty way to do it (just set up buttons that set off Canvas.Left and Canvas.Top animations).
Extending ItemsControl along with a custom ControlTemplate would be a good approach if you want to create a re-usable component.
I like extending Panel, but you have to do the animations manually using a DispatcherTimer, and you have to lay out the buttons yourself using Measure and Arrange.
Simpel question, I have a windows phone page that contains a scrollviewer with inside it an image, a textblock and a richtextbox.
Now when the user starts scrolling I want to keep the textblock in view on top when the image has scrolled outside the page.
So the effect is, user starts scrolling upwards, everything scrolls upwards, when the image is outside the page, the textblock stays at the top of the page but the richtextbox keeps scrolling upwards.
Any thoughts?
Here is a way to reach this result:
First, the layout. I've set a grid, with two rows. The first is empty, and will host the header when we need to freeze it. The second row contains the scrollviewer.
Inside the scrollviewer, I've put the controls in a grid, but you can use whatever container suits you.
<ScrollViewer Grid.Row="1"
Margin="0"
Padding="0"
x:Name="ParentScroll"
ManipulationMode="Control"
MouseMove="ParentScroll_MouseMove">
<Grid x:Name="ChildGrid">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<Image Source="Picture.jpg" Grid.Row="0"/>
<TextBlock Text="Header" Grid.Row="1" x:Name="TextHeader" />
<RichTextBox Grid.Row="2" x:Name="RichText">
<Paragraph>
<Bold>RichTextBox</Bold>
<!-- More stuff -->
</Paragraph>
</RichTextBox>
</Grid>
</ScrollViewer>
I use the MouseMove event to be notified of the scrolling event. You can also dig into the template, extract the ScrollBar control, and subscribe to the ValueChanged event, as described here: http://social.msdn.microsoft.com/Forums/wpapps/en-US/81fcd34e-6ec9-48d0-891e-c53a53344553/scrollviewer-synchronization
Note that you need to set ManipulationMode to Control or the position of the controls won't be updated at a smooth rate. I guess it's due to some internal optimization.
In the code behind, I use the TransformToVisual method to compute the relative position of the controls to the ScrollViewer. This way, I can know when the header goes out of view. When it does, I remove it from the child grid, and put it outside of the ScrollViewer, in the parent grid. When the top of the RichTextBox goes out of view, I put the header back into the ScrollViewer:
private void ParentScroll_MouseMove(object sender, System.Windows.Input.MouseEventArgs e)
{
if (Grid.GetRow(this.TextHeader) == 1)
{
var generalTransform = TextHeader.TransformToVisual(ParentScroll);
var childToParentCoordinates = generalTransform.Transform(new Point(0, 0));
if (childToParentCoordinates.Y < 0)
{
this.ChildGrid.Children.Remove(this.TextHeader);
this.ParentGrid.Children.Add(this.TextHeader);
Grid.SetRow(this.TextHeader, 0);
}
}
else
{
var generalTransform = RichText.TransformToVisual(ParentScroll);
var childToParentCoordinates = generalTransform.Transform(new Point(0, 0));
if (childToParentCoordinates.Y > 0)
{
this.ParentGrid.Children.Remove(this.TextHeader);
this.ChildGrid.Children.Add(this.TextHeader);
Grid.SetRow(this.TextHeader, 1);
}
}
There may be less-hacky ways to reach the same results, but this solution seems to work smoothly in the emulator.
I've found a working solution myself... the complete detail is available on my blog here... it contains also the link to my demo project on GitHub.
The trick was to get hold of the VerticallScrollBar inside the ScrollViewer and to set the ManipulationMode to Control to get enough feedback on the UI thread.
With the scroll offset information of the scrollbar we than animate the specific ui element we want to keep in view.
I am trying to put floating popup windows on screen. I want user to be able to move that popup window anywhere on the screen.
And so I am using:
<Popup x:Name="myPopup" Grid.Row="0" Grid.RowSpan="2" Margin="0, 0, 0, 0" ManipulationMode="All" ManipulationDelta="PopupManipulationDelta" IsLightDismissEnabled="False" Visibility="Collapsed" IsOpen="false">
code behind:
private void PopupManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
var ct = (CompositeTransform)addShapesPopup.RenderTransform;
ct.TranslateX += e.Delta.Translation.X;
ct.TranslateY += e.Delta.Translation.Y;
UpdateLayout();
}
But this is not working. The function PopupManipulationDelta is not even getting called.
I tried using same logic on shapes like rectangle, ellipse and it works fine there.
Can you please help me understand why it's not working with popup?
Thank you.
I believe a Popup does not have any visual representation, so it can't respond to hit testing and thus to manipulation events. Simply put some control inside of it and have that respond to the input events. It can be a Grid with Background="Transparent" if you don't want it to be visible.