다음을 통해 공유

Sample Windows 8.1 App – Uploading Images to Cloud Using Azure Mobile Services

  • 아티클

I ran into several issues while trying to put together a quick demo universal Windows App using Microsoft Azure Mobile Services and the Azure Storage Client Library. I fixed the issues after a few hours of debugging and testing, and now have a working app.

image

You can download the demo code here, replace mobile services and storage accounts with yours, and compile the code in Visual Studio 2013 Update 4.

  • Change NotificationHub and Mobile Services code in the app.xaml.cs file in the Shared project
  • Change NotificationHub client code in the program.cs file in the Console1Application project
  • Change database connection and STORAGE_ACCOUNT_ACCESS_KEY in the web.config file in the Service project

The Starting Point

I started with creating an Azure Mobile Services and download the universal Windows app. The code just worked. I then added Notification Hub function to the Windows Store app (Windows 8.1) and created a console app for testing the notification hub function. That all worked. See more info with “Get Started with Notification Hubs”.

image

The Upload Images to Azure Storage App

You can follow detailed instructions here to create a Windows Store or Windows Phone app that utilizes Azure Storage Client Library. If you want to see how to capture images using a computer camera, you can download a great demo here. The problem is that instructions were created for a Windows Store or Windows Phone app, not for a Universal Windows App, This is where I ran into the issues, which I will discuss below.

Issue #1: AppBarButton

Tim Heuer wrote a great post on Using AppBarButton in Windows 8.1 and explained the removal of StandardStyles.xaml from your Windows 8.1 projects.  Basically, change the xaml code as follows in the mainpage.xaml file.

<StackPanel Orientation="Horizontal" Margin="72,0,0,0">
<TextBox Name="TextInput" Margin="5" MaxHeight="40" MinWidth="300"></TextBox>
<AppBarButton Name="btnTakePhoto" Icon="Camera" Click="OnTakePhotoClick" />
<AppBarButton Name="ButtonSave" Icon="Upload" Click="ButtonSave_Click"/>
</StackPanel>

Issue #2: The ToDoItem Class

Add the new properties in two places, one in ToDoItem.cs in the service project, and one in the ToDoItem.cs file in the Shared project. Notice that the latter has property attribute defined.

image   image

Issue #3: CameraCaptureUI not available in the Universal Windows App

Use MediaCapture instead. See modified code below.

        // Use a StorageFile to hold the captured image for upload.

        StorageFile media = null;

        MediaCapture cameraCapture;

 

        public MainPage()

        {

            this.InitializeComponent();

            this.InitializeCamera();

 

        }

 

        private async void InitializeCamera()

        {

            cameraCapture = new MediaCapture();

            await cameraCapture.InitializeAsync();

 

            capturePreview.Source = cameraCapture;

            await cameraCapture.StartPreviewAsync();

        }

 

        private async void OnTakePhotoClick(object sender, RoutedEventArgs e)

        {

            // Capture a new photo or video from the device.

            //https://msdn.microsoft.com/library/windows/apps/br241124

           //https://azure.microsoft.com/en-us/documentation/articles/mobile-services-windows-store-dotnet-upload-data-blob-storage/

 

            ImageEncodingProperties imgFormat = ImageEncodingProperties.CreateJpeg();

 

            // create storage file in local app storage

            media = await ApplicationData.Current.LocalFolder.CreateFileAsync(

                "TestPhoto.jpg", CreationCollisionOption.GenerateUniqueName);

 

            //CameraCaptureUI not available in universal Windows app

            //https://stackoverflow.com/questions/26392977/no-basic-camera-ui-for-windows-phone-8-1

            //CameraCaptureUI cameraCapture = new CameraCaptureUI();

            //media = await cameraCapture.CaptureFileAsync(CameraCaptureUIMode.PhotoOrVideo);

 

           

            await cameraCapture.CapturePhotoToStorageFileAsync(imgFormat, media);

 

            // Get photo as a BitmapImage

            BitmapImage bmpImage = new BitmapImage(new Uri(media.Path));

 

            // imagePreivew is a <Image> object defined in XAML

            imagePreivew.Source = bmpImage;

           

        }