“E-Commerce UI Template for Xamarin.Forms” Documentation by “Ahmet Zeki Eymür” v1.0

---

“E-Commerce UI Template for Xamarin.Forms”

---

Table of Contents

• Introduction
• Customization
• Name and Version
• Logo
• Splash Screen
• Translation
• Material Icons
• Color Themes
• Control Templates
• Removing Mock Service

---

Introduction - top

'E-Commerce UI Template for Xamarin.Forms' is a user interface (UI) template made using Xamarin.Forms. Xamarin.Forms is an open-source UI framework. It allows developers to create user interfaces in XAML with code-behind in C#. This product is provided to you in the form of a Visual Studio 2019 project. You can download Visual Studio 2019 from here https://visualstudio.microsoft.com. Community Edition is free and very easy to install. You can see how you can install Visual Studio with Xamarin from the video below.

After the installation is finished, extract the forbuyers.zip folder. Double-click on the Visual Studio solution file named 'EcommerceTemplate.sln' in the 'sources' folder. Wait for Visual Studio to open and fully load the solution. After the first loading, I recommend cleaning the solution and compiling it again. To do this, click 'Build -> Rebuild All' from the menu.

If IntelliSense gives unnecessary warnings, delete the 'obj' and 'bin' folders in the all project folders and try to compile again. If you haven't had a problem, you don't need to delete these folders.

sources\EcommerceTemplate\bin
sources\EcommerceTemplate\obj
sources\EcommerceTemplate.Android\bin
sources\EcommerceTemplate.Android\obj
sources\EcommerceTemplate.iOS\bin
sources\EcommerceTemplate.iOS\obj

There is a mock data source and service in the project. So you can run the application immediately to test without doing anything.

---

Customization - top

Tasks such as name and logo change that you need to do before publishing your applications are explained here. The processes required for both platforms are different.

Name and Version - top

For Android, double click to open the 'EcommerceTemplate.Android\Properties\AndroidManifest.xml' file in the Solution panel. You can change the Application Name, Package Name, Version Number and Version Name from here. Your package name must be the same as your package name in the Play Store. For more information about this file, you can refer to the following document:
https://docs.microsoft.com/en-us/xamarin/android/platform/android-manifest

For iOS, double click to open the EcommerceTemplate.iOS\Info.plist file int he Solution panel. Enter your Application Name in the 'Bundle Display Name' text box. Your Bundle Identifier and Version must be the same as your Bundle Identifier and Version in the App Store.

Logo - top

For Android, The app logo is also set in the AndroidManifest.xml file. You must have added the logo you want to use to the resources as a Drawable or mipmap. Then you can select your logo from the 'Application icon' drop-down list.

For iOS, double click to open the EcommerceTemplate.iOS\Assets.xcassets file in the Solution panel. Select the 'AppIcon' image set. Resize and assign the logo you want to use to the slots of the devices you want to support.

Splash Screen - top

For Android, double click to open the EcommerceTemplate.Android\Resources\drawable\splash_screen.xml file in the Solution panel. Assign the image you want to use to the 'android:src' attribute of the 'bitmap' tag.

To change background color, double click to open the EcommerceTemplate.Android\Resources\values\colors.xml file in the Solution panel. Assign the color you want to use in the background to the color called splash_background.

By default, the Splash Screen appears for 5000 milliseconds (5 seconds). You can change this time from the following line in the EcommerceTemplate.Android\SplashActivity.cs file:

await Task.Delay(5000);

For iOS, double-click the file below on a MacOS computer and it will open in XCode:
EcommerceTemplate.iOS\Resources\LaunchScreen.storyboard
If the file does not open by itself, open it manually by clicking LaunchScreen.storyboard from Project Navigator. Open the Document Outline and Attributes Inspector panels if they are closed. To change the background color of the Splash Screen, select the View component in Document Outline and set the background value to the desired color from the Inspector. Inside the View component in the Document Outline you will see 2 UILabels for Brand and slogan and a UIImage for your logo. Edit them according to your needs using the Inspector.

---

Translation - top

The texts in the project are not hard coded. All strings are added as a resource in the following file: EcommerceTemplate\Resources\AppResources.resx
Changing the value of a text in this file will have an effect on the entire application. The file has a simple format:

...
<data name="Cancel">
  <value>Cancel</value>
</data>

<data name="EnterSearchTerm">
  <value>Enter search term</value>
</data>

<data name="Home">
  <value>Home</value>
</data>
...
		

You can translate the application to another language by changing the text between the <value> tags. You must not change the 'name' attributes of the <data> tag. It is also possible to support more than one language in your application. For this, refer to the following document: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/localization/text

---

Material Icons - top

Material design icons is the official icon set from Google. They can be browsed at https://fonts.google.com/icons. Material design icons have been added to the project as fonts for easier use.

You can use an icon in C# like:

• Add a 'using' directive:
  using EcommerceTemplate.MaterialDesign;
• Use the static 'Icons' class:
  var fileIcon = Icons.Build;

You can use an icon in XAML by:

• Adding a namespace reference to 'MaterialDesign':
  xmlns:md="clr-namespace:EcommerceTemplate.MaterialDesign"
• Referencing a icon using 'x:Static'
  <Label Text="{x:Static md:Icons.Build}"/>

---

Color Themes - top

The project has 14 color themes created using the Material color palette. Each theme supports both light and dark mode. Color themes are in the 'Themes' folder. Which theme to use is specified in the followinf file: ECommerceTemplate\App.xaml You can use the color theme you want by changing the line below.

<ResourceDictionary Source="Themes/OrangeTheme.xaml">
		

