Code Junkyard

Okay, first of all, this thing has been made way too complicated in the official samples, where they require you to get USB to TTL cables or similar, when all you really need is the product id and vendor id, which you can easily check and hard code on your project.

So, if you are doing some cool IOT project, and have Arduino reading sensors and writing to serial port the results, this is what you need on the Raspberry side to make the magic work:

You need to include two namespaces

using Windows.Devices.SerialCommunication;
using Windows.Devices.Enumeration;

What I did next was based on hint from article by Bereket Godebo, INTERFACING ARDUINO IN THE UNIVERSAL WINDOWS PLATFORM , which is in C++/CX, but I found out that when you connect the Arduino first to normal PC, go to the device manager and from the ports section you open Arduino, go to Details -section, select Hardware Id from the Property combo, and there you have a string which looks something like USB\\VID_2341&PID_0043… where you take the vid and pid and input them as hexa values to the following code:

var aqs = SerialDevice.GetDeviceSelectorFromUsbVidPid(0x2341, 0x0043);
var devices = await DeviceInformation.FindAllAsync(aqs);

First parameter is the vendor id, second is product id. The ids used above are for Arduino Uno, so if you have one, that code should work as it is.

Now the rest of the code needed to read the serial is only as follows:

// member variables
private SerialDevice serialPort;
private DataReader reader;
private CancellationTokenSource ReadCancellationTokenSource;

Put this in your method, where you want to do the reading, as it will find the the arduino, and create serial connection to it, and create loop to call for reading the input:

var aqs = SerialDevice.GetDeviceSelectorFromUsbVidPid(0x2341, 0x0043);
var devices = await DeviceInformation.FindAllAsync(aqs);
            
if (devices.Count > 0)
{
    Debug.WriteLine("Serial devices found...");
    DeviceInformation deviceInfo = devices[0];
    serialPort = await SerialDevice.FromIdAsync(deviceInfo.Id);
    serialPort.ReadTimeout = TimeSpan.FromMilliseconds(1000);
    serialPort.BaudRate = 9600;
    serialPort.Parity = SerialParity.None;
    serialPort.DataBits = 8;
    serialPort.StopBits = SerialStopBitCount.One;

    try
    {
        if (serialPort != null)
        {
            reader = new DataReader(serialPort.InputStream);
            Debug.WriteLine("Reading serial port COM");

            // Read the serial input in loop
            while (true)
            {
                await ReadAsync(ReadCancellationTokenSource.Token);
            }
        }
    }
    catch (TaskCanceledException tex)
    {
        Debug.WriteLine("Reading was cancelled");

        serialPort.Dispose();
    }
    catch (Exception ex)
    {
        Debug.WriteLine(ex.Message);
    }
    finally
    {
        if (reader != null)
        {
            reader.DetachStream();
            reader = null;
        }
    }
}

The actual reading of the serial port happens in this method:

private async Task ReadAsync(CancellationToken cancellationToken)
{
    Task<UInt32> loadAsyncTask;
    uint ReadBufferLength = 1024;

    // Cancel in case it was requested 
    cancellationToken.ThrowIfCancellationRequested();
    reader.InputStreamOptions = InputStreamOptions.Partial;
    loadAsyncTask = reader.LoadAsync(ReadBufferLength).AsTask(cancellationToken);

    // Launch the task and wait 
    UInt32 bytesRead = await loadAsyncTask;
    if (bytesRead > 0)
    {
        string txt = reader.ReadString(bytesRead);
        Debug.WriteLine(txt);
    }
} 

That’s all needed to connect Raspberry to read Arduino through normal USB cable plugged into Arduino, connected to Raspberry.

I did a talk at DotNext conference about this and thought I share the demo here as well. In this demo we’ll create simple Xamarin Forms app for Android and UWP, camera and add the Cognitive Services Emotion and Computer Vision APIs to analyze the photo taken by the camera.

