Xamariin.Forms- Bottom NavigationBar

In this article you will learn how to Create a Bottom NavigationBar in Xamarin forms. 

Introduction

Managing the page navigation experience

Xamarin.Forms provides a number of different page navigation experiences, depending upon the Page type being used .More


Navigating between pages using tabs

The Xamarin.Forms TabbedPage consists of a list of tabs and a larger detail area, with each tab loading content into the detail area. This article demonstrates how to use a TabbedPage to navigate through a collection of pages.

Prerequisites

• Visual Studio 2017(Windows or Mac)

The steps given below are required to be followed in order to Create a Bottom NavigationBar in Xamarin.Forms, using Visual Studio.

Setting up a Xamarin.Forms Project

Start by creating a new Xamarin.Forms project.  you’ll learn more by going through the steps yourself.

Choose the Xamarin.Forms App Project type under Cross-platform/App in the New Project dialog.

Name your app, select “Use Portable Class Library” for shared code, and target both Android and iOS.

You probably want your project and solution to use the same name as your app. Put it in your preferred folder for projects and click Create.

You now have a basic Xamarin.Forms app. Click the play button to try it out.

Add Icons

Go to Solution—>PCL—>Right click—>Add Files

After added images Set BuildAction EmbddedResource

Setting up the User Interface. 

Go MainPage.Xaml and write following code.

MainPage.Xaml

	<?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:XamarinForms_BottomNBar" x:Class="XamarinForms_BottomNBar.XamarinForms_BottomNBarPage">
	<AbsoluteLayout>
	<StackLayout BackgroundColor="Teal" AbsoluteLayout.LayoutBounds="0, 0, 1, 1" AbsoluteLayout.LayoutFlags="All">
	<StackLayout Margin="0,200,0,0" HorizontalOptions="Center">
	<Label Text="Xamarin.Forms" HorizontalTextAlignment="Center" TextColor="White"></Label>
	<Label Text="Bottom NavigationBar" HorizontalTextAlignment="Center" TextColor="White"></Label> </StackLayout>
	</StackLayout>
	<StackLayout AbsoluteLayout.LayoutBounds=".20,1,1,.1" AbsoluteLayout.LayoutFlags="All" BackgroundColor="White" HorizontalOptions="FillAndExpand" Orientation="Horizontal">
	<StackLayout Style="{StaticResource ButtonNavigationBarStackLayoutStyle}" x:Name="stckHome">
	<Image Margin="0,10,0,10" x:Name="imgHome" Style="{StaticResource ButtonNavigationBarImageStyle}" />
	<Label Text="Home" Style="{StaticResource ButtonNavigationBarLabelStyle}"></Label> </StackLayout>
	<StackLayout Style="{StaticResource ButtonNavigationBarStackLayoutStyle}" x:Name="stckAlarm">
	<Image Margin="0,10,0,10" x:Name="imgAlarm" Style="{StaticResource ButtonNavigationBarImageStyle}" />
	<Label Text="Alarm" Style="{StaticResource ButtonNavigationBarLabelStyle}"></Label> </StackLayout>
	<StackLayout Style="{StaticResource ButtonNavigationBarStackLayoutStyle}" x:Name="stckCamera">
	<Image Margin="0,10,0,10" x:Name="imgCamera" Style="{StaticResource ButtonNavigationBarImageStyle}" />
	<Label Text="Camera" Style="{StaticResource ButtonNavigationBarLabelStyle}"></Label> </StackLayout>
	<StackLayout Style="{StaticResource ButtonNavigationBarStackLayoutStyle}" x:Name="stckSettings">
	<Image Margin="0,10,0,10" x:Name="imgSettings" Style="{StaticResource ButtonNavigationBarImageStyle}" />
	<Label Text="Settings" Style="{StaticResource ButtonNavigationBarLabelStyle}"></Label> </StackLayout>
	<StackLayout Style="{StaticResource ButtonNavigationBarStackLayoutStyle}" x:Name="stckLogout">
	<Image Margin="0,10,0,10" x:Name="imgLogout" Style="{StaticResource ButtonNavigationBarImageStyle}" />
	<Label Text="Logout" Style="{StaticResource ButtonNavigationBarLabelStyle}"></Label> </StackLayout>
	</StackLayout>
	</AbsoluteLayout>
	</ContentPage>

