This document provides instructions for integrating Microsoft Cognitive Services image recognition APIs into a Xamarin.Forms mobile application. It outlines the steps to sign up for a Cognitive Services API key, create a Xamarin.Forms project, install relevant NuGet packages, add UI elements in XAML, and write C# backend code to call the Cognitive Services APIs and display image recognition results. The code sample demonstrates analyzing an image selected by the user from their device photos and displaying tags and other metadata returned from the Cognitive Services analysis.

1. 1.1
1.2
1.3
1.4
1.5
1.6
1.7
Table of Contents
Introduction
Sign Up with Microsoft Cognitive Services
Create Xamarin.Forms Application
Install Nuget
Code in Xaml and C# as Backend
Result
Resources
1

2. Microsoft Cognitive Services with
Xamarin.Forms
Microsoft Cognitive Services is a set of API that relies on Artificial Intelligence to analyse
images and videos. It can detect and recognize objects, people, faces with age and gender.
Also, it can extract text from images. This video will show to implement these features in a
Xamarin Forms application (iOS, Android and Windows) using nuget package
Plugin.CognitiveServices.
Requirements
Install Visual Studio Enterprise 2017
Microsoft Azure Account
Prepared by
Eng Soon Cheah
Microsoft MVP | Xamarin MVP
Introduction
2

3. Sign Up with Microsoft Cognitive Services
1. Go to Microsoft Azure Account and Login with your Microsoft Outlook Account.
If you does not had Microsoft Azure Account, Please Sign Up.
2. After login with Microsoft Azure Account, go to Left Bottom Panel, Click " >" More
Services and Search for "Cognitive Services" and Double Click " Cognitive Services".
Sign Up with Microsoft Cognitive Services
3

4. 1. After Double Click "Cognitive Services, You will saw a Cognitive Services DashBaord.
Sign Up with Microsoft Cognitive Services
4

5. Please Click "+ Add" at the Top Panel and Select "Computer Vision API" for this tutorial.
1. After Click "Computer Vision API" , Azure Portal will prompt the "Computer Vision API"
Panel explain about Computer Vison API , and you need to click "Create" to get the
Compouter Vision API Key.
2. After that You need to Enter the details of your Computer Vision API and Click "Create".
Sign Up with Microsoft Cognitive Services
5

6. 1. After Deployment of Computer Vision API, Azure Portal with display the Dashboar of
Computer Vision API that you had created.
1. Go to "Manage Key Section" and Click " Show acess key" , Azure Portal will show
Computer Vision API access Key that you need to use it for this tutorial.
Sign Up with Microsoft Cognitive Services
6

7. Sign Up with Microsoft Cognitive Services
7

8. Create Xamarin.Forms Application with
Cognitive Services
1. Launch your Visual Studio 2017.
2. Go to "File" > "New"> "Project" > "Cross-Platform" > Select "Cross Platform App
(Xamarin)" and Name your Project "XamCogApp" and Click "OK".
3. Select "Blank App" and in the Section of "Code Sharing Strategy" , Please Select
"Portable Class Library".
Create Xamarin.Forms Application
8

9. Create Xamarin.Forms Application
9

10. Install Nuget Packages
1. Go to your Solution Project "XamCogApp" > Right Click > "Manage NuGet Packages for
Solution".
2. Browse for "Media Plugin for Xamarin and Windows" and
"Microsoft.ProjectOxford.Vision" and Click "Install".
Install Nuget
10

11. Install Nuget
11

12. Code in Xaml and C# as Backend
Operation
1. Go to "MainPage.xaml" and Code the xaml for UI of your application.
Place the below code in side the Content.
<StackLayout Orientation="Vertical" HorizontalOptions="Center" VerticalOptions="Center">
<Button Text="Choose picture" VerticalOptions="Center"
HorizontalOptions="Center" Clicked="Handle_Clicked"/>
<Image x:Name="SelectedImage" Aspect="AspectFit" WidthRequest="200" HeightRequest="200"
/>
<Label x:Name="InfoLabel" HorizontalOptions="Center"/>
</StackLayout>
1. Go to "MainPage.xaml.cs" and Code for C# for Backend Operation.
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
}
async void selectPicture()
{
if (CrossMedia.Current.IsPickPhotoSupported)
{
var image = await CrossMedia.Current.PickPhotoAsync();
var stream = image.GetStream();
SelectedImage.Source = ImageSource.FromStream(() =>
{
return stream;
});
var result = await GetImageDescription(image.GetStream());
Code in Xaml and C# as Backend
12

13. image.Dispose();
foreach (string tag in result.Description.Tags)
{
InfoLabel.Text = InfoLabel.Text + "n" + tag;
}
}
}
public async Task<AnalysisResult> GetImageDescription(Stream imageStream)
{
VisionServiceClient visionClient = new VisionServiceClient(" <<YOUR API KEY HERE>> ");
VisualFeature[] features = { VisualFeature.Tags, VisualFeature.Categories,
VisualFeature.Description };
return await visionClient.AnalyzeImageAsync(imageStream, features.ToList(), null);
}
void Handle_Clicked(object sender, System.EventArgs e)
{
selectPicture();
}
}
1. Remember to Replace "<< YOUR API KEY HERE>>" with the Computer Vision API
Key that you had generate.
Code in Xaml and C# as Backend
13

14. Result
Result
14

15. Result
15

16. Result
16

17. Resources
Microsoft Cognitive Services Computer Vision with Xamarin Forms
Microsoft Cognitive Services and Xamarin Forms
Source Code for this Tutorial
Resources
17