BindableObjectExtensions

namespace App1
{
    public static class BindableObjectExtensions
    {
        /// <summary>
        /// Gets the value.
        /// </summary>
        /// <typeparam name="T"></typeparam>
        /// <param name="bindableObject">The bindable object.</param>
        /// <param name="property">The property.</param>
        /// <returns>T.</returns>
        public static T GetValue<T>(this BindableObject bindableObject, BindableProperty property)
        {
            return (T)bindableObject.GetValue(property);
        }
    }
}

EventArgs{T}

namespace App1
{
    public class EventArgs<T> : EventArgs
    {
        /// <summary>
        /// Initializes a new instance of the <see cref="EventArgs"/> class.
        /// </summary>
        /// <param name="value">Value of the argument</param>
        public EventArgs(T value)
        {
            this.Value = value;
        }

        /// <summary>
        /// Gets the value of the event argument
        /// </summary>
        public T Value { get; private set; }
    }
}

checkbox Renderer

[assembly: ExportRenderer(typeof(CheckBox), typeof(App1.Droid.CheckBoxRenderer))]
namespace App1.Droid
{
    public class CheckBoxRenderer : ViewRenderer<CheckBox, Android.Widget.CheckBox>
    {
        private ColorStateList defaultTextColor;

        /// <summary>
        /// Called when [element changed].
        /// </summary>
        /// <param name="e">The e.</param>
        protected override void OnElementChanged(ElementChangedEventArgs<CheckBox> e)
        {
            base.OnElementChanged(e);

            if (this.Control == null)
            {


                var checkBox = new Android.Widget.CheckBox(this.Context);

                checkBox.CheckedChange += CheckBoxCheckedChange;

                defaultTextColor = checkBox.TextColors;
                this.SetNativeControl(checkBox);
            }

            Control.Text = e.NewElement.Text;
            Control.Checked = e.NewElement.Checked;
            UpdateTextColor();

            if (e.NewElement.FontSize > 0)
            {
                Control.TextSize = (float)e.NewElement.FontSize;
            }

            if (!string.IsNullOrEmpty(e.NewElement.FontName))
            {
                Control.Typeface = TrySetFont(e.NewElement.FontName);
            }
        }

        /// <summary>
        /// Handles the <see cref="E:ElementPropertyChanged" /> event.
        /// </summary>
        /// <param name="sender">The sender.</param>
        /// <param name="e">The <see cref="PropertyChangedEventArgs"/> instance containing the event data.</param>
        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);

            switch (e.PropertyName)
            {
                case "Checked":
                    Control.Text = Element.Text;
                    Control.Checked = Element.Checked;
                    break;
                case "TextColor":
                    UpdateTextColor();
                    break;
                case "FontName":
                    if (!string.IsNullOrEmpty(Element.FontName))
                    {
                        Control.Typeface = TrySetFont(Element.FontName);
                    }
                    break;
                case "FontSize":
                    if (Element.FontSize > 0)
                    {
                        Control.TextSize = (float)Element.FontSize;
                    }
                    break;
                case "CheckedText":
                case "UncheckedText":
                    Control.Text = Element.Text;
                    break;
                default:
                    System.Diagnostics.Debug.WriteLine("Property change for {0} has not been implemented.", e.PropertyName);
                    break;
            }
        }

        /// <summary>
        /// CheckBoxes the checked change.
        /// </summary>
        /// <param name="sender">The sender.</param>
        /// <param name="e">The <see cref="Android.Widget.CompoundButton.CheckedChangeEventArgs"/> instance containing the event data.</param>
        void CheckBoxCheckedChange(object sender, Android.Widget.CompoundButton.CheckedChangeEventArgs e)
        {
            this.Element.Checked = e.IsChecked;
        }

        /// <summary>
        /// Tries the set font.
        /// </summary>
        /// <param name="fontName">Name of the font.</param>
        /// <returns>Typeface.</returns>
        private Typeface TrySetFont(string fontName)
        {
            Typeface tf = Typeface.Default;
            try
            {
                tf = Typeface.CreateFromAsset(Context.Assets, fontName);
                return tf;
            }
            catch (Exception ex)
            {
                Console.Write("not found in assets {0}", ex);
                try
                {
                    tf = Typeface.CreateFromFile(fontName);
                    return tf;
                }
                catch (Exception ex1)
                {
                    Console.Write(ex1);
                    return Typeface.Default;
                }
            }
        }

        /// <summary>
        /// Updates the color of the text
        /// </summary>
        private void UpdateTextColor()
        {
            if (Control == null || Element == null)
                return;

            if (Element.TextColor == Xamarin.Forms.Color.Default)
                Control.SetTextColor(defaultTextColor);
            else
                Control.SetTextColor(Element.TextColor.ToAndroid());
        }
    }
}