Setup

It all starts with File, New Project… and selecting from under Cross Platform (in Visual Studio 2015) project type Blank App (Xamarin.Forms Portable). Once you have created the project, you can remove the other projects, but leaveyourapp, yourapp.droid and yourapp.UWP for this demo.

Next you’ll need to add three Nuget -packages by selecting the Solution from the Solution Explorer and right clicking it and Manage Nuget packages for solution…. Go to Browse tab, and type Microsoft.ProjectOxford and hit enter.

Now you are presented with a list of all Cognitive Services Nuget packages, but you need to select only two from the list. First select Microsoft.ProjectOxford.Emotion and from the right side panel, click only the main project, not the yourapp.Droid or yourapp.UWP projects. Now select from the list Microsoft.ProjectOxford.Vision and repeat the previous selection.

We need to have the camera access, so we’ll add one more Nuget package, Xam.Plugin.Media (type that to Browse search box like previous) but this time you need to install this to all projects, yourapp, yourapp.droid and yourapp.UWP.

We need to do one more step inside the Nuget package manager. Go to updates tab, empty the field where you typed the package names and find the Xamarin.Forms from the list and update it to the latest version (if you don’t empty the search box, you will not see anything on updates list).

Now we need to ensure that security requirements are in place, you need to open Package.appxmanifest in the yourapp.UWP project and from the Capabilities -tab select Pictures Library and Webcam and save it. There’s one last step we need to do for configuration before we’re ready start coding, and that is to include the UWP version to build (it’s not by default, which is weird!). On the toolbar select the Debug dropdown and Configuration Manager from the list. Make sure that Build and Deploy options are selected for yourapp.UWP project.

Next step is to get the keys to use to authenticate your app with Cognitive Services. Open the link Cognitive services subscription and login with your Microsoft account to request keys for Computer Vision and Emotion.

Code

We’ll implement a simple UI with a button to snap a photo and send it to Cognitive services and image to show the image from the camera. We’ll implement all this code within the app.cs so it will run on all platforms without need for any platform specific code. For the first step we’ll add the required using statements to the beginning of the file:

using Microsoft.ProjectOxford.Emotion;
using Microsoft.ProjectOxford.Vision;
using Plugin.Media;
using System.Diagnostics;

Next we’ll add the following member variables inside your app -class:

string key = "YOUR_EMOTION_API_KEY", key2 = "YOUR_COMPUTER_VISION_KEY";

Now copy your new key values inside to those variables from the webpage and you’re all set to start calling Cognitive services.

Then we need to add the following member variables under the key -variable that you just added in previous step:

Image image = new Image();
StackLayout layout;

The image is for showing the camera photo and layout is the forms base layout control, which will hold all the controls for the app.

Inside the app.cs go to the public App() -constructor and delete everything else but leave only the

MainPage = new NavigationPage(content);

Now we add the UI for the app just above that Mainpage -line like this:

// The root page of your application
layout = new StackLayout
{
    BackgroundColor = Xamarin.Forms.Color.Gray
};
var button = new Button
{
    HorizontalOptions = LayoutOptions.Center,
    Text = "photo"
};
button.Clicked += Button_Clicked;
layout.Children.Add(button);
layout.Children.Add(image);
var content = new ContentPage
{
    Content = layout
};

We set the background color ourselves as Android is using by default dark theme and UWP light theme, so the text will be visible. Next we create a button in the middle of the screen and add event handler for it, and lastly we add image and button controls to the screen layout.

Now we are ready to take the photo, and call the cognitive services with our photo. We’ll add the button click handler where we do all this by adding this method:

