I am working on an app where I have created a custom navigation bar that includes a series of tool buttons. The number of these buttons can vary per page and thus I put them inside a RepeaterView (from XLabs.Forms.Controls). There are reasons why I am not using the default NavigationBar as this one will be more customized (It's an experiment). The tool buttons are actually labels (with FontAwesome icons as text) that have a tap gesture recognizer inside of them. The command to each of the gesture is bound to each button's view model command property. This behavior works fine on Android, but when running in iOS debugger, the tap is not fired and the event handler is never stepped into. I suppose one might ask why I am using a label instead of a button. I have plans to customize these buttons some more and might end up with a StackLayout instead, so I wanted to try using the gesture recognizers of elements that are not buttons. Here's a summary of the code:
NavigationBarIconToolVM (The button view model, has text and command properties, for now):
public class NavigationBarIconToolVM : BindableObject
{
public static readonly BindableProperty ButtonTextProperty =
BindableProperty.Create<NavigationBarIconToolVM, string>(v => v.ButtonText, String.Empty);
public static readonly BindableProperty OnToolTappedProperty =
BindableProperty.Create<NavigationBarIconToolVM, ICommand>(v => v.OnToolTapped, null);
public NavigationBarIconToolVM ()
{
}
public string ButtonText {
get { return (string)GetValue (ButtonTextProperty); }
set { SetValue (ButtonTextProperty, value); }
}
public ICommand OnToolTapped {
get { return (ICommand)GetValue (OnToolTappedProperty); }
set { SetValue (OnToolTappedProperty, value); }
}
}
NavigationBarIconRepeaterView (RepeaterView wrapped up in NavigationBarIconToolVM):
public class NavigationBarIconRepeaterView : XLabs.Forms.Controls.RepeaterView<NavigationBarIconToolVM>
{
}
NavigationBarLanding.xaml (The portion of the XAML that contains the RepeaterView of the tool buttons):
<StackLayout x:Name="ToolsWrapper" Style="{StaticResource NavigationBar.ToolsWrapper}">
<d:NavigationBarIconRepeaterView ItemsSource="{Binding Tools}" Orientation="Horizontal">
<d:NavigationBarIconRepeaterView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<Label Text="{Binding ButtonText}" Style="{StaticResource NavigationBar.ToolsWrapper.Tool}">
<Label.GestureRecognizers>
<TapGestureRecognizer Command="{Binding OnToolTapped}" CommandParameter="TestCheck" />
</Label.GestureRecognizers>
</Label>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</d:NavigationBarIconRepeaterView.ItemTemplate>
</d:NavigationBarIconRepeaterView >
</StackLayout>
How I am setting the tool buttons inside the page:
public MainPage () : base()
{
// ...
// Skipped code related to current page view model etc.
// ...
InitializeComponent ();
this.NavigationBar.IconText = FontAwesome.FAUsers;
this.NavigationBar.TitleText = "Main page";
this.NavigationBar.Tools.Add (new NavigationBarIconToolVM {
ButtonText = FontAwesome.FAKeyboardO ,
OnToolTapped = new Command(OnTapped)
});
this.NavigationBar.Tools.Add (new NavigationBarIconToolVM {
ButtonText = FontAwesome.FAPlus ,
OnToolTapped = new Command(OnTapped)
});
}
public void OnTapped (object s) {
// iOS does not reach this point
DisplayAlert ("Tapped", "Tool icon tapped.", "OK");
}
I am wondering if this could have anything to do with binding, but the text of the tool icons is bound fine and again it works fine on Android, just not iOS.