Shai Raiten's Blog : Windows 8

Run Windows Store Apps From Desktop

shair — Thu, 07 Feb 2013 14:09:49 GMT

When customers ask me how they can run Windows Store app from Desktop usually the answer is – You Can’t, but if you really want there is a way to do that.

The reason I usually answer is You Can’t is because – In order to run Windows Store app from Desktop you need to install Windows App Certification Kit, this pack contains “microsoft.windows.softwarelogo.appxlauncher.exe” file that can run a Windows Store app by his application model id.

So if you plan on publishing your app you can’t assume the ACK is installed on the client machine.

Again, if you really want… Let me show you.

Download Demo Project

Step 1: Getting Started

First create a WPF project and add the following reference:

“C:\Program Files (x86)\Windows Kits\8.0\App Certification Kit\microsoft.windows.softwarelogo.shared.dll”

Step 2: Getting Windows App List

The reason you need to add reference to “Microsoft.Windows.Softwarelogo.Shared.dll” so we can receive the program inventory xml file, this file contains the complete list of all installed Windows Store apps.

Under my PC here is the file location - "C:\\Users\\Shai\\AppData\\Local\\Microsoft\\AppCertKit\\programinventory_e25bb752-e7cf-4fb2-8194-874ba9b91c7b.xml"

As I said this file contains all Windows Store app installed on you machine, each Program element under that file will show all the information regarding that specific app.

So, how do you get the file location?

It’s very simple, using GlobaldataAccessor method from softwarelogo.shared.dll you can get the Program Inventory Location string.

string itemValue = GlobalDataAccessor.GetItemValue("ProgramInventoryLocation", "PRE_PROCESS");

Once you got this file all you need is parsing the XML and create a collection on Apps.

I’ve create a ProductInfo class that will represent each Program in the file, as you can see from the code below I simply taking the attributes and elements from the Program element.

public class ProductInfo : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        private void NotifyPropertyChanged(String propertyName = "")
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }

        private string _Status;
        public string Status
        {
            get { return _Status; }
            set
            {
                if (value != this._Status)
                {
                    this._Status = value;
                    NotifyPropertyChanged("Status");
                }
            }
        }

        public string LogoUrl { get; set; }
        public string ProductName { get; set; }
        public string ProductVendor { get; set; }
        public string ProductLanguage { get; set; }
        public string ProductVersion { get; set; }
        public string RootDirPath { get; set; }
        public string Id { get; set; }
        public string PackageFullName { get; set; }

        public ProductInfo(XmlNode xNode)
        {
            var attrib = xNode.Attributes["Name"];
            if (attrib != null && !string.IsNullOrEmpty(attrib.Value)) ProductName = attrib.Value;

            attrib = xNode.Attributes["Version"];
            if (attrib != null && !string.IsNullOrEmpty(attrib.Value)) ProductVersion = attrib.Value;

            attrib = xNode.Attributes["Language"];
            if (attrib != null && !string.IsNullOrEmpty(attrib.Value)) ProductLanguage = attrib.Value;

            attrib = xNode.Attributes["Publisher"];
            if (attrib != null && !string.IsNullOrEmpty(attrib.Value)) ProductVendor = attrib.Value;

            attrib = xNode.Attributes["RootDirPath"];
            if (attrib != null && !string.IsNullOrEmpty(attrib.Value)) RootDirPath = attrib.Value;

            attrib = xNode.Attributes["Id"];
            if (attrib != null && !string.IsNullOrEmpty(attrib.Value)) Id = attrib.Value;

            var node = xNode.SelectSingleNode("/Log/ProgramList/Program[@Id='" + this.Id + "']/Indicators/PackageManifestIndicator/Properties/Logo");
            if (node != null && !string.IsNullOrEmpty(node.InnerText))
            {
                var imgUrl = System.IO.Path.Combine(RootDirPath, node.InnerText);
                if (File.Exists(imgUrl))
                    LogoUrl = imgUrl;
            }

            node = xNode.SelectSingleNode("/Log/ProgramList/Program[@Id='" + this.Id + "']/Indicators/PackageManifestIndicator/PackageManifest");
            if (node != null && !string.IsNullOrEmpty(node.Attributes["PackageFullName"].InnerText))
            {
                PackageFullName = node.Attributes["PackageFullName"].InnerText;
            }
        }
    }

And now, let’s connect the two part together, the first thing is getting the ProgramInventorylocation and after that just load that Xml file and parse it to objects with the information you want.

private void BuildAppsList()
{
    string itemValue = GlobalDataAccessor.GetItemValue("ProgramInventoryLocation", "PRE_PROCESS");

    XmlNodeList list = null;
    var reportDoc = new XmlDocument();
    reportDoc.Load(itemValue);
    ProductList = new ObservableCollection<ProductInfo>();

    list = reportDoc.GetElementsByTagName("Program");
    if (list.Count < 1)
    {
        throw new XmlException();
    }
    foreach (XmlNode node in list)
    {
        ProductInfo item = new ProductInfo(node);
        ProductList.Add(item);
    }

    dbTable.ItemsSource = ProductList;
}

Step 3: Get App User Model Id

Now after you got all Windows Store app installed on your machine it’s time to run them. In order to run a Windows Store app you’ll need to obtain the AppUserModelId, the reason you need to AppUserModelId is because the appxlauncher.exe needs this value in order to launch the application. (Package Name is not enough).

After completing Step 2 we got the App Package Full Name, we need to use this value to find the AppUserModelId from registry.

HKEY_CURRENT_USER\Software\Classes\ActivatableClasses\Package\**PackageFullName**\Server

So let’s add the following method, this method receive a packageFullName string and perform a search in the registry for the AppUserModelId.

public static string GetAppUserModelId(string packageFullName)
{
    string str = string.Empty;
    using (RegistryKey key = Registry.CurrentUser.CreateSubKey(string.Format(@"SOFTWARE\Classes\ActivatableClasses\Package\{0}\Server\",
                                                                               packageFullName)))
    {
        if (key == null) return str;

        var appKeys = from k in key.GetSubKeyNames()
                        where !k.StartsWith("BackgroundTransferHost")
                        select k;

        foreach (var appKey in appKeys)
        {
            using (RegistryKey serverKey = key.OpenSubKey(appKey))
            {
                if (serverKey.GetValue("AppUserModelId") != null)
                {
                    str = serverKey.GetValue("AppUserModelId").ToString();
                    serverKey.Close();
                    break;
                }
            }
        }
    }

    return str;
}

Step 4: Running Windows Store App

After we have the AppUserModelId string for a specific Windows Store app we can run it.

You can test it by opening command line and write the following:

C:\Program Files (x86)\Windows Kits\8.0\App Certification Kit\Microsoft.Windows.SoftwareLogo.AppxLauncher.exe “AppUserModelId”

Start App Button

private void StartApp_Click(object sender, RoutedEventArgs e)
{
    var product = ((System.Windows.Controls.Button)sender).Tag as ProductInfo;
    var appUserModelId = Helpers.GetAppUserModelId(product.PackageFullName);

    var exec = @"C:\Program Files (x86)\Windows Kits\8.0\App Certification Kit\Microsoft.Windows.SoftwareLogo.AppxLauncher.exe";

    if (!File.Exists(exec))
    {
        System.Windows.MessageBox.Show("Please install Windows App Certification Kit for Windows RT");
    }

    var processInfo = new ProcessStartInfo()
    {
        Arguments = appUserModelId,
        UseShellExecute = false,
        CreateNoWindow = true,
        FileName = exec
    };

    Process.Start(processInfo);
}

Step 5: Get Application Status

