Adding content on a custom content page

Question

Ok, so I am trying to add a searchbar in the toolbar of my page.

• The Search bar appears correctly in the toolbar and I can catch the on text changed event.

• I created a new Xaml and cs page and changed content page to 'MySearchContentPage'

• I Tried to add a grid and label on my new page created but nothing will show except for the searchbar. I added this just to see if I can get anything to display.

Am I adding it in the right place ? Or how do you add content to this page ?

I have done this by doing the following:

MySearchContentPage Class:

public class MySearchContentPage : ContentPage, ISearchPage
{

    public MySearchContentPage()
    {

        SearchBarTextChanged += HandleSearchBarTextChanged;

    }





    public event EventHandler<string> SearchBarTextChanged;

    public void OnSearchBarTextChanged(string text) => SearchBarTextChanged?.Invoke(this, text);

    void HandleSearchBarTextChanged(object sender, string searchBarText)
    {
        //Logic to handle updated search bar text

    }
}

ISearchPage:

public interface ISearchPage
{
    void OnSearchBarTextChanged(string text);
    event EventHandler<string> SearchBarTextChanged;


}

iOS renderer page:

public class MySearchContentPageRenderer : PageRenderer, IUISearchResultsUpdating
{
    readonly UISearchController searchController;


    bool _isFirstAppearing = true;

    public override void WillMoveToParentViewController(UIViewController parent)
    {
        base.WillMoveToParentViewController(parent);

        var searchController = new UISearchController(searchResultsController: null)
        {
            SearchResultsUpdater = this,
            DimsBackgroundDuringPresentation = false,
            HidesNavigationBarDuringPresentation = true,
            HidesBottomBarWhenPushed = true



        };
        searchController.SearchBar.Placeholder = "Search Symptoms";



        parent.NavigationItem.SearchController = searchController;

        DefinesPresentationContext = true;
    }

    public override void ViewDidAppear(bool animated)
    {
        base.ViewDidAppear(animated);

        //Work-around to ensure the SearchController appears when the page first appears https://stackoverflow.com/a/46313164/5953643
        if (_isFirstAppearing)
        {
            ParentViewController.NavigationItem.SearchController.Active = true;
            ParentViewController.NavigationItem.SearchController.Active = false;

            _isFirstAppearing = false;
        }
    }

    public void UpdateSearchResultsForSearchController(UISearchController searchController)
    {
        if (Element is ISearchPage searchPage)
            searchPage.OnSearchBarTextChanged(searchController.SearchBar.Text);
    }


public MySearchContentPageRenderer()
    {
       var searchControllerr = new UISearchController(searchResultsController: null)
        {
            SearchResultsUpdater = this,
            DimsBackgroundDuringPresentation = false,
            HidesNavigationBarDuringPresentation = false,
            HidesBottomBarWhenPushed = true
        };
        searchControllerr.SearchBar.Placeholder = string.Empty;
    }


    public override void ViewWillAppear(bool animated)
    {
        base.ViewWillAppear(animated);

        UINavigationBar.Appearance.TitleTextAttributes = new UIStringAttributes
        {
            ForegroundColor = UIColor.Red
        };



    }

    public override void ViewDidLoad()
    {
       //  base.ViewDidLoad();

      //  NavigationController.NavigationBar.PrefersLargeTitles = true;
      //  NavigationController.NavigationBar.BackgroundColor = UIColor.Red;

        //  var searchController = new UISearchController(searchResultsController: null);
        //  searchController.SearchBar.SearchBarStyle = UISearchBarStyle.Default;
        // searchController.SearchBar.BackgroundColor = UIColor.Green;
        // NavigationItem.SearchController = searchController;
        // NavigationItem.HidesSearchBarWhenScrolling = false;



        //searchController.SearchBar.SizeToFit();
        //searchController.SearchBar.SearchBarStyle = UISearchBarStyle.Prominent;
        ////NavigationController.TabBarController
        //this.sea
        //NavigationController.TabBarController.NavigationItem.HidesSearchBarWhenScrolling = true;
        //NavigationController.TabBarController.NavigationItem.SearchController = searchController;

        //this.Title = "Search";
    }








}

So far the outcome is this :

I can't seem to get anything else to add to this page. Can anyone explain why?

AddSymptomNew.xaml page:

<?xml version="1.0" encoding="UTF-8"?>
<visiblegyapp:MySearchContentPage
xmlns:visiblegyapp="clr-namespace:VisiblegyApp"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="VisiblegyApp.AddSymptomNew"
xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
ios:Page.LargeTitleDisplay="Always"
Title="Search Symptoms"
BackgroundColor="{DynamicResource BasePageColor}"

>
<ScrollView 
    x:Name="outerScrollView"
    Padding="0"
    >

    <Grid 
            x:Name="layeringGrid" 
            RowSpacing="0"

            VerticalOptions="FillAndExpand">

        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <Label Text="test label" TextColor="Red"  Grid.Row="1"/>



    </Grid>






    </ScrollView>

Answer 1

The cause is ContentPage is inheritable while XAML is not inheritable.

I would recommend you to use a custom contentview and add this contentView to MySearchContentPage .

For example, create a custom contentView here:

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
    }
}

And in Xaml:

<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="App132.AddSymptomNewView">
  <ContentView.Content>

        <ScrollView 
            x:Name="outerScrollView"
            Padding="0">

            <Grid 
                x:Name="layeringGrid" 
                RowSpacing="0"

                VerticalOptions="FillAndExpand">

                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>

                <Label Text="test label" TextColor="Red"  Grid.Row="1"/>

            </Grid>

        </ScrollView>
    </ContentView.Content>
</ContentView>

And use it in the MySearchContentPage :

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:app132="clr-namespace:App132"
             mc:Ignorable="d"
             x:Class="App132.MainPage">

    <app132:AddSymptomNewView/>

</ContentPage>