Xamarin Monkeys: Xamarin.Forms

In this blog, you will learn how to create a custom popup 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 are the most easily done tasks using native file APIs on each platform. Alternatively, embedded resources are also a simpler solution to distribute the data files with an app.

Prerequisites

Visual Studio 2017(Windows or Mac)

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 Cross-platform App project under Visual C#-->Cross-platform in the New Project dialog.

Now Select the Blank App and Choose Portable Class Library(PCL).

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

Setting up the User Interface.

Go to MainPage.Xaml and write the following code.

MainPage.Xaml

	<StackLayout BackgroundColor="Azure" AbsoluteLayout.LayoutBounds="0, 0, 1, 1" AbsoluteLayout.LayoutFlags="All">
	<StackLayout HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" >
	<Label Text="Xamarin Monkeys" HorizontalOptions="Center" FontAttributes="Bold" FontSize="Medium"></Label>
	<Image x:Name="imgMonkey" HeightRequest="200" WidthRequest="200"></Image>
	<Button HorizontalOptions="Center" VerticalOptions="Center" Clicked="btnPopupButton_Clicked" Text="Show Popup"></Button>
	</StackLayout>
	</StackLayout>

view raw MainPage.xaml hosted with ❤ by GitHub

In this step, Create a custom popup using contentview.

Write the following code for popup

Popup - Loading

	<ContentView x:Name="popupLoadingView" BackgroundColor="#C0808080" Padding="10, 0" IsVisible="false" AbsoluteLayout.LayoutBounds="0, 0, 1, 1" AbsoluteLayout.LayoutFlags="All">
	<StackLayout VerticalOptions="Center" HorizontalOptions="Center">
	<StackLayout Orientation="Vertical" HeightRequest="150" WidthRequest="200" BackgroundColor="White">

	<ActivityIndicator x:Name="activityIndicator" Margin="0,50,0,0" VerticalOptions="Center" HorizontalOptions="Center" Color="Black" WidthRequest="30" HeightRequest="30" ></ActivityIndicator>
	<Label x:Name="lblLoadingText" TextColor="Black" VerticalOptions="Center" HorizontalOptions="Center" VerticalTextAlignment="Center" Text="Loading..."></Label>
	</StackLayout>
	</StackLayout>
	</ContentView>

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

Now, wirte the button click event to show popup.

MainPage.Xaml.cs

	private void btnPopupButton_Clicked(object sender, EventArgs e)
	{
	popupImageView.IsVisible = true;
	activityIndicator.IsRunning = true;

	}

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

Popup - Login

	<ContentView x:Name="popupLoginView" BackgroundColor="#C0808080" Padding="10, 0" IsVisible="false" AbsoluteLayout.LayoutBounds="0, 0, 1, 1" AbsoluteLayout.LayoutFlags="All">
	<StackLayout VerticalOptions="Center" HorizontalOptions="Center">
	<StackLayout Orientation="Vertical" HeightRequest="200" WidthRequest="300" BackgroundColor="White">
	<Entry Margin="20,20,20,10" Placeholder="Enter Username"></Entry>
	<Entry Margin="20,0,20,0" Placeholder="Enter Password"></Entry>
	<Button Margin="20,0,20,0" Text="Login"></Button>
	</StackLayout>
	</StackLayout>
	</ContentView>

view raw MainPage.xaml hosted with ❤ by GitHub

Popup - ListView

	<ContentView x:Name="popupListView" BackgroundColor="#C0808080" Padding="10, 0" IsVisible="false" AbsoluteLayout.LayoutBounds="0, 0, 1, 1" AbsoluteLayout.LayoutFlags="All">
	<StackLayout VerticalOptions="Center" HorizontalOptions="Center">
	<StackLayout Orientation="Vertical" HeightRequest="200" WidthRequest="300" BackgroundColor="White">
	<ListView x:Name="sampleList">
	</ListView>
	</StackLayout>
	</StackLayout>
	</ContentView>

view raw MainPage.xaml hosted with ❤ by GitHub

Popup - ImageView

	<ContentView x:Name="popupImageView" BackgroundColor="#C0808080" Padding="10, 0" IsVisible="false" AbsoluteLayout.LayoutBounds="0, 0, 1, 1" AbsoluteLayout.LayoutFlags="All">
	<StackLayout VerticalOptions="Center" HorizontalOptions="Center">
	<StackLayout Orientation="Vertical" HeightRequest="200" WidthRequest="300" BackgroundColor="White">
	<Image WidthRequest="200" HeightRequest="200" x:Name="imgPopup"></Image>
	</StackLayout>
	</StackLayout>
	</ContentView>

view raw MainPage.xaml hosted with ❤ by GitHub