The last thing you might want is to know the App execution state, in order to do that you need to use IPackageDebugSettings - Enables debugger developers control over the lifecycle of a Windows Store app, such as when it is suspended or resumed. (http://msdn.microsoft.com/en-us/library/hh438393(v=vs.85).aspx)

for that create a PackageStatushelper class with the following code:

public class PackageStatusHelper
{
    [ComImport, Guid("B1AEC16F-2383-4852-B0E9-8F0B1DC66B4D")]
    public class PackageDebugSettings
    {
    }

    public enum PACKAGE_EXECUTION_STATE
    {
        PES_UNKNOWN,
        PES_RUNNING,
        PES_SUSPENDING,
        PES_SUSPENDED,
        PES_TERMINATED
    }

    [ComImport, Guid("F27C3930-8029-4AD1-94E3-3DBA417810C1"), InterfaceType(ComInterfaceType.InterfaceIsIUnknown)]
    public interface IPackageDebugSettings
    {
        int EnableDebugging([MarshalAs(UnmanagedType.LPWStr)] string packageFullName, [MarshalAs(UnmanagedType.LPWStr)]
                                                              string debuggerCommandLine, IntPtr environment);
        int DisableDebugging([MarshalAs(UnmanagedType.LPWStr)] string packageFullName);
        int Suspend([MarshalAs(UnmanagedType.LPWStr)] string packageFullName);
        int Resume([MarshalAs(UnmanagedType.LPWStr)] string packageFullName);
        int TerminateAllProcesses([MarshalAs(UnmanagedType.LPWStr)] string packageFullName);
        int SetTargetSessionId(int sessionId);
        int EnumerageBackgroundTasks([MarshalAs(UnmanagedType.LPWStr)] string packageFullName, 
                                                      out uint taskCount, out int intPtr, [Out] string[] array);
        int ActivateBackgroundTask(IntPtr something);
        int StartServicing([MarshalAs(UnmanagedType.LPWStr)] string packageFullName);
        int StopServicing([MarshalAs(UnmanagedType.LPWStr)] string packageFullName);
        int StartSessionRedirection([MarshalAs(UnmanagedType.LPWStr)] string packageFullName, uint sessionId);
        int StopSessionRedirection([MarshalAs(UnmanagedType.LPWStr)] string packageFullName);
        int GetPackageExecutionState([MarshalAs(UnmanagedType.LPWStr)] string packageFullName,
                                            out PACKAGE_EXECUTION_STATE packageExecutionState);
        int RegisterForPackageStateChanges([MarshalAs(UnmanagedType.LPWStr)] string packageFullName, 
                               IntPtr pPackageExecutionStateChangeNotification, out uint pdwCookie);
        int UnregisterForPackageStateChanges(uint dwCookie);
    }

    public static PACKAGE_EXECUTION_STATE GetPackageExecutionState(string packageFullName)
    {
        PACKAGE_EXECUTION_STATE packageExecutionState = PACKAGE_EXECUTION_STATE.PES_UNKNOWN;
        PackageDebugSettings settings = new PackageDebugSettings();
        IPackageDebugSettings settings2 = (IPackageDebugSettings)settings;
        try
        {
            if (settings2.GetPackageExecutionState(packageFullName, out packageExecutionState) != 0)
            {
                System.Windows.MessageBox.Show("Failed to get package execution state.", "GetPackageExecutionState");
            }
        }
        catch (Exception ex)
        {
            System.Windows.MessageBox.Show(ex.Message, "GetPackageExecutionState");
        }
        return packageExecutionState;
    }
}

And from the application you can just call the GetPackageExecutionState passing the Package Full Name

private void GetAppStatus_Click(object sender, RoutedEventArgs e)
{
    var btn = (System.Windows.Controls.Button)sender;
    var product = btn.Tag as ProductInfo;
    var status = PackageStatusHelper.GetPackageExecutionState(product.PackageFullName);

    switch (status)
    {
        case PackageStatusHelper.PACKAGE_EXECUTION_STATE.PES_RUNNING:
            btn.Foreground = new SolidColorBrush(Colors.Green);
            btn.Content = "Running";
            break;
        case PackageStatusHelper.PACKAGE_EXECUTION_STATE.PES_SUSPENDED:
            btn.Foreground = new SolidColorBrush(Colors.Orange);
            btn.Content = "Suspended";
            break;
        case PackageStatusHelper.PACKAGE_EXECUTION_STATE.PES_TERMINATED:
            btn.Foreground = new SolidColorBrush(Colors.Red);
            btn.Content = "Terminated";
            break;
        default:
            btn.Foreground = new SolidColorBrush(Colors.Gray);
            btn.Content = "Unkown";
            break;
    }
}

Download Demo Project

Enjoy

Windows App Cert Kit Failed - The bytecode generation test detected the following errors

shair — Thu, 07 Feb 2013 06:48:39 GMT

In the past couple of weeks I’ve worked on Cordova (PhoneGap) application for Windows 8, just before we intent to publish it to the store I’ve encountered a problem – “bytecode generation test detected“.

To give your app the best chance of getting certified you should run the some tests, beside checking for bugs and making sure your application works as expected you should use the App Cert Kit - Windows 8 apps must use the new Windows App Certification Kit to become certified and eligible for sale in the Windows Store

“Windows 8 App Cert Kit”

The Windows App Certification Kit (ACK) is used to validate compliance with certification requirements, and replaces the Windows Software Logo Kit (WSLK) used for validation in the Windows 7 Software Logo program. Desktop, desktop device, and Windows Store apps can be certified; however, plug-in, ActiveX, and other web apps cannot be certified. The Windows ACK is included in the Windows Software Development Kit (SDK) and the Windows SDK for Windows Store apps.

Looking at the How to fix section didn’t help me to understand the problem, but after couple of minutes exploring this I found out that the main reason for those errors is not JavaScript Syntax Errors but Encoding. The reason I know this is not a JavaScript Syntax problem is because some CSS files was also in that list and of course Visual Studio didn’t said anything about Syntax Errors.

So just open the files maintained in the error report using notepad (or other editor support Save + Encoding)

Click on Save As and make sure to select “UTF-8” in the encoding box.

Once you finished going over all the problematic files rerun the App Cert Kit and those errors should disappear.

Enjoy

WinRT Toast Notification From Desktop Application

shair — Wed, 30 Jan 2013 18:33:04 GMT

The post title maintained Toast Notification but after reading this post we'll be able to perform API calls to WinRT from your Desktop application.

As you know WinRT exposing API’s for three developer languages: C#, C++ and JavaScript, this means that from each language you’ll be able to perform WinRT calls. The idea is based on Windows Metadata File (winmd) that expose those APIs that can be consumed across a variety of technologies and languages.

Download Demo Project

So why not using those calls from a desktop application? for example one of the great features of Windows 8 is Toast Notifications, Toast is a super cool replacement for Message box dialog that block your screen and can be very enjoying…

A toast notification is a transient message to the user that contains relevant, time-sensitive information and provides quick access to related content in an app. It can appear whether you are in another app, the Start screen, the lock screen, or on the desktop. Toasts should be viewed as an invitation to return to your app to follow up on something of interest. Toast notifications are an optional part of the app experience and are intended to be raised only when your app is not the active foreground app.

let’s say that we want to send Toast from your Desktop application instead of displaying annoying message boxes, let’s see how you can do it.

Step 1: Getting Started With Windows.winmd

Let’s start with empty WPF application, let’s try to load Windows.winmd file located here:

C:\Program Files (x86)\Windows Kits\8.0\References\CommonConfiguration\Neutral\Windows.winmd

You’ll receive below error message saying this file isn't compatible with your current project.

You need to edit your csproj file and add TargetPlatformVersion element.

Locate the PropertyGroup and add additional element : <TargetPlatformVersion>8.0</TargetPlatformVersion>

<?xml version="1.0" encoding="utf-8"?>
<Project ToolsVersion="4.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
  <Import Project="$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props" Condition="Exists('$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props')" />
  <PropertyGroup>
    <Configuration Condition=" '$(Configuration)' == '' ">Debug</Configuration>
    <Platform Condition=" '$(Platform)' == '' ">AnyCPU</Platform>
    <ProjectGuid>{20DAA4E0-DE45-4FB6-8650-44FFDBA78F25}</ProjectGuid>
    <OutputType>WinExe</OutputType>
    <AppDesignerFolder>Properties</AppDesignerFolder>
    <RootNamespace>DesktopAppNotificationDemo</RootNamespace>
    <AssemblyName>DesktopAppNotificationDemo</AssemblyName>
    <TargetFrameworkVersion>v4.5</TargetFrameworkVersion>
    <TargetPlatformVersion>8.0</TargetPlatformVersion>
    <FileAlignment>512</FileAlignment>
    <ProjectTypeGuids>{60dc8134-eba5-43b8-bcc9-bb4bc16c2548};{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}</ProjectTypeGuids>
    <WarningLevel>4</WarningLevel>
    <PublishUrl>publish\</PublishUrl>

Now if you try to load Windows.winmd you’ll success, using the Object Browser you can explore the different API’s available in WinRT.

Step 2: API Code Pack

In order to display toasts, a desktop application must have a shortcut on the Start menu. Also, an AppUserModelID must be set on that shortcut.
The shortcut should be created as part of the installer. The following code shows how to create a shortcut and assign an AppUserModelID using Windows APIs.
You must download and include the Windows® API Code Pack for Microsoft® .NET Framework to allow Toast Notification from desktop application.

Windows® API Code Pack for Microsoft® .NET Framework provides a source code library that can be used to access some features of Windows 7 and Windows Vista from managed code. These Windows features are not available to developers today in the .NET Framework.

First thing after the application is loaded you need to make sure the application has a shortcut under Start menu referring to your desktop AppUserModelID.

private const String APP_ID = "Shai Raiten - DesktopAppNotificationDemo";
private bool IsAppLinkExists()
{
    string defaultPath = string.Format(@"{0}\Microsoft\Windows\Start Menu\Programs\{1}.lnk",
        Environment.GetFolderPath(Environment.SpecialFolder.ApplicationData),
        APP_ID);

    return File.Exists(defaultPath) == false ? CreateApplicationShortcut(defaultPath) : true;
}

In case there is no shortcut you’ll need to create one:

private bool CreateApplicationShortcut(string defaultPath)
{
    string exePath = Process.GetCurrentProcess().MainModule.FileName;
    var newShortcut = (IShellLinkW)new CShellLink();

    // Create a shortcut to the exe
    ShellHelpers.ErrorHelper.VerifySucceeded(newShortcut.SetPath(exePath));
    ShellHelpers.ErrorHelper.VerifySucceeded(newShortcut.SetArguments(""));

    // Open the shortcut property store, set the AppUserModelId property
    var newShortcutProperties = (IPropertyStore)newShortcut;

    using (PropVariant appId = new PropVariant(APP_ID))
    {
        ShellHelpers.ErrorHelper.VerifySucceeded(newShortcutProperties.SetValue(SystemProperties.System.AppUserModel.ID, appId));
        ShellHelpers.ErrorHelper.VerifySucceeded(newShortcutProperties.Commit());
    }

    // Commit the shortcut to disk
    var newShortcutSave = (IPersistFile)newShortcut;

    ShellHelpers.ErrorHelper.VerifySucceeded(newShortcutSave.Save(defaultPath, true));
    return true;
}

Step 3: Toast

If you not familiar with Toast under Windows 8 I’ll recommend you to read about the methods and events of ToastNotification class (Windows).

After completing all previous steps creating Toast is a simple task, all you need to do is create new Toast template using ToastNotificationManager and modify the Toast template xml with your data.

private void btnSend_Click(object sender, RoutedEventArgs e)
{
    var toastXml = ToastNotificationManager.GetTemplateContent(ToastTemplateType.ToastImageAndText02);

    var textFields = toastXml.GetElementsByTagName("text");
    textFields[0].AppendChild(toastXml.CreateTextNode(txtTitle.Text));
    textFields[1].AppendChild(toastXml.CreateTextNode(txtDescription.Text));

    String imagePath = "file:///" + System.IO.Path.GetFullPath("me.png");
    XmlNodeList imageElements = toastXml.GetElementsByTagName("image");
    imageElements[0].Attributes.GetNamedItem("src").NodeValue = imagePath;

    ToastNotification toast = new ToastNotification(toastXml);

    if (cal.SelectedDate != null)
        toast.ExpirationTime = cal.SelectedDate;

    // You must specifiy AppUserModelId == APP_ID to send toast notification.
    ToastNotificationManager.CreateToastNotifier(APP_ID).Show(toast);

    lblStatus.Text = "Toast Sent!";
}

Step 4: Toast Events

Toast as we already understand is more than just a MessageBox, you’ll be able to send information to your users and get their response, for example in this demo if the user click on the Toast I’ll like to open the browser to that specific Uri.

All you need to do is register to the Toast events before sending the toast.

toast.Activated += toast_Activated;
toast.Dismissed += toast_Dismissed;
toast.Failed += toast_Failed;

void toast_Failed(ToastNotification sender, ToastFailedEventArgs args)
{
    Dispatcher.Invoke(() =>
    {
        lblStatus.Text = string.Format("Toast Failed - Error Code: {0}", args.ErrorCode.Message);
    });
}

void toast_Dismissed(ToastNotification sender, ToastDismissedEventArgs args)
{
    Dispatcher.Invoke(() =>
    {
        lblStatus.Text = args.Reason.ToString();
    });
}

void toast_Activated(ToastNotification sender, object args)
{
    Dispatcher.Invoke(() =>
    {
        Activate();
        lblStatus.Text = "Toast Activated";
        Process.Start("http://tinyurl.com/shai-rai");
    });
}

Take Notice – You can use more WinRT API’s by adding Windows.winmd to your desktop application.

Download Demo Project

Enjoy

How To: Compress Files In WinRT

shair — Mon, 31 Dec 2012 07:17:43 GMT

Windows Store apps are aligned with PLM philosophy (Only active application will use device resources), and because of this most Windows Store apps needs to save their data locally until the next application execution.

Windows Store apps can also use the Roaming folder to save files and settings that will be sync with the user Windows Live account, when saving settings or files to Roaming folder you need to make sure those files are not too big so Windows 8 will be able to sync the Roaming folder quickly.

One option is to use Compression using:

using System.IO.Compression;

The IO.Compression namespace brings us ZipArchive object for create compressed files, the following example demonstrate how to compress a StorageFile.

using (MemoryStream zipMemoryStream = new MemoryStream())
{
    using (ZipArchive zipArchive = new ZipArchive(zipMemoryStream, ZipArchiveMode.Create))
    {
        try
        {
            byte[] buffer = WindowsRuntimeBufferExtensions.ToArray(await FileIO.ReadBufferAsync(file));
            ZipArchiveEntry entry = zipArchive.CreateEntry(file.Name);
            using (Stream entryStream = entry.Open())
            {
                await entryStream.WriteAsync(buffer, 0, buffer.Length);
            }
        }
        catch (Exception)
        {
            //Handle exception....
        }
    }
}

In the above example uses WindowsRuntimeBufferExtensions - Provides extension methods for operating on Windows Runtime buffers (Windows.Storage.Streams.IBuffer interface).

After we created the compression stream we need to save it to a new Compressed StorageFile:

// Created new file to store compressed files
var compressedFileName = file.Name + ".zip";
StorageFile zipFile = await ApplicationData.Current.RoamingFolder.CreateFileAsync(compressedFileName, CreationCollisionOption.GenerateUniqueName);
using (IRandomAccessStream zipStream = await zipFile.OpenAsync(FileAccessMode.ReadWrite))
{
    // Write compressed data from memory to file
    using (Stream outstream = zipStream.AsStreamForWrite())
    {
        byte[] buffer = zipMemoryStream.ToArray();
        outstream.Write(buffer, 0, buffer.Length);
        outstream.Flush();
        return zipFile;
    }
}

Full Code:

public static async Task<StorageFile> CreateZip(StorageFile file)
{
    using (MemoryStream zipMemoryStream = new MemoryStream())
    {
        using (ZipArchive zipArchive = new ZipArchive(zipMemoryStream, ZipArchiveMode.Create))
        {
            try
            {
                byte[] buffer = WindowsRuntimeBufferExtensions.ToArray(await FileIO.ReadBufferAsync(file));
                ZipArchiveEntry entry = zipArchive.CreateEntry(file.Name);
                using (Stream entryStream = entry.Open())
                {
                    await entryStream.WriteAsync(buffer, 0, buffer.Length);
                }
            }
            catch (Exception)
            {
                //Handle exception....
            }
        }

        // Created new file to store compressed files
        var compressedFileName = file.Name + ".zip";
        StorageFile zipFile = await ApplicationData.Current.TemporaryFolder.CreateFileAsync(compressedFileName, CreationCollisionOption.GenerateUniqueName);
        using (IRandomAccessStream zipStream = await zipFile.OpenAsync(FileAccessMode.ReadWrite))
        {
            // Write compressed data from memory to file
            using (Stream outstream = zipStream.AsStreamForWrite())
            {
                byte[] buffer = zipMemoryStream.ToArray();
                outstream.Write(buffer, 0, buffer.Length);
                outstream.Flush();
                return zipFile;
            }
        }
    }
}

Finally we need to write the OpenZip method to Uncompressed the file

public static async Task<StorageFile> OpenZip(StorageFile compressedFile)
{
    using (MemoryStream zipMemoryStream = new MemoryStream(WindowsRuntimeBufferExtensions.ToArray(await FileIO.ReadBufferAsync(compressedFile))))
    {
        using (ZipArchive zipArchive = new ZipArchive(zipMemoryStream, ZipArchiveMode.Read))
        {
            var file = zipArchive.Entries[0];
            var uncompressedFile = await ApplicationData.Current.TemporaryFolder.CreateFileAsync(file.Name, CreationCollisionOption.ReplaceExisting);
            using (var uncompressedFileStream = await uncompressedFile.OpenStreamForWriteAsync())
            {
                await RandomAccessStream.CopyAsync(file.Open().AsInputStream(), uncompressedFileStream.AsOutputStream());
                await uncompressedFileStream.FlushAsync();
            }
            return uncompressedFile;
        }
    }
}

Task Notice: Doing that for JavaScript Windows Store apps will not be so easy, what you need to do is creating WindowsRuntimeComponent project 
implement the zip functionality there and add a reference to  your JavaScript project.

Enjoy.

How To: Keep Windows 8 Device Screen On While User Away

shair — Thu, 27 Dec 2012 15:43:37 GMT

While working with a customer on GPS system for Windows Store app, an important question raised:

How we can prevent from Windows to turn off the screen due to user inactivity?

Normally, a Windows 8 device will dim the display (and eventually turn it off) to save battery life when the user is away.

Now for our system we need to keep the display on at all times, to do that call requestActive function to notify Windows that the app requires the display to remain on. Windows automatically deactivates your app's active display requests when it is moved off screen, and re-activates them when your app comes back to the foreground. But you can also use API to release the request display by calling the requestRelease function.

var displayRequest = null;

function keepDisplayOn() {
   if displayRequest === null) {  
      displayRequest = new Windows.System.Display.DisplayRequest;
      displayRequest.requestActive();

      //C# – displayRequest = new DisplayRequest();

      //C# – displayRequest.RequestActive();
   }
}