view raw MainPage.xaml hosted with ❤ by GitHub

In this step Write common Design For Bottom NavigationBar

App.Xaml

	<?xml version="1.0" encoding="utf-8"?>
	<Application xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="XamarinForms_BottomNBar.App">
	<Application.Resources>
	<!-- Application resource dictionary -->
	<ResourceDictionary>
	<!--Button NavigationBar StackLayout Style-->
	<Style x:Key="ButtonNavigationBarStackLayoutStyle" TargetType="StackLayout">
	<Setter Property="VerticalOptions" Value="FillAndExpand" /><Setter Property="HorizontalOptions" Value="FillAndExpand" />
	</Style>
	<!--Button NavigationBar Label Style-->
	<Style x:Key="ButtonNavigationBarLabelStyle" TargetType="Label">
	<Setter Property="Margin" Value="0,-10,0,0" /><Setter Property="HorizontalTextAlignment" Value="Center" /><Setter Property="TextColor" Value="Black" />
	</Style>
	<!-- Bottom NavigationBar Image Style-->
	<Style x:Key="ButtonNavigationBarImageStyle" TargetType="Image">
	<Setter Property="WidthRequest" Value="30" /><Setter Property="HeightRequest" Value="30" />
	</Style>
	</ResourceDictionary>
	</Application.Resources>
	</Application>

view raw App.xaml hosted with ❤ by GitHub

Now, Set the Icons for Bottom NavigationBar control.

MainPage.Xaml.cs

	public XamarinForms_BottomNBarPage()
	{
	InitializeComponent();
	imgHome.Source = ImageSource.FromResource("XamarinForms_BottomNBar.home.png");
	imgAlarm.Source = ImageSource.FromResource("XamarinForms_BottomNBar.alarm.png");
	imgCamera.Source = ImageSource.FromResource("XamarinForms_BottomNBar.camera.png");
	imgSettings.Source = ImageSource.FromResource("XamarinForms_BottomNBar.settings.png");
	imgLogout.Source = ImageSource.FromResource("XamarinForms_BottomNBar.logout.png");
	}

view raw MainPage.xaml.cs hosted with ❤ by GitHub

Adding a Tap Gesture Recognizer

The tap gesture is used for tap detection and is implemented with the TapGestureRecognizer class

In this Step Write Action for NavigationBar Control Using Tap Gesture Recognizer

MainPage.Xaml.cs

	using Xamarin.Forms;
	namespace XamarinForms_BottomNBar {
	public partial class XamarinForms_BottomNBarPage: ContentPage {
	public XamarinForms_BottomNBarPage() {
	InitializeComponent();
	imgHome.Source = ImageSource.FromResource("XamarinForms_BottomNBar.home.png");
	imgAlarm.Source = ImageSource.FromResource("XamarinForms_BottomNBar.alarm.png");
	imgCamera.Source = ImageSource.FromResource("XamarinForms_BottomNBar.camera.png");
	imgSettings.Source = ImageSource.FromResource("XamarinForms_BottomNBar.settings.png");
	imgLogout.Source = ImageSource.FromResource("XamarinForms_BottomNBar.logout.png");
	//Tap Gesture Recognizer
	var homeTap = new TapGestureRecognizer();
	homeTap.Tapped += (sender, e) => {
	DefaultBackground();
	stckHome.BackgroundColor = Color.Fuchsia;
	};
	stckHome.GestureRecognizers.Add(homeTap);
	var alarmTap = new TapGestureRecognizer();
	alarmTap.Tapped += (sender, e) => {
	DefaultBackground();
	stckAlarm.BackgroundColor = Color.Fuchsia;
	};
	stckAlarm.GestureRecognizers.Add(alarmTap);
	var cameraTap = new TapGestureRecognizer();
	cameraTap.Tapped += (sender, e) => {
	DefaultBackground();
	stckCamera.BackgroundColor = Color.Fuchsia;
	};
	stckCamera.GestureRecognizers.Add(cameraTap);
	var settingsTap = new TapGestureRecognizer();
	settingsTap.Tapped += (sender, e) => {
	DefaultBackground();
	stckSettings.BackgroundColor = Color.Fuchsia;
	};
	stckSettings.GestureRecognizers.Add(settingsTap);
	var logoutTap = new TapGestureRecognizer();
	logoutTap.Tapped += (sender, e) => {
	DefaultBackground();
	stckLogout.BackgroundColor = Color.Fuchsia;
	};
	stckLogout.GestureRecognizers.Add(logoutTap);
	}
	public void DefaultBackground() {
	stckHome.BackgroundColor = Color.White;
	stckAlarm.BackgroundColor = Color.White;
	stckCamera.BackgroundColor = Color.White;
	stckSettings.BackgroundColor = Color.White;
	stckLogout.BackgroundColor = Color.White;
	}
	}
	}