private async void Button_Clicked(object sender, EventArgs e)
{
    // Camera magic
    await CrossMedia.Current.Initialize();

    if (!CrossMedia.Current.IsCameraAvailable || !CrossMedia.Current.IsTakePhotoSupported)
    {
        return;
    }

var mediaOptions = new Plugin.Media.Abstractions.StoreCameraMediaOptions
{
    CompressionQuality = 100,
    PhotoSize = PhotoSize.Full,
    Directory = "Faces",
    Name = $"{DateTime.UtcNow}.jpg"
};
var file = await CrossMedia.Current.TakePhotoAsync(mediaOptions);
}

The first line is initializing the camera function, then we’ll check there is a camera on the device which can take a photo before continuing. The camera options are set so it knows where to save the images and using what filename (we use current date+time). Last line opens the platform specific camera launcher and returns the file from there which includes the photo which the user took.

Now we’re ready to send this image for analysis on the cloud. Add the following code in the end of Button_Clicked -method:

if (file != null)
{
    image.Source = ImageSource.FromFile(file.Path);
    var emotionClient = new EmotionServiceClient(key);
    var imageStream = file.GetStream();

    // Emotion API
    var emotion = await emotionClient.RecognizeAsync(imageStream);
    Debug.WriteLine($"Anger: {emotion[0].Scores.Anger : #0.##%}");
    Debug.WriteLine($"Contempt: {emotion[0].Scores.Contempt: #0.##%}");
    Debug.WriteLine($"Disgust: {emotion[0].Scores.Disgust: #0.##%}");
    Debug.WriteLine($"Fear: {emotion[0].Scores.Fear: #0.##%}");
    Debug.WriteLine($"Happiness: {emotion[0].Scores.Happiness: #0.##%}");
    Debug.WriteLine($"Neutral: {emotion[0].Scores.Neutral: #0.##%}");
    Debug.WriteLine($"Sadness: {emotion[0].Scores.Sadness: #0.##%}");
    Debug.WriteLine($"Surprise: {emotion[0].Scores.Surprise: #0.##%}");

    // Computer Vision
    var imageStream2 = file.GetStream();
    var visionClient = new VisionServiceClient(key2);
    VisualFeature[] visualFeats = new VisualFeature[]
    {
        VisualFeature.Description,
        VisualFeature.Faces
    };

    var analysis = await visionClient.AnalyzeImageAsync(imageStream2, visualFeats);
    Debug.WriteLine($"{analysis.Faces[0].Gender}, age {analysis.Faces[0].Age}");
    Debug.WriteLine(analysis.Description.Captions[0].Text);
    foreach (var tag in analysis.Description.Tags)
        Debug.WriteLine(tag);
}

On the code above we’ll set first the image control to show the image we captured. For the next step we use the key we requested earlier to open connection to the Emotion api service in the cloud, and then get stream of the image which we send to the API for analysis. Next you should check in real code that you actually got results, but here we assume it worked and just dump output to the console, formatting the results in percentage numbers.

In the Computer Vision -section of the code we need to get another stream as the previous call closed the earlier stream, and then set the visual features which we want to analyze from the picture. There are more options available, but more you ask, the slower it is, so we just want to get Description of the image and faces of the image this time. We call the AnalyzeImageSync with the file stream and visual feature request and again assume we get results, and dump them to the output console inside Visual Studio.

That was pretty easy to implement, but was a bit tricky for a beginner so I thought this would be useful guide for someone. Hope you enjoyed and let me know if you did or didn’t!

I needed to create a demo showing the most simple way to get some sensor data to IOT Hub and I thought sharing the code might be helpful to someone else as well. This app is divided to two parts, first part handling the sensor and second part connecting to IOT Hub.

First we start by creating a new empty UWP app, you can give whatever name you want to it. Because Texas Instrument SensorTag is a bluetooth device, we’ll first initialize the bluetooth connection bits (please note that you need to manually pair the Sensortag in the Windows 10 settings, we’re only dealing here with the code which handles paired devices).

First open the Package.appxmanifest, and in Capabilities tab tick the Bluetooth. Open your Mainpage.xaml.cs file and add the following namespaces:

