question

ShantimohanElchuri-8757 avatar image
0 Votes"
ShantimohanElchuri-8757 asked RobCaplan edited

Setting toolbar to link Nav Bar back button override action is failing in XF.Android

This has a reference to Xamarin Forums thread named Setting toolbar to link back button override action is failing in XF.Android.

I have two sample projects. One XF_NavBarBackBtnOverride works fine in both Android and iOS. The other XF_NavBarBkBtnOver doesn't work in Android but works in iOS. (In VS 2019 I was not able to add an existing solution to GitHub. I will have to dig further into this issue).

Here is the procedure and explanations for XF_NavBarBackBtnOverride project that works fine:

  1. In App.xaml.cs:
    a) MainPage = new NavigationPage(new MainPage());
    b) As usual MainPage is displayed.

  2. MainPage.xaml (a normal ContentPage):
    a) Click on "Open Second Page" button.
    b) In the Click event: await Navigation.PushAsync(new Page1());
    c) This opens the "Second Page" (Page1.xaml).

  3. Page1.xaml (a normal ContentPage)
    a) Click on the "Open Third Page" button.
    b) In the Click event: await Navigation.PushAsync(new Page2());
    c) This opens the "Third Page" (Page2.xaml).

  4. Page2.xaml (a BackButtonCustomActionPage)
    a) Click on the Back Arrow of Navigation Bar at top left.
    b) Then OnOptionsItemSelected event in the MainActivity.cs is invoked.
    c) This in-turn invokes the CustomBackButton event handler declared in the constructor of Page2.
    d) That displays the Alert "... ... want to go back?".

Here is the procedure and explanations for XF_NavBarBkBtnOver which doesn't work in Android:

  1. In App.xaml.cs:
    a) MainPage = new NavigationPage(new MainPage());
    b) As usual MainPage is displayed.

  2. MainPage.xaml (a normal TabbedPage):
    a) The MainPage consists of 3 tabs.
    b) The first tab titled "Page 1" is displayed on start. Stay in this page.

  3. Page1.xaml (a normal ContentPage) of first tab:
    a) Click on "Add" Toolbar Item at top right of Navigation Bar.
    b) In the Click event: await Navigation.PushAsync(new Details());
    c) This opens "Details Page".

  4. Details.xaml (a BackButtonCustomActionPage):
    a) Click the Back Arrow of Naviagtion Bar at the top right.
    b) Then OnOptionsItemSelected override event in the MainActivity.cs should be invoked.
    c) That event is not invoked and control is not passed to that event.




















dotnet-xamarin
· 2
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Hi, ShantimohanElchuri. The MainPage(tabbedpage) of the 'XF_NavBarBkBtnOver' project is wrapped in the NavigationPage. It's not recommended to place a TabbedPage into a NavigationPage. When call Navigation.PushAsync(...), it'll open a new page. However, the 'Details' page is opened in the ‘tabbedPage’. To avoid this, please remove the tabbed page from the navigation stack, and then use Navigation.PushModalAsync(...) to open the "Details" page instead.

Because the toolbar doesn't has the backbutton, you could define one in NavigationPage.TitleView and detect the click event to invoke the 'CustomBackButtonAction'.

0 Votes 0 ·

That works. I have pushed the modified solution to GitHub.

But I do have few minor issues:

  1. I need to display the Title name at the center of the screen in the TitleView similar to NavigationBar. I have put a Label into the StackLayout but unable to autocenter it.

  2. The ImageButton size is not changing in iOS. HeighRequest is not changing the displayed icons size. It appears too big.

  3. I have commented the override events in MainActivity.cs in Android project and excluded the BackButtonCustomActionPageRenderer.cs in iOS project as they are not used anumore.

  4. Added a override in Details.cs to process the hardware back button in Android.


Isn't there any way to use OnOptionsItemSelected() override for my purpose? Why it was working when using ContentPage and not when using TabbedPage?

ThanQ...








0 Votes 0 ·
JarvanZhang-MSFT avatar image
0 Votes"
JarvanZhang-MSFT answered JarvanZhang-MSFT commented

Hello,​

Welcome to our Microsoft Q&A platform!

Isn't there any way to use OnOptionsItemSelected() override for my purpose? Why it was working when using ContentPage and not when using TabbedPage?

@ShantimohanElchuri-8757 The OnOptionsItemSelected is to detect the click event of the toolbar. But when navigating to the 'Details', it is performed in the tabbedPage template. We should perform the navigation in the navigation stack instead. So try to get the MainPage to call the PushAsync command.

private void Button_Clicked(object sender, EventArgs e)
{
    App.Current.MainPage.Navigation.PushAsync(new Details());
}


Best Regards,

Jarvan Zhang



If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.


· 3
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

@ShantimohanElchuri-8757 May I know if you have got any chance to check my answer? I am glad to help if you have any other questions.

0 Votes 0 ·

I have given up on making the OnOptionItemsSelected to work as your other solution based on NavigationPage.TtitleView is more promising.

0 Votes 0 ·
JarvanZhang-MSFT avatar image JarvanZhang-MSFT ShantimohanElchuri-8757 ·

Okay, thanks for sharing the solution.

0 Votes 0 ·
ShantimohanElchuri-8757 avatar image
1 Vote"
ShantimohanElchuri-8757 answered

@JarvanZhang-MSFT Thanks for you suggestion. Now I have implemented it using NavigationPage.TitleView as in my GitHub repo XF_NavBarBkBtnOver.

I could also uploaded the previous implementation using OnOptionItemsSelected (for Android) to my GitHub repo XF_NavBarBackBtnOverride.


5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.