UWP TabbedPage.Children not showing page

DerProgrammiererDerProgrammierer DEMember ✭✭✭
edited October 2016 in Xamarin.Forms

I have a TabbedPage which contains two other pages as it's children:

ChatsTabbedPage.xaml:

<TabbedPage 
        xmlns="http://xamarin.com/schemas/2014/forms" 
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
        xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms" 
        prism:ViewModelLocator.AutowireViewModel="True" 
        xmlns:local="clr-namespace:One;assembly=One"
        xmlns:v="clr-namespace:One.Views;assembly=One"
        xmlns:i18n="clr-namespace:One;assembly=One"
        x:Class="One.Views.ChatsTabbedPage"
        Title="Chats"
        BarBackgroundColor="{StaticResource navBarBackgroundColor}" x:Name="TabPage" >
    <TabbedPage.Children>
            <v:ChatsPhonePage 
                Title="Chats"
                Icon="ic_chat.png"
                Appearing="Handle_Appearing"
                >
            </v:ChatsPhonePage>
            <v:KontaktePage Title="{i18n:Translate Text=kontakte}"
                Icon="ic_contacts.png">
            </v:KontaktePage>
    </TabbedPage.Children>
</TabbedPage>

The other two pages ChatsPhonePage and KontaktePage are a ContentPage. I will only show the code of one page because they have a lot code...

KontaktePage:

<ContentPage 
    xmlns="http://xamarin.com/schemas/2014/forms" 
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
    xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms" 
    xmlns:i18n="clr-namespace:One;assembly=One"
    xmlns:local="clr-namespace:One;assembly=One"
    xmlns:controls="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin.Abstractions"
    prism:ViewModelLocator.AutowireViewModel="True" 
    x:Class="One.Views.KontaktePage"
    Title="{i18n:Translate Text=kontakte}">
    <ContentPage.Resources>
        <ResourceDictionary>
            <local:OneImageConverter x:Key="OneImageConverter" />
        </ResourceDictionary>
    </ContentPage.Resources>
    <ContentPage.Content>
        <StackLayout>
            <Entry Placeholder="{i18n:Translate Text=kontakte_suchen}"
                Margin="10"
                HorizontalOptions="FillAndExpand"
                Text="{Binding Suchtext}"
                TextChanged="Handle_TextChanged"
                Style="{StaticResource entryStyle}">
            </Entry>
            <ListView CachingStrategy="RecycleElement"
                Margin="10"
                x:Name="listViewUsers"
                ItemsSource="{Binding Users}"
                IsRefreshing="{Binding IsRefreshing}"
                IsPullToRefreshEnabled="true"
                RefreshCommand="{Binding RefreshDataCommand}"
                HasUnevenRows="true"
                ItemSelected="Handle_ItemSelected">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <Grid ColumnSpacing="2" Padding="5">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="40"></ColumnDefinition>
                                    <ColumnDefinition Width="*"></ColumnDefinition>
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*"></RowDefinition>
                                    <RowDefinition Height="Auto"></RowDefinition>
                                </Grid.RowDefinitions>
                                <controls:CircleImage
                                    Grid.Row="0"
                                    Grid.Column="0" 
                                    HorizontalOptions="Center"
                                    VerticalOptions="Center"
                                    Source="{Binding image, Converter={StaticResource OneImageConverter}, ConverterParameter=placeholder_image.png}">
                                </controls:CircleImage>
                                <Label 
                                    Grid.Row="0"
                                    Grid.Column="1"
                                    Text="{Binding name}"
                                    TextColor="{StaticResource listFontColor}"
                                    Style="{StaticResource labelStyle}">
                                </Label>
                                <Label
                                    Grid.Row="1"
                                    Grid.Column="1"
                                    Style="{StaticResource labelSmallStyle}"
                                    Text="{Binding status}"
                                    TextColor="{Binding statusColor}">
                                </Label>
                            </Grid>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

When I start my app, everthing is fine and I can see ChatsPhonePage:

However, if I click on "Kontakte", it should show KontaktePage. Instead, nothing happens. It doesn't even change the TextColor of "Kontakte" to white. It just looks exactly like in the screenshot above.

If I click on "Chats" (no matter if I clicked on "Kontakte" before or not), the page completely dissapears, leaving it blank white:

This is only an issue in UWP. It's working in iOS and Android. Any ideas?

Best Answer