using Windows.Devices.Bluetooth;
using Windows.Devices.Enumeration;
using Windows.Devices.Bluetooth.GenericAttributeProfile;
using Windows.Storage.Streams;
using Windows.ApplicationModel.Core

We will be needing couple of class members, so let’s add this now:

private BluetoothLEDevice tagDevice;
private GattDeviceService gattDevice;

Next we add the code to find the paired SensorTag device. I placed this code in Mainpage_Loaded override, but you can find more suitable place for it in your code:

foreach (var info in await DeviceInformation.FindAllAsync(BluetoothLEDevice.GetDeviceSelector()))
{
    BluetoothLEDevice bleDevice = await BluetoothLEDevice.FromIdAsync(info.Id);
    if (bleDevice.Name.ToLower().Contains("sensortag"))
    {
        tagDevice = bleDevice;
        foreach (var serv in tagDevice.GattServices)
        {
            if (serv.Uuid.ToString() == "f000aa00-0451-4000-b000-000000000000")
            {
                gattDevice = serv;
                break;
            }
        }
        break;
    }
}

The code above first goes through all the BLE devices connected, and then checks for each of them if they have “sensortag” somewhere in their name. This probably finds also first gen sensortags, but you can always make it more specific if needed. After that we’re looking for a certain service with GattService id, which in this case is id for temperature sensor. Sensortag supports other ids/sensors as well, so you can always add more servies, and make a list of the gattDevice instead.

Next step is to start reading the Sensortag itself, and it can be done with the following code:

if (tagDevice != null && gattDevice != null)
{
    // Test connection
    Guid configuration = Guid.Parse("f000aa02-0451-4000-b000-000000000000"); // temperature profile
    var configurationCharacteristics = gattDevice.GetCharacteristics(configuration).First();

    GattCommunicationStatus status = await configurationCharacteristics.WriteValueAsync((new byte[] { 1 }).AsBuffer());

    if (status != GattCommunicationStatus.Success)
    {
        Debug.WriteLine("Connection failed, ensure the SensorTag is powered on");
    }
    else
    {
        // Setup the data read
        Guid data = Guid.Parse("f000aa01-0451-4000-b000-000000000000"); // temperature data
        GattCharacteristic dataCharacteristic = gattDevice.GetCharacteristics(data).First();
        if (dataCharacteristic.CharacteristicProperties == 
            (GattCharacteristicProperties.Read | 
            GattCharacteristicProperties.Notify))
        {
            dataCharacteristic.ValueChanged += this.dataValueChanged;
            status = await dataCharacteristic.WriteClientCharacteristicConfigurationDescriptorAsync(
                GattClientCharacteristicConfigurationDescriptorValue.Notify);

            if (status != GattCommunicationStatus.Success)
            {
                Debug.WriteLine("Sensor access denied");
            }
        }
    }
}

The codeblock above first looks for the temperature service from the gatt device, and tests if the connection can be established and if everything is ok and we can read and get a notify for the data change, we’ll setup a callback function for temperature data. Yet again you can setup multiple callbacks for different sensors by using the GetCharacteristics with different sensor data guids. All that is left is to do the callback method now, which is like this:

private async void dataValueChanged(GattCharacteristic sender, GattValueChangedEventArgs args)
{
    GattReadResult readResult = await sender.ReadValueAsync(BluetoothCacheMode.Uncached);
    Color textColor;

    if (readResult.Status == GattCommunicationStatus.Unreachable)
    {
        Debug.WriteLine("Connection lost");
    }

    // Read the sensor value
    var result = new byte[readResult.Value.Length];
    DataReader.FromBuffer(readResult.Value).ReadBytes(result);

    // Extract ambiant temperature
    double ambTemp = BitConverter.ToUInt16(result, 2) / 128.0;

    string data = $"{ambTemp}";

    // Code to send data to IOT Hub
    //TagSensor sensor = new TagSensor() {Temperature = ambTemp};
    //await SendEvent(sensor);

    await CoreApplication.MainView.CoreWindow.Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal,
            () =>
            {
                try
                {
                    // This is needed in case you want to update UI with sensor data, temperatureText is a TextBlock
                    //temperatureText.Text = data;
                }
                catch (Exception ex) { }
            });
            
    Debug.WriteLine(data);

}