view raw MainPage.xaml.cs hosted with ❤ by GitHub

In this step, Set Default Backgroundcolor to all Tap Control.

MainPage.Xaml.cs.

	public void DefaultBackground()
	{
	stckHome.BackgroundColor = Color.White;
	stckAlarm.BackgroundColor = Color.White;
	stckCamera.BackgroundColor = Color.White;
	stckSettings.BackgroundColor = Color.White;
	stckLogout.BackgroundColor = Color.White;
	}

view raw MainPage.xaml.cs hosted with ❤ by GitHub

Click the play button to try it out.

I hope you will understand how to Create a Bottom NavigationBar.

Summary

This was the process of how to Create a Bottom NavigationBar in Xamarin.Forms.

Thanks For Reading.

Please share comments and feedback.

Xamariin.Forms- Working With Directory Using DependencyService

In this article you will learn how to Create a Directory , Rename Directory and Delete using DependencyService in Xamarin forms. 

Introduction

Xamarin.Forms code runs on multiple platforms - each of which has its own filesystem. This means that reading and writing files is most easily done using the native file APIs on each platform. Alternatively, embedded resources are a simpler solution to distribute data files with an app.

User-writable-storage can be implemented natively and then accessed using the DependencyService .

DependencyService

DependencyService allows apps to call into platform-specific functionality from shared code. This functionality enables Xamarin.Forms apps to do anything that a native app can do.

DependencyService is a dependency resolver. In practice, an interface is defined and DependencyService finds the correct implementation of that interface from the various platform projects.


Xamarin.Forms apps need three components to use DependencyService:

• Interface – The required functionality is defined by an interface in shared code.
• Implementation Per Platform – Classes that implement the interface must be added to each platform project.
• Registration – Each implementing class must be registered with DependencyService via a metadata attribute. Registration enables DependencyService to find the implementing class and supply it in place of the interface at run time.
• Call to DependencyService – Shared code needs to explicitly call DependencyService to ask for implementations of the interface.

Following Topic Covered.

1.Create Directory 
2.Rename Directory 
3.Delete Directory

Related Post: Xamarin.Forms - Working With Files Using DependencyService

Prerequisites

• Visual Studio 2017(Windows or Mac)

The steps given below are required to be followed in order to Create a Directory , Rename Directory and Delete using DependencyService in Xamarin.Forms, using Visual Studio.

Setting up a Xamarin.Forms Project


Start by creating a new Xamarin.Forms project.  you’ll learn more by going through the steps yourself.

Choose the Xamarin.Forms App Project type under Cross-platform/App in the New Project dialog.

Name your app, select “Use Portable Class Library” for shared code, and target both Android and iOS.

You probably want your project and solution to use the same name as your app. Put it in your preferred folder for projects and click Create.

You now have a basic Xamarin.Forms app. Click the play button to try it out.

Creating Interface

