[Xamarin.Forms] Control example - numbers panel

NumbersPadKeyValuePairView.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" 
    x:Class="SampleFormsProject.Views.NumbersPadKeyValuePairView"
    xmlns:ns_sample_control="clr-namespace:SampleFormsProject.Views;assembly=SampleFormsProject"
>

	<ContentView.Content>
        
        <StackLayout 
                Orientation="Vertical"
                VerticalOptions="Center"
                BackgroundColor="Transparent">
                
            <Label x:Name="KeyLabel"

                   BackgroundColor="Transparent"
                
                   Text="" 
                        
                   TextColor="White"
                   FontSize="10"
                        
                   HorizontalTextAlignment="Center"
                   VerticalTextAlignment="Center" 

                   VerticalOptions="Fill"
                   HorizontalOptions="Fill"
            />

            <Label x:Name="ValueLabel"
                   BackgroundColor="Transparent"
                
                   Text="" 

                   TextColor="White"
                   FontSize="15"
                        
                   HorizontalTextAlignment="Center"
                   VerticalTextAlignment="Center" 

                   VerticalOptions="Fill"
                   HorizontalOptions="Fill"
            />                    

       </StackLayout> 
        
	</ContentView.Content>
    
</ContentView>

NumbersPadKeyValuePairView.xaml.cs

using System;
using System.Collections.Generic;
using Xamarin.Forms;

namespace SampleFormsProject.Views
{
    public partial class NumbersPadKeyValuePairView : ContentView
    {
        public NumbersPadKeyValuePairView()
        {
            this.InitializeComponent();
        }

        #region TitleText
        public readonly static BindableProperty TitleTextProperty =
        BindableProperty.Create(
            propertyName: "TitleText",
            returnType: typeof(string),
            declaringType: typeof(NumbersPadKeyValuePairView),
            defaultValue: "",
            defaultBindingMode: BindingMode.OneWay,
            propertyChanged: TitleTextPropertyChanged);


        private static void TitleTextPropertyChanged(
            BindableObject bindable,
            object oldValue,
            object newValue)
        {
            var control = (NumbersPadKeyValuePairView)bindable;

            string strNewValue = newValue.ToString();
            control.KeyLabel.Text= strNewValue;
        }

        public string TitleText
        {
            get
            {
                return (string)GetValue(TitleTextProperty);
            }
            set
            {
                SetValue(TitleTextProperty, value);
            }
        }
        #endregion TitleText

        #region ValueText
        public readonly static BindableProperty ValueTextProperty =
        BindableProperty.Create(
            propertyName: "ValueText",
            returnType: typeof(string),
            declaringType: typeof(NumbersPadKeyValuePairView),
            defaultValue: "",
            defaultBindingMode: BindingMode.OneWay,
            propertyChanged: ValueTextPropertyChanged);


        private static void ValueTextPropertyChanged(
            BindableObject bindable,
            object oldValue,
            object newValue)
        {
            var control = (NumbersPadKeyValuePairView)bindable;

            string strNewValue = newValue.ToString();
            control.ValueLabel.Text = strNewValue;
        }

        public string ValueText
        {
            get
            {
                return (string)GetValue(ValueTextProperty);
            }
            set
            {
                SetValue(ValueTextProperty, value);
            }
        }
        #endregion ValueText
    }
}

Page-chunk.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:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
             xmlns:ns_sample_control="clr-namespace:SampleFormsProject.Views;assembly=SampleFormsProject"

             prism:ViewModelLocator.AutowireViewModel="True"
             x:Class="SampleFormsProject.Views.SamplePage"
             Title="Custom Control Sample" >
  
  <StackLayout>
    
              <ns_sample_control:SelectedMonthNumbersPanel
                HeightRequest="60"
                HorizontalOptions="Fill"
                Margin="6, 5, 10, 0"

                AmountTitleText="{Binding StatsAmountLabelTitleText}"
                AmountValueText="{Binding StatsAmountValueText}" 

                OpenTitleText="{Binding StatsOpenCountTitleText}"
                OpenValueText="{Binding StatsOpenCountValueText}"

                NewTitleText="{Binding StatsNewCountTitleText}"
                NewValueText="{Binding StatsNewCountValueText}"

                WonTitleText="{Binding StatsWonCountTitleText}"
                WonValueText="{Binding StatsWonCountValueText}"

                LostTitleText="{Binding StatsLostCountTitleText}"
                LostValueText="{Binding StatsLostCountValueText}"
          />
    
  </StackLayout>
  