At this point we are able to read the SensorTag temperature values, and get callback for the changes. Next we’ll add the code required to send this to IOT Hub.

First you should create new IOT Hub in Azure portal, and take note of the Connection String – Primary key (can be found in Shared Access Policies, iothubowner), and copy the value to the connectionString -member variables of the MainPage.xaml.cs and the host name to connectionString2:

// IOT Hub
static RegistryManager registryManager;
static string connectionString = "HostName=XXXXX.azure-devices.net;SharedAccessKeyName=iothubowner;SharedAccessKey=XXXXXXXXXXXXXXXXXXXXXXXXX";
static string connectionString2 = "XXXXX.azure-devices.net";
static string deviceKey;
private DeviceClient deviceClient;

Add the following Nuget packages to your solution:
– Microsoft.Azure.Devices
– Microsoft.Azure.Devices.Client
and in case it didn’t add automatically, Newtonsoft.JSon as well.

Next you should add the namespaces as well:

using Microsoft.Azure.Devices.Client;
using Microsoft.Azure.Devices;
using Microsoft.Azure.Devices.Common.Exceptions;
using System.Runtime.Serialization.Json;
using System.Threading.Tasks;

Use the latest stable versions of them.

For the device to be able to connect to the IOT Hub you first need to setup the device in the device registry. That can be done with the following code:

private async Task AddDeviceAsync()
{
    registryManager = RegistryManager.CreateFromConnectionString(connectionString);

    string deviceId = "TiTag1";
    Device device = null;
    try
    {
        device = await registryManager.AddDeviceAsync(new Device(deviceId));
    }
    catch (DeviceAlreadyExistsException)
    {
        device = await registryManager.GetDeviceAsync(deviceId);
    }
    catch (Exception ex)
    {
        Debug.WriteLine(ex.Message);
    }
    if (device != null)
        deviceKey = device.Authentication.SymmetricKey.PrimaryKey;

}

The device id can be anything you want to give it, in this demo I just simply call it TiTag1.

Next add the call to the method in the beginning of the Mainpage_Loaded (remember to change it to private async void Mainpage_Loaded to be able to call async code inside it):

// Create the IoT Hub Device Client instance
await AddDeviceAsync();
deviceClient = DeviceClient.Create(connectionString2, new DeviceAuthenticationWithRegistrySymmetricKey("TiTag1", deviceKey));

Now is a good time to add a class to represent the sensor, where you can add the other sensors later if you like. Add this before Mainpage class:

public class TagSensor
{
    public TagSensor()
    {
        Time = DateTime.Now;
    }

    public DateTime Time;
    public double Temperature;
}

Next we’ll need to serialize the date to Json, and send to IOT Hub, which can be done like this:

private async Task SendEvent(TagSensor sensor)
{
    var serializer = new DataContractJsonSerializer(typeof(TagSensor));
    var stream = new MemoryStream();
    serializer.WriteObject(stream, sensor);
    string json = Encoding.UTF8.GetString(stream.ToArray(), 0, (int)stream.Length);

    var eventMessage = new Microsoft.Azure.Devices.Client.Message(Encoding.UTF8.GetBytes(json));
    await deviceClient.SendEventAsync(eventMessage);
}

Last piece is to remove the comments in dataValueChanged -method from TiTag Sensor… and async SendEvent -lines and you should be good to go. Please let me know in the comments if you are having issues, always happy to help!