function releaseDisplayOn() {
    if displayRequest != null) {              
        displayRequest.requestRelease();
        displayRequest = null;

        //C# – displayRequest.RequestRelease(); 
     }
}

.csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }

Why Background Audio Isn’t Working?

shair — Thu, 27 Dec 2012 11:59:14 GMT

Using HTML 5 we can play audio very easily in your Windows Store app, all you need to do is setting an audio element specify the object properties and that’s it.

var audioElement= document.createElement('audio'); 
audioElement.setAttribute("id", "audtag"); 
audioElement.setAttribute("controls", "true"); 
audioElement.setAttribute("src", fileToPlay); 
audioElement.setAttribute("autoplay", "true"); 
audioElement.load();

What if you want to keep playing this audio even if the user has switch to another application?

In order to to that you’ll need to use “Background Audio” ability.

First you need to declare the “Background Tasks” in your app package manifest file.

Then you need to add the “msAudioCategory” attribute to the audio element:

audtag.setAttribute("msAudioCategory", "BackgroundCapableMedia");

Now if you run the application you’ll hear the audio playing but once you navigate to another app the audio will stop.

The reason is, you must specify MediaControl event in order to allow Background Audio.

var mediaControl = Windows.Media.MediaControl;  
mediaControl.addEventListener("playpausetogglepressed", function () { }, false); 
mediaControl.addEventListener("playpressed", function () { }, false); 
mediaControl.addEventListener("stoppressed", function () { }, false); 
mediaControl.addEventListener("pausepressed", function () { }, false);

Now if you run your app that audio will keep on playing even if you switch to another application.

Full Code:

var mediaControl = Windows.Media.MediaControl;
// These are necessary to play streams of type 'backgroundCapableMedia'
mediaControl.addEventListener("playpausetogglepressed", function () { }, false);
mediaControl.addEventListener("playpressed", function () { }, false);
mediaControl.addEventListener("stoppressed", function () { }, false);
mediaControl.addEventListener("pausepressed", function () { }, false);

var audtag = document.createElement('audio');
audtag.setAttribute("id", "audtag");
audtag.setAttribute("controls", "false");
audtag.setAttribute("msAudioCategory", "BackgroundCapableMedia");
audtag.setAttribute("src", source);
audtag.setAttribute("autoplay", "true");
audtag.load();