checkBox Control

namespace App1
{
   public class CheckBox : Xamarin.Forms.View
    {
        /// <summary>
        /// The checked state property.
        /// </summary>
        public static readonly BindableProperty CheckedProperty =
            BindableProperty.Create<CheckBox, bool>(
                p => p.Checked, false, BindingMode.TwoWay, propertyChanged: OnCheckedPropertyChanged);

        /// <summary>
        /// The checked text property.
        /// </summary>
        public static readonly BindableProperty CheckedTextProperty =
            BindableProperty.Create<CheckBox, string>(
                p => p.CheckedText, string.Empty, BindingMode.TwoWay);

        /// <summary>
        /// The unchecked text property.
        /// </summary>
        public static readonly BindableProperty UncheckedTextProperty =
            BindableProperty.Create<CheckBox, string>(
                p => p.UncheckedText, string.Empty);

        /// <summary>
        /// The default text property.
        /// </summary>
        public static readonly BindableProperty DefaultTextProperty =
            BindableProperty.Create<CheckBox, string>(
                p => p.Text, string.Empty);

        /// <summary>
        /// Identifies the TextColor bindable property.
        /// </summary>
        ///
        /// <remarks/>
        public static readonly BindableProperty TextColorProperty =
            BindableProperty.Create<CheckBox, Color>(
                p => p.TextColor, Color.Default);

        /// <summary>
        /// The font size property
        /// </summary>
        public static readonly BindableProperty FontSizeProperty =
            BindableProperty.Create<CheckBox, double>(
                p => p.FontSize, -1);

        /// <summary>
        /// The font name property.
        /// </summary>
        public static readonly BindableProperty FontNameProperty =
            BindableProperty.Create<CheckBox, string>(
                p => p.FontName, string.Empty);


        /// <summary>
        /// The checked changed event.
        /// </summary>
        public event EventHandler<EventArgs<bool>> CheckedChanged;

        /// <summary>
        /// Gets or sets a value indicating whether the control is checked.
        /// </summary>
        /// <value>The checked state.</value>
        public bool Checked
        {
            get
            {
                return this.GetValue<bool>(CheckedProperty);
            }

            set
            {
                if (this.Checked != value)
                {
                    this.SetValue(CheckedProperty, value);
                    this.CheckedChanged.Invoke(this, value);
                }
            }
        }

        /// <summary>
        /// Gets or sets a value indicating the checked text.
        /// </summary>
        /// <value>The checked state.</value>
        /// <remarks>
        /// Overwrites the default text property if set when checkbox is checked.
        /// </remarks>
        public string CheckedText
        {
            get
            {
                return this.GetValue<string>(CheckedTextProperty);
            }

            set
            {
                this.SetValue(CheckedTextProperty, value);
            }
        }

