Getting Data From Azure In Android And Windows Using Xamarin.Forms

This article is about getting data from Azure. We will see how to create a storage account and upload your image or pdf etc. and access the data in Android using Xamarin.Forms.

Introduction
 
This article demonstrates the process of getting data from Azure in Android and Windows using Xamarin.Forms. Xamarin is a platform that allows us to create a multi-platform app for Android, Windows, or iOS through a single integrated development environment (IDE). And with Xamarin.Forms, the interface design for all three platforms can be accomplished within its XAML-based standard, native user- interfaces control. 
 
Getting Data From Azure In Android And Windows Using Xamarin.Forms 
 
Android Output 
 
Getting Data From Azure In Android And Windows Using Xamarin.Forms
 
Windows Output 
 
Getting Data From Azure In Android And Windows Using Xamarin.Forms 
 
Step 1 
 
Log on to the Azure Portal and create a storage account.
 
Note - You must have an active Azure account.
 
Now, click on Create a resource << Storage << Click Storage account.
 
Getting Data From Azure In Android And Windows Using Xamarin.Forms
 
Step 2 
 
Now, give the storage account a name and location. Must choose the Account kind as "Blob Storage" and Replication is chosen as  "Locally-redundant storage (LRS)". Click the "Review+Create" button.
 
 Getting Data From Azure In Android And Windows Using Xamarin.Forms
 
Step 3 
 
This page appears. The page is showing the storage account information. Check and click the "Create" button.
Getting Data From Azure In Android And Windows Using Xamarin.Forms
 
Step 3 
 
After a few seconds, your deployment is complete. The storage account is created; click the "Go to resource" button.
 
Getting Data From Azure In Android And Windows Using Xamarin.Forms
 
Step 4
 
Now go to Blobs >> Container. This step is added to the container.
 
Getting Data From Azure In Android And Windows Using Xamarin.Forms
   
Step  5
 
Now, give the name and choose the Public access level as "Blob (anonymous read access for blobs only)" and click the "OK" button.
 
Getting Data From Azure In Android And Windows Using Xamarin.Forms
 
Step 6 
 
Click the "Upload" button that displays the "Upload blob" page. Select a file and click the "Upload" button.
 
Getting Data From Azure In Android And Windows Using Xamarin.Forms 
Step 7  
 
The image is added successfully. The image name is 'Android.jpg". 
Getting Data From Azure In Android And Windows Using Xamarin.Forms
 
Step 8
 
Open Visual Studio and go to New Project >> Installed >> Visual C# >> Cross-Platform. Select the cross-platform app, then give the project a name and location, and click the "OK" button.
 
Getting Data From Azure In Android And Windows Using Xamarin.Forms 
 
Step  9
 
After project creation, add the following NuGet Packages to your project.
  • WindowsAzure.Storage 
Go to Solution Explorer and select your solution. Right-click and select "Manage NuGet Packages for solution".  
 
Getting Data From Azure In Android And Windows Using Xamarin.Forms
 
Now, select the following NuGet Packages and select your project to install it.
 
Getting Data From Azure In Android And Windows Using Xamarin.Forms 
 
Step 10
 
Open Solution Explorer >> Project Name (Portable) >>App.xaml.cs >> Double click. it will open the design view of this page.
 
The code is given below. Just copy it.
 
Getting Data From Azure In Android And Windows Using Xamarin.Forms 
 
C# Code
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Text;  
  5.   
  6. using Xamarin.Forms;  
  7.   
  8. namespace GettingDataAzure  
  9. {  
  10.     public partial class App : Application  
  11.     {  
  12.         public App()  
  13.         {  
  14.             InitializeComponent();  
  15.   
  16.             MainPage = new NavigationPage(new MainPage());  
  17.         }  
  18.   
  19.         protected override void OnStart()  
  20.         {  
  21.             // Handle when your app starts  
  22.         }  
  23.   
  24.         protected override void OnSleep()  
  25.         {  
  26.             // Handle when your app sleeps  
  27.         }  
  28.   
  29.         protected override void OnResume()  
  30.         {  
  31.             // Handle when your app resumes  
  32.         }  
  33.     }  
  34. }   
Step 11
 
Now, Open the Solution Explorer >> Project Name (Portable) >> Right-click >> Class >> Double-Click. This shows a selection page. Give the name and click "ADD" button.
 
Getting Data From Azure In Android And Windows Using Xamarin.Forms 
 
Just copy the "Connection String".
 
Getting Data From Azure In Android And Windows Using Xamarin.Forms 
 