Link To Windows Store App From Web Sites

shair — Tue, 25 Dec 2012 10:29:35 GMT

While working on Windows Store app for a customer he asked me – how I can promote my app on that company web site, I said this is very simple all you need to do is adding a Windows Store protocol link and once the user will click on that link (Only if his using Windows 8), the app page will appear in Windows Store app.

Windows Store protocol link

So, how do I add a link to my Windows Store app?

src or href => ms-windows-store following by the Package Family Name

PDP - Open an app listing page.
Search - Open the Store's updates page.
Updates - Execute a search query and display the results.

Examples

Open Angry Birds	ms-windows-store:PDP?PFN=1ED5AEA5.AngryBirdsSpace_p2gbknwb5d8r2
Search "Action" query	ms-windows-store:Search?Query=Action
Updates	ms-windows-store:Updates

Connect your website to your Windows Store app (Windows)

Another option to promote your Windows Store app from Web Sites is adding specific meta data elements under the head section. – this option will only work on IE 10 Metro app, and not desktop.

Add these two lines of metadata inside the <head> of your html page to make Internet Explorer 10 aware of your app.

Angry Birds Space

<meta name="msApplication-ID" content="8ece2571-91e0-4f2f-b7e5-b0b7944ced2d" />

<meta name="msApplication-PackageFamilyName" content="1ED5AEA5.AngryBirdsSpace_p2gbknwb5d8r2" />

Creating Windows Store App Using PhoneGap (Cordova)

shair — Sun, 02 Dec 2012 10:14:00 GMT

There is new PhoneGap release called – Cordova or PhoneGap 2.2.0 that supports WinRT features, in this post I’ll demonstrate some of the basics of PhoneGap for Windows Store apps.

Download Demo Project

What is PhoneGap?

PhoneGap is a free and open source framework that allows you to create mobile apps using standardized web APIs for the platforms you care about.

This means that using PhoneGap in your Windows Store app can also be used by other Mobile OS such as iOS, Android, Windows Phone 7, Blackberry and more.

Enabling PhoneGap for Windows Store app is very easy, all you need is PhoneGap 2.2.0 library (Download), Visual Studio 2012 and Windows 8 OS.

Getting Started with PhoneGap for WinRT

Download PhoneGap 2.2.0 - http://phonegap.com/download
Create Blank JavaScript project.
Add “cordova-2.2.0.js” JavaScript file to your js folder. (Located in \lib\windows8)
Add reference to cordova js file from default.html page

<script src="/js/cordova-2.2.0.js"></script>

Show MessageDialog