        /// <summary>
        /// Gets or sets a value indicating whether the control is checked.
        /// </summary>
        /// <value>The checked state.</value>
        /// <remarks>
        /// Overwrites the default text property if set when checkbox is checked.
        /// </remarks>
        public string UncheckedText
        {
            get
            {
                return this.GetValue<string>(UncheckedTextProperty);
            }

            set
            {
                this.SetValue(UncheckedTextProperty, value);
            }
        }

        /// <summary>
        /// Gets or sets the text.
        /// </summary>
        public string DefaultText
        {
            get
            {
                return this.GetValue<string>(DefaultTextProperty);
            }

            set
            {
                this.SetValue(DefaultTextProperty, value);
            }
        }

        /// <summary>
        /// Gets or sets the color of the text.
        /// </summary>
        /// <value>The color of the text.</value>
        public Color TextColor
        {
            get
            {
                return this.GetValue<Color>(TextColorProperty);
            }

            set
            {
                this.SetValue(TextColorProperty, value);
            }
        }

        /// <summary>
        /// Gets or sets the size of the font.
        /// </summary>
        /// <value>The size of the font.</value>
        public double FontSize
        {
            get
            {
                return (double)GetValue(FontSizeProperty);
            }
            set
            {
                SetValue(FontSizeProperty, value);
            }
        }

        /// <summary>
        /// Gets or sets the name of the font.
        /// </summary>
        /// <value>The name of the font.</value>
        public string FontName
        {
            get
            {
                return (string)GetValue(FontNameProperty);
            }
            set
            {
                SetValue(FontNameProperty, value);
            }
        }
        /// <summary>
        /// Gets the text.
        /// </summary>
        /// <value>The text.</value>
        public string Text
        {
            get
            {
                return this.Checked
                    ? (string.IsNullOrEmpty(this.CheckedText) ? this.DefaultText : this.CheckedText)
                        : (string.IsNullOrEmpty(this.UncheckedText) ? this.DefaultText : this.UncheckedText);
            }
        }

        /// <summary>
        /// Called when [checked property changed].
        /// </summary>
        /// <param name="bindable">The bindable.</param>
        /// <param name="oldvalue">if set to <c>true</c> [oldvalue].</param>
        /// <param name="newvalue">if set to <c>true</c> [newvalue].</param>
        private static void OnCheckedPropertyChanged(BindableObject bindable, bool oldvalue, bool newvalue)
        {
            var checkBox = (CheckBox)bindable;
            checkBox.Checked = newvalue;
        }
    }
}

SearchXaml

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="WrapPanelDemo.SearchMediPage"
              xmlns:controls="clr-namespace:WrapPanelDemo.Controls;assembly=WrapPanelDemo">
  <ContentPage.Content>
    <StackLayout Orientation="Vertical">
      <SearchBar x:Name="sbMedicionName" Placeholder="What tablets you are using?" TextChanged="searchTabletName" VerticalOptions="Start" />
      <!--<StackLayout x:Name="slNewItem">
        <Label Text="No search found" FontSize="20"/>
      </StackLayout>-->
      <controls:AwesomeWrappanel x:Name="lbxMedicionsList"  ItemsSource="{Binding Persons}" Orientation="Horizontal">
        <controls:AwesomeWrappanel.ItemTemplate>
          <DataTemplate>
            <StackLayout >
              <Button Text="{Binding Name}" BackgroundColor="Red"/>
            </StackLayout>
          </DataTemplate>
        </controls:AwesomeWrappanel.ItemTemplate>
      </controls:AwesomeWrappanel>
    </StackLayout>
  </ContentPage.Content>
</ContentPage>

Search

namespace WrapPanelDemo
{
    public partial class SearchMediPage : ContentPage, INotifyPropertyChanged
    {
   