</ContentPage>  

SamplePageViewModel.cs

class PipelineDetailPageViewModel
{
        #region StatsPanel

        public string StatsAmountLabelTitleText { get; set; } = "Amount";
        public string StatsAmountValueText { get; set; } = "$17,3M";

        public string StatsOpenCountTitleText { get; set; } = "Open";
        public string StatsOpenCountValueText { get; set; } = "32";

        public string StatsNewCountTitleText { get; set; } = "New";
        public string StatsNewCountValueText { get; set; } = "20";

        public string StatsWonCountTitleText { get; set; } = "Won";
        public string StatsWonCountValueText { get; set; } = "6";

        public string StatsLostCountTitleText { get; set; } = "Lost";
        public string StatsLostCountValueText { get; set; } = "11";

        #endregion StatsPanel
        
        // Properties for other controls on the page go here
}

SelectedMonthNumbersPanel.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" 
    x:Class="SampleFormsProject.Views.SelectedMonthNumbersPanel"
    xmlns:ns_sample_control="clr-namespace:SampleFormsProject.Views;assembly=SampleFormsProject"
>
    
	<ContentView.Content>


<!--        Equal Horizontal Areas + Separator Line -->
    <Grid BackgroundColor="#0091e1" ColumnSpacing="0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="2"/>
            <ColumnDefinition Width="*"/>                
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

<!--           [BEGIN] Horizontal Halves -->
        <Grid Grid.Column="0" Grid.Row="0"
              ColumnSpacing="0" 
              BackgroundColor="Transparent">
                
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>                
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>


<!--                TODO: inject non-constant values-->

                <ns_sample_control:NumbersPadKeyValuePairView 
                        x:Name="AmountPair"
                        Grid.Column="0"    Grid.Row="0"/>    


                <ns_sample_control:NumbersPadKeyValuePairView
                        x:Name="OpenPair"
                        Grid.Column="1"   Grid.Row="0" />    

        </Grid>
<!--           [END] Horizontal Halves -->

            
<!--            [BEGIN] Separator -->
        <BoxView Grid.Column="1" Grid.Row="0"
                 BackgroundColor="#00689e"
                 WidthRequest="1"
                 HeightRequest="44"
                 HorizontalOptions="Start"
                 VerticalOptions="Center" />
            
        <BoxView Grid.Column="1" Grid.Row="0"
             BackgroundColor="#64c8ff"
             WidthRequest="1"
             HeightRequest="44"
             HorizontalOptions="End"
             VerticalOptions="Center" />
<!--            [END] Separator -->

<!--            [BEGIN] Three equal columns -->
        <Grid Grid.Column="2" Grid.Row="0"
              ColumnSpacing="0" 
              BackgroundColor="Transparent">
                
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>                    
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>


            <ns_sample_control:NumbersPadKeyValuePairView 
                x:Name="NewPair"
                Grid.Column="0" Grid.Row="0" />    

                
            <ns_sample_control:NumbersPadKeyValuePairView 
                x:Name="WonPair"
                Grid.Column="1" Grid.Row="0" />                    
                

            <ns_sample_control:NumbersPadKeyValuePairView 
                x:Name="LostPair"
                Grid.Column="2" Grid.Row="0" />                                    

        </Grid>
<!--            [END] Three equal columns -->
            
    </Grid>


	</ContentView.Content>
    
</ContentView>