C# Code 
  1. using Microsoft.WindowsAzure.Storage;  
  2. using Microsoft.WindowsAzure.Storage.Blob;  
  3. using System;  
  4. using System.Collections.Generic;  
  5. using System.Linq;  
  6. using System.Text;  
  7. using System.Threading.Tasks;  
  8.   
  9. namespace GettingDataAzure  
  10. {  
  11.    public class BlobStorageService  
  12.     {  
  13.         readonly static CloudStorageAccount _cloudStorageAccount = CloudStorageAccount.Parse("DefaultEndpointsProtocol=https;AccountName=blobstorege;AccountKey=ZagNeIH/3IlasXyZCD4YgfDCI8oaWTyCfzgyBhR0lGg0w8dXX4hKBqD/BBOzwszapE76UgzCUQUFM3xBYOcGuQ==;EndpointSuffix=core.windows.net");  
  14.         readonly static CloudBlobClient _blobClient = _cloudStorageAccount.CreateCloudBlobClient();  
  15.   
  16.         public static async Task<List<T>> GetBlobs<T>(string containerName, string prefix = ""int? maxresultsPerQuery = null, BlobListingDetails blobListingDetails = BlobListingDetails.None) where T : ICloudBlob  
  17.         {  
  18.             var blobContainer = _blobClient.GetContainerReference(containerName);  
  19.   
  20.             var blobList = new List<T>();  
  21.             BlobContinuationToken continuationToken = null;  
  22.   
  23.             try  
  24.             {  
  25.                 do  
  26.                 {  
  27.                     var response = await blobContainer.ListBlobsSegmentedAsync(prefix, true, blobListingDetails, maxresultsPerQuery, continuationToken, nullnull);  
  28.   
  29.                     continuationToken = response?.ContinuationToken;  
  30.   
  31.                     foreach (var blob in response?.Results?.OfType<T>())  
  32.                     {  
  33.                         blobList.Add(blob);  
  34.                     }  
  35.   
  36.                 } while (continuationToken != null);  
  37.             }  
  38.             catch (Exception e)  
  39.             {  
  40.                 //Handle Exception  
  41.             }  
  42.   
  43.             return blobList;  
  44.         }  
  45.   
  46.         public static async Task<CloudBlockBlob> SaveBlockBlob(string containerName, byte[] blob, string blobTitle)  
  47.         {  
  48.             var blobContainer = _blobClient.GetContainerReference(containerName);  
  49.   
  50.             var blockBlob = blobContainer.GetBlockBlobReference(blobTitle);  
  51.             await blockBlob.UploadFromByteArrayAsync(blob, 0, blob.Length);  
  52.   
  53.             return blockBlob;  
  54.         }  
  55.     }  
  56.  
Step 12 
 
Open Solution Explorer >> Project Name (Portable) >> MainPage.xaml. Double click for opening the design view of this page. 
 
The code is given below just copy it.
 
Getting Data From Azure In Android And Windows Using Xamarin.Forms 
Xaml Code  
  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:GettingDataAzure"  
  5.              x:Class="GettingDataAzure.MainPage">  
  6.     <ContentPage.Content>  
  7.         <StackLayout HorizontalOptions="Center" VerticalOptions="Center">  
  8.             <Label x:Name="mytittle" HorizontalOptions="Center" VerticalOptions="Center"/>  
  9.             <Image x:Name="myimage" HorizontalOptions="Center" VerticalOptions="Center"/>  
  10.             <ActivityIndicator x:Name="myindicator"/>  
  11.         </StackLayout>  
  12.     </ContentPage.Content>  
  13. </ContentPage>   
Step
 
Open Solution Explorer >> Project name (Portabvle) >> mainPage.xaml.cs. Double click for openning the design view of this page.
 
The code is given below just copy it.
 
Getting Data From Azure In Android And Windows Using Xamarin.Forms 
 
C# Code
  1. using Microsoft.WindowsAzure.Storage.Blob;  
  2. using System;  
  3. using System.Collections.Generic;  
  4. using System.Linq;  
  5. using System.Text;  
  6. using System.Threading.Tasks;  
  7. using Xamarin.Forms;  
  8.   
  9. namespace GettingDataAzure  
  10. {  
  11.     public partial class MainPage : ContentPage  
  12.     {  
  13.         public MainPage()  
  14.         {  
  15.             InitializeComponent();  
  16.         }  
  17.   
  18.         protected override async void OnAppearing()  
  19.         {  
  20.             base.OnAppearing();  
  21.   
  22.             myindicator.IsRunning = true;  
  23.   
  24.             var blobList = await BlobStorageService.GetBlobs<CloudBlockBlob>("myphotos");  
  25.   
  26.             var firstBlob = blobList?.FirstOrDefault();  
  27.             var photo = new PhotoModel { Title = firstBlob?.Name, Uri = firstBlob?.Uri };  
  28.   
  29.             mytittle.Text = photo?.Title;  
  30.             myimage.Source = ImageSource.FromUri(photo?.Uri);  
  31.   
  32.             myindicator.IsRunning = false;  
  33.             myindicator.IsVisible = false;  
  34.         }  
  35.     }  
  36. }  
  37.       
Step  
 
Now, Open the Solution Explorer >> Project Name (Portable) >> Right-click >> Class >> Double-Click appear the page. Then give the name and click "ADD" button.
 
The code is given below just copy it.
 
Getting Data From Azure In Android And Windows Using Xamarin.Forms 
 
C# Code
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Text;  
  5. using System.Threading.Tasks;  
  6.   
  7. namespace GettingDataAzure  
  8. {  
  9.     public class PhotoModel  
  10.     {  
  11.         public System.Uri Uri { getset; }  
  12.         public string Title { getset; }  
  13.     }  
  14. }   
Step  
 
Next, select the Build & deploy option followed by selecting from the list of Android Emulator. You can choose any API (Application program Interface) Level Emulator to run it.
 
Output 
 
After a few seconds, you will see your app working.
 
Android Output 
 
See the result first. The Activity Indicator runs and the data is accessed to retrieve the data. 
 
Getting Data From Azure In Android And Windows Using Xamarin.Forms
 
Windows Output 
 
Getting Data From Azure In Android And Windows Using Xamarin.Forms 
 
Finally, we have successfully created Xamarin.Forms application.
 
Conclusion 
 
I hope you have learned how to get data from Azure in Android and Windows using Xamarin.Forms with Visual Studio and C#.