Custom Control not working

JassimRahmaJassimRahma USMember ✭✭✭✭

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

Tagged:

Best Answer

Answers

  • JassimRahmaJassimRahma USMember ✭✭✭✭
    edited October 21

    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

  • JassimRahmaJassimRahma USMember ✭✭✭✭

    This solved my problem:

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

    Thanks @NMackay

Sign In or Register to comment.