Xamarin.Forms UWP NavigationPage issue

AppdevXitasoAppdevXitaso DEUniversity ✭✭

Hello,

we currently have a problem with Xamarin.Forms and the Universal Windows Platform.

We have a TabbedPage that has 4 ContentPages, all wrapped in a NavigationPage.
On iOS and Android its displayed properly. On UWP its displayed correctly first (there is a binding error to the title colors of the TabbedPage, so the text is displayed with wrong color), but after navigating to the second page and going back to the first page, the NavigationBar (CommandBar on UWP I guess) just disappears.
This continues till the last page, where the CommandBar stays. Whenever navigating to pages 1 - 3, the CommandBar disappears.

Has anyone noticed behaviour like this? It's really weird and sad, because now we have to adjust behaviour for UWP.

Best,
Chris

Answers

  • AdamPAdamP AUUniversity ✭✭✭✭✭

    @AppdevXitaso - that sounds like a bug. If you could post a small sample project that shows the behavior in http://bugzilla.xamarin.com, then one of the team will confirm it and put it on to the list of defects to be fixed.

  • AlessioLAlessioL ITMember

    I think that I have exactly the same error.
    I have an app with 3 tabs and a NavigationPage in each tab. Inside Navigation Bar i added a ToolbarItem Button.
    It works good in iOS and Android, but in UWP after some changing of tab, Navigation Bar disappear in 2 of 3 tabs, and a ToolBar appears below instead of Navigation Bar.

    Could you help me?

  • HNSHNS DEMember ✭✭
    edited July 2016

    I've got the exact same problem.
    Only two tabs, at first NavigationBar of the first tab is visible, after clicking the second tab and return to the first the NavigationBar is gone, but just at the first tab. The other tab works fine.

    @AppdevXitaso have you already posted the bug?

    Update: i actually got the same effect with windowsPhone 8.1

  • NMackayNMackay GBInsider, University mod

    I tested this in Forms 2.3 Pre-3 as we're working on supporting UWP (4 support tickets today already, this is going to be fun) but it seems to work as expected. I tested in the sim and on a 650 Lumia.

    <?xml version="1.0" encoding="utf-8" ?>
    <TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 xmlns:mvvm="clr-namespace:UWPComponentTest;assembly=UWPComponentTest"
                 BindingContext="{Binding Source={x:Static mvvm:App.Locator}, Path=Controls}"
                 Title="Controls Test"
                 x:Class="UWPComponentTest.Views.ControlsPage">
    
        <TabbedPage.Children>
    
          <ContentPage Title="Controls" BackgroundColor="Aqua">
            <ContentPage.ToolbarItems>
              <ToolbarItem Command="{Binding ControlsCommand}" >
                <ToolbarItem.Icon>
                  <OnPlatform x:TypeArguments="FileImageSource" iOS="IconAdd" Android="IconAdd" WinPhone="Images/IconAdd.png" />
                </ToolbarItem.Icon>
              </ToolbarItem>
            </ContentPage.ToolbarItems>
    
            <Grid>
              <Grid.RowDefinitions>
                <RowDefinition Height="50" />
                <RowDefinition Height="*" />
                <RowDefinition Height="50" />
              </Grid.RowDefinitions>
              <Button Grid.Row="0" Text="Page1"></Button>
            </Grid>
    
          </ContentPage>
    
          <ContentPage Title="Custom" BackgroundColor="Fuchsia">
            <ContentPage.ToolbarItems>
              <ToolbarItem Command="{Binding ControlsCommand}">
                <ToolbarItem.Icon>
                  <OnPlatform x:TypeArguments="FileImageSource" iOS="IconAdd" Android="IconAdd" WinPhone="Images/IconAdd.png" />
                </ToolbarItem.Icon>
              </ToolbarItem>
            </ContentPage.ToolbarItems>
    
            <Grid>
              <Grid.RowDefinitions>
                <RowDefinition Height="50" />
                <RowDefinition Height="*" />
                <RowDefinition Height="50" />
              </Grid.RowDefinitions>
              <Button Grid.Row="0" Text="Page2"></Button>
            </Grid>
          </ContentPage>
    
        </TabbedPage.Children>
    </TabbedPage>
    
  • AppdevXitasoAppdevXitaso DEUniversity ✭✭

    Hi Norman,

    In your XAML example there is no NavigationPage, so it's not really comparable. The issues occurs when you have NavigationPage objects inside of TabbedPage.

    Cheers

  • NMackayNMackay GBInsider, University mod

    @AppdevXitaso

    Thanks for clarifying.

  • HNSHNS DEMember ✭✭

    @AppdevXitaso have you included a toolbar with the navigation bar?
    according to https://xamarinhelp.com/universal-windows-platform-uwp-app-in-xamarin-forms/ this seems to be an implementation issue.
    I think it should be seen as a bug, because the behavior can't be expected and it makes actions like adding a new entry impossible

  • DerProgrammiererDerProgrammierer DEMember ✭✭✭

    Hi @HNS @AppdevXitaso @AlessioL,

    I have a similar problem where my ToolBar changes position and resets the color after pressing the back-button. I think it could be related to the issue you are facing.

    Did you find a solution to your problem?

  • JohnHardmanJohnHardman GBUniversity mod

    @DerProgrammierer - I know it's on iOS rather than UWP, but is what you are seeing similar to https://bugzilla.xamarin.com/show_bug.cgi?id=38128 ?

  • DerProgrammiererDerProgrammierer DEMember ✭✭✭

    @JohnHardman Yes, that sounds similar.

    This is how it looks when it's right:

    Orange = TabbedPage
    Purple = ToolBar

    So it looks like one long bar, but it actually is a TabbedPage and a ToolBar next to each other. This is leading to another problem: When I show the secondary items of the ToolBar (by clicking on the 3 punctuation points on the top right), only the ToolBar collapses but the TabbedPage does not, leaving an ugly gap between these two:

    But that's just on a side node, I will probably have to display this in another way :tongue:

    The problem similar to yours is happening when I navigate to the settings and then navigate back using the back-button. The ToolBar will then sit on the very top of my app with the standard-default color:

  • andrekibaandrekiba ITUniversity ✭✭

    Any news about this problem in UWP, I'm using a FreshMVVM with simple 3 tabs inside a navigation page. Also I cannot even see any toolbaritems...

  • DerProgrammiererDerProgrammierer DEMember ✭✭✭
    edited November 2016

    @andrekiba said:
    Any news about this problem in UWP, I'm using a FreshMVVM with simple 3 tabs inside a navigation page. Also I cannot even see any toolbaritems...

    Nope. I am navigating with NavigationService.NavigateAsync to a page which has ToolbarItems. But it's just not present in my UWP app!

    Navigating:
    await _navigationService.NavigateAsync("AddGroupPage", null, false, false);

    This is my ContentPage.ToolbarItems:
    <ContentPage.ToolbarItems> <ToolbarItem Text="{i18n:Translate Text=gruppe_hinzufuegen}" Name="menu_save_group" Order="Primary" Command="{Binding SaveGroupCommand}" Icon="ic_save.png"> </ToolbarItem> </ContentPage.ToolbarItems>

    But as you can see in the attached image, there is no toolbar :(

    @AdamP I think this bug is already listed and confirmed, but unfortunately not in progress: https://bugzilla.xamarin.com/show_bug.cgi?id=40073

  • DerProgrammiererDerProgrammierer DEMember ✭✭✭
    edited November 2016

    Regarding my post above, it was my mistake. I actually did not have my Page in a NavigationPage and that's why the ToolbarItems were not visible. This is how I solved it for UWP:

    if (Device.OS == TargetPlatform.Windows || Device.OS == TargetPlatform.WinPhone)
        await _navigationService.NavigateAsync("OneNavigationPage/AddGroupPage", null);
    else
        await _navigationService.NavigateAsync("AddGroupPage", null, false, false);
    

    Hope this is useful for someone. Sorry about my mistake.

  • M_AllanM_Allan USMember ✭✭

    Any updates on this? toolbars disappear after navigatio, also master details button disappears. that is xamarin forms 2.3.4 on labtop with windows 10 creators.

  • jfritsch_crsjfritsch_crs USUniversity ✭✭
    edited October 2017

    This may or may not work for your case, but try adding a title to the first page in the navigation stack.

    I am using a MasterDetailPage. The detail side is using a NavigationPage. Upon opening the app the first time, the navigation bar was shown with a menu icon in the top left to open the master page, as expected. However, after navigating to the second page on my detail page and then navigating back to the first page, the navigation bar disappeared. Adding a page title to the first page seems to have fixed that issue.

    Same thing actually seems to happen for every page that does not have a title. Say page 1 and page 3 have titles but page 2 does not. Navigating from page 1 to page 2 to page 3 results in all pages showing the navigation bar. Navigating back from page 3 to page 2 hides the navigation bar, but navigating from page 2 to page 1 shows the navigation bar again.

    I am using Xamarin.Forms 2.4.0.282.

  • Gigex42Gigex42 USMember ✭✭✭✭
    edited April 2018

    @jfritsch Thank you so much -.-
    With Titles it works!

Sign In or Register to comment.