Create a interface in Xamarin.Forms PCL

Go to Solution—>PCL—>Right click—>New—>Empty Class—>IDirectory.cs

Now, Write the following code.

IDirectory.cs

	using System;
	namespace XamarinForms_Files
	{
	public interface IDirectory {
	string CreateDirectory(string directoryName);
	void RemoveDirectory();
	string RenameDirectory(string oldDirectoryName, string newDirectoryName);
	}
	}

view raw IDirectory.cs hosted with ❤ by GitHub

Implementation per Platform

iOS Implementation

Go to Solution—>iOS—>Right click—>New—>Empty Class—> DirectoryHelper.cs

Now, Write the following code given below.

DirectoryHelper.cs

	using System;
	using System.IO;
	using Xamarin.Forms;
	using XamarinForms_Files.iOS;
	[assembly: Dependency(typeof(DirectoryHelper))]
	namespace XamarinForms_Files.iOS {
	public class DirectoryHelper: IDirectory {
	public string documentBasePath = Environment.GetFolderPath(Environment.SpecialFolder.Personal);
	public string CreateDirectory(string directoryName) {
	var directoryPath = Path.Combine(documentBasePath, directoryName);
	if (!Directory.Exists(directoryPath)) {
	Directory.CreateDirectory(directoryPath);
	}
	return directoryPath;
	}
	public void RemoveDirectory() {
	DirectoryInfo directory = new DirectoryInfo(documentBasePath);
	foreach(DirectoryInfo dir in directory.GetDirectories()) {
	dir.Delete(true);
	}
	}
	public string RenameDirectory(string oldDirectoryName, string newDirectoryName) {
	var olddirectoryPath = Path.Combine(documentBasePath, oldDirectoryName);
	var newdirectoryPath = Path.Combine(documentBasePath, newDirectoryName);
	if (Directory.Exists(olddirectoryPath)) {
	Directory.Move(olddirectoryPath, newdirectoryPath);
	}
	return newdirectoryPath;
	}
	}
	}

view raw DirectoryHelper.cs hosted with ❤ by GitHub

Android Implementation

Go to Solution—>Droid—>Right click—>New—>Empty Class—> DirectoryHelper.cs

Now, Write the following code given below.

DirectoryHelper.cs

	using System;
	using System.IO;
	using Xamarin.Forms;
	using XamarinForms_Files.Droid;
	[assembly: Dependency(typeof(DirectoryHelper))]
	namespace XamarinForms_Files.Droid {
	public class DirectoryHelper: IDirectory {
	public string documentBasePath = Environment.GetFolderPath(Environment.SpecialFolder.Personal);
	public string CreateDirectory(string directoryName) {
	var directoryPath = Path.Combine(documentBasePath, directoryName);
	if (!Directory.Exists(directoryPath)) {
	Directory.CreateDirectory(directoryPath);
	}
	return directoryPath;
	}
	public void RemoveDirectory() {
	DirectoryInfo directory = new DirectoryInfo(documentBasePath);
	foreach(DirectoryInfo dir in directory.GetDirectories()) {
	dir.Delete(true);
	}
	}
	public string RenameDirectory(string oldDirectoryName, string newDirectoryName) {
	var olddirectoryPath = Path.Combine(documentBasePath, oldDirectoryName);
	var newdirectoryPath = Path.Combine(documentBasePath, newDirectoryName);
	if (!Directory.Exists(olddirectoryPath)) {
	Directory.Move(olddirectoryPath, newdirectoryPath);
	}
	return newdirectoryPath;
	}
	}
	}

view raw DirectoryHelper.cs hosted with ❤ by GitHub

Setting up the User Interface. 

Go MainPage.Xaml and write following code.