SelectedMonthNumbersPanel.xaml.cs

using System;
using System.Collections.Generic;
using Xamarin.Forms;

namespace SampleFormsProject.Views
{
    public partial class SelectedMonthNumbersPanel : ContentView
    {
        public SelectedMonthNumbersPanel()
        {
            InitializeComponent();
        }


        #region Amount

        #region AmountTitleText
        public readonly static BindableProperty AmountTitleTextProperty = 
            BindableProperty.Create(
                propertyName: "AmountTitleText",
                returnType: typeof(string),
                declaringType: typeof(SelectedMonthNumbersPanel),
                defaultValue: "",
                defaultBindingMode: BindingMode.OneWay,
                propertyChanged: AmountTitleTextPropertyChanged);

        private static void AmountTitleTextPropertyChanged(
            BindableObject bindable, 
            object oldValue, 
            object newValue)
        {
            var control = (SelectedMonthNumbersPanel)bindable;

            string strNewValue = newValue.ToString();
            control.AmountPair.TitleText = strNewValue;
        }


        public string AmountTitleText
        { 
            get
            {
                return (string)GetValue(AmountTitleTextProperty);
            }
            set
            {
                SetValue(AmountTitleTextProperty, value);
            }
        }
        #endregion AmountTitleText

        #region AmountValueText
        public readonly static BindableProperty AmountValueTextProperty =
            BindableProperty.Create(
                propertyName: "AmountValueText",
                returnType: typeof(string),
                declaringType: typeof(SelectedMonthNumbersPanel),
                defaultValue: "",
                defaultBindingMode: BindingMode.OneWay,
                propertyChanged: AmountValueTextPropertyChanged);

        private static void AmountValueTextPropertyChanged(
            BindableObject bindable,
            object oldValue,
            object newValue)
        {
            var control = (SelectedMonthNumbersPanel)bindable;

            string strNewValue = newValue.ToString();
            control.AmountPair.ValueText = strNewValue;
        }

        public string AmountValueText 
        { 
            get
            {
                return (string)GetValue(AmountValueTextProperty);
            }
            set
            {
                SetValue(AmountValueTextProperty, value);
            }
        }
        #endregion AmountValueText

        #endregion Amount


        #region Open

        #region OpenTitleText
        public readonly static BindableProperty OpenTitleTextProperty =
            BindableProperty.Create(
                propertyName: "OpenTitleText",
                returnType: typeof(string),
                declaringType: typeof(SelectedMonthNumbersPanel),
                defaultValue: "",
                defaultBindingMode: BindingMode.OneWay,
                propertyChanged: OpenTitleTextPropertyChanged);


        private static void OpenTitleTextPropertyChanged(
            BindableObject bindable,
            object oldValue,
            object newValue)
        {
            var control = (SelectedMonthNumbersPanel)bindable;

            string strNewValue = newValue.ToString();
            control.OpenPair.TitleText = strNewValue;
        }

        public string OpenTitleText
        {
            get
            {
                return (string)GetValue(OpenTitleTextProperty);
            }
            set
            {
                SetValue(OpenTitleTextProperty, value);
            }
        }
        #endregion OpenTitleText

        #region OpenValueText
        public readonly static BindableProperty OpenValueTextProperty =
        BindableProperty.Create(
            propertyName: "OpenValueText",
            returnType: typeof(string),
            declaringType: typeof(SelectedMonthNumbersPanel),
            defaultValue: "",
            defaultBindingMode: BindingMode.OneWay,
            propertyChanged: OpenValueTextPropertyChanged);


        private static void OpenValueTextPropertyChanged(
            BindableObject bindable,
            object oldValue,
            object newValue)
        {
            var control = (SelectedMonthNumbersPanel)bindable;

            string strNewValue = newValue.ToString();
            control.OpenPair.ValueText = strNewValue;
        }