With Windows 10 you have option to use Biometric methods to login, but it looks like there is quite little documentation how to implement it. Another thing is that people confuse Windows Hello to authentication framework which it’s not, even you can use it with such to authenticate. So this article shows you how to implement the login functionality to your UWP app using Microsoft Passport and Windows Hello.

It’s important to understand that this will use what ever is available, it could be iris recognizion on for example on Lumia 950 or fingerprint on your Thinkpad or just pin code if the machine doesn’t have any biometric sensors. The code itself is actually very simple, and this is all you would need:

Add the required reference to app.xaml.cs

using Windows.Security.Credentials;
using Windows.Security.Cryptography;

After that we can implement the login in App.xaml.cs and you can do this in many different ways, but I have a static member variable here:

private static bool authorized = false;

Now all is left is to do the actual login, which you can copy/paste to your code (beginning of OnLaunched -method):

// Do we have capability to provide credentials from the device
if (await KeyCredentialManager.IsSupportedAsync())
{
    // Get credentials for current user and app
    KeyCredentialRetrievalResult result = await KeyCredentialManager.OpenAsync("MyAppCredentials");
    if (result.Credential != null)
    {
        KeyCredentialOperationResult signResult =
            await
                result.Credential.RequestSignAsync(CryptographicBuffer.ConvertStringToBinary("LoginAuth",
                    BinaryStringEncoding.Utf8));
        if (signResult.Status == KeyCredentialStatus.Success)
        {
            authorized = true;
        }
    }
    // No previous saved credentials found
    else
    {
        KeyCredentialRetrievalResult creationResult =
            await
                KeyCredentialManager.RequestCreateAsync("MyAppCredentials",
                    KeyCredentialCreationOption.ReplaceExisting);
        if (creationResult.Status == KeyCredentialStatus.Success)
        {
            authorized = true;
        }
    }
}

When you check IsSupportedAsync you need to handle the situation that the device is not capable to provide this service, and you have to fallback to something else, such as Facebook or Twitter authentication. OpenAsync will check it there are saved credentials per app and user, and use those if can be found with RequestSignAsync. If there were no previous credentials for the app for current user, let’s create one. That’s all there is to it, very confusing topic but it is actually surprisingly easy to use. Hope this helps you!

One would think that it’s easy to figure out the answer to header above. If you’ve ever tried that, I think you most likely have become extremely frustrated when you realized that there are just too many combinations and it becomes quite impossible to make a difference between the devices with the provided APIs. For example Surface is a tablet running Desktop SKU while under 8″ screen tablets run Mobile SKU which is same SKU which is on the phones. For IoT there’s IoT Core and IoT Enterprise, which is actually Windows 10 Enterprise with additional IoT license.

In general you should always design for Universal which adapts to available screen space and hardware/capabilities but sometimes you just need to know (for example for analytic reasons) and that’s why I have created this little snippet. It should cover the most cases, but do let me know if the logic fails to identify something and I try to include that as well.

I threw in my best guess for Continuum and Iot as well, after some Twitter discussions with @dotMorten, @ScottIsAFool, @gcaughey and @mahoekst

public enum Device
{
    Phone,
    Tablet,
    Desktop,
    Xbox,
    Iot,
    Continuum
};
...
if (Windows.System.Profile.AnalyticsInfo.VersionInfo.DeviceFamily == "Windows.Mobile")
{
    if (ApiInformation.IsApiContractPresent("Windows.Phone.PhoneContract", 1))
    {
        Windows.Devices.Input.KeyboardCapabilities keyboard = new Windows.Devices.Input.KeyboardCapabilities();
        if (keyboard.KeyboardPresent > 0)
        {
            runningDevice = Device.Continuum;
        }
        else
        {
            runningDevice = Device.Phone;
        }
    }
    else
    {
        runningDevice = Device.Tablet;
    }
}
else if (Windows.System.Profile.AnalyticsInfo.VersionInfo.DeviceFamily == "Windows.Desktop")
{
    Windows.Devices.Input.KeyboardCapabilities keyboard = new Windows.Devices.Input.KeyboardCapabilities();
    if (keyboard.KeyboardPresent > 0)
    {
        runningDevice = Device.Desktop;
    }
    else
    {
        runningDevice = Device.Tablet;
    }
}
else if (Windows.System.Profile.AnalyticsInfo.VersionInfo.DeviceFamily == "Windows.Xbox")
{
    runningDevice = Device.Xbox;
}
else if (Windows.System.Profile.AnalyticsInfo.VersionInfo.DeviceFamily == "Windows.IoT")
{
    runningDevice = Device.Iot;
}

