Connecting Xamarin Form tabbed pages to XAML

Question

I am fairly new to all of this and am currently attempting to get the height of the tabs in the Xamarin tabbed page form. The only solution I found to this is to write a custom renderer, and that is what I'm having a hard time with.

After a couple days of struggling I managed to get to this spot (hopefully on the right track), however I just cannot understand how to connect the XAML to my custom tabbed page. This is what I have so far.

GameTab.xaml

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage 
            xmlns="http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            x:Class="Diplomacy.Views.GameTab"
            xmlns:pages="clr-namespace:Diplomacy.Views"
            xmlns:custom="clr-namespace:Diplomacy.CustomRenderers">
    <!--Pages can be added as references or inline-->

    <TabbedPage.Children>
        <pages:TabbedMap            Title="Map"         Icon="tank.png"/>
        <pages:TabbedChat           Title="Chat"        Icon="chat.png"/>
    </TabbedPage.Children>
</TabbedPage>

GameTab.xaml.cs

namespace Diplomacy.Views
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class GameTab : Xamarin.Forms.TabbedPage
    {
        SelectionGamesViewModel viewModel;

        public GameTab(SelectionGamesViewModel viewModel)
        {
            InitializeComponent();

            // Disables switching between tabs with the swipe gesture
            On<Xamarin.Forms.PlatformConfiguration.Android>().DisableSwipePaging();

            // Sets the tab at the bottom in android phones
            On<Xamarin.Forms.PlatformConfiguration.Android>().SetToolbarPlacement(ToolbarPlacement.Bottom);

            BindingContext = this.viewModel = viewModel;
        }
    }

MyCustomRenderer.cs

namespace Diplomacy.CustomRenderers
{
    public class CustomTabbedPage : Xamarin.Forms.TabbedPage
    {
    }
}

At this point my next step is to use the CustomTabbedPage (correct me if I'm wrong from here on out).

With this line: xmlns:custom="clr-namespace:Diplomacy.CustomRenderers" I should be able to wedge myself into the Xamarin Tabbed Page form with my custom render, which currently does nothing.

The way that I believe this is done is by changing TabbedPage to CustomTabbedPage like shown below

<?xml version="1.0" encoding="utf-8" ?>
<custom:CustomTabbedPage 
            xmlns="http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            x:Class="Diplomacy.Views.GameTab"
            xmlns:pages="clr-namespace:Diplomacy.Views"
            xmlns:custom="clr-namespace:Diplomacy.CustomRenderers">
    <!--Pages can be added as references or inline-->
.
. // Same stuff goes here
.

</custom:CustomTabbedPage>

However when I do that, I get all sorts of errors in GameTab.xaml.cs and 1 error in the navigation page trying to push GameTab (the 2nd error)

I've been struggling probably for weeks now, I really need some help on how to set up this custom render. I get the theory of what it does and what is it's purpose, however I don't fully understand how the compiler handles it all, and how to link it all together. Please and thank you. Sorry for the long question, I just wanted to be thorough.

EDIT: This is the Android custom renderer code that lives in Diplomacy.Android

[assembly: ExportRenderer(typeof(CustomTabbedPage), typeof(MyTabbedPage))]
namespace Diplomacy.Droid.CustomRenderer
{
    public class MyTabbedPage : TabbedRenderer
    {
        public MyTabbedPage(Context context) : base(context)
        {
        }
    }
}

in one place you are using GameTab, in others CustomTabbedPage — Jason, Feb 05 '19 at 19:50
further, why are you doing this? Why do you need to know the tab height? — Jason, Feb 05 '19 at 19:51
When I created this TabbedPage with the name GameTab, that's how it came and I left it. It's been working great without the custom render. — Matt, Feb 05 '19 at 19:57
I wanted to find the tab height because when using the panning gesture it doesn't let me pan all the way to the bottom of the Image/Map. I am using Screen.Height, but I assume it doesn't take the tabs or navigation bar into consideration. Also, I would like to learn how custom renderers work, so I thought this was an easy example. Eventually I think i'd like to change the tab height and background color. — Matt, Feb 05 '19 at 19:58
GameTab's code-behind needs to inherit from CustomTabbedPage, that is what the first error message is telling you. — Jason, Feb 05 '19 at 20:00
One of the things I tried was changing that line of code to 'public partial class GameTab : CustomTabbedPage', that did give me no errors, however it did not populate the tab. It did go a step beyond that and populate the screen with the default tab (a fictional map), however no tabs to be seen. I thought i took a wrong step. — Matt, Feb 05 '19 at 20:05
do you actually have a CustomRenderer? There would be one for each platform you're supporting, and it would live in the platform (not shared) project. — Jason, Feb 05 '19 at 20:17
I do for Android, I just posted the code at the bottom. I don't have anything for iOS but I can't emulate it either (no Mac), my friend does though, we're both new at this. — Matt, Feb 05 '19 at 20:21
if the code builds and runs but the UI is not right, then the problem is probably in the renderer — Jason, Feb 05 '19 at 20:22

score 0 · Accepted Answer · answered Feb 05 '19 at 20:04

0

All the errors that you get are for one and one reason alone that the other part of your partial class i.e. GameTab.xaml.cs files GameTab class is not inheriting from your CustomTabbedPage but your Xamarin.Forms.TabbedPage

All you have to do is something like this in your GameTab.xaml.cs

   public partial class GameTab : Diplomacy.CustomRenderers.CustomTabbedPage

answered Feb 05 '19 at 20:04

FreakyAli

13,349
3
23
63

I just tried that and it does the same thing as doing 'Public partial class GameTab : CustomTabbedPage', it doesn't put the tabs on the screen, however it does put the content of the default tab, a fictional map, but no tabs. I do have the navigation bar at the top. – Matt Feb 05 '19 at 20:08
I think your code is missing important tabbed page properties when using tab alignment bottom check this blog by James Montemagno https://montemagno.com/xamarin-forms-official-bottom-navigation-bottom-tabs-on-android/ – FreakyAli Feb 05 '19 at 20:19
That's the website that I got that line of code from, however I'm not exactly sure what it's missing, I have the "using" and the 1 line of code. I just commented those two lines out though, the DisableSwipe and SetToolbarPlacement, and the tab still does not show up. – Matt Feb 05 '19 at 20:25
Add these and see what happens `BarBackgroundColor="#2196F3" BarTextColor="White"` – FreakyAli Feb 05 '19 at 20:27
I assumed you wanted me to add that to ? I did that and nothing. The space for a tab is not even there. The image takes up the entire screen space (aside from the navigation bar). – Matt Feb 05 '19 at 20:29
What version of xf are you using? Also the reason that is happening is because your bottom navigation view from the android side does not have a fixed height – FreakyAli Feb 05 '19 at 20:35
Xmarin - 4.12.3.78 – Matt Feb 06 '19 at 12:38
How do I give it a fixed height? – Matt Feb 06 '19 at 12:38
`Xamarin - 4.12.3.78`- I mean Xamarin.Forms brother not the Xamarin version – FreakyAli Feb 06 '19 at 12:39
`How do I give it a fixed height?`- In your custom renderer – FreakyAli Feb 06 '19 at 12:39

Connecting Xamarin Form tabbed pages to XAML

1 Answers1