For example, you can switch to the green color theme by changing this line as follows.

<ResourceDictionary Source="Themes/GreenTheme.xaml">
		

All color themes in the project are listed below:

Light Mode		Dark Mode
RedTheme.xaml	PinkTheme.xaml	RedTheme.xaml	PinkTheme.xaml
PurpleTheme.xaml	DeepPurpleTheme.xaml	PurpleTheme.xaml	DeepPurpleTheme.xaml
IndigoTheme.xaml	BlueTheme.xaml	IndigoTheme.xaml	BlueTheme.xaml
CyanTheme.xaml	TealTheme.xaml	CyanTheme.xaml	TealTheme.xaml
GreenTheme.xaml	LimeTheme.xaml	GreenTheme.xaml	LimeTheme.xaml
AmberTheme.xaml	OrangeTheme.xaml	AmberTheme.xaml	OrangeTheme.xaml
DeepOrangeTheme.xaml	LightGreenTheme.xaml	DeepOrangeTheme.xaml	LightGreenTheme.xaml

You can create new theme options yourself by copying and modifying these files. If you look inside the theme files, you will see that they are simple.

Color Key	Description
PrimaryColorLight	Primary color for light mode.
PrimaryColorDark	Primary color for dark mode.
PrimaryLightColor	One or two shades lighter of PrimaryColor. It is used in the background gradients of buttons and badges. It is only effective in light mode.
TextColorOnPrimaryLight	Color of text above Primary Color for Light mode. Used on buttons with a background.
TextColorOnPrimaryDark	Color of text above Primary Color for dark mode. Used on buttons with a background.

Only the colors in the material palette are used in the themes. Color codes have been added as a comment next to all of them. Normal tones are used for light mode, and brighter tones starting with 'A' are used for dark mode.

---

Control Templates - top

There are 3 control templates in the project:

Badge	Chic Button	Rating Stars

The Badge control template shows an icon in the middle of a framed circle with a gradient background. It is derived from ContentView. In addition to the properties of 'ContentView' it has a bindable property called BadgeIcon. This property is type of string. The material icon to be displayed in the badge is assigned to this feature.

You can use Badge Control Template in XAML by:

• Add a namespace reference to ControlTemplates:

xmlns:template="clr-namespace:EcommerceTemplate.ControlTemplates"
					

• Add it in your layout:

<template:Badge BadgeIcon="{x:Static md:Icons.Face}"
	ControlTemplate="{StaticResource BadgeControlTemplate}"/>
				

The ChicButton control template is a button with two icons. It is derived from ContentView. It has three bindable properties in addition to the properties of ContentView:

• The bindable property 'Icon' is type of string. The material icon to be displayed in the button is assigned to this property.
• The bindable property 'Text' is type of string. The string to be displayed in the button is assigned to this property.
• The bindable property 'FetchCommand' is type of Command. When the button is pressed, the command to be executed is assigned to this feature.

You can use Badge Control Template in XAML by:

• Add a namespace reference to ControlTemplates:

  xmlns:template="clr-namespace:EcommerceTemplate.ControlTemplates"
  					

• Add it in your layout by:

  <template:ChicButton Text="{x:Static res:AppResources.Favorites}"
  	Icon="{x:Static md:Icons.Favorite}"
  	FetchCommand="{Binding FavoritesCommand}"
  	ControlTemplate="{StaticResource ChicButtonControlTemplate}"/>
  					

The RatingStars control template indicates the level of rating out of five stars. It is derived from ContentView. It has two bindable properties in addition to the properties of ContentView:

• The bindable property 'Rating' is type of float. The rating value to be displayed is assigned to this property.
• The bindable property 'StarSize' is type of double. The size of the stars is assigned to this property. Default value is 16.

You can use Rating Control Template in XAML by:

• Add a namespace reference to ControlTemplates:

  xmlns:template="clr-namespace:EcommerceTemplate.ControlTemplates"
  					

• Add it in your layout by:

  <template:RatingStars Rating="{Binding AverageRating}"
  	ControlTemplate="{StaticResource RatingStarsControlTemplate}"/>
  					

For more information about control templates, see the following document: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/templates/control-template

---

Removing Mock Service - top

The project has a mock service and data source for testing. When you add your own service to the project, you will no longer need this mock service and data source.

You can remove the mock data source from your project by deleting the following folder:
EcommerceTemplate\DataStores\MockDataStore

To remove the fake service from your project, delete the following file:
EcommerceTemplate\Services\MockService.cs

Finally, you need to delete the following lines from the constructor of the App class:
EcommerceTemplate\App.xaml.cs

DependencyService.RegisterSingleton(new BannerDataStore());
DependencyService.RegisterSingleton(new CategoryDataStore());
DependencyService.RegisterSingleton(new CustomerDataStore());
DependencyService.RegisterSingleton(new AddressDataStore());
DependencyService.RegisterSingleton(new RatingDataStore());
DependencyService.RegisterSingleton(new FavoriteDataStore());
DependencyService.RegisterSingleton(new CartItemDataStore());
DependencyService.RegisterSingleton(new ProductDataStore());
DependencyService.RegisterSingleton(new OrderItemDataStore());
DependencyService.RegisterSingleton(new OrderDataStore());
DependencyService.RegisterSingleton(new VariantDataStore());

DependencyService.Register();
		

---

Once again, thank you so much for purchasing this product. As I said at the beginning, I'd be glad to help you if you have any questions relating to this product. No guarantees, but I'll do my best to assist. If you have a more general question relating to the items on CodeCanyon, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Ahmet Zeki Eymür

Go To Table of Contents

---