// Couldn't figure out, let's assume it's desktop (safest bet)
runningDevice = Device.Desktop;

I wanted to do a nice hamburger menu on my app, but it seems that all the samples found are doing it in different way compared how the default apps on Windows 10 seem to implement it. I don’t want to have CompactInlay menu always visible on the side of the screen, but just the hamburger button which would open it when clicked. This is how I implemented mine, hope you can get something out of it:

First I created BoolToVisibilityConverter class, so I can later on bind the visibility of the menu to the hamburger button (right click on project, add new item, class):

public class BoolToVisibilityConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        return (bool)value ? Visibility.Visible : Visibility.Collapsed;
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        throw new NotImplementedException();
    }
}

Then I open the MainPage.xaml and add the reference to the namespace in the page element after xmlns:local -line:

xmlns:utils="using:MyNameSpace.Utils"

where the MyNameSpace.Utils is the namespace where you created the BoolToVisibilityConverter -class in previous step.

After that, you would need to add in the resources the following:

<Page.Resources>
        <utils:BoolToVisibilityConverter x:Name="BoolToVisibilityConverter" />
    </Page.Resources>

Now that we have all the prerequisities in place, we can build the page itself. This is the barebone structure for the main page with hamburger menu and splitview:

<Grid Background="#FFFF8000">
    <Grid.RowDefinitions>
        <RowDefinition Height="50"/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <!--Menu bar on top-->
    <RelativePanel Grid.Row="0" >
        <ToggleButton x:Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content="?" Width="50" Height="50" Background="Transparent" IsChecked="False"/>
        <TextBlock Text="My title" FontSize="32" Width="300" Height="40" Foreground="Black" RelativePanel.RightOf="HamburgerButton"/>
    </RelativePanel>
    <!--Hamburger menu-->
    <SplitView Grid.Row="1" x:Name="MySplitView" PanePlacement="Left" CompactPaneLength="50" OpenPaneLength="300" 
            IsPaneOpen="{Binding IsChecked, ElementName=HamburgerButton}" DisplayMode="Overlay" >
        <SplitView.Pane>
            <StackPanel Orientation="Vertical">
                <StackPanel x:Name="SettingsPanel" Orientation="Horizontal">
                    <Button x:Name="SettingsButton" FontFamily="Segoe MDL2 Assets" Content="?" Width="50" Height="50"/>
                    <TextBlock Text="Settings" FontSize="18" VerticalAlignment="Center" />
                </StackPanel>
                <StackPanel x:Name="AboutPanel" Orientation="Horizontal">
                    <Button x:Name="AboutButton" FontFamily="Segoe MDL2 Assets" Content="&#xE77B" Width="50" Height="50"/>
                    <TextBlock Text="About" FontSize="18" VerticalAlignment="Center" />
                </StackPanel>
            </StackPanel>
        </SplitView.Pane>
        <!--Main content-->
        <Grid Grid.Row="1">
            
        </Grid>
    </SplitView>
</Grid>

On the code above, the RelativePanel section is for the menu bar, where the button and title are. In the SplitView section there is the SplitView.Pane where the actual menu is built, each item consists of vertical StackPanel, Button and TextBlock. Inside then there is the Grid where the actual page content can be put. That’s all required for simple hamburger menu, hope it’s helpful!