Answers

  • AlessandroCaliaroAlessandroCaliaro ITMember ✭✭✭✭✭

    Create a repo and open a bug on bugzilla

  • NMackayNMackay GBInsider, University mod

    @DerProgrammierer

    I have some pages structured similarly in my app in tabbed pages with no such issues in UWP. What's your target windows SDK? I'm building against 10586 using Forms 2.3.2 and Microsoft.NETCore.UniversalWindowsPlatform 5.2.2.

    If you make a basic repo app without your app design I can try it in my environment to check if it's a bug. If your using an earlier version of Forms

    Just noticed this bug, I know it's not related but it's worth knowing about.
    https://bugzilla.xamarin.com/show_bug.cgi?id=41271

  • DerProgrammiererDerProgrammierer DEMember ✭✭✭

    @AlessandroCaliaro: I'm working on a sample repo.

    @NMackay: These are my specs:

    Windows 10 Anniversary Edition (10.0; Build 14393)
    Xamarin.Forms 2.3.2.127
    Microsoft.NETCore.UniversalWindowsPlatform 5.2.2

  • DerProgrammiererDerProgrammierer DEMember ✭✭✭
    edited October 2016

    Update: Currently I can't reproduce it in a sample project. It seems to work for UWP with the specs listed up in the post above. I'm now trying to add components from my original project to see what causes the problem...

  • DerProgrammiererDerProgrammierer DEMember ✭✭✭
    edited October 2016

    @AlessandroCaliaro @NMackay I was finally able to reproduce the behavior in a sample project.

    It seems to be a very specific bug in Prism with UWP. I opened an issue for Prism. For anyone who is still interested (repo-link can be found there aswell): https://github.com/PrismLibrary/Prism/issues/805

  • NMackayNMackay GBInsider, University mod

    @DerProgrammierer

    Just to double check, if I click on red then the view should not appear?

  • DerProgrammiererDerProgrammierer DEMember ✭✭✭
    edited October 2016

    @NMackay Not sure if I get your question right. If you click on "Red", ContentPageRedView should appear.

    EDIT: I also explained the expected behavior in the README:

    Expected Behavior: I expect the TabbedPage to change the tabs and show "ContentPageRedView".

  • NMackayNMackay GBInsider, University mod

    @DerProgrammierer

    I tested on my lumia 620 (well not mine, you couldn't pay me to take it), the red page appears okay.

    I don't have SDK 14393 installed though, I had to edit the csproj and repoint it at 10580 before building and running. Building against 14393 causes app crashes in Xamarin Forms Maps so we don't use it. Perhaps it's a Forms issue and not Prism.

  • DerProgrammiererDerProgrammierer DEMember ✭✭✭

    That's very strange... Did you also test on local machine? Because I don't have a mobile phone here to test it, so I can only test on local machine...

    Tried SDK Build 10586, same result:

    After clicking "Navigate"-Button:

    When I click on "Red", it looks like in the above screenshot (absolutely nothing happens).

    When I click on the first tab (="Blue") again:

    Note again that no matter which view is in the first tab, it's always the same issue that clicking on the first tab turns the Master white. If I click on "Red" again now, it remains in this state (2nd screenshot).

    To make it clear: It's like only the first tab actually does something (-> Turning the Master white). All the other tabs show absolutely no reaction.

  • NMackayNMackay GBInsider, University mod

    @DerProgrammierer

    Interesting. I can replicate the issue your experiencing using the sim but not on the device!

  • BrianLagunasBrianLagunas USInsider ✭✭✭

    Sorry for the late reply. I am traveling in Japan. I have responded to your Prism GitHub issue. I am unable to reproduce the issue on my machine. Can you try it on another machine?

  • DerProgrammiererDerProgrammierer DEMember ✭✭✭
    edited October 2016

    @BrianLagunas
    Thank you for your reply (which was not late imo :wink:) My coworker can test the project on his machine when is back on monday.

    I have found this question on SO (which you have answered, lol). May your answer about the NavigationPage be related to my problem? I'm afraid I'm too inexperienced with Navigation to try it out on myself.

    Thank you for your help and have a great time in Japan!

    EDIT: Linking on this forum seems to not work as intended... If I click on the Link-Button, it says "Enter your URL...". But actually what the user enters into this textbox is the name, not the url.

  • BrianLagunasBrianLagunas USInsider ✭✭✭

    No, this is not related to the SO link you posted.

  • DerProgrammiererDerProgrammierer DEMember ✭✭✭

    @BrianLagunas @NMackay
    I'm still trying to figure out what is causing this issue. Could you guys please tell me which .NET-Framework and OS version you have installed on your PC? Mine is .NET Framework 4.6.1 and Windows 10 x64.

  • NMackayNMackay GBInsider, University mod

    @DerProgrammierer

    Win 10 x64.

    .NET 4.5, 4.5.1, 4.5.2, 4.6, 4.6.1

    The PCL's target .NET 4.5

  • NMackayNMackay GBInsider, University mod

    I'd suggest you test on an actual device as I've found the Win10 sims give weird results. You can't develop a win10 phone app with sims only...IMO.

  • DerProgrammiererDerProgrammierer DEMember ✭✭✭
    edited October 2016

    @NMackay @BrianLagunas

    I actually forgot to mention a crucial detail, sorry about that! I'm using MasterDetailPage only for Tablet and Desktop devices. On Windows phones I have no need for a MasterDetailPage in my app because the app displays the views in another way (didn't test it yet because so far I'm working on the desktop/table version).

    EDIT: I found this information in the Master-Detail Page Documentation:

    It's recommended that the master page of a MasterDetailPage should always be a ContentPage instance, and that the detail page should only be populated with TabbedPage, NavigationPage, and ContentPage instances. This will help to ensure a consistent user experience across all platforms.

    In my case, the Master Page is a TabbedPage because I want to have it on the left side... Maybe that's the problem? It wouldn't explain why it's (partly) working for you guys, but not for me tho.

  • NMackayNMackay GBInsider, University mod
    edited November 2016

    @DerProgrammierer

    Thanks for the update, service patches seem to affect the behavior of UWP apps pretty fundamentally at times, a polite way of saying buggy platform :neutral:

Sign In or Register to comment.