Post
Ask Question

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.
  1. public static readonly BindableProperty IsRegistredProperty =  
  2.             BindableProperty.Create("IsRegistred", typeof(int), typeof(SubscribeBtn), 0);  
  3.   
  4.         public int IsRegistred  
  5.         {  
  6.             get { return (int)GetValue(IsRegistredProperty); }  
  7.             set  
  8.             {  
  9.                 SetValue(IsRegistredProperty, value);  
  10.             }  
  11.         }  
Now, we change the text value when this property's value is changed. So, our Button looks like,
  1. public class SubscribeBtn : Button  
  2.     {  
  3.         public static readonly BindableProperty IsRegistredProperty =  
  4.             BindableProperty.Create("IsRegistred", typeof(int), typeof(SubscribeBtn), 0);  
  5.   
  6.         public int IsRegistred  
  7.         {  
  8.             get { return (int)GetValue(IsRegistredProperty); }  
  9.             set  
  10.             {  
  11.                 SetValue(IsRegistredProperty, value);  
  12.             }  
  13.         }  
  14.   
  15.         private string btnText => IsRegistred == 1 ? "Unsubscribe" : "Subscribe";  
  16.   
  17.         public SubscribeBtn()  
  18.         {  
  19.             this.Text = btnText;  
  20.             PropertyChanged += SubscribeBtn_PropertyChanged;  
  21.             Clicked += SubscribeBtn_Clicked;  
  22.         }  
  23.   
  24.         private void SubscribeBtn_Clicked(object sender, EventArgs e)  
  25.         {  
  26.             IsRegistred = 1 - IsRegistred; // 1 --> 0  // 0 --> 1  
  27.         }  
  28.   
  29.         private void SubscribeBtn_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)  
  30.         {  
  31.             if (e.PropertyName == IsRegistredProperty.PropertyName)  
  32.             {  
  33.                 this.Text = btnText;  
  34.             }  
  35.         }  
  36.     }  
Than, we create our ViewModel (For the ListViewItem). For example, 
  1. public class MyViewModel  
  2.     {  
  3.         public int Registred { get; set; } = 0;  // 1 : yes , 0:no (0 as default)  
  4.     }  
We create also a collection viewmodel, that will be the viewModel of our page (Main page of the list),
  1. public class MyCollection  
  2.     {  
  3.         public ObservableCollection<MyViewModel> Items { get; set; }  
  4.   
  5.         public MyCollection()  
  6.         {  
  7.             Items = new ObservableCollection<MyViewModel>()  
  8.             {  
  9.                 new MyViewModel(),  
  10.                 new MyViewModel(),  
  11.                 new MyViewModel() {Registred = 1}, //this one is registred  
  12.                 new MyViewModel()  
  13.             };  
  14.         }  
  15.     }  
I hope you are enjoying that :) !
 
Now, we set the BindingContext of our MainPage (In MainPage.xaml.cs),
  1. public partial class MainPage : ContentPage  
  2.     {  
  3.         protected MyCollection Collection = null;  
  4.         public MainPage()  
  5.         {  
  6.             InitializeComponent();  
  7.             Collection = new MyCollection();  
  8.             BindingContext = Collection;  
  9.         }  
  10.     }  
 Finally, your MainPage.xaml should looks like, 
  1. <?xml version="1.0" encoding="utf-8" ?>  
  2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"  
  3.              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
  4.              xmlns:local="clr-namespace:App3"  
  5.              x:Class="App3.MainPage">  
  6.   
  7.     <ContentPage.Content>  
  8.         <ListView x:Name="MyListView" ItemsSource="{Binding Items}">  
  9.             <ListView.ItemTemplate>  
  10.                 <DataTemplate>  
  11.                     <ViewCell>  
  12.                         <local:SubscribeBtn IsRegistred="{Binding Registred}"></local:SubscribeBtn>  
  13.                     </ViewCell>  
  14.                 </DataTemplate>  
  15.             </ListView.ItemTemplate>  
  16.         </ListView>  
  17.     </ContentPage.Content>  
  18. </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