In this mini post we’ll be finally adding some sounds to our game. You will need to have some sound effects added to your Assets -folder. You need one for laser shooting and one for enemy hit sound. One place you could download some of these for free is Free game content resources. Add one with the name pew.mp3 under Assets (right click, add existing..) and one with the name pow.mp3

Windows 10 finally brings an easy way to add low latency sound to your universal app with managed classes, without need to do interop with DirectX. The main class is AudioGraph and it is good replacement for XAudio2.

We nee to edit GamePage.xaml.cs and add first three using statements, first of them is not needed for the sound but just to get some debug output in case something goes wrong with the initialization of the audio.

using Windows.Media.Audio;
using System.Diagnostics;
using Windows.Storage;
using Windows.Media.Render;

Now we need to add the member variables which will be used to play the audio, and store the audio files in the memory. AudioGraph class is for the audio playing, AudioDeviceOutputNode is the output device where the sound is played and the AudioFileInputNode has the sound file. These go as member variables to GamePage class, add them under the bool fireSuppressor:

private AudioGraph graph;
private AudioDeviceOutputNode deviceOutput;
private Dictionary<string, AudioFileInputNode> fileInputs = new Dictionary<string, AudioFileInputNode>();

In the Loaded we need to add the the following:

InitSound();

Next we need to add the method itself, which will create the audio pipeline, load the sounds and enable us to play them later on:

private async System.Threading.Tasks.Task InitSound()
{
    AudioGraphSettings settings = new AudioGraphSettings(AudioRenderCategory.Media);
    CreateAudioGraphResult result = await AudioGraph.CreateAsync(settings);

    if (result.Status == AudioGraphCreationStatus.Success)
    {
        graph = result.Graph;

        // Create the output device for audio playing
        CreateAudioDeviceOutputNodeResult deviceOutputNodeResult = await graph.CreateDeviceOutputNodeAsync();

        // Ensure there's audio output ready and available
        if (deviceOutputNodeResult.Status == AudioDeviceNodeCreationStatus.Success)
        {
            deviceOutput = deviceOutputNodeResult.DeviceOutputNode;
            graph.ResetAllNodes();

            await AddFileToSounds("ms-appx:///Assets/pew.mp3");
            await AddFileToSounds("ms-appx:///Assets/Pop.mp3");
            // here you could list all your sounds like row above

            graph.Start();
        }
    }
}

Add this method, which adds a given sample to memory for playing later on:

/// <summary>
/// Load and add resource sound file to memory dictionary for playing
/// </summary>
/// <returns></return>
private async System.Threading.Tasks.Task AddFileToSounds(string uri)
{
    var soundFile = await StorageFile.GetFileFromApplicationUriAsync(new Uri(uri));
    CreateAudioFileInputNodeResult fileInputResult = await graph.CreateFileInputNodeAsync(soundFile);

    if (AudioFileNodeCreationStatus.Success == fileInputResult.Status)
    {
        fileInputs.Add(soundFile.Name, fileInputResult.FileInputNode);
        fileInputResult.FileInputNode.Stop();
        fileInputResult.FileInputNode.AddOutgoingConnection(deviceOutput);
    }
}

That is all what is needed for setting up playing sounds. Next job for us is to hook the sound playing in the correct places in the code and play the actual sounds. Go to OnFire methos and add the following under bullets.Add(bullet); :

// Play the sound
var pew = fileInputs["pew.mp3"];
pew.Reset();
pew.Start();

The previous code is code to play the shooting sound, now we add the explosion sound for hitting enemy. Go to the HitTest and add under the enemies[i].Dead = true; the following code:

// Play the sound
var pop = fileInputs["Pop.mp3"];
pop.Reset();
pop.Start();

That’s all, now just compile and run the game, and enjoy your sound effects on the game! On the next blog post we’ll be talking about scaling the app on different screens properly, doing the Windows 10 adaptive screen magic.