How To Add An Image In Xamarin.Forms Application For Android And UWP

Images are a crucial part of application navigation, usability, and branding. Xamarin.Forms applications need to be able to share images across all platforms, but also potentially display different images on each platform.

Before reading this article, please go through the following article.

• How To Create And Use XAML Content Page In Xamarin Forms Application For Android And Universal Windows Platform

Reading this article, you will learn how to add an image in Xamarin.Forms application for Android and Universal Windows Platform with XAML and Visual C# in cross platform application development.

The following important tools are required for developing UWP app.

1. Windows 10 (Recommended)
2. Visual Studio 2015 Community Edition (It is a free software available online).
3. Using Visual Studio 2015 Installer, enable the Xamarin (cross-platform mobile development and C#/.NET) while installing/modifying Visual Studio 2015.

Now, we can discuss step by step app development.

Step 1

Open Visual Studio 2015. Go to Start -> New Project-> select Cross-Platform (under Visual C# -> Blank App (Xamarin.Forms Portable)-> Give a suitable name to your app (XamFormImg) -> OK.

 

Step 2

Now, create project “XamFormImg_Droid”. Choose the target and minimum platform versions for your Universal Windows Project.

 

 

 

Step 3

 

Create project “XamFormImg_UWP” ….

 

 

 

Step 4

 

After that, Visual Studio creates 6 projects and displays "Getting Started.Xamarin" Page. Now, we have to update the Xamarin forms Reference for Portable Project and XamFormImg_Droid project. (Please refer to How To Create And Use XAML Content Page In Xamarin Forms Application For Android And Universal Windows Platform).

Step 5

Add an XAML page for Image Demo. Right click XamFormImg (Portable) project, select ADD-> NewItem, and select CrossPlatform-> FormXamlPage-> Give the relevant name.

 

 

Step 6

 

Next, add an image to XamFormImg_Droid project and XamFormImg_UWP Project.

Select XamFormImg_Droid-> Resources-> Right click the drawable ->Add->Existing Item and add the image.

 

 

 

Select XamFormImg_UWP-> Right click, add the existing item, and add the image

 

 

Step 7

 

For displaying image , add 1 Image Tag, 1 Button, and 1 Label in ImgDemo.xaml.

<StackLayout>

   <Label Text="Xamarin Forms Image Demo - UWP and Android" VerticalOptions="Center" HorizontalOptions="Center" />

   <Button x:Name="btnImg" Text=" Click the Button To display the Image." HorizontalOptions="Center"

   VerticalOptions="CenterAndExpand" Clicked="btnImgClicked" />

   <Image x:Name="imgDisp" ></Image>

</StackLayout>

 

Step 8

In ImgDemo.xaml.cs, add the following code for arithmetic operation.

void btnImgClicked(object sender, EventArgs args)

{
   imgDisp.Source = "Nature.jpg";
}

 

 

Step 9

 

Open (double click) the file App.cs in the Solution Explorer-> XamFormImg (portable) and set the Root Page.

 

 

Step 10

We will test Android and UWP. So, we can set the multiple startup projects as XamFormImg.Droid, and XamFormImg.UWP (Universal Windows).

 

 

Step 11

Change the "Configuration Manager" settings and go to Build -> Configuration Manager.

Uncheck all the Build and deploy options to the iOS, Windows, WinPhone. Check the Droid and UWP.

 

Step 12

 

Deploy your app on local machine. The output of the XamFormImg app is given below.

 

 

Summary

Now, you have successfully tested adding an Image in Xamarin Forms application, using Visual C# and Xamarin.