Xamarin Forms | Master-Detail Page | Menu items do appear in preview but not in app

Question

Hi everyone,

I´m having a little trouble with the Master-Detail Page in XF. I started to use the example given from the following resource:
https://learn.microsoft.com/en-us/samples/xamarin/xamarin-forms-samples/navigation-masterdetailpage/

The implementation took a little while, functional wise it is running but I´m having some issues with the presentation.
While the code preview in VS 2019 correctly displays the menu for the Master/Detail page (see app-preview.png) the result on my mobile is empty (see app-screenshot).
When deploying the example solution to my phone everything works just fine. My system is up to date, VS 2019 (16.7.7), Xamarin Forms (4.8.0.1687) as well as NETStandardLibrary (2.0.3).

I´ve tried different approaches:

1. Reset and adjust any color theme changes according to the example.
2. Set titles in any page.
3. Manually set the color for the label.

Something with the data binding seems not to work correctly. While setting the background color of the lable DOES work, the icon and label text are NOT shown.
Does anyone have a clue why it might not be working?

Thanks and best regards,
Christian

Answer 1

Thanks @strange-thing5152. That last screenshot you shared is from the designer again, we know that already works what we need to focus on is runtime.

Hot Reload is when the app is deployed and run from Visual Studio (i.e. F5). To be extra clear when I say hot reload, here' the steps that you would be taking to use it:

1. In Visual Studio, select Debug > Start Debugging (or F5)
2. While the app is running, make any change in the XAML and save the file
3. Observe the running app get updated with the new changes

Can you confirm that everything is working at runtime in that setup?

Release Mode and Linker Behavior

Or, when you say "deployed and run" you mean the project was compiled in Release mode, packaged and installed? In that case, then it's a different story and we need to check the build settings to make sure you're not being linked out.

Please double check the linker behavior settings for the project

1. Right click on the Android project and select "Properties"
2. From the list on the left, select "Android Options"
3. Look at the top of the page and see that the Configuration is set to "Release" and target is "AnyCPU"
4. Look down at the Linker properties section and make sure the Linker is set to SDK Assemblies only"

Further Investigation

I will be able to help you much faster if you can just send me the projects. Take the following steps:

1. Close Visual Studio and navigate to the project in File Explorer
2. Delete the bin and obj folders from every project
3. ZIP up the entire solution (if you deleted all the bin/obj, it should only be a few MBs)
4. Send me the ZIP (you can upload to OneDrive and give me the link)

Answer 2

That's excellent news! Based on that, I think you might have had an outdated bin folder.

In the future, you can avoid this by doing a "Rebuild" instead of just build.

1. Make sure the solution is set to the configuration you need (Debug or Release)
2. Right click on the project and select Rebuild
3. Deploy to the target

This will make sure that Visual Studio cleans the bin/obj folders and recreates all the files with the latest code changes. Let me explain why this helps..

Visual Studio tries to optimize things by caching files that do not need to be re-created every single time you need to debug. This can sometimes leads to something being cached that actually should be forced to update (because there were changed)

Using Rebuild forces Visual Studio delete the bin/Debug (or bin/Release) folder contents, then it gets the latest copy of each file/assembly and compiles with those. It take longer to do a rebuild, so use it only when you need to or if you are seeing weird behavior.

Answer 3

My first advice would be to not use the previewer. Hot Reload is much better and more reliable for real-world experience. Just edit the code, save the page and you instantly see the changes in the device/emulator.

Okay, onto the actual problem. That demo is about 5 years old, with some tweaks 3 years ago, and was built for an older version of Xamarin.Forms. There have been lots of amazing improvements since then, so some of the techniques being used can be improved.

That being said, it should work as-is, so I suspect a BindingContext or namespace problem as you integrate the demo code into your app.

I can't see the ItemTemplate in your screenshot, but I'm assuming it's something like this:

xaml
<ListView.ItemTemplate>
    <DataTemplate>
        <ViewCell>
            <Grid Padding="5,10">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="30"/>
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Image Source="{Binding IconSource}" />
                <Label Grid.Column="1" Text="{Binding Title}" />
            </Grid>
        </ViewCell>
    </DataTemplate>
</ListView.ItemTemplate>

Isolating Functionality

Just to eliminate other factors, let's start with a simple TextCell to even verify the BindingContext is correct:

xaml
<ListView x:Name="listView" x:FieldModifier="public">
    <ListView.ItemTemplate>
        <DataTemplate>
            <TextCell Text="{Binding Title}"/>
        </DataTemplate>
    </ListView.ItemTemplate>
    ...
</ListView>

That test will tell us a lot, particularly important is whether or not the BindingContext of the item is what you expect it to be.

If it does show the title, then let's move on to trying an ImageCell so we can verify the icon path.

<ListView x:Name="listView" x:FieldModifier="public">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ImageCell ImageSource="{Binding IconSource}" Text="{Binding Title}"/>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Did you add the images to the native projects and set their BuildAction correctly?

Further Investigation

Let me know how it goes.

If it doesn't work, please ZIP up the pages and send them to me for direct investigation. I need to see the data model class, the masterpage, the masterdetailpage (I can mock the detail page)

Answer 4

Here is the screenshot of your TextCell approach with identical result to my current problem. It is shown in "Hot Reload" but not in the app when installed physically. Thanks for the tip with "Hot Reload", I must have mixed it up with "Preview" thats why also edit the title of the problem. New approach, same result. The desired result is displayed in "Hot Reload" but not in the actual app. Also tried different settings for the icon. "Embedded Ressource" as well as "Android Ressource" are not working. I´m familiar with that problem regarding "ffimageloading" for SVG files.

Thanks and best regards,
Christian

Answer 5

Hi Lane,

sorry for the confusion of deploying and running vs. Release mode, packaged and installed. I owe you at least a coffee, making it better 2.
First, my "Hot Reload" in DEBUG did not start. Here were my steps which finally led me to a working solution.

1) Closing my project and VS 2019.
2) Restarting VS 2019.
3) Opening my project.
4) Set my Link properties in "Release" as you suggested and changed it to SDK Assemblies only.
5) Switched to DEBUG.
6) Deployed and ran my project in Hot Reload, see screenshot attached. Tada, everything looks like expected.
7) Switched to "Release", packaged and installed the app.
8) Behaviour was as expected.

Thank you very much for your help.

Best regards,
Christian