In Focus

Xamarin.Forms - Bing Image Search Using Cognitive Service

In this article, you will learn how to search images using Bing Search API using Cognitive Service in Xamarin.Forms.

Introduction
 
Before starting, you can go through the following URL for an overview of Bing Web Search and Video Search. 
 
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.
 
Cognitive Services
 
Xamarin.Forms - Bing Image Search Using Cognitive Service
 
Xamarin and Cognitive Services together can infuse your apps, websites, and bots with intelligent algorithms to see, hear, speak, understand and interpret your user needs through natural methods of communication. Also, they help you transform your business with AI today.

Use AI to solve business problems
  • Vision
  • Speech
  • Knowledge
  • Search
  • Language
Bing Image Search API
  1. Bing Image Search API provides an experience similar to Bing Images.
  2. Bing Image Search API lets you send a search query to Bing and get back a list of relevant images from the Bing Image Search API.
Prerequisites
  • Visual Studio 2017 or Later(Windows or Mac)
  • Bing Search API Key
Setting up a Xamarin.Forms Project
 
Start by creating a new Xamarin.Forms project. You’ll learn more by going through the steps yourself.
 
Visual Studio 2019 has more options in the opening window. Clone or check out the code from any repository or, open a project or solution for your computer.
 
Now, you need to click "Create a new project".
 
Xamarin.Forms - Bing Image Search Using Cognitive Service 
 
Now, filter by Project Type: Mobile.
 
Choose the Mobile App (Xamarin. forms) project under C# and Mobile.
 
Xamarin.Forms - Bing Image Search Using Cognitive Service 
 
Name your app. You probably want your project and solution to use the same name as your app. Put it on your preferred location for projects and click "Create".
 
Xamarin.Forms - Bing Image Search Using Cognitive Service 
 
Now, select the blank app and target platforms - Android, iOS and Windows (UWP).
 
Xamarin.Forms - Bing Image Search Using Cognitive Service 
 
Subsequently, go to the solution. In there, you get all the files and sources of your project (.NET Standard). Now, select XAML page and double-click to open the MainPage.Xaml page.
 
You now have a basic Xamarin.Forms app.
 
Click the Play button to try it out.
 
Xamarin.Forms - Bing Image Search Using Cognitive Service
 
Get Bing Search API Key
 
In this step, get Bing Search API Key. Go to the following link.
 
https://azure.microsoft.com/en-in/services/cognitive-services/
 
Click "Try Cognitive Services for free".
 
Xamarin.Forms - Bing Image Search Using Cognitive Service 
 
Now, you can choose Bing Search APIs under Search APIs. Afterward, click "Get API Key".
 
Xamarin.Forms - Bing Image Search Using Cognitive Service 
 
Read the terms, and select your country/region. Afterward, click "Next".
 
Xamarin.Forms - Bing Image Search Using Cognitive Service
 
Now, log in using your preferred account.
 
Xamarin.Forms - Bing Image Search Using Cognitive Service
 
Now, the API key is activated. You can use it now.
 
Note
The trial key is available only for 7 days.
 
Xamarin.Forms - Bing Image Search Using Cognitive Service 
 
Setting up the User Interface
 
Go to MainPage.Xaml and write the following code.
 
MainPage.xaml
  1. <?xml version="1.0" encoding="utf-8" ?>    
  2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"    
  3.              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"    
  4.              xmlns:local="clr-namespace:XamarinCognitive"    
  5.              x:Class="XamarinCognitive.MainPage">    
  6.     
  7.     <StackLayout>    
  8.         <StackLayout>    
  9.             <StackLayout HorizontalOptions="Center" VerticalOptions="Start">    
  10.                 <Image x:Name="imgBanner" Source="banner.png" ></Image>    
  11.                 <Image Margin="0,0,0,10" x:Name="imgCognitive" HeightRequest="100" Source="cognitiveservice.png" ></Image>    
  12.                 <Label Margin="0,0,0,10" Text="Bing Image Search" FontAttributes="Bold" FontSize="Large" TextColor="Gray" HorizontalTextAlignment="Center" ></Label>    
  13.                 <Entry x:Name="txtSearch" Placeholder="Type here.."></Entry>    
  14.                 <Button x:Name="btnSearch" WidthRequest="50" Text="Search" Clicked="BtnSearch_Clicked" />    
  15.                 <ScrollView>    
  16.                 <Grid>    
  17.                     <Grid.ColumnDefinitions>    
  18.                         <ColumnDefinition Width="*"/>    
  19.                         <ColumnDefinition Width="*"/>    
  20.                     </Grid.ColumnDefinitions>    
  21.                     <Grid.RowDefinitions>    
  22.                         <RowDefinition Height="100"/>    
  23.                         <RowDefinition Height="100"/>    
  24.                         <RowDefinition Height="100"/>    
  25.                     </Grid.RowDefinitions>    
  26.                     
  27.                     
  28.                 <Image Grid.Row="0" Grid.Column="0" x:Name="img1"></Image>    
  29.                 <Image Grid.Row="0" Grid.Column="1" x:Name="img2"></Image>    
  30.                 <Image Grid.Row="1" Grid.Column="0" x:Name="img3"></Image>    
  31.                 <Image Grid.Row="1" Grid.Column="1" x:Name="img4"></Image>    
  32.                 <Image Grid.Row="2" Grid.Column="0" x:Name="img5"></Image>    
  33.                 <Image Grid.Row="2" Grid.Column="1" x:Name="img6"></Image>    
  34.                 </Grid>    
  35.                 </ScrollView>    
  36.             </StackLayout>    
  37.         </StackLayout>    
  38.     </StackLayout>    
  39.     
  40. </ContentPage>     
