Create a Credit Card view in .NET MAUI
Based on an idea originally started for Xamarin by Steven Thewissen, MAUI UI July is a month-long, community-driven event where anyone gets to share some of their enthusiasm and passion for .NET MAUI. This is my contribution by showing how you can easily create a Credit Card view for your .NET MAUI application.
Preparation
In this blog post I will show you how you can easily create your own Credit Card view for your .NET MAUI application. Before we can open Visual Studio we need to download the Fontawesome Font, because we will use this font as icons for the different type of credit cards.
Open the website fontawesome.com/download and select the Free For Desktop option.
Just unzip the file and rename the files Font Awesome 6 Brands-Regular-400.otf to FontAwesome6-Brands.otf and Font Awesome 6 Free-Regular-400.otf to FontAwesome6-Regular.otf.
Now we are prepared and we can start with the implementation.
Implate the Credit Card view
Open Visual Studio and create a new .NET MAUI application. Move the two Font Awesome files to the Fonts folder within the Resources folder. Now open the MauiProgram.cs file and register the fonts.
Open the Colors.xaml file in the Styles folder within the Resources folder. Add the different colors for the different card types and add also some color definitions for the labels.
Now create a folder called Helpers. In this folder add a new class called CreditCardTypeRegexHelper. This class should contain the different regular expressions for the different credit card types.
Next we will create a StringExtensions class in a newly created folder ExtensionMethods within the Helpers folder. Here we implement the method ToColorFromResourceKey to get the Color from a provided resource key.
Now we can start implementing the CreditCardView. Create a new folder Views and add a new ContentView called CreditCardView in this folder.
First we need to update the root element from ContentView to Frame. Than we create simple layout representing a credit card. There are some Labels representing the logo, the credit card, the expiration date and the card verification code.
Let’s take a look at the code-behind file. First we need some BindableProperties for the three different options: CardNumber, ExpirationDate and CardValidationCode. The CardNumber updates the logo and the background color of the credit card, so we implement the SetCreditCardNumber method.
We update now the MainPage.xaml file by adding our CreditCardView. Don’t forget to remove the logic of the code-behind file.
Here is a screenshot of the credit card on Windows.
Conclusion
As you have seen we created a Credit Card view for our .NET MAUI application by using Font Awesome and built-in controls.
You can find the whole source-code in this GitHub repository. Feel free to fork the repository and improve it.
This article is my contribution to #MAUIUIJULY, which is basically a series of blog posts where every day of July a .NET MAUI community member posts something about .NET MAUI and UI. You can find the list with all available blog posts on this website.
You can also find some more blog posts on my personal blog tsjdev-apps.de regarding this topic.