Full 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:XamarinCustomPopup"
	x:Class="XamarinCustomPopup.MainPage">
	<ContentPage.Content>

	<AbsoluteLayout Padding="0" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
	<StackLayout BackgroundColor="Azure" AbsoluteLayout.LayoutBounds="0, 0, 1, 1" AbsoluteLayout.LayoutFlags="All">
	<StackLayout HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" >
	<Label Text="Xamarin Monkeys" HorizontalOptions="Center" FontAttributes="Bold" FontSize="Medium"></Label>
	<Image x:Name="imgMonkey" HeightRequest="200" WidthRequest="200"></Image>
	<Button HorizontalOptions="Center" VerticalOptions="Center" Clicked="btnPopupButton_Clicked" Text="Show Popup"></Button>
	</StackLayout>
	</StackLayout>

	<!--Popup Area-->
	<ContentView x:Name="popupLoginView" BackgroundColor="#C0808080" Padding="10, 0" IsVisible="false" AbsoluteLayout.LayoutBounds="0, 0, 1, 1" AbsoluteLayout.LayoutFlags="All">
	<StackLayout VerticalOptions="Center" HorizontalOptions="Center">
	<StackLayout Orientation="Vertical" HeightRequest="200" WidthRequest="300" BackgroundColor="White">
	<Entry Margin="20,20,20,10" Placeholder="Enter Username"></Entry>
	<Entry Margin="20,0,20,0" Placeholder="Enter Password"></Entry>
	<Button Margin="20,0,20,0" Text="Login"></Button>
	</StackLayout>
	</StackLayout>
	</ContentView>

	<ContentView x:Name="popupLoadingView" BackgroundColor="#C0808080" Padding="10, 0" IsVisible="false" AbsoluteLayout.LayoutBounds="0, 0, 1, 1" AbsoluteLayout.LayoutFlags="All">
	<StackLayout VerticalOptions="Center" HorizontalOptions="Center">
	<StackLayout Orientation="Vertical" HeightRequest="150" WidthRequest="200" BackgroundColor="White">

	<ActivityIndicator x:Name="activityIndicator" Margin="0,50,0,0" VerticalOptions="Center" HorizontalOptions="Center" Color="Black" WidthRequest="30" HeightRequest="30" ></ActivityIndicator>
	<Label x:Name="lblLoadingText" TextColor="Black" VerticalOptions="Center" HorizontalOptions="Center" VerticalTextAlignment="Center" Text="Loading..."></Label>
	</StackLayout>
	</StackLayout>
	</ContentView>

	<ContentView x:Name="popupListView" BackgroundColor="#C0808080" Padding="10, 0" IsVisible="false" AbsoluteLayout.LayoutBounds="0, 0, 1, 1" AbsoluteLayout.LayoutFlags="All">
	<StackLayout VerticalOptions="Center" HorizontalOptions="Center">
	<StackLayout Orientation="Vertical" HeightRequest="200" WidthRequest="300" BackgroundColor="White">
	<ListView x:Name="sampleList">
	</ListView>
	</StackLayout>
	</StackLayout>
	</ContentView>

	<ContentView x:Name="popupImageView" BackgroundColor="#C0808080" Padding="10, 0" IsVisible="false" AbsoluteLayout.LayoutBounds="0, 0, 1, 1" AbsoluteLayout.LayoutFlags="All">
	<StackLayout VerticalOptions="Center" HorizontalOptions="Center">
	<StackLayout Orientation="Vertical" HeightRequest="200" WidthRequest="300" BackgroundColor="White">
	<Image WidthRequest="200" HeightRequest="200" x:Name="imgPopup"></Image>
	</StackLayout>
	</StackLayout>
	</ContentView>

	</AbsoluteLayout>
	</ContentPage.Content>
	</ContentPage>

view raw MainPage.xaml hosted with ❤ by GitHub

Full Code - MainPage.Xaml.cs

	using System;
	using System.Collections.Generic;
	using System.Linq;
	using System.Text;
	using System.Threading.Tasks;
	using Xamarin.Forms;

	namespace XamarinCustomPopup
	{
	public partial class MainPage : ContentPage
	{
	public MainPage()
	{
	InitializeComponent();
	List<string> items = new List<string> { "Xamarin.Forms", "Xamarin.iOS", "Xamarin.Android","Xamarin Monkeys" };
	imgMonkey.Source = ImageSource.FromResource("XamarinCustomPopup.images.monkey-MVP.png");
	imgPopup.Source = ImageSource.FromResource("XamarinCustomPopup.images.xammonkey.png");
	sampleList.ItemsSource = items;
	}

	private void btnPopupButton_Clicked(object sender, EventArgs e)
	{
	popupImageView.IsVisible = true;
	activityIndicator.IsRunning = true;

	}

	}
	}