Click the play button to try it out.
 
Xamarin.Forms - Bing Image Search Using Cognitive Service
 
NuGet Packages
 
Now, add the following NuGet Packages.
  • Newtonsoft.Json
Add Newtonsoft.Json NuGet
 
Go to Solution Explorer and select your solution. Right-click and select "Manage NuGet Packages for Solution". Search "Newtonsoft.Json" and add Package. Remember to install it for each project (.NET Standard, Android, iO, and UWP).
 
Create a Model
 
In this step, you can create a model for Deserializing your response.
 
ResponseModel.cs
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Text;  
  4.   
  5. namespace XamarinCognitive  
  6. {  
  7.     public class ResponseModel  
  8.     {  
  9.         public string _type { getset; }  
  10.         public Instrumentation instrumentation { getset; }  
  11.         public string readLink { getset; }  
  12.         public string webSearchUrl { getset; }  
  13.         public QueryContext queryContext { getset; }  
  14.         public int totalEstimatedMatches { getset; }  
  15.         public int nextOffset { getset; }  
  16.         public List<Value> value { getset; }  
  17.         public List<QueryExpansion> queryExpansions { getset; }  
  18.         public List<PivotSuggestion> pivotSuggestions { getset; }  
  19.         public List<RelatedSearch> relatedSearches { getset; }  
  20.     }  
  21.     public class Instrumentation  
  22.     {  
  23.         public string _type { getset; }  
  24.     }  
  25.   
  26.     public class QueryContext  
  27.     {  
  28.         public string originalQuery { getset; }  
  29.         public string alterationDisplayQuery { getset; }  
  30.         public string alterationOverrideQuery { getset; }  
  31.         public string alterationMethod { getset; }  
  32.         public string alterationType { getset; }  
  33.     }  
  34.   
  35.     public class Thumbnail  
  36.     {  
  37.         public int width { getset; }  
  38.         public int height { getset; }  
  39.     }  
  40.   
  41.     public class BestRepresentativeQuery  
  42.     {  
  43.         public string text { getset; }  
  44.         public string displayText { getset; }  
  45.         public string webSearchUrl { getset; }  
  46.     }  
  47.   
  48.     public class InsightsMetadata  
  49.     {  
  50.         public int recipeSourcesCount { getset; }  
  51.         public BestRepresentativeQuery bestRepresentativeQuery { getset; }  
  52.         public int pagesIncludingCount { getset; }  
  53.         public int availableSizesCount { getset; }  
  54.     }  
  55.   
  56.     public class Value  
  57.     {  
  58.         public string webSearchUrl { getset; }  
  59.         public string name { getset; }  
  60.         public string thumbnailUrl { getset; }  
  61.         public DateTime datePublished { getset; }  
  62.         public string contentUrl { getset; }  
  63.         public string hostPageUrl { getset; }  
  64.         public string contentSize { getset; }  
  65.         public string encodingFormat { getset; }  
  66.         public string hostPageDisplayUrl { getset; }  
  67.         public int width { getset; }  
  68.         public int height { getset; }  
  69.         public Thumbnail thumbnail { getset; }  
  70.         public string imageInsightsToken { getset; }  
  71.         public InsightsMetadata insightsMetadata { getset; }  
  72.         public string imageId { getset; }  
  73.         public string accentColor { getset; }  
  74.     }  
  75.   
  76.     public class Thumbnail2  
  77.     {  
  78.         public string thumbnailUrl { getset; }  
  79.     }  
  80.   
  81.     public class QueryExpansion  
  82.     {  
  83.         public string text { getset; }  
  84.         public string displayText { getset; }  
  85.         public string webSearchUrl { getset; }  
  86.         public string searchLink { getset; }  
  87.         public Thumbnail2 thumbnail { getset; }  
  88.     }  
  89.   
  90.     public class Thumbnail3  
  91.     {  
  92.         public string thumbnailUrl { getset; }  
  93.     }  
  94.   
  95.     public class Suggestion  
  96.     {  
  97.         public string text { getset; }  
  98.         public string displayText { getset; }  
  99.         public string webSearchUrl { getset; }  
  100.         public string searchLink { getset; }  
  101.         public Thumbnail3 thumbnail { getset; }  
  102.     }  
  103.   
  104.     public class PivotSuggestion  
  105.     {  
  106.         public string pivot { getset; }  
  107.         public List<Suggestion> suggestions { getset; }  
  108.     }  
  109.   
  110.     public class Thumbnail4  
  111.     {  
  112.         public string thumbnailUrl { getset; }  
  113.     }  
  114.   
  115.     public class RelatedSearch  
  116.     {  
  117.         public string text { getset; }  
  118.         public string displayText { getset; }  
  119.         public string webSearchUrl { getset; }  
  120.         public string searchLink { getset; }  
  121.         public Thumbnail4 thumbnail { getset; }  
  122.     }  
  123.   
  124.       
  125. }  