Modify app.onactivated event under default.js file with the following code:

 app.onactivated = function (args) {

        if (args.detail.kind === activation.ActivationKind.launch) {

            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {

                document.addEventListener("deviceready", function () {

                    navigator.notification.alert("Raise 'Windows.UI.Popups.MessageDialog' Using PhoneGap!", null, 
                                                  "Getting Started with PhoneGap for Windows Store App", "It's Working!");

                    var appVer = $("#appVersion").textContent = "Version: " + navigator.appVersion;

                    var appVer = $("#appName").textContent = "Name: " + navigator.appName;

});

            } else {

                // TODO: This application has been reactivated from suspension.

                // Restore application state here.

            args.setPromise(WinJS.UI.processAll());

};

Notice that we are using “navigator” object to call the alert function under notification namespace.

Same for displaying confirmation dialog:

function showConfirm() {

    //Message Content

    navigator.notification.confirm("Do you like PhoneGap for Windows 8?", function (i) {

        var val = "";

        switch (i) {

            case 2:

                val = "No";

                break;

            case 3:

                val = "Maybe";

                break;

            default:

                val = "Yes";

                break;

        $("#confirmResult").textContent = "You clicked '" + val + "'";

        //Title                  //Command Buttons

    }, "PhoneGap for Windows 8", "Yes, No, Maybe");

Camera Capture

Again instead of using CameraCaptureUI you can use getPicture function under navigator.camera namespace.

function showCamera() {

    navigator.camera.getPicture(

        function (data) {

            var img = $('#cameraImg');

            //img.src = "data:image/jpeg;base64," + data;

            img.src = data;

},

        function (e) {

            navigator.notification.alert("Error getting picture");

},

            quality: 50, destinationType:

            Camera.DestinationType.FILE_URI, sourceType: Camera.PictureSourceType.CAMERA

});

Don’t forget to apply “Microphone” & “Webcam” capabilities under package.appmanifest file.

Pick Image From Image Folder

Start Camera is similar to FilePicker except you need to define “PHOTOLIBRARY” as the source instead of “CAMERA”.

function showBrowseImage() {

    navigator.camera.getPicture(

        function (data) {

            var img = $('#cameraImg');

            //img.src = "data:image/jpeg;base64," + data;

            img.src = data;

},

        function (e) {

            navigator.notification.alert("Error getting picture");

},

            quality: 50, destinationType:

            Camera.DestinationType.FILE_URI, sourceType: Camera.PictureSourceType.PHOTOLIBRARY

});

Don’t forget to allow in your package.appmanifest file.

Geo Location

You can also use PhoneGap for accessing device sensors such as Accelerometer, GeoLocation and more.

function showLocation() {

    navigator.geolocation.getCurrentPosition(function (location) {

        $("#locationResult").innerHTML = "Latitude: <strong>" + location.coords.latitude + "</strong><br/>Longitude: <strong>" + location.coords.longitude + "</strong>";

    }, function (err) {

        $("#locationResult").textContent = "Error getting location";

    }, { timeout: 30000, enableHighAccuracy: true });

Don’t forget to allow in your package.appmanifest file.

Download Demo Project

Windows.BackgroundTasks contract or is not installed

shair — Fri, 30 Nov 2012 07:57:48 GMT

Yesterday I did some work on BackgroundTasks (CS) for customer application, while building the structure I faced an unfamiliar error and application crash when the Task was triggered.

I’ve look into Windows Event Log and fond a error related to my application:

Activation of app fcf446e9-4a89-4d56-b3ae-def1bab41ac2_d824bndbbbqn4!App failed with error: This app does not support the contract specified or is not installed. See the Microsoft-Windows-TWinUI/Operational log for additional information.

So where can you find the “Microsoft-Windows-TWinUI/Operational“ log?

Expend “Application and Services Logs” folder, Microsoft –> Windows –> Apps

Now I can see more details message of error:

The app fcf446e9-4a89-4d56-b3ae-def1bab41ac2_d824bndbbbqn4!App is not registered for the Windows.BackgroundTasks contract or is not installed.

First I’ve verified that "ALL APPLICATION PACKAGES" role is present for "Packages" directory in the Local\AppData directory of the current user.

Second I make sure application package manifest declared Background Tasks and set the Task entry point.

Last I check if there is project reference between the Tasks project and my application project.

And I forgot to add reference…

Tasks as isolated from you application but when those Tasks invoked they need reference to the registered application.

Hope this helps.

BackgroundExecutionManager.RequestAccessAsync() Element not found.

shair — Fri, 30 Nov 2012 06:50:00 GMT

Working on Background Task for Windows Store app I faced a annoying issue, while calling:

await BackgroundExecutionManager.RequestAccessAsync();

I’ve received the following error:

The problem was I put BreakPoint before the line, once I’ve removed the breakpoint below that line everything works just fine.

I don’t know why this is happening but this is how I “Solved” the problem.

Enjoy

Visual Studio\TFS 2012 Update 1 is available

shair — Wed, 28 Nov 2012 13:37:00 GMT

In previous post “Visual Studio 2012–News (iPhone, Web Test Management, 260 Limit and more)” I talked about the new Visual Studio 2012 Update 1 and what’s new for Visual Studio and TFS 2012.

So today Microsoft release :

Visual Studio 2012 Update 1 – Download
TFS 2012 Update 1 – Download

Update:

Error when installing TFS 2012 Update 1 - dbo.typ_BuildControllerTableV2 is incompatible with dbo.typ_BuildControllerTable

260 Character Path Limit

Some call this Microsoft “Achilles’ heel” but I’ll not do so far, this is with no doubt a very annoying bug that not once cause me to change and modify entire environments.

This will allow us more flexibility in Source Control usage.

Windows Development

Somasegar’s blog - A big focus area for us when designing Visual Studio 2012 was in enabling developers to build stellar apps for Windows, and that trend continues with Update 1, with which we’ve improved Windows development in a variety of areas. Back in June, we announced we would enable C++ applications to target Windows XP from Visual Studio 2012, and that support is now available as part of Update 1. For Windows Store applications for Windows 8, Visual Studio 2012 Update 1 includes support for both mixed-mode managed/native debugging and for native ARM dump debugging. Update 1 also includes improved diagnostics and testing support for Windows Store apps, such as with a JavaScript memory analysis tool, support for data-driven unit tests, and C++ unit testing enhancements. Additionally, for developers building apps for Windows Phone 8, we’ve enabled code analysis to help improve the quality of their phone apps.

Developer Productivity

Brian Harry - Code Map – Code Map is a super cool new feature in the architecture tools that allows me to incrementally build up an architecture/dependency diagram as I explore code. It makes walking into an existing code base and exploring it WAY easier than it ever has been before. You can incrementally lay out a diagram one element at a time (class, method, etc) as you explore the code. You can “query” to expand the diagram – like adding all derived classes or all referencing methods, etc to incrementally understand the code dependencies.

Additional Reading:

Windows Store App - Resize Image (JavaScript)

shair — Wed, 31 Oct 2012 19:05:21 GMT

In this post I’ll demonstrate how to change picture size using JavaScript while constraining the image proportions.

Resize image functionality can be used in several scenarios in Windows Store app, for example: if your app allow the user to download images from the web you might want to resize the image to reduce space usage. Also if you whish to share this image using Roaming Storage you need to make sure the image size is small enough so the Roaming sync will not failed.

The first steps for this demo is using FileOpenPicker to allow the user to choose what picture he want to resize.

Download Demo Project

Create new JavaScript Navigation app.
Open package.appxmanifest and add “Pictures Library” capability. (We’ll use this later)

Open home.html file located under pages->home and add the following code:

     <div class="preview">

        <div class="btnBrowse">

            <button id="btnBrowse">Pick a Image</button>

        </div>

        <div class="previewImage">

            <img id="previewImage" style="max-height: 400px" src="#" />

        </div>

        <div id="imageDetails"></div>

    </div>

The above code added a button, img and div elements to home.html page, the button will invoke the FileOpenPicker, img element will display the selected image and the imageDetails div will display the image properties.

Open home.js and add the following code jus under the “use strict” statement:

      function $(query) {

          return document.querySelector(query);

      }

      function toDateTime(date) {

          var dateTime = new Date(Date.parse(date));

          if (dateTime.getDate()) {

              var month = dateTime.getMonth() + 1;

              var day = dateTime.getDate();

              var year = dateTime.getFullYear();

              var hours = dateTime.getHours();

              var minutes = dateTime.getMinutes();

              var ampm = hours < 12 ? "am" : "pm";

              return "{0}/{1}/{2} {3}:{4} {5}".format(month, day, year, hours < 10 ? "0" + hours : hours, minutes < 10 ? "0" + minutes : minutes, ampm);

          }

          else

              return date;

      }

      String.prototype.format = function () {

          var str = this;

          for (var i = 0; i < arguments.length; i++) {

              var reg = new RegExp("\\{" + i + "\\}", "gm");

              str = str.replace(reg, arguments[i]);

          }

          return str;

      };

Those functions are helpers for our project.

Under ready function add the following code:

    $("#btnBrowse").addEventListener("click", this.openFilePicker.bind(this), false);

We’re adding event listener for click event on “btnBrowse” button, now let implement the FileOpenPicker.

Add the following code under the close statement of ready function:

    selectedImage:null,

    openFilePicker: function () {

        var that = this;

        // Create the picker object and set options

        var fp = Windows.Storage.Pickers.FileOpenPicker();

        // Users expect to have a filtered view of their folders depending on the scenario.

        // For example, when choosing a documents folder, restrict the filetypes to documents for your application.

        fp.fileTypeFilter.replaceAll([".png", ".bmp", ".jpg", ".jpeg"]);

        fp.suggestedStartLocation = Windows.Storage.KnownFolders.picturesLibrary;

        fp.commitButtonText = "Select";

        fp.viewMode = Windows.Storage.Pickers.PickerViewMode.thumbnail;

        // Open the picker for the user to pick a file

        fp.pickSingleFileAsync().done(function (file) {

            if (file != null) {

                that.selectedImage = file;

                $("#previewImage").src = URL.createObjectURL(file, { oneTimeOnly: true });

                file.properties.getImagePropertiesAsync().then(function (imgProp) {

                    $("#imageDetails").innerHTML = "Width: {0}<br/>Height: {1}<br/>Date Taken: " +

                        "{2}<br/>Camera Model: {3}".format(

                        imgProp.width, imgProp.height, toDateTime(imgProp.dateTaken), imgProp.cameraModel);

                    $("#width").value = imgProp.width;

                    $("#height").value = imgProp.height;

                    $("#btnResize").disabled = false;

                });

            }

            else {

                $("#width").textContent = 0;

                $("#height").textContent = 0;

                $("#btnResize").disabled = true;

            }

        });

    },

Once you click on the “Pick a Image” button the file picker dialog will appear allowing you to select a single image. As pickSingleFileAsync return a promise, after the FileOpenPicker dialog is closed we received the file you pick.
First we assign the file to selectedImage object, using URL.createObjectURL we transform the file into blob and assign to the image.src property and finally we call – getImagePropertiesAsync function to retrieve image properties so we can display them on the html page.

When if you run the application you can pick and image using the “Pick a Image” button and the result should be like that:

Open home.html page and add the following code under the preview div element:

    <div class="resizeOptions">

        <div>Max Width:

            <input type="number" id="width" />

        </div>

        <div>Max Height:

            <input type="number" id="height" />

        </div>

        <div>

            <button id="btnResize" disabled="disabled">Resize Image</button>

        </div>

    </div>

We add two input elements allowing you to define the desire size of the image and a button element to invoke the resize function.

Open home.js and add the following code under the $("#btnBrowse").addEventListener statement.

    $("#btnResize").addEventListener("click", this.resizeImage.bind(this), false);

We’re adding event listener for click event on “btnResize” button, now let implement the resizeImage function.

We don’t want to change the original image in our case so the resizeImage will open the FileSavePicker allowing the user to choose where he want to save the resized image.

    resizeImage: function () {

        var that = this;

        var width = $("#width").value != "" ? parseInt($("#width").value) : 0;

        var height = $("#height").value != "" ? parseInt($("#height").value) : 0;

        if (width === 0 || height === 0) {

            var msg = new Windows.UI.Popups.MessageDialog("Please enter width and height values");

            msg.showAsync().done("");

            return;

        }

        var fs = new Windows.Storage.Pickers.FileSavePicker();

        fs.suggestedStartLocation = Windows.Storage.KnownFolders.picturesLibrary;

        fs.defaultFileExtension = this.selectedImage.fileType;

        fs.fileTypeChoices.insert(this.selectedImage.fileType, [this.selectedImage.fileType]);

        fs.suggestedFileName = "Resize Demo-" + this.selectedImage.name;

        fs.pickSaveFileAsync().done(function (targetFile) {

            //copy selected image to new file

            that.selectedImage.copyAndReplaceAsync(targetFile).then(function () {

                //call resize function on the new file.

                that._resize(width, height, targetFile).done(function () {

                    var msg = new Windows.UI.Popups.MessageDialog("File Resize Completed!");

                    msg.showAsync().done("");

                });

            });

        });

    },

The above code check is the input elements for width and height are not empty and then open the FileSavePicker, once the user choose a target file we’ll use the copyAndReplaceAsync function to copy the selected image to the target file the user has selected, finally we call the _resize function passing the width, height and the copied image object.

Now to the final part, let’s implement the resize function, add the following code after resizeImage close statement:

    _resize: function (maxWidth, maxHeight, imgFile) {

        var originalWidth;

        var originalHeight;

        var encoder;

        var fileStream;

        var count = 0;

        var that = this;

        return new WinJS.Promise(function (complete) {

            var memStream = new Windows.Storage.Streams.InMemoryRandomAccessStream();

            imgFile.openAsync(Windows.Storage.FileAccessMode.readWrite).then(function (stream) {

                fileStream = stream;

                return Windows.Graphics.Imaging.BitmapDecoder.createAsync(fileStream);

            }).then(function (decoder) {

                that._scale(decoder, memStream, maxWidth, maxHeight).then(function () {

                    // Overwrite the contents of the file with the updated image stream.

                    memStream.seek(0);

                    fileStream.seek(0);

                    fileStream.size = 0;

                    return Windows.Storage.Streams.RandomAccessStream.copyAsync(memStream, fileStream);

                })

                .done(function () {

                    // Finally, close each stream to release any locks.

                    memStream && memStream.close();

                    fileStream && fileStream.close();

                });

            }

            );

        });

    }

the _resize function calling the openAsync function on the target file to obtaint he file stream then creating stream decoder using Windows.Graphics.Imaging.BitmapDecoder. Once we have the image decoder we can scale the image (I’ll talk about that in the next code example), after the scale function has completed we copy the memoryStream (where we did the scale changes) into the fileStream (target file) after the copy is complete we close both streams. it’s important to close the streams otherwise those streams are locked for other processes. (unless you open the stream only for read).

The last part and the most important one is _scale function, this function will change the image size based on use max-height and max-width while keeping the image proportion.

    _scale: function (decoder, memStream, maxWidth, maxHeight) {

        return new WinJS.Promise(function (complete, error) {

            var originalHeight = decoder.pixelHeight;

            var originalWidth = decoder.pixelWidth;

            if (originalHeight <= maxHeight || originalWidth <= maxWidth)

                complete();

            else {

                Windows.Graphics.Imaging.BitmapEncoder.createForTranscodingAsync(memStream, decoder).then(function (_encoder) {

                    var encoder = _encoder;

                    var nPercent = 0;

                    var nPercentW = 0;

                    var nPercentH = 0;

                    nPercentW = (maxWidth / originalWidth);

                    nPercentH = (maxHeight / originalHeight);

                    if (nPercentH < nPercentW)

                        nPercent = nPercentH;

                    else

                        nPercent = nPercentW;

                    var destWidth = (originalWidth * nPercent);

                    var destHeight = (originalHeight * nPercent);

                    encoder.bitmapTransform.scaledWidth = destWidth;

                    encoder.bitmapTransform.scaledHeight = destHeight;

                    // Attempt to generate a new thumbnail to reflect any rotation operation.

                    encoder.isThumbnailGenerated = true;

                    encoder.flushAsync().done(function () {

                        complete();

                    });

                })

            }

        })

    },

First we need to check the max-height or max-width are not smaller or equal to the original size.Before changing the image size we’ll use “createForTranscodingAsync” function - creates a new BitmapEncoder and initializes it using data from an existing BitmapDecoder. We do some math to calculate the new image size and to set the new size we need to call the encoder and change the scaleWidth and scaleHeight properties located under bitmapTransform object.

Full Code:

(

&#

&#

&#

&#

&#

&#

&#

&#

&#

&#

&#

&#

&#

&#

ng-right:4px;max-height:200px;width:97.5%;background-color:#f4f4f4;"> 4;"> style="color:#0000ff;">function () { "use strict"; 160; function $(query) { return document.querySelector(query); } 160; function toDateTime(date) { var dateTime = new Date(Date.parse(date)); if (dateTime.getDate()) { var month = dateTime.getMonth() + 1; var day = dateTime.getDate(); var year = dateTime.getFullYear(); var hours = dateTime.getHours(); var minutes = dateTime.getMinutes(); var ampm = hours < 12 ? "am" : "pm"; return "{0}/{1}/{2} {3}:{4} {5}".format(month, day, year, hours < 10 ? "0" + hours : hours, minutes < 10 ? "0" + minutes : minutes, ampm); } else return date; } 160; String.prototype.format = function () { var str = this; for (var i = 0; i < arguments.length; i++) { var reg = new RegExp("\\{" + i + "\\}", "gm"); str = str.replace(reg, arguments[i]); } return str; }; 160; var ERR_OPERATION_UNSUPPORTED = -2003292287; // The operation is unsupported 160; WinJS.UI.Pages.define("/pages/home/home.html", { // This function is called whenever a user navigates to this page. It // populates the page elements with the app's data. ready: function (element, options) { $("#btnBrowse").addEventListener("click", this.openFilePicker.bind(this), false); $("#btnResize").addEventListener("click", this.resizeImage.bind(this), false); }, selectedImage: null, openFilePicker: function () { var that = this; // Create the picker object and set options var fp = Windows.Storage.Pickers.FileOpenPicker(); // Users expect to have a filtered view of their folders depending on the scenario. // For example, when choosing a documents folder, restrict the filetypes to documents for your application. fp.fileTypeFilter.replaceAll([".png", ".bmp", ".jpg", ".jpeg"]); fp.suggestedStartLocation = Windows.Storage.KnownFolders.picturesLibrary; fp.commitButtonText = "Select"; fp.viewMode = Windows.Storage.Pickers.PickerViewMode.thumbnail; // Open the picker for the user to pick a file fp.pickSingleFileAsync().done(function (file) { if (file != null) { that.selectedImage = file; $("#previewImage").src = URL.createObjectURL(file, { oneTimeOnly: true }); file.properties.getImagePropertiesAsync().then(function (imgProp) { $("#imageDetails").innerHTML = "Width: {0}<br/>Height: {1}<br/>Date Taken: {2}<br/>Camera Model: {3}".format( imgProp.width, imgProp.height, toDateTime(imgProp.dateTaken), imgProp.cameraModel); 160; $("#width").value = imgProp.width; $("#height").value = imgProp.height; $("#btnResize").disabled = false; }); } else { $("#width").value = 0; $("#height").value = 0; $("#btnResize").disabled = true; } }); }, resizeImage: function () { var that = this; var width = $("#width").value != "" ? parseInt($("#width").value) : 0; var height = $("#height").value != "" ? parseInt($("#height").value) : 0; 160; if (width === 0 || height === 0) { var msg = new Windows.UI.Popups.MessageDialog("Please enter width and height values"); msg.showAsync().done(""); return; } 160; var fs = new Windows.Storage.Pickers.FileSavePicker(); fs.suggestedStartLocation = Windows.Storage.KnownFolders.picturesLibrary; fs.defaultFileExtension = this.selectedImage.fileType; fs.fileTypeChoices.insert(this.selectedImage.fileType, [this.selectedImage.fileType]); fs.suggestedFileName = "Resize Demo-" + this.selectedImage.name; fs.pickSaveFileAsync().done(function (targetFile) { //copy selected image to new file that.selectedImage.copyAndReplaceAsync(targetFile).then(function () { //call resize function on the new file. that._resize(width, height, targetFile).done(function () { var msg = new Windows.UI.Popups.MessageDialog("File Resize Completed!"); msg.showAsync().done(""); }); 160; }); }); }, 160; _scale: function (decoder, memStream, maxWidth, maxHeight) { return new WinJS.Promise(function (complete, error) { var originalHeight = decoder.pixelHeight; var originalWidth = decoder.pixelWidth; if (originalHeight <= maxHeight || originalWidth <= maxWidth) complete(); else { Windows.Graphics.Imaging.BitmapEncoder.createForTranscodingAsync(memStream, decoder).then(function (_encoder) { var encoder = _encoder; 160; var nPercent = 0; var nPercentW = 0; var nPercentH = 0; 160; nPercentW = (maxWidth / originalWidth); nPercentH = (maxHeight / originalHeight); if (nPercentH < nPercentW) nPercent = nPercentH; else nPercent = nPercentW; 160; var destWidth = (originalWidth * nPercent); var destHeight = (originalHeight * nPercent); encoder.bitmapTransform.scaledWidth = destWidth; encoder.bitmapTransform.scaledHeight = destHeight; 160; // Attempt to generate a new thumbnail to reflect any rotation operation. encoder.isThumbnailGenerated = true; encoder.flushAsync().done(function () { complete(); }); }) } }) }, _resize: function (maxWidth, maxHeight, imgFile) { var originalWidth; var originalHeight; var encoder; var fileStream; var count = 0; var that = this; return new WinJS.Promise(function (complete) { var memStream = new Windows.Storage.Streams.InMemoryRandomAccessStream(); imgFile.openAsync(Windows.Storage.FileAccessMode.readWrite).then(function (stream) { fileStream = stream; return Windows.Graphics.Imaging.BitmapDecoder.createAsync(fileStream); }).then(function (decoder) { that._scale(decoder, memStream, maxWidth, maxHeight).then(function () { // Overwrite the contents of the file with the updated image stream. memStream.seek(0); fileStream.seek(0); fileStream.size = 0; return Windows.Storage.Streams.RandomAccessStream.copyAsync(memStream, fileStream); }) .done(function () { // Finally, close each stream to release any locks. memStream && memStream.close(); fileStream && fileStream.close(); }); } ); }); } }); })();

Download Demo Project

Windows 8 Metro – Code Behind

shair — Tue, 09 Oct 2012 23:28:16 GMT

When I develop Windows 8 Metro App I usually use Windows Store app samples to see code examples features but sometimes you want more…

For example I really want to know how “Mail” metro app works: How getting access to other email account, sending email and more.

So in order to to that I had to gain access to “Mail” metro app…

Let’s start the Hack:

Problem: WindowsApps folder is blocked and by default you can’t open this folder.

Solution: First open Windows Explorer and navigate into “C:\Program Files\”, locate “WindowsApps” folder. (If you can’t see this folder make sure your you can see Hidden Files and Folders - How to Find Hidden Files and Folders in Windows).

Right click on “WindowsApps” and select “Properties”

Move to “Security” tab and click on the “Advanced” button.

Click on the “Change” button.

Add your user and click “OK”.

Now when we try to open “WindowsApps” folder we can get inside and browse the folder inside it.

To get “Mail” metro app code let’s get inside “microsoft.windowscommunicationsapps” folder and open “ModernMail” folder, there you can find the entire Code.

Enjoy

Using Live SDK in Windows 8 – JavaScript

shair — Sun, 30 Sep 2012 12:34:07 GMT

In my previous post I talked about Using Live SDK in Windows 8 – C#, now it’s time to see how you can do the same things using JS.

Live SDK provides a set of controls and APIs that enable applications to integrate single sign-on (SSO) with Microsoft accounts and access information from SkyDrive, Hotmail, and Windows Live Messenger on Windows Phone and Windows 8.

Live SDK support several platforms such as: iOS, Android and of course Windows Phone and Windows 8 applications using C# and JS.

In this demo I’ll show how to use Live SDK with Windows 8, so in order to follow this article you need to have the following installed:

Windows 8 – Download
Live SDK -Live SDK downloads

Also you can assist Interactive Live SDK

Download Demo Project

Step 1: Building Our App

I’ve create a JS Blank App called – “LiveSdkDemo_JS”, and add a reference to “Live SDK” we just installed.

Step 2: Adding a “Sign In” Button

Before we can do anything with Live SDK we first need to “Sign In” using our Window Live ID. To do that we need to add the “SignInButton”.

I’ve created a html element called – “signin”, in JS we need to populate the element from code.

<p id="signin"></p>

Now just before we can populate the “signin” element with Live SDK button we need to call WL.init with the Scopes for this session, this function initializes the JavaScript library. An application must call this function before making other function calls to the library except for subscribing/unsubscribing to events.

WL.Event.subscribe("auth.login", onLoginComplete);
WL.Event.subscribe("auth.sessionChange", onSessionChange);
WL.init({ scope: ["wl.signin", "wl.basic", "wl.skydrive_update"] });
WL.ui({
    name: "signin",
    element: "signin"
});

Scopes:

Before your app makes requests of the Live Connect APIs to work with Live Connect info, in most cases you must get permission from the user to access that info or to create new objects on behalf of the user. In the Live Connect APIs, this permission is called a scope. Each scope grants a different permission level.

Live SDK Scope Types

In this demo I’m using three Scopes:

wl.signin - Single sign-in behavior. With single sign-in, users who are already signed in to Live Connect are also signed in to your website.
wl.basic - Read access to a user's basic profile info. Also enables read access to a user's list of contacts.
wl.skydrive_update - Read and write access to a user's files stored in SkyDrive.

“onSessionChanged” event this will let us know when we made a successful connection and when we received an Sign In error.

Now let’s run our application and see what’s happens.

You’ll notice that you receive the following error:

"The app is not configured correctly to use Live Connect services. To configure your app, please follow the instructions on http://go.microsoft.com/fwlink/?LinkId=220871."

The reason is before we begin building this app, you need to register it with Windows Live. You can register your app by going to the application management site.

Then you have two steps in order to register your application:

1. You need to enter the application name and publisher (you can find it in “Package.appxmanifest” located under project solution).

After you click “I accept”, we’ll receive a new “Package name” and Client secret (I’ll talk about this in later posts).

For now all you need to do is copying the “Package name” from the site and adding it instead the current in Package.appxmanifest.

Now let’s run the application again, and after you click the “Sign In” button you’ll see this message: (this will only appear one time)

After clicking “Yes” you should see that “Sign In” changed to:

Step 3: Getting User Data

After we made a successful Sign In we can start using Live SDK, the first thing I’ll show is how to get user data from his Live Account.

Using global WL (Windows Live) object we’ll can call “api” function to perform Ajax Requests to LiveSDK REST services. You can always use other Ajax libraries to use LiveSDK REST just call this url passing the access token:

https://apis.live.net/v5.0/me/albums?access_token=ACCESS_TOKEN

path - Required. Contains the path to the REST API object. For information on specifying paths for REST objects, see REST reference.
method - Optional. An HTTP method that specifies the action required for the API call. These actions are standard REST API actions: "COPY", "GET", "MOVE", "PUT", "POST", and "DELETE".
body - Optional. A JSON object that specifies the REST API request body. The body property is used only for "POST" and "PUT" requests.

WL.api("me", function (data) {
    $("#txtStatus").innerHTML = "Full Name:" + data.name +
        "<br/>First Name:" + data.first_name +
        "<br/>Last Name:" + data.last_name +
        "<br/>Profile Link:" + data.link +
        "<br/>Gender:" + data.gender +
        "<br/>Locale:" + data.locale;

    $("#btnBrowse").disabled = false;
});

Add getting my profile picture, same goes here first define the user I want to get his picture and then the string “picture”

WL.api("me/picture", function (data) {
    $("#userImg").src = data.location;
});

Full Code:

function onSessionChange(response) {
    var session = WL.getSession();

    if (!session.error) {
        WL.api("me", function (data) {
            $("#txtStatus").innerHTML = "Full Name:" + data.name +
                "<br/>First Name:" + data.first_name +
                "<br/>Last Name:" + data.last_name +
                "<br/>Profile Link:" + data.link +
                "<br/>Gender:" + data.gender +
                "<br/>Locale:" + data.locale;

            $("#btnBrowse").disabled = false;
        });

        WL.api("me/picture", function (data) {
            $("#userImg").src = data.location;
        });
    }
    else {
        $("#txtStatus").textContent = session.error.message;
    }
}

Accessing a user's public info

There is an exception to the rule that you must get the permission from the user before you can access his or her info: your app can access a user's publicly available info without requesting any scope. Public info includes the user's ID, first and last names, display name, gender, locale, and picture. The user's Messenger friends list is also available if the user has elected to make it public.

For example: I’ve changed “me” to my friend Gil Fink Live Id and here is the result:

Step 4: Uploading File To User Folder

In this part we’ll see how to upload a file to SkyDrive using Live SDK, first I’ve added to more buttons and a progress bar so we can see the upload progress.

The first button for picking a file and the second one for starting the upload process.

Pick a File

Because of SkyDrive file restrictions you can upload any file you want (you basically can but you need to change file extension to txt, doc or any kind of picture extension), so right now I’ve create a File Picker just for text files and word.

function openFile() {
    // Create the picker object and set options
    var openPicker = new Windows.Storage.Pickers.FileOpenPicker();
    openPicker.viewMode = Windows.Storage.Pickers.PickerViewMode.list;
    openPicker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.documentsLibrary;
    // Users expect to have a filtered view of their folders depending on the scenario.
    // For example, when choosing a documents folder, restrict the filetypes to documents for your application.
    openPicker.fileTypeFilter.replaceAll([".txt", ".docs", ".doc"]);

    // Open the picker for the user to pick a file
    openPicker.pickSingleFileAsync().then(function (file) {
        if (file) {
            // Application now has read/write access to the picked file
            _file = file;
            $("#btnStart").disabled = false;
            WinJS.log && WinJS.log("Picked photo: " + file.name, "sample", "status");
        } else {
            _file = undefined;
            $("#btnStart").disabled = true;
            WinJS.log && WinJS.log("Operation cancelled.", "sample", "status");
        }
    });
}

Start Upload

To Upload file using Live SDK we’ll use - WL.backgroundUpload method.

path - Required. The path to the file to upload.
file_name - Optional. The name of the file to upload.
file_input (StorageFile) - Optional. The file input object to read the file from.
stream_input - Optional. The file input stream to read the file from.
overwrite - Optional. Indicates whether the uploaded file should overwrite an existing copy. Specify true or "true" to overwrite, false or "false" to not overwrite and for theWL.backgroundUpload method call to fail, or "rename" to not overwrite and enable SkyDrive to assign a new name to the uploaded file.

backgroundUpload returns a Promise so we can implement code for onError and onProgress (to update the progress bar)

WL.backgroundUpload({
    path: "me/skydrive",
    file_name: _file.fileName,
    file_input: _file,
    overwrite: "true" //rename etc...
}).then(function (args) {
    $("#txtStatus").textContent = "Upload Completed!";

    toggle(true);
},
function (err) {
    $("#txtStatus").textContent = e.response;
    $("#pb").className = "hidden";
},
function (e) {
    $("#pb").value = Math.round(e.progressPercentage);
});

Step 5: Get SkyDrive Files

Now before downloading files from SkyDrive you need to know their ID, name is not enough for download using Live SDK, so to makes things simpler let’s first get all files from our SkyDrive. Getting all files using Live SDK will also bring the file ID so we’ll be able to save those files locally.

I’ve added a ListView to our body to present the files

<div id="fileTemplate" data-win-control="WinJS.Binding.Template">
<div class="file">
    <span data-win-bind="textContent: id"></span>
    -
    <span data-win-bind="textContent: type"></span>
    -
    <span data-win-bind="textContent: name"></span>
    -
    <span data-win-bind="textContent: created_time"></span>
</div>

<div id="fileList" data-win-control="WinJS.UI.ListView"
    data-win-options="{ selectionMode: 'single',layout: { type: WinJS.UI.ListLayout}, itemTemplate:select('#fileTemplate')}">
</div>

now all we need to do is using the “api” method passing “me/skydrive/files”, this will return all folder and files under my main folder. Once we recived the files list from the server I’ve converted the response into List and assigned its dataSource to out ListView itemDataSource property.

function getFiles() {
    toggle(false);
    WL.api("me/skydrive/files", function (response) {
        var skyDriveFiles = response.data;
        var dataList = new WinJS.Binding.List(skyDriveFiles);

        var files = $('#fileList').winControl;
        files.itemDataSource = dataList.dataSource;

        toggle(true);
    });
}

Step 6: Download File

Now that we got all file ids we can proceed to downloading them into our machine.

To download a file using Live SDK we’ll use the “backgroundDownload” method almost in the same way we use the “backgroundUpload” method, but is time we need to pass the file id that we want to download and adding “/content” after it.

First let’s get the selected file from the fileList and create new file under Temp folder with the same name.

list.selection.getItems().then(function (selectedFiles) {
    var fileToDownload = selectedFiles[0].data;
    list.selection.clear();
    //Creating new file
    Windows.Storage.ApplicationData.current.temporaryFolder.createFileAsync(fileToDownload.name,
        Windows.Storage.CreationCollisionOption.replaceExisting).then(function (localFile) {

Now that we have new file under temp folder we can start the donwload

//Starting download
                   var properties = { path: fileToDownload.source, file_output: localFile, overwrite: "true" };
                   WL.backgroundDownload(properties).then(function (args) {
                       $("#txtStatus").textContent = "Download Completed! - " + localFile.path;
                       toggle(true);
                   }, function (err) {
                       $("#txtStatus").textContent = e.response;
                       $("#pb").className = "hidden";
                   }, function (progress) {
                       $("#pb").value = Math.round(progress.progressPercentage);
                   });
               });

Download Demo Project

Using Live SDK in Windows 8 – C#

shair — Thu, 27 Sep 2012 15:58:00 GMT

Live SDK support several platforms such as: iOS, Android and of course Windows Phone and Windows 8 applications using C# and JS.

In this demo I’ll show how to use Live SDK with Windows 8, so in order to follow this article you need to have the following installed:

Windows 8 – Download
Live SDK -Live SDK downloads

Also you can assist Interactive Live SDK

Download Demo Project

Step 1: Building Our App

I’ve create a C# Blank App called – “LiveSdkDemo”, and add a reference to “Live SDK” we just installed.

Step 2: Adding a “Sign In” Button

Before we can do anything with Live SDK we first need to “Sign In” using our Window Live ID. To do that we need to add the “SignInButton” control coming with Live SDK.

So I’ve added a using to Microsoft.Live.Controls and add “SignInButton” control, as you can see I’ve added couple more things, the first one is: Scopes:

Before your app makes requests of the Live Connect APIs to work with Live Connect info, in most cases you must get permission from the user to access that info or to create new objects on behalf of the user. In the Live Connect APIs, this permission is called a scope. Each scope grants a different permission level.

Live SDK Scope Types

In this demo I’m using three Scopes:

wl.signin - Single sign-in behavior. With single sign-in, users who are already signed in to Live Connect are also signed in to your website.
wl.basic - Read access to a user's basic profile info. Also enables read access to a user's list of contacts.
wl.skydrive_update - Read and write access to a user's files stored in SkyDrive.

The second one is “SessionChanged” event this will let us know when we made a successful connection and when we received an Sign In error.

I’ve also add a TextBlock to display any errors coming from the SignIn operations.

<Page
    x:Class="LiveSdkDemo.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:LiveSdkDemo"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:live="using:Microsoft.Live.Controls"
    mc:Ignorable="d">

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <live:SignInButton x:Name="btnSignin" Scopes="wl.signin wl.basic wl.skydrive_update" 
                           Branding="Skydrive" SessionChanged="OnSessionChanged" 
                           VerticalAlignment="Top" Width="141" HorizontalAlignment="Left" Margin="100,100,0,0" />
        
        <TextBlock x:Name="txtStatus" HorizontalAlignment="Center" Margin="0" TextWrapping="Wrap" VerticalAlignment="Center" Foreground="Red" FontSize="24"/>
    </Grid>
</Page>

Now to the code behind, we are checking if the connection status is “Connected” then doing nothing (for now) else we’ll display the error message on the screen.

private void OnSessionChanged(object sender, LiveConnectSessionChangedEventArgs e)
{
    if (e.Status == LiveConnectSessionStatus.Connected)
    {
    }
    else
    {
        if (e.Error != null)
        {
            txtStatus.Text = e.Error.Message;

        }
    }
}

Now let’s run our application and see what’s happens.

You’ll notice that you receive the following error:

"The app is not configured correctly to use Live Connect services. To configure your app, please follow the instructions on http://go.microsoft.com/fwlink/?LinkId=220871."

The reason is before we begin building this app, you need to register it with Windows Live. You can register your app by going to the application management site.

Then you have two steps in order to register your application:

1. You need to enter the application name and publisher (you can find it in “Package.appxmanifest” located under project solution).

After you click “I accept”, we’ll receive a new “Package name” and Client secret (I’ll talk about this in later posts).

For now all you need to do is copying the “Package name” from the site and adding it instead the current in Package.appxmanifest.

Now let’s run the application again, and after you click the “Sign In” button you’ll see this message: (this will only appear one time)

After clicking “Yes” you should see that “Sign In” changed to:

Step 3: Getting User Data

After we made a successful Sign In we can start using Live SDK, the first thing I’ll show is how to get user data from his Live Account.

When we create LiveConnectClient object (using our Access Token) we get the following abilities:

GET—Returns a representation of a resource.
POST—Adds a new resource to a collection.
PUT—Updates a resource at the location pointed by the URL or creates a new resource, if it doesn't exist.
DELETE—Deletes a resource.
MOVE—Moves the location of a resource.
COPY—Duplicates a resource.

For now I’ll use GetAsync method passing the string “me” telling Live SDK I want to receive my information.

this.liveClient = new LiveConnectClient(e.Session);

var myData = await this.liveClient.GetAsync("me");
txtStatus.Text = string.Format("Full Name:{0}\nFirst Name:{1}\nLast Name:{2}\nProfile Link:{3}\nGender:{4}\nLocale:{5}", myData.Result["name"],
                                    myData.Result["first_name"],
                                    myData.Result["last_name"],
                                    myData.Result["link"],
                                    myData.Result["gender"],
                                    myData.Result["locale"]);

Add getting my profile picture, same goes here first define the user I want to get his picture and then the string “picture”

var myPic = await this.liveClient.GetAsync("me/picture");
var bmp = new BitmapImage(new Uri(myPic.Result["location"].ToString()));
imgProfile.Source = bmp;

Full Code:

private LiveConnectClient liveClient;
private async void OnSessionChanged(object sender, LiveConnectSessionChangedEventArgs e)
{
    if (e.Status == LiveConnectSessionStatus.Connected)
    {
        this.liveClient = new LiveConnectClient(e.Session);

        var myData = await this.liveClient.GetAsync("me");
        txtStatus.Text = string.Format("Full Name:{0}\nFirst Name:{1}\nLast Name:{2}\nProfile Link:{3}\nGender:{4}\nLocale:{5}", myData.Result["name"],
                                            myData.Result["first_name"],
                                            myData.Result["last_name"],
                                            myData.Result["link"],
                                            myData.Result["gender"],
                                            myData.Result["locale"]);

        var myPic = await this.liveClient.GetAsync("me/picture");
        var bmp = new BitmapImage(new Uri(myPic.Result["location"].ToString()));
        imgProfile.Source = bmp;
    }
    else
    {
        if (e.Error != null)
        {
            txtStatus.Text = e.Error.Message;
        }
    }
}

Accessing a user's public info

There is an exception to the rule that you must get the permission from the user before you can access his or her info: your app can access a user's publicly available info without requesting any scope. Public info includes the user's ID, first and last names, display name, gender, locale, and picture. The user's Messenger friends list is also available if the user has elected to make it public.

For example: I’ve changed “me” to my friend Gil Fink Live Id and here is the result:

Step 4: Uploading File To User Folder

In this part we’ll see how to upload a file to SkyDrive using Live SDK, first I’ve added to more buttons and a progress bar so we can see the upload progress.

The first button for picking a file and the second one for starting the upload process.

Pick a File

private async void btnPickFile_Click(object sender, RoutedEventArgs e)
{
    var fp = new FileOpenPicker();
    fp.ViewMode = PickerViewMode.List;
    fp.SuggestedStartLocation = PickerLocationId.DocumentsLibrary;
    fp.FileTypeFilter.Add(".txt");
    fp.FileTypeFilter.Add(".doc");
    fp.FileTypeFilter.Add(".docx");
    var file = await fp.PickSingleFileAsync();

    if (file != null)
    {
        _file = file;
        txtFilePath.Text = file.Path;
        btnStartUpload.IsEnabled = true;
    }
    else
    {
        _file = null;
        txtFilePath.Text = string.Empty;
        btnStartUpload.IsEnabled = false;
    }
}

Start Upload

Once we got a file to upload we’ll first create new Progress object of type LiveOperationProgress using this object we’ll see the upload progress and assign it to our ProgressBar.

In order to upload the file we need to get the file Stream so just call – OpenStreamForReadAsync to get file stream.

Last we’ll use a built in method “BackgroundUploadAsync”, passing the following parameters:

Upload Location
File Name
File Stream
Overwrite Option
Cancellation Token
Progress Handler

private CancellationTokenSource cts;
private async void btnStartUpload_Click(object sender, RoutedEventArgs e)
{
    if (_file == null) return;

    btnPickFile.IsEnabled = btnStartUpload.IsEnabled = false;
    txtStatus.Text = string.Format("Uploading Backup...");

    this.pb.Value = 0;
    var progressHandler = new Progress<LiveOperationProgress>(
        (progress) => { this.pb.Value = progress.ProgressPercentage; });

    var stream = await _file.OpenStreamForReadAsync();
    this.cts = new CancellationTokenSource();
    LiveOperationResult result =
        await this.liveClient.BackgroundUploadAsync("/me/skydrive", _file.Name, stream.AsInputStream(), OverwriteOption.Overwrite, this.cts.Token, progressHandler);

    txtStatus.Text = string.Format("Upload Completed!");
    btnPickFile.IsEnabled = btnStartUpload.IsEnabled = true;
}

Step 5: Get SkyDrive Files

First I’ve create new object called – SkyDriveFile to save the important data we get from SkyDrive.

public class SkyDriveFile
{
    public string ID { get; set; }
    public string Name { get; set; }
    public string Type { get; set; }
    public string Link { get; set; }
    public DateTime CreationDate { get; set; }

    public SkyDriveFile(dynamic fileData)
    {
        this.Name = fileData.name;
        this.ID = fileData.id;
        this.Link = fileData.link;
        this.Type = fileData.type;
        this.CreationDate = Convert.ToDateTime(fileData.created_time);
    }
}

I’ve added a ListView to our XAML to present the files, now all we need to do is using the GetAsync method passing “me/skydrive/files”, this will return all folder and files under my main folder.

private async void btnGetFiles_Click(object sender, RoutedEventArgs e)
{
    this.cts = new CancellationTokenSource();
    LiveOperationResult Aresult =
            await this.liveClient.GetAsync("me/skydrive/files", this.cts.Token);

    var fileList = new List<SkyDriveFile>();

    dynamic data = Aresult.Result;
    foreach (var dd in data)
    {
        foreach (var d in dd.Value)
        {
            fileList.Add(new SkyDriveFile(d));
        }
    }

    listFiles.ItemsSource = fileList;
}

Step 6: Download File

Now that we got all file ids we can proceed to downloading them into our machine.

To download a file using Live SDK we’ll use the “BackgroundDownloadAsync” method almost in the same way we use the “BackgroundUploadAsync” method, but is time we need to pass the file id that we want to download and adding “/content” after it.

I’ve create a new file under Temp folder and using Stream.CopyToAsync method I’ve copied the stream I got from SkyDrive into the new file I’ve created.

private async void btnDownloadFile_Click(object sender, RoutedEventArgs e)
{
    this.pb.Value = 0;
    var progressHandler = new Progress<LiveOperationProgress>(
        (progress) => { this.pb.Value = progress.ProgressPercentage; });

    var file = listFiles.SelectedItem as SkyDriveFile;

    txtStatus.Text = string.Format("Downloading Backup...");
    LiveDownloadOperationResult result =
        await this.liveClient.BackgroundDownloadAsync(string.Format("{0}/content", file.ID), this.cts.Token, progressHandler);

    var stream = await result.GetRandomAccessStreamAsync();

    var temp = Windows.Storage.ApplicationData.Current.TemporaryFolder;
    //Creating new file under application temp folder.
    var localFile = await temp.CreateFileAsync(file.Name, CreationCollisionOption.GenerateUniqueName);
    //Get new file stream
    var fileStream = await localFile.OpenStreamForWriteAsync();

    //Copying SkyDrive file stream into local file.
    await stream.AsStreamForRead().CopyToAsync(fileStream);
    await fileStream.FlushAsync();
    fileStream.Dispose();
    stream.Dispose();

    txtStatus.Text = string.Format("File Save! - " + localFile.Path);
}

Here is the file under the Temp folder.

Download Demo Project

Enjoy