Custom Control not working

JassimRahma

Hi,

I am trying to create a custom control using below code and showing it on my About page but Ia m not shown

Here is my Control:

<?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"
    xmlns:SyncfusionBorder="clr-namespace:Syncfusion.XForms.Border;assembly=Syncfusion.Core.XForms"
    mc:Ignorable="d"
    x:Class="Zeera.Controls.NavigationHeader">
    <NavigationPage.TitleView>
        <Grid ColumnSpacing="0" RowSpacing="0" BackgroundColor="{DynamicResource NavBarSystemBackColor}">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>

            <SyncfusionBorder:SfBorder Grid.Column="0" BorderColor="Black" HorizontalOptions="Center" VerticalOptions="Center" CornerRadius="25">
                <Image Source="logo.png" WidthRequest="35" HeightRequest="35">
                    <Image.GestureRecognizers>
                        <TapGestureRecognizer Tapped="ImageHomePageLogoTapped" NumberOfTapsRequired="1" />
                    </Image.GestureRecognizers>
                </Image>
            </SyncfusionBorder:SfBorder>

            <Label x:Name="LabelNavigationHeader" Grid.Column="1" Text="Country" TextColor="{DynamicResource NavBarSystemTextColor}" HorizontalOptions="FillAndExpand" HorizontalTextAlignment="Center" VerticalOptions="Center" />

            <Image Grid.Column="2" Source="Close.png" Margin="10" WidthRequest="35" HeightRequest="35" HorizontalOptions="End" VerticalOptions="Center">
                <Image.GestureRecognizers>
                    <TapGestureRecognizer Tapped="ImageTitleBarCloseTapped" NumberOfTapsRequired="1" />
                </Image.GestureRecognizers>
            </Image>
        </Grid>
    </NavigationPage.TitleView>
</ContentView>

and my custom control CS:

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

using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace Zeera.Controls
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class NavigationHeader : ContentView
    {
        public static readonly BindableProperty TitleProperty = BindableProperty.Create(nameof(Title), typeof(string), typeof(NavigationHeader), default(string), Xamarin.Forms.BindingMode.OneWay);
        // public static readonly BindableProperty TitleProperty = BindableProperty.Create(nameof(Title), typeof(string), typeof(NavigationHeader), default(string), Xamarin.Forms.BindingMode.OneWay);
        // public static readonly BindableProperty TitleProperty = BindableProperty.Create("Text", typeof(string), typeof(NavigationHeader), default(string));
        public string Title
        {
            get
            {
                return (string)GetValue(TitleProperty);
            }

            set
            {
                SetValue(TitleProperty, value);
            }
        }

        public NavigationHeader()
        {
            InitializeComponent();

            NavigationPage.SetHasNavigationBar(this, false);

            // LabelNavigationHeader.SetBinding(Label.TextProperty, new Binding())
        }

        protected override void OnPropertyChanged(string propertyName = null)
        {
            base.OnPropertyChanged(propertyName);

            if (propertyName == TitleProperty.PropertyName)
            {
                LabelNavigationHeader.Text = Title;
            }
        }

        private void ImageHomePageLogoTapped(object sender, System.EventArgs e)
        {
            // Settings SettingsTabView = new Settings(MainPagetabView);
            // MainPagetabView.tabSettings.Content = SettingsTabView;
            // SettingsTabView.get_settings();
        }

        void ImageTitleBarCloseTapped(object sender, System.EventArgs e)
        {
            Navigation.PopModalAsync();
        }
    }
}

and this is my About.xaml:

<?xml version="1.0" encoding="utf-8" ?>
<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:SyncfusionBorder="clr-namespace:Syncfusion.XForms.Border;assembly=Syncfusion.Core.XForms"
    xmlns:NavigationHeader="clr-namespace:Zeera.Controls"
    mc:Ignorable="d"
    x:Class="Zeera.About">
    <NavigationHeader:NavigationHeader Title="Hello My Nav" />
    <ContentPage.Content>
        <StackLayout>
            <Label Text="Welcome to Xamarin.Forms!"
                VerticalOptions="CenterAndExpand" 
                HorizontalOptions="CenterAndExpand" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Kindly help..

Thanks,
Jassim

NMackay

In your Zeera.About, you need to either set the TitleView or hide the navigationbar and have the NavigationHeader in the page content (your setting it before and it's been ignored), done this before and your approach is a little strange. The child control is trying to affect the behavior of the parent which seems odd.

NMackay

In your Zeera.About, you need to either set the TitleView or hide the navigationbar and have the NavigationHeader in the page content (your setting it before and it's been ignored), done this before and your approach is a little strange. The child control is trying to affect the behavior of the parent which seems odd.

JassimRahma

if I set in my About.xaml.cs:

NavigationPage.SetHasNavigationBar(this, false);
NavigationPage.SetHasBackButton(this, false);

Then nothing will be shown, just a blank page

JassimRahma

This solved my problem:

<NavigationPage.TitleView>
    <NavigationHeader:NavigationHeader Title="Hello My Nav" />
</NavigationPage.TitleView>

Thanks @NMackay