MainPage.Xaml

	<?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:XamarinForms_Files" x:Class="XamarinForms_Files.XamarinForms_FilesPage">
	<StackLayout VerticalOptions="CenterAndExpand" HorizontalOptions="Center">
	<Entry x:Name="txtDirectory" Placeholder="Enter Directory Name..."></Entry>
	<Button x:Name="btnCreate" Text="Create"></Button>
	<Entry x:Name="txtDirectoryRename" Placeholder="Enter New Directory Name..."></Entry>
	<Button x:Name="btnRename" Text="Rename"></Button>
	<Button x:Name="btnRemove" Text="Remove"></Button> </StackLayout>
	</ContentPage>

view raw MainPage.xaml hosted with ❤ by GitHub

Call to DependencyService

In this step Call to DependencyService for your PCL.

	using Xamarin.Forms;
	namespace XamarinForms_Files {
	public partial class XamarinForms_FilesPage: ContentPage {
	string oldDirectoryName;
	public XamarinForms_FilesPage() {
	InitializeComponent();
	btnCreate.Clicked += (sender, e) => {
	oldDirectoryName = txtDirectory.Text;
	//Create a Directory Using DependencyService
	DependencyService.Get < IDirectory > ().CreateDirectory(txtDirectory.Text);
	};
	btnRename.Clicked += (sender, e) => {
	//Rename Directory Using DependencyService
	DependencyService.Get < IDirectory > ().RenameDirectory(oldDirectoryName, txtDirectoryRename.Text);
	};
	btnRemove.Clicked += (sender, e) => {
	//Remove Directory Using DependencyService
	DependencyService.Get < IDirectory > ().RemoveDirectory();
	};
	}
	}
	}

view raw MainPage.xaml.cs hosted with ❤ by GitHub

Click the play button to try it out.

I hope you will understand how to Create Directory , Rename Directory and Delete a file using use DependencyService.


Summary

This was the process of how to reate Directory , Rename Directory and Delete using DependencyService in Xamarin.Forms.

Thanks For Reading.

Please share comments and feedback.

Xamariin.Forms- Working With Files Using DependencyService

In this article you will learn how to Create a file using DependencyService in Xamarin forms. 

Introduction

Xamarin.Forms code runs on multiple platforms - each of which has its own filesystem. This means that reading and writing files is most easily done using the native file APIs on each platform. Alternatively, embedded resources are a simpler solution to distribute data files with an app.

User-writable-storage can be implemented natively and then accessed using the DependencyService .

DependencyService

DependencyService allows apps to call into platform-specific functionality from shared code. This functionality enables Xamarin.Forms apps to do anything that a native app can do.

DependencyService is a dependency resolver. In practice, an interface is defined and DependencyService finds the correct implementation of that interface from the various platform projects.


Xamarin.Forms apps need three components to use DependencyService:

1. Interface – The required functionality is defined by an interface in shared code.
2. Implementation Per Platform – Classes that implement the interface must be added to each platform project.
3. Registration – Each implementing class must be registered with DependencyService via a metadata attribute. Registration enables DependencyService to find the implementing class and supply it in place of the interface at run time.
4. Call to DependencyService – Shared code needs to explicitly call DependencyService to ask for implementations of the interface.

The Following Image Explain DependencyService

Prerequisites

• Visual Studio 2017(Windows or Mac)

The steps given below are required to be followed in order to Create a file using DependencyService in Xamarin.Forms, using Visual Studio.


Setting up a Xamarin.Forms Project


Start by creating a new Xamarin.Forms project. you’ll learn more by going through the steps yourself.

Choose the Xamarin.Forms App Project type under Cross-platform/App in the New Project dialog.

Name your app, select “Use Portable Class Library” for shared code, and target both Android and iOS.

You probably want your project and solution to use the same name as your app. Put it in your preferred folder for projects and click Create.

You now have a basic Xamarin.Forms app. Click the play button to try it out.

Creating Interface

Create a interface in Xamarin.Forms PCL

Go to Solution—>PCL—>Right click—>New—>Empty Class—>IFileReadWrite.cs

Now, Write the following code.


IFileReadWrite.cs

	using System;
	using Xamarin.Forms;
	namespace XamarinForms_Files {
	public interface IFileReadWrite {
	void WriteData(string fileName, string data);
	string ReadData(string filename);
	}
	}