        public string OpenValueText
        {
            get
            {
                return (string)GetValue(OpenValueTextProperty);
            }
            set
            {
                SetValue(OpenValueTextProperty, value);
            }
        }
        #endregion OpenValueText

        #endregion Open


        #region New

        #region NewTitleText
        public readonly static BindableProperty NewTitleTextProperty =
        BindableProperty.Create(
            propertyName: "NewTitleText",
            returnType: typeof(string),
            declaringType: typeof(SelectedMonthNumbersPanel),
            defaultValue: "",
            defaultBindingMode: BindingMode.OneWay,
            propertyChanged: NewTitleTextPropertyChanged);


        private static void NewTitleTextPropertyChanged(
            BindableObject bindable,
            object oldValue,
            object newValue)
        {
            var control = (SelectedMonthNumbersPanel)bindable;

            string strNewValue = newValue.ToString();
            control.NewPair.TitleText= strNewValue;
        }

        public string NewTitleText
        {
            get
            {
                return (string)GetValue(NewTitleTextProperty);
            }
            set
            {
                SetValue(NewTitleTextProperty, value);
            }
        }
        #endregion NewTitleText

        #region NewValueText
        public readonly static BindableProperty NewValueTextProperty =
        BindableProperty.Create(
            propertyName: "NewValueText",
            returnType: typeof(string),
            declaringType: typeof(SelectedMonthNumbersPanel),
            defaultValue: "",
            defaultBindingMode: BindingMode.OneWay,
            propertyChanged: NewValueTextPropertyChanged);


        private static void NewValueTextPropertyChanged(
            BindableObject bindable,
            object oldValue,
            object newValue)
        {
            var control = (SelectedMonthNumbersPanel)bindable;

            string strNewValue = newValue.ToString();
            control.NewPair.ValueText = strNewValue;
        }

        public string NewValueText
        {
            get
            {
                return (string)GetValue(NewValueTextProperty);
            }
            set
            {
                SetValue(NewValueTextProperty, value);
            }
        }
        #endregion NewValueText

        #endregion New


        #region Won

        #region WonTitleText
        public readonly static BindableProperty WonTitleTextProperty =
        BindableProperty.Create(
            propertyName: "WonTitleText",
            returnType: typeof(string),
            declaringType: typeof(SelectedMonthNumbersPanel),
            defaultValue: "",
            defaultBindingMode: BindingMode.OneWay,
            propertyChanged: WonTitleTextPropertyChanged);


        private static void WonTitleTextPropertyChanged(
            BindableObject bindable,
            object oldValue,
            object newValue)
        {
            var control = (SelectedMonthNumbersPanel)bindable;

            string strNewValue = newValue.ToString();
            control.WonPair.TitleText = strNewValue;
        }

        public string WonTitleText
        {
            get
            {
                return (string)GetValue(WonTitleTextProperty);
            }
            set
            {
                SetValue(WonTitleTextProperty, value);
            }
        }
        #endregion WonTitleText

        #region WonValueText

        public readonly static BindableProperty WonValueTextProperty =
        BindableProperty.Create(
            propertyName: "WonValueText",
            returnType: typeof(string),
            declaringType: typeof(SelectedMonthNumbersPanel),
            defaultValue: "",
            defaultBindingMode: BindingMode.OneWay,
            propertyChanged: WonValueTextPropertyChanged);


        private static void WonValueTextPropertyChanged(
            BindableObject bindable,
            object oldValue,
            object newValue)
        {
            var control = (SelectedMonthNumbersPanel)bindable;

            string strNewValue = newValue.ToString();
            control.WonPair.ValueText = strNewValue;
        }

        public string WonValueText
        {
            get
            {
                return (string)GetValue(WonValueTextProperty);
            }
            set
            {
                SetValue(WonValueTextProperty, value);
            }
        }
        #endregion WonValueText

        #endregion Won


        #region Lost

