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