view raw IFileReadWrite.cs hosted with ❤ by GitHub

Implementation per Platform


Android Implementation

Go to Solution—>Droid—>Right click—>New—>Empty Class—>FileHelper.cs

Now, Write the following code given below.

FileHelper.cs

	using System;
	using System.IO;
	using Xamarin.Forms;
	using XamarinForms_Files;
	using XamarinForms_Files.Droid;
	[assembly: Dependency(typeof(FileHelper))]
	namespace XamarinForms_Files.Droid {
	public class FileHelper: IFileReadWrite {
	public void WriteData(string filename, string data) {
	var documentsPath = Environment.GetFolderPath(Environment.SpecialFolder.Personal);
	var filePath = Path.Combine(documentsPath, filename);
	File.WriteAllText(filePath, data);
	}
	public string ReadData(string filename) {
	var documentsPath = Environment.GetFolderPath(Environment.SpecialFolder.Personal);
	var filePath = Path.Combine(documentsPath, filename);
	return File.ReadAllText(filePath);
	}
	}
	}

view raw FileHelper.cs hosted with ❤ by GitHub

iOS Implementation

Go to Solution—>iOS—>Right click—>New—>Empty Class—>FileHelper.cs

Now, Write the following code given below.

FileHelper.cs

	using System;
	using System.IO;
	using Xamarin.Forms;
	using XamarinForms_Files.iOS;
	using XamarinForms_Files;
	[assembly: Dependency(typeof(FileHelper))]
	namespace XamarinForms_Files.iOS {
	public class FileHelper: IFileReadWrite {
	public void WriteData(string filename, string data) {
	var documentsPath = Environment.GetFolderPath(Environment.SpecialFolder.Personal);
	var filePath = Path.Combine(documentsPath, filename);
	File.WriteAllText(filePath, data);
	}
	public string ReadData(string filename) {
	var documentsPath = Environment.GetFolderPath(Environment.SpecialFolder.Personal);
	var filePath = Path.Combine(documentsPath, filename);
	return File.ReadAllText(filePath);
	}
	}
	}

view raw FileHelper.cs hosted with ❤ by GitHub

Setting up the User Interface.

Go MainPage.Xaml and write following code.

MainPage.Xaml

	<?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:XamarinForms_Files" x:Class="XamarinForms_Files.XamarinForms_FilesPage">
	<StackLayout VerticalOptions="CenterAndExpand" HorizontalOptions="Center">
	<Entry x:Name="txtText" Placeholder="Write some text..."></Entry>
	<Button x:Name="btnWrite" Text="Write"></Button>
	<Button x:Name="btnRead" Text="Read"></Button>
	<Label x:Name="lblFileTexts" HorizontalTextAlignment="Center" LineBreakMode="WordWrap" Text="File Values:"></Label> </StackLayout>
	</ContentPage>

view raw MainPage.xaml hosted with ❤ by GitHub

Call to DependencyService

In this step Call to DependencyService for your PCL.

	using Xamarin.Forms;
	namespace XamarinForms_Files {
	public partial class XamarinForms_FilesPage: ContentPage {
	string fileName = "MyFile.txt";
	public XamarinForms_FilesPage() {
	InitializeComponent();
	btnWrite.Clicked += (sender, e) => {
	string data = txtText.Text;
	//Write data to Loal File using DependencyService
	DependencyService.Get < IFileReadWrite > ().WriteData(fileName, data);
	txtText.Text = string.Empty;
	};
	btnRead.Clicked += (sender, e) => {
	//Read Loal File dat using DependencyService
	string data = DependencyService.Get < IFileReadWrite > ().ReadData(fileName);
	lblFileTexts.Text = data;
	};
	}
	}
	}

view raw MainPage.xaml.cs hosted with ❤ by GitHub

Click the play button to try it out.

I hope you will understand how to Create a file using use DependencyService.

Summary

This was the process of how to Create a file using DependencyService in Xamarin.Forms.

Thanks For Reading.

Please share comments and feedback.