How to develop part of a xamarin forms app interface in C# and the other part in xaml?

Question

hello I am working on a xamarin forms app that has a grid interface written in c# I am trying to add a bottom Nav bar using xaml

here's my C# code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using Xamarin.Forms;

namespace App.Pages
{
    public partial class HomePage : ContentPage
    {
        public HomePage()
        {
            InitializeComponent();

            var g = new Grid { };

            //Image 1 setup
            var Image1 = new Image
            {
                HorizontalOptions = LayoutOptions.StartAndExpand,
                Source = ImageSource.FromFile("event.png"),
                WidthRequest = 200,
                HeightRequest = 200,
            };
            //Image 1 tapped event
            var tapGestureRecognizer1 = new TapGestureRecognizer();
            tapGestureRecognizer1.Tapped += TapGestureRecognizer1_Tapped;
            Image1.GestureRecognizers.Add(tapGestureRecognizer1);
            //Image 1 tapped event
            g.Children.Add(Image1, 0, 0);


            //Image 2 setup
            var Image2 = new Image
            {
                HorizontalOptions = LayoutOptions.StartAndExpand,
                Source = ImageSource.FromFile("schedule.png"),
                WidthRequest = 200,
                HeightRequest = 200,
            };
            //Image 2 tapped event
            var tapGestureRecognizer2 = new TapGestureRecognizer();
            tapGestureRecognizer2.Tapped += TapGestureRecognizer2_Tapped;
            Image2.GestureRecognizers.Add(tapGestureRecognizer2);
            //Image 2 tapped event
            g.Children.Add(Image2, 1, 0);


            //Image 3 setup
            var Image3 = new Image
            {
                HorizontalOptions = LayoutOptions.StartAndExpand,
                Source = ImageSource.FromFile("icon.png"),
                WidthRequest = 200,
                HeightRequest = 200,
            };
            //Image 3 tapped event
            var tapGestureRecognizer3 = new TapGestureRecognizer();
            tapGestureRecognizer3.Tapped += TapGestureRecognizer3_Tapped;
            Image3.GestureRecognizers.Add(tapGestureRecognizer3);
            //Image 3 tapped event
            g.Children.Add(Image3, 0, 1);


            //Image 4 setup
            var Image4 = new Image
            {
                HorizontalOptions = LayoutOptions.StartAndExpand,
                Source = ImageSource.FromFile("icon.png"),
                WidthRequest = 200,
                HeightRequest = 200,
            };
            //Image 4 tapped event
            var tapGestureRecognizer4 = new TapGestureRecognizer();
            tapGestureRecognizer4.Tapped += TapGestureRecognizer4_Tapped;
            Image4.GestureRecognizers.Add(tapGestureRecognizer4);
            //Image 4 tapped event
            g.Children.Add(Image4, 1, 1);


            //Image 5setup
            var Image5 = new Image
            {
                HorizontalOptions = LayoutOptions.StartAndExpand,
                Source = ImageSource.FromFile("icon.png"),
                WidthRequest = 200,
                HeightRequest = 200,
            };
            //Image 5 tapped event
            var tapGestureRecognizer5 = new TapGestureRecognizer();
            tapGestureRecognizer5.Tapped += TapGestureRecognizer5_Tapped;
            Image5.GestureRecognizers.Add(tapGestureRecognizer5);
            //Image 5 tapped event
            g.Children.Add(Image5, 0, 2);


            //Image 6 setup
            var Image6 = new Image
            {
                HorizontalOptions = LayoutOptions.StartAndExpand,
                Source = ImageSource.FromFile("icon.png"),
                WidthRequest = 200,
                HeightRequest = 200,
            };
            //Image 6 tapped event
            var tapGestureRecognizer6 = new TapGestureRecognizer();
            tapGestureRecognizer6.Tapped += TapGestureRecognizer6_Tapped;
            Image6.GestureRecognizers.Add(tapGestureRecognizer6);
            //Image 6 tapped event
            g.Children.Add(Image6, 1, 2);

            // Accomodate iPhone status bar.
            this.Padding = new Thickness(0, Device.OnPlatform(20, 0, 0), 0, 0);

            // Build the page.
            this.Content = g;

        }


        //This is the code that takes you to page1
        private void TapGestureRecognizer1_Tapped(object sender, EventArgs e)
        {
            Navigation.PushModalAsync(new Page1());

        }

        //This is the code that takes you to page2

        private void TapGestureRecognizer2_Tapped(object sender, EventArgs e)
        {
            Navigation.PushModalAsync(new Page2());
        }
        private void TapGestureRecognizer3_Tapped(object sender, EventArgs e)
        {
            this.DisplayAlert("Image Tapped", "Image 3 tapped, push navigation here.", "Dismiss");
        }
        private void TapGestureRecognizer4_Tapped(object sender, EventArgs e)
        {
            this.DisplayAlert("Image Tapped", "Image 4 tapped, push navigation here.", "Dismiss");
        }
        private void TapGestureRecognizer5_Tapped(object sender, EventArgs e)
        {
            this.DisplayAlert("Image Tapped", "Image 5 tapped, push navigation here.", "Dismiss");
        }
        private void TapGestureRecognizer6_Tapped(object sender, EventArgs e)
        {
            this.DisplayAlert("Image Tapped", "Image 6 tapped, push navigation here.", "Dismiss");
        }

        //Code to take you to the homepage
        public void Home(object sender, EventArgs e)
        {

            Navigation.PushAsync(new HomePage());






        }


        //Code to take you to the MapPage
        public void Map(object sender, EventArgs e)
        {

            Navigation.PushAsync(new MapPage());






        }


        //Code to take you to the SponsorsPage
        public void sponsors(object sender, EventArgs e)
        {

            Navigation.PushAsync(new SponsorsPage());






        }
    }


}

and here's the xaml page that i'm trying to add the nav bar to:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="App.Pages.HomePage"
                xmlns:flv="clr-namespace:DLToolkit.Forms.Controls;assembly=DLToolkit.Forms.Controls.FlowListView"
             BackgroundColor="#8f9e1c">
  <Grid RowSpacing="0">
    <Grid.RowDefinitions>
      <RowDefinition Height="*" />
      <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <ContentPage.Content>
      <Grid Grid.Row="1" BackgroundColor="#8f9e1c">
        <StackLayout Orientation="Horizontal" MinimumHeightRequest="30" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
          <Button Image="icon.png" HorizontalOptions="StartAndExpand" BorderColor="Transparent" BackgroundColor="Transparent" Clicked="Home" />
          <Button  Image="icon.png" HorizontalOptions="CenterAndExpand" BackgroundColor="Transparent" Clicked="Map" />
          <Button  Image="icon.png" HorizontalOptions="EndAndExpand" BorderColor="Transparent" BackgroundColor="Transparent" Clicked="sponsors" />
        </StackLayout>
      </Grid>
    </ContentPage.Content>
  </Grid>
</ContentPage>

when I run the code as is it just shows the C# code any ideas on how to get the nav bar working?

any help would be amazing!

Thanks in advance

Answer 1

this is just overwriting any existing page content

this.Content = g;

You need to assign a name to XAML grid and refer to it by name in your C# code, instead of just creating a new grid

<Grid RowSpacing="0" x:Name="myGrid">

myGrid.Children.Add(Image1, 0, 0);

don't do this

var g = new Grid { };

or this

this.Content = g;