Bing Image Search
 
In this step, write the following code for Bing Image Search.
 
MainPage.xaml.cs
  1. using System.Threading.Tasks;  
  2. using Xamarin.Forms;  
  3. using Newtonsoft.Json;  
  4. namespace XamarinCognitive  
  5. {  
  6.     public partial class MainPage : ContentPage  
  7.     {  
  8.         public static string APIKey = "a30148ca5fc74a47b4e49b554fc4f683";  
  9.         public static string baseURl = "https://api.cognitive.microsoft.com/bing/v7.0/images/search";  
  10.         struct SearchResult  
  11.         {  
  12.             public String jsonResult;  
  13.             public Dictionary<String, String> relevantHeaders;  
  14.         }  
  15.   
  16.         List<Images> imageList = new List<Images>();  
  17.         public MainPage()  
  18.         {  
  19.             InitializeComponent();  
  20.         }  
  21.   
  22.         private void BtnSearch_Clicked(object sender, EventArgs e)  
  23.         {  
  24.             SearchResult bingResult = BingImageSearch(txtSearch.Text);  
  25.             var res = JsonConvert.DeserializeObject<ResponseModel>(bingResult.jsonResult);  
  26.             for (int i = 0; i < res.value.Count; i++)  
  27.             {  
  28.                 imageList.Add(new Images { ImagePath = res.value[i].contentUrl });  
  29.             }  
  30.             img1.Source = ImageSource.FromUri(new Uri(imageList[0].ImagePath));  
  31.             img2.Source = ImageSource.FromUri(new Uri(imageList[1].ImagePath));  
  32.             img3.Source = ImageSource.FromUri(new Uri(imageList[2].ImagePath));  
  33.             img4.Source = ImageSource.FromUri(new Uri(imageList[3].ImagePath));  
  34.             img5.Source = ImageSource.FromUri(new Uri(imageList[4].ImagePath));  
  35.             img6.Source = ImageSource.FromUri(new Uri(imageList[5].ImagePath));  
  36.         }  
  37.   
  38.         //Bing Image Search   
  39.         static SearchResult BingImageSearch(string searchQuery)  
  40.         {  
  41.             var uriQuery = baseURl + "?q=" + Uri.EscapeDataString(searchQuery);  
  42.             WebRequest request = HttpWebRequest.Create(uriQuery);  
  43.             request.Headers["Ocp-Apim-Subscription-Key"] = APIKey;  
  44.             HttpWebResponse response = (HttpWebResponse)request.GetResponseAsync().Result;  
  45.             string json = new StreamReader(response.GetResponseStream()).ReadToEnd();  
  46.             var searchResult = new SearchResult();  
  47.             searchResult.jsonResult = json;  
  48.             searchResult.relevantHeaders = new Dictionary<String, String>();  
  49.             foreach (String header in response.Headers)  
  50.             {  
  51.                 if (header.StartsWith("BingAPIs-") || header.StartsWith("X-MSEdge-"))  
  52.                     searchResult.relevantHeaders[header] = response.Headers[header];  
  53.             }  
  54.             return searchResult;  
  55.         }  
  56.     }  
  57.     public class Images  
  58.     {  
  59.         public string ImagePath { getset; }  
  60.     }  
  61. }  
Click the Play button to try it out. 
 
Web Result 
 
Xamarin.Forms - Bing Image Search Using Cognitive Service 
 
I hope you have understood how to search images using Bing Search API using Cognitive Service Bing Search API in Xamarin.Forms.
Thanks for reading. Please share comments and feedback. Happy Coding :)