        #region LostTitleText
        public readonly static BindableProperty LostTitleTextProperty =
        BindableProperty.Create(
            propertyName: "LostTitleText",
            returnType: typeof(string),
            declaringType: typeof(SelectedMonthNumbersPanel),
            defaultValue: "",
            defaultBindingMode: BindingMode.OneWay,
            propertyChanged: LostTitleTextPropertyChanged);


        private static void LostTitleTextPropertyChanged(
            BindableObject bindable,
            object oldValue,
            object newValue)
        {
            var control = (SelectedMonthNumbersPanel)bindable;

            string strNewValue = newValue.ToString();
            control.LostPair.TitleText = strNewValue;
        }

        public string LostTitleText
        {
            get
            {
                return (string)GetValue(LostTitleTextProperty);
            }
            set
            {
                SetValue(LostTitleTextProperty, value);
            }
        }
        #endregion LostTitleText

        #region LostValueText
        public readonly static BindableProperty LostValueTextProperty =
        BindableProperty.Create(
            propertyName: "LostValueText",
            returnType: typeof(string),
            declaringType: typeof(SelectedMonthNumbersPanel),
            defaultValue: "",
            defaultBindingMode: BindingMode.OneWay,
            propertyChanged: LostValueTextPropertyChanged);


        private static void LostValueTextPropertyChanged(
            BindableObject bindable,
            object oldValue,
            object newValue)
        {
            var control = (SelectedMonthNumbersPanel)bindable;

            string strNewValue = newValue.ToString();
            control.LostPair.ValueText = strNewValue;
        }

        public string LostValueText
        {
            get
            {
                return (string)GetValue(LostValueTextProperty);
            }
            set
            {
                SetValue(LostValueTextProperty, value);
            }
        }
        #endregion LostValueText

        #endregion Lost
    }
}

Result Control Look

Used Materials

• https://www.codeproject.com/Articles/1091247/Creating-User-Controls-in-Xamarin-Forms

• https://xamarinhelp.com/xamarin-forms-user-control/

• https://stackoverflow.com/questions/39001999/reuse-xamarin-forms-xaml-contentpage-data-throughout-the-app

• http://twintechs.com/advanced-xamarin-forms-techniques-for-flexible-and-performant-cross-platform-apps-part-5-page-in-page-embedding/

• https://github.com/twintechs/TwinTechsFormsLib

• https://mindofai.github.io/Creating-Custom-Controls-with-Bindable-Properties-in-Xamarin.Forms/

Especially helpful article

https://mindofai.github.io/Creating-Custom-Controls-with-Bindable-Properties-in-Xamarin.Forms/

<Label x:Name="KeyLabel"

This is automatically generates NumbersPadKeyValuePairView.KeyLabel property .

       // register observable property
       // otherwise properties would work only for constants but not for bindings.
       //
        public readonly static Xamarin.Forms.Core.BindableProperty TitleTextProperty =
        BindableProperty.Create(
            propertyName: "TitleText",
            returnType: typeof(string),
            declaringType: typeof(NumbersPadKeyValuePairView),
            defaultValue: "",
            defaultBindingMode: BindingMode.OneWay,
            propertyChanged: TitleTextPropertyChanged);

        // forward binded value to label 
        //
        private static void TitleTextPropertyChanged(
            BindableObject bindable,
            object oldValue,
            object newValue)
        {
            var control = (NumbersPadKeyValuePairView)bindable;

            string strNewValue = newValue.ToString();
            control.KeyLabel.Text= strNewValue;
        }


        // Use XamarinForms.Core.BindableObject to implement property
        // To enable observing
        // While keeping it simple for users
        // 
        public string TitleText
        {
            get
            {
                return (string)GetValue(TitleTextProperty);
            }
            set
            {
                SetValue(TitleTextProperty, value);
            }
        }

<ns_sample_control:SelectedMonthNumbersPanel

Custom control instantiation in xaml

---

    xmlns:ns_sample_control="clr-namespace:SampleFormsProject.Views;assembly=SampleFormsProject"

ns_sample_control prefix must be registered in the root element of Page/View xaml