        public ObservableCollection<Person> TempPersonsList = new ObservableCollection<Person>();
        public SearchMediPage()
        {
            //Persons = new ObservableCollection<Person>();
            InitializeComponent();
            BindingContext = this;
            bindMedicionData();
          // slNewItem.IsVisible = false;
        }
        public void bindMedicionData()
        {
            TempPersonsList.Add(new Person { Name = "sivakodna"});
            TempPersonsList.Add(new Person { Name = "venugopal"});
            TempPersonsList.Add(new Person { Name = "chiranjeevi"});
            TempPersonsList.Add(new Person { Name = "venu"});
            TempPersonsList.Add(new Person { Name = "venkatrao"});
            TempPersonsList.Add(new Person { Name = "venkatraosas"});
            TempPersonsList.Add(new Person { Name = "venkatraosa"});
            TempPersonsList.Add(new Person { Name = "sudhaka"});
            TempPersonsList.Add(new Person { Name = "venkatrao"});
            TempPersonsList.Add(new Person { Name = "chinnapa"});

            //TempPersonsList = _Persons.ToList();
            //_Persons.Clear();
            lbxMedicionsList.IsVisible = false;
        }
        public void searchTabletName(Object sender, TextChangedEventArgs e)
        {
            string strMedicionName = e.NewTextValue.ToLower().ToString();
            //var medicionsList = (from s in objMedicionsList where s.MedicionName.Contains(strMedicionName) select s).ToList();
            // objMedicionsList.Clear();
            if (strMedicionName.Length > 0)
            {
                var medicionsList = (from s in TempPersonsList where s.Name.StartsWith(strMedicionName) select s).ToList();
                if (medicionsList.Count > 0)
                {
                    _Persons.Clear();
               
                    foreach (var eachItem in medicionsList)
                    {
                        _Persons.Add(eachItem);
                    }

                    OnPropertyChanged("Persons");
                    // slNewItem.IsVisible = false;
                    lbxMedicionsList.IsVisible = true;
                }
                else
                {

                    _Persons.Clear();
                     OnPropertyChanged("Persons");
                    // slNewItem.IsVisible = true;
                    lbxMedicionsList.IsVisible = false;
                }
            }
        }

        private ObservableCollection<Person> _Persons = new ObservableCollection<Person>();
        public ObservableCollection<Person> Persons
        {
            get { return _Persons; }
            set
            {
                if (_Persons == value)
                    return;
                _Persons = value;
                OnPropertyChanged("Persons");
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;

        protected virtual void OnPropertyChanged(string propertyName)
        {
            var handler = PropertyChanged;
            if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

Searchbar Example

 http://opensource.org/licenses/MIT
MainPage.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:local="clr-namespace:SearchbarExample"
             x:Class="SearchbarExample.MainPage">
  <ContentPage.Content>
    <StackLayout Orientation="Vertical">
      <SearchBar x:Name="sbMedicionName" Placeholder="What tablets you are using?" TextChanged="searchTabletName" VerticalOptions="Start" />
      <StackLayout x:Name="slNewItem">
        <Label Text="No search found" FontSize="20"/>
      </StackLayout>
      <ListView x:Name="lbxMedicionsList">
        <ListView.ItemTemplate>
          <DataTemplate>
            <ViewCell>
              <Label x:Name="lablName" Text="{Binding MedicionName}"/>
            </ViewCell>
          </DataTemplate>
        </ListView.ItemTemplate>
      </ListView>
    </StackLayout>
  </ContentPage.Content>
</ContentPage>

MainPage.XAML.Cs:-
--------------------------
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
using System.Collections.ObjectModel;

namespace SearchbarExample
{
    public partial class MainPage : ContentPage
    {
        ObservableCollection<Medision> objMedicionsList = null;
        public MainPage()
        {
            InitializeComponent();
            bindMedicionData();
            slNewItem.IsVisible = false;
        }

        public void bindMedicionData()
        {
            objMedicionsList = new ObservableCollection<Medision>();
            objMedicionsList.Add(new Medision { MedicionName = "venkatrao" });
            objMedicionsList.Add(new Medision { MedicionName = "chiranjeevi" });
            objMedicionsList.Add(new Medision { MedicionName = "sivakonda" });
            objMedicionsList.Add(new Medision { MedicionName = "sudhakar" });
            objMedicionsList.Add(new Medision { MedicionName = "venky" });
            objMedicionsList.Add(new Medision { MedicionName = "chinappureddy" });
            //lbxMedicionsList.ItemsSource = objMedicionsList;
        }
        public void searchTabletName(Object sender,TextChangedEventArgs e)
        {
            string strMedicionName = e.NewTextValue.ToLower().ToString();
            //var medicionsList = (from s in objMedicionsList where s.MedicionName.Contains(strMedicionName) select s).ToList();
            // objMedicionsList.Clear();
            if (strMedicionName.Length > 0) {
                var medicionsList = (from s in objMedicionsList where s.MedicionName.StartsWith(strMedicionName) select s).ToList();
                if (medicionsList.Count > 0)
                {
                    lbxMedicionsList.ItemsSource = medicionsList;
                    slNewItem.IsVisible = false;
                    lbxMedicionsList.IsVisible = true;
                }
                else
                {
                    slNewItem.IsVisible = true;
                    lbxMedicionsList.IsVisible = false;
                }
            }
        }
    }
}

Medision.Cs:-

----------------------

using System.Linq;

using System.Text;

using System.Threading.Tasks;

namespace SearchbarExample

{

   public class Medision

    {

        public string MedicionName { get; set; }

    }

}

Rounded Box Renderer for Android

using System;
using System.ComponentModel;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
using Android.Graphics;
using Shared.UserManagment.Controls;

[assembly: ExportRenderer(typeof(RoundedBox), typeof(<Name Space Name>.RoundedBoxRenderer))]

namespace <Name Space Name>
{
    public class RoundedBoxRenderer : BoxRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<BoxView> e)
        {
            base.OnElementChanged(e);

            SetWillNotDraw(false);

            Invalidate();
        }

        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);

            if (e.PropertyName == RoundedBox.CornerRadiusProperty.PropertyName)
            {
                Invalidate();
            }
        }

        public override void Draw(Canvas canvas)
        {
           
            //Xamarin.Forms.Color.Transparent

            var box = Element as RoundedBox;
            var rect = new Rect();
            var paint = new Paint()
            {    
                Color = box.BackgroundColor.ToAndroid(),
                AntiAlias = true,
            };

            //paint.SetXfermode(new PorterDuffXfermode(PorterDuff.Mode.DstAtop));

            GetDrawingRect(rect);

            var radius = (float)(rect.Width() / box.Width * box.CornerRadius);
            paint.SetStyle(Paint.Style.Stroke);
            paint.StrokeWidth = 2;
            canvas.DrawRoundRect(new RectF(rect), radius, radius, paint);

            //paint.Color = Xamarin.Forms.Color.Black.ToAndroid();

            //canvas.DrawCircle(10,10,40, paint);
        }
    }
}

Rounded Box Control

using Xamarin.Forms;

namespace Shared.UserManagment.Controls
{
    public class RoundedBox : BoxView
    {
        /// <summary>
        /// The corner radius property.
        /// </summary>
        public static readonly BindableProperty CornerRadiusProperty =
            BindableProperty.Create("CornerRadius", typeof(double), typeof(RoundedBox), 0.0);

        /// <summary>
        /// Gets or sets the corner radius.
        /// </summary>
        public double CornerRadius
        {
            get { return (double)GetValue(CornerRadiusProperty); }
            set { SetValue(CornerRadiusProperty, value); }
        }    
    }
}

Label Click

Label Click:-
-------------
TapGestureRecognizer tapGesture = new TapGestureRecognizer(Tapped);
<Label Name>.GestureRecognizers.Add(tapGesture);
}
  private void Tapped(View arg1, object arg2)
  {
     Navigation.PushModalAsync(new <Navigation Page Name>());
  }