How To Create A Subscribe Button In Your Xamarin.Forms Mobile App

Here I want to show you how to create a 'Subscribe' button that changes text value (Subscribe, Unsubscribe) in a ListView.

 

First of all, you create your oun button, in this button class you add a BindableProperty that will help us to change the text value of the button :) It should be like this. 

In this exemple we use in value, you can use a BOOL type.

public static readonly BindableProperty IsRegistredProperty =
            BindableProperty.Create("IsRegistred", typeof(int), typeof(SubscribeBtn), 0);

        public int IsRegistred
        {
            get { return (int)GetValue(IsRegistredProperty); }
            set
            {
                SetValue(IsRegistredProperty, value);
            }
        }

Now, we change the text value when this property's value is changed. So, our Button looks like,

public class SubscribeBtn : Button
    {
        public static readonly BindableProperty IsRegistredProperty =
            BindableProperty.Create("IsRegistred", typeof(int), typeof(SubscribeBtn), 0);

        public int IsRegistred
        {
            get { return (int)GetValue(IsRegistredProperty); }
            set
            {
                SetValue(IsRegistredProperty, value);
            }
        }

        private string btnText => IsRegistred == 1 ? "Unsubscribe" : "Subscribe";

        public SubscribeBtn()
        {
            this.Text = btnText;
            PropertyChanged += SubscribeBtn_PropertyChanged;
            Clicked += SubscribeBtn_Clicked;
        }

        private void SubscribeBtn_Clicked(object sender, EventArgs e)
        {
            IsRegistred = 1 - IsRegistred; // 1 --> 0  // 0 --> 1
        }

        private void SubscribeBtn_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
        {
            if (e.PropertyName == IsRegistredProperty.PropertyName)
            {
                this.Text = btnText;
            }
        }
    }

Than, we create our ViewModel (For the ListViewItem). For example, 

public class MyViewModel
    {
        public int Registred { get; set; } = 0;  // 1 : yes , 0:no (0 as default)
    }

We create also a collection viewmodel, that will be the viewModel of our page (Main page of the list),

public class MyCollection
    {
        public ObservableCollection<MyViewModel> Items { get; set; }

        public MyCollection()
        {
            Items = new ObservableCollection<MyViewModel>()
            {
                new MyViewModel(),
                new MyViewModel(),
                new MyViewModel() {Registred = 1}, //this one is registred
                new MyViewModel()
            };
        }
    }

I hope you are enjoying that :) !

 

Now, we set the BindingContext of our MainPage (In MainPage.xaml.cs),

public partial class MainPage : ContentPage
    {
        protected MyCollection Collection = null;
        public MainPage()
        {
            InitializeComponent();
            Collection = new MyCollection();
            BindingContext = Collection;
        }
    }

 Finally, your MainPage.xaml should looks like, 

<?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:App3"
             x:Class="App3.MainPage">

    <ContentPage.Content>
        <ListView x:Name="MyListView" ItemsSource="{Binding Items}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <local:SubscribeBtn IsRegistred="{Binding Registred}"></local:SubscribeBtn>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </ContentPage.Content>
</ContentPage>

Dont forget to set the right Binding in line 12 :) As you see, we used our  SubscribeBtn.

 

 

  

I hope that helps you!

 

(Source Code in the attached  zip file) 

 

Best regards from Regensburg! Mabrouk Mahdhi