Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

UWP with Microsoft Azure

1,038 views

Published on

Upload and retrieve Image form Microsoft Azure

Published in: Technology
  • Be the first to comment

  • Be the first to like this

UWP with Microsoft Azure

  1. 1. UWP WITH MICROSOFT AZURE BY ENG SOON CHEAH
  2. 2. 1 UWP WITH MICROSOFT AZURE UWP with Microsoft Azure STORE IMAGE AND RETRIEVE IMAGE BY USING BLOB STORAGE Pre-Requirement 1. Install Visual Studio 2015 2. Install Azure SDK 3. Microsoft Azure Account Let Start to Code! Click the NEW > DATA SERVICES > STORAGE > QUICK CREATE > fill in the information > Create storage Account
  3. 3. 2 UWP WITH MICROSOFT AZURE After the account is created you will find the dashboard. To access azure storage we have a storage account name and access keys. Click on manage access keys at the bottom and you will find them as below. We will now create a Windows UWP with the following UI. Add mobile services and azure storage nuget package foe the app. <Button x:Name="button" Content="Select Picture" HorizontalAlignment="Left" Margin="65,77,0,0" VerticalAlignment="Top" Height="68" Width="221" Click="SelectPic_clicked" FontSize="26.667"/> <Image x:Name="image" HorizontalAlignment="Left" Height="240" Margin="65,256,0,0" VerticalAlignment="Top" Width="335"/>
  4. 4. 3 UWP WITH MICROSOFT AZURE In the button click event paste the following code, private async void SelectPic_clicked(object sender, RoutedEventArgs e) { try { FileOpenPicker fop = new FileOpenPicker(); fop.FileTypeFilter.Add(".jpg"); fop.FileTypeFilter.Add(".jpeg"); fop.FileTypeFilter.Add(".png"); fop.SuggestedStartLocation = PickerLocationId.PicturesLibrary; StorageFile sf = await fop.PickSingleFileAsync(); IRandomAccessStream str = await sf.OpenAsync(FileAccessMode.Read); CloudStorageAccount account; CloudBlobClient blobClient; CloudBlobContainer container; account = new CloudStorageAccount(new StorageCredentials("Insert your account name", "Insert your key"), true); blobClient = account.CreateCloudBlobClient(); container = blobClient.GetContainerReference("pictures"); await container.CreateIfNotExistsAsync(); BlobContainerPermissions per = new BlobContainerPermissions(); per.PublicAccess = BlobContainerPublicAccessType.Blob; await container.SetPermissionsAsync(per); CloudBlockBlob blob = container.GetBlockBlobReference(sf.Name); await blob.UploadFromFileAsync(sf); BitmapImage bmp = new BitmapImage(); bmp.UriSource = blob.Uri; BlobData imageData = new BlobData { imageUrl = blob.Uri.ToString(), name = sf.Name };
  5. 5. 4 UWP WITH MICROSOFT AZURE await App.MobileService.GetTable<BlobData>().InsertAsync(imageData); var m1 = new MessageDialog("Image Uploaded").ShowAsync(); image.Source = bmp; } catch(Exception ex) { var m2 = new MessageDialog(ex.ToString()).ShowAsync(); } In the above code I have used FileOpenPicker to select an image. And used Mobile service to store blob name and url once uploaded. Use your account name and account key. I have used the following code for class. To retrieve images from the blob storage, I used mobile services to store the information. Use the following code to make the UI. Add the following is the c# code for retrieval of images. public class BlobData { public string id { get; set; } public string name { get; set; } public string imageUrl { get; set; } } <Button x:Name="button1" Content="Download Images" HorizontalAlignment="Left" Margin="618,64,0,0" VerticalAlignment="Top" Height="81" Width="259" FontSize="26.667" Click="Download_clicked"/> <ListView x:Name="ImageList" HorizontalAlignment="Left" Height="483" Margin="659,184,0,0" VerticalAlignment="Top" Width="496"> <ListView.ItemTemplate> <DataTemplate> <StackPanel> <TextBlock Text="{Binding name}" /> <Image Height="120" Width="150" Source="{Binding imageUrl}"/> </StackPanel> </DataTemplate> </ListView.ItemTemplate> </ListView> List<BlobData> allImages = await App.MobileService.GetTable<BlobData>().ToListAsync(); ImageList.ItemsSource = allImages;
  6. 6. 5 UWP WITH MICROSOFT AZURE Screenshot 1 Screenshot 2 Screenshot 3
  7. 7. 6 UWP WITH MICROSOFT AZURE Screenshot 4 Screenshot 5
  8. 8. 7 UWP WITH MICROSOFT AZURE References: 1. How to operate Azure Blob and Table Storage in Windows Store apps https://code.msdn.microsoft.com/windowsapps/How-to-use-Windows-Azure-b3447051 2. Universal Windows Platform (UWP) App Development https://channel9.msdn.com/Series/Windows-10-development-for-absolute-beginners

×