Reward your users for feedback and bug reports

One of the new features of DevCenter is the ability to generate Promotional Codes for your app. With this new ability, I’ve started rewarding my users for taking the time to make the app better.

Let’s be specific so that you know exactly what ‘m talking about. I have a relatively popular app in the store and get all sorts of feedback, crazy nonsense and helpful alike. For those users whom send in a helpful bug report or would get the following email from me:

Hi [Name],

Thank you very much for taking the time to send in this [error report/feedback]. I care deeply about your experience with [app name] and work hard to ensure there are no [bugs/missing features]. I will [fix this bug\add feature] and include it in the next app update.

To show my appreciation for you sending this to me, please accept my gift of “Ultimate App Unlock” code below. It will unlock all the features in the app after you redeem it (instructions included).

If you have any future suggestions, feature requests or bug reports, please let me know.

Thank you for your support,


Developer, [app name]

Here’s how to get your Promotional Codes from DevCenter:

  1. Go to your app’s App Overview page from the DevCenter Dashboard
  2. Expand the Monetization node (on the left)
  3. Select Promotional Codes
  4. Click Order Codes

You’ll be presented with the following screen:


Fill out the form by choosing an IAP, choose the number of codes you want made (up to 250) and click the Order Codes button.

DevCenter will generate the codes and you’ll see a new item on the Promotional Codes page with a “Download” link (you get a .tsv file that can be opened in Excel).

Hopefully, this user experience tip will help you as much as it has helped me,


Telerik Universal on Raspberry Pi2

Most people think of IoT (Internet of Things) as a collection of tiny brains, without user interfaces, collecting data. Some think it’s a remote controlled animal shelter cat toy or a Grant Imahara style robot to do battle. The truth is that IoT is a very broad term, it covers many types of devices, including remote cat toys!

Here’s a Vine of what Windows IoT means to me… Telerik UI on IoT! This post is a overview tutorial, find the full source code on GitHub. (#bananaForScale)

Windows 10 on IoT

The introduction of Windows 10 IoT brings IoT to a whole new level. You get access to your familiar hardware benefits (GPIOI²C, etc.), but you can now do it with XAML and C#! You can run Windows IoT headless or with a UI (ultimately, this depends on the device you chose to install it on).

I choose the Raspberry PI2 because it has an HDMI video out for display. In my photo and Vine, you’ll see a strange 7″ display, it’s just an HDMI monitor, hardware hacker-style.

Telerik Super Polish

Now that I have access to a UI, one of the very first things I did was attempt to run Telerik UI for Windows Universal on it 🙂 To my delight, it just works. I can actually write an app once and it just works on PC, Tablet, Xbox One, Hololens and IoT. The promise Microsoft gave us WPDEVs two years ago is finally taking shape.

Enough talk, let’s get coding

I’ve posted my source for this project and it’s prerequisites on Github. Please see the so you know what you’ll need to get started.

Step One – File > New

Open Visual Studio 2015 and go to File > New > Project. Drill down to Universal, select Blank App, give it a name and click OK.


Step Two – Add Project References 

Normally you may be used to adding actually DLLs to a project. This approach is slightly different. we’re using Extension SDKs. Right click on your project’s references, select Add Reference, drill down to Extensions under Universal Windows (#1) and check off the two items you see in #2.


[UPDATE – Telerik for UWP is available as of Q1 2016, get it here. and reference Telerik UI for Universal Windows Platform in the image above]

The first reference, Telerik UI for Windows 8.1, is the Extension SDK name for the Telerik UI for Windows Universal controls. Don’t worry about the asterisk (*), it just means that it wasn’t compiled specifically for UWP yet, but it still works as expected.

The second item, Windows IoT Extensions for the UWP, is what allows your app to deploy to Windows IoT and provides the base classes for things like GPIO.

Your references should now look like this:


Step Three – Dev Time

First, let’s switch your designer to show a 10″ IoT device. Its usually a 5″ mobile phone at startup because that’s the first item in the list. Note: Take a step back for a second and see all those device types, your Telerik app will run on all of them!


Now let’s add a Telerik Chart to the UI. In my demo app on GitHub, I have some sample Car data that has the following properties: Make, Model Year and Price (model code is here). That sample data is loaded into a collection in the MainViewModel.

Now that I have a collection of cars, I want to show a chart. Let’s use a BarChart that groups by Make and shows the Price (find the UI code here).

  • Begin by adding this to the top of the XAML page: xmlns:chart=”using:Telerik.UI.Xaml.Controls.Chart”, this is so you can instantiate any control in the Chart namespace.
  • Next, declare RadCartesianChart and set the axes accordingly, CategoryAxis for the horizontal and LinearAxis for the vertical (#1).
  • Now, we add a BarSeries and set the ItemsSource via databinding to the Cars collection (#2).
  • Lastly, set the property name Make for the CategoryBinding and Price for the ValueBinding (#3).


If you do a Build at this point, and you’ve added sample data to the view model like I did, you’ll see data in the UI designer (very cool that methods written to work at run-time, work at design-time). Like this:


Step Four – Deploy to Device

I added a couple more chart examples and a Slider control to change the Price values dynamically, but you don’t need to take it that far to see your progress. Just deploy onto your Windows IoT device at this point to see that it works!

Some tips on Windows 10 IoT

I highly recommend that you put aside a about two hours to prepare your board for the first time. You will use a tool that comes with the Windows 10 IoT build for your device to deploy, it creates the partition and loads the ffu. Its pretty straightforward and much easier than it was before RTM.

Deploying and debugging is pretty easy, the IoT device is treated as any other remote machine. Steps to take are:

  1. Right click on the project and select Properties
  2. In the left column, select Debug
  3. In the Target DropDownList, select Remote Machine
  4. Then click the “Find” button and enter the IP address of the Raspberry Pi 2 (you’ll find this displayed on the Pi’s home screen)
  5. Set the Authentication Mode to None
  6. Save and close the Properties page.

Now when you start debugging, it will look for your Pi 2 on the network, deploy and run the app package. For more Remote Debugging details see this documentation (note that the Remote Debugger tools are already built into Windows 10 Core IoT).

Well, that’s it for now. I will be doing another IoT and Telerik post soon. I’ll do another post on how to use GPIO ports, reading sensor data and showing it in a gorgeous UI

Happy coding,


Windows 10 IoT

DevCenter Promo Codes Not Working?

One of the great things about the new DevCenter is the ability to generate Promotional codes for your in-app-purchase products, so I generated 100 codes last night for the launch of Windows 10.

I gave out many codes today but I started getting “the promo code didn’t work” emails. After a quick investigation I found that the LicenseInformation for the user wasn’t refreshed automatically or even after the user restarted their phone. I suspect that this is just temporary, but I found a workaround…

The trick is to have the user go through the process to purchase the IAP product. The user’s phone will do a license verify check with the Store server and show this screen:

Already Owned


Normally, if they did not own the product there would be a payment method and a “buy” button. However, since they redeemed your code, the button will be labeled “install” as seen in this screenshot:


Just tell your user to click “Install” and go on experiencing your awesome app!

If you have any questions, feel free to leave a comment below or ping me on twitter



Error : DEP3321 – Can’t deploy to Windows 10 Mobile

With Windows 10 being rolled out as I write this article, there will be updated sample Windows Platform apps available soon (today). It’s also time to update your projects.

However, you may find yourself not able to deploy to Windows 10 Mobile after updating your projects or older samples to Windows 10 (build 10240). This post will show you how to resolve this problem.

The Problem

You’ll see an error something like this when deploying to a physical Windows 10 Mobile device:

Error : DEP3321 : To deploy this application, your deployment target should be running Windows Universal Runtime version 10.0.10240.0 or higher. You currently are running version 10.0.10166.0. Please update your OS, or change your deployment target to a device with the appropriate version.

The error is pretty clear but how do we fix it? The resolution is with the MinTargetVersion setting.

The Fix

We need to drop the lowest version your app targets to the version that your device has running, we can do this in one of two ways; through the project properties UI editor or manually edit the XML of the csproj file. I will show you how to do it manually because in some cases, the UI’s MinTarget dropdown list won’t show the lowest SDK if you do not have it installed. Below are the steps to fix it.

NOTE: Skip to step 3 if your project is already unloaded (it will show (unavailable) next to the name)

1) Right click on your project in Visual Studio

2) Select “Unload Project“, it will now appears as ProjectName (unavailable)

3) Right click on the unloaded project and select “Edit projectName.csproj

4) Locate the <TargetPlatformVersion> and <TargetPlatformMinVersion> items in the first <PropertyGroup>.

Here’s the “Before” screenshot:


5) Change the TargetPlatformMinVersion to the version that the error stated you are running. In this case, it’s 10166. Here’s the “After” screenshot:


6) Now Save and Close the file

7) Right click on the project again and select “Reload Project

8) Rebuild the project and deploy to device. Now you should be up and running!


I expect this to happen with increasing frequency as we move forward with Windows 10 SDK releases. The new paradigm is that we’ll have a set of installed windows 10 Tools, but multiple SDK versions. We need to be aware of the min version and targeted version of our apps.

If you have any questions, feel free to leave a comment below.

One XAML for UWP, Windows 8.1 and Windows Phone 8.1

I was recently involved in a conversation on how to have the easiest way to maintain a XAML view across a UWP (Universal Windows Project) a Windows 8.1 and Windows Phone 8.1 projects. There are a few options and the most straight forward way to do it with a UserControl residing in a Portable Class Library. However…

What if you wanted to have tailored code for each without littering your code with #ifdef but still share a XAML view?  The XAML View might be what you’re looking for. This is a tutorial on how to do just that. An example project is available for download at the end of the article. Let’s get started:

Step 1:

Create a new 8.1 Universal app


Step 2:

Move the Shared, Windows and Windows Phone projects out of the virtual folder and delete the folder (you can cut/paste or just click and drag them). The solution should look like this now


(Note: If you’re doing this to a solution that has many other projects, you might want to skip this step and add the UWP project to the virtual folder instead)

Step 3:

Add a new UWP project to the solution and name it the same as the 8.1 app, but with the Universal suffix.


(Your solution should look like this now)


Step 4:

Add a “Views” folder to each of the projects


Step 5:

Within the Universal project, right click and Add > New Item > XAML View


Step 6:

Move the new XAML View to the Shared project’s Views folder and change the namespaces in the view to match


Step 7:

Delete App.xaml from the Universal project and add a reference to the solution’s Shared project (Note: this is in the new Shared projects references section)


Step 8:

Here’s where the magic happens. We’ll be adding a code behind for this view in each of the projects! I’ll break this down into sub-steps:

  1. Add a new class to the Windows 8.1 project’s Views folder (Add > New Item), name it as if it were the code-behind for the view. In this case it would be SharedPage.xaml.cs
  2. Change the namespace of the class to Views
  3. Add the public, sealed and partial modifiers to the class
  4. You’ll next need to inherit from the Page class
  5. Add a page constructor
  6. Now you can copy and paste this new class into each of the platform projects (remember, we do not need it in the Shared project)

This is what it should look like


Step 9:

You’ll need to quickly pop into the Build Configuration Manager and check off Build and Deploy for the Universal app (you can find Configuration Manager in the target dropdown or in the Build menu)


Step 10:

Lastly, for the purposes of this demo, go to App.xaml.cs and change the initial launch target (MainPage) to be the new shared page (SharedPage). I could have put a button on MainPage for each app, but let’s keep this tutorial as short as possible.


Final result!

This is the same XAML View compiled with different code-behind files 🙂


(NOTE: I put a TextBlock on the SharedPage and update the text in each constructor to show which platform launched it. Here are the WP8.1 emulator, Windows 10 PC and Windows 10 Mobile Emulator running their apps all showing the same XAML view).

Source Code

Download the Sample App Source Code From Here


The Telerik Universal Control can be used in the shared page as long as each of the projects have a reference to the Telerik UYI for Windows Universal DLLs. Send me a tweet and show me what you’ve done, I’ll RT your awesomeness!

Custom Pivot Header with Animation

I recently wanted to make a header with tabs for my app’s pages that have a Pivot. Something like Office Mobile, but without the drop-down menus. Here’s the result I got in my upcoming app. I decided to post a tutorial and provide a sample app.



Notice the fast fade-in of the background color of the tab, this is important and is where you’ll be able to add your own flavor to the style after you’ve completed this tutorial. Ok, let’s get started!

Step One: Create the base elements

The two main components are a Pivot control and a ListView control. The Pivot has been stripped of it’s title template and pivot header templates. To get started, let’s do a File > New Pivot App (WinRT, not Silverlight) so that we’ll have some sample data and a pre-existing Pivot.


After the project template finishes, open PivotPage.XAML and add RequestedTheme=”Light” to the page’s properties. Next, find the root grid of the page. Add a couple RowDefinitions, with the first row’s height set to auto. Add a Grid containing a ListView to Row 0 and put the Pivot into Row 1.


Now, let’s clean up the pivot. Delete the Pivot’s Title and both the PivotItem’s Header properties. You should be left with only the pivot item’s contents, this is what your page should look like at this point.


Step Two: Create a Control for the Tabs

My demo uses text, however there are other approaches that can use an icon or other element in the tab. Since not all XAML elements have a “Foreground” property that can automatically inherit from the parent ListView’s foreground, we’ll use a  container control to hold the TextBlock. Make this by right clicking on your project and select Add > New Item. Then find Templated Control and give it the name HeaderTab.cs.


A template control has a backing style where the UI is defined while the control’s logic is in the file named after it. Visual Studio will add a folder named Themes and a ResourceDictionary Generic.xaml.


First, Open HeaderTab.cs and change the base class from Control to ContentControl. This will allow you to use the control as a ContentControl, which is what the ListViewItem’s template uses.


Next, open Generic.xaml, ignore the errors for now, they will go away when you do a Build at the end of this step. First, replace the Border control in the style with a TextBlock. Now, use TemplateBindings for the Text and Margin properties (see screenshot). This is how we pass the properties values of the ListView ItemContainerStyle to our custom control when the property types to match. The Margin property is a perfect example, we use the padding of the container style for the margin of the TextBlock, this will make more sense towards the end of the tutorial. Okay, now it’s time to do a Build (F6) so that your style’s TargetType will resolve.

This is what your Style should look like:


Step Three: Create a horizontal ItemsPanel

In order to tell the ListView to render the items horizontally, we need an ItemsPanel, however since we want the content of the tab to be in the center but also stretch to fill the available space, we can’t use a simple StackPanel. So, let’s make our own. Right click on your project and select Add > New > Class and name it HorizontalStretchPanel.


Explaining the process of calculating the available space and arranging the items is outside the scope of this article, but in a nutshell, we take the full width and divide it by the number of items then arrange to get the most space for each item. Here’s the code to copy/paste:

public class HorizontalStretchPanel : Panel
protected override Size ArrangeOverride(Size finalSize)
var rect = new Rect(0, 0, finalSize.Width, finalSize.Height);
var width = finalSize.Width / Children.Count;

foreach(var tab in Children)
rect.Width = width;
rect.Height = tab.DesiredSize.Height &gt; finalSize.Height ? tab.DesiredSize.Height : finalSize.Height;
rect.X = width + rect.X;

return finalSize;

protected override Size MeasureOverride(Size availableSize)
if(Children.Count == 0)
return base.MeasureOverride(availableSize);

var finalSize = new Size { Width = availableSize.Width };
availableSize.Width = availableSize.Width / Children.Count;

foreach(var tab in Children)
var desiredSize = tab.DesiredSize;
finalSize.Height = desiredSize.Height &gt; finalSize.Height ? desiredSize.Height : finalSize.Height;

if(double.IsPositiveInfinity(finalSize.Height) || double.IsPositiveInfinity(finalSize.Width))
return Size.Empty;

return finalSize;


Step Four: Create a ListView Configuration and ItemContainerStyle

Now it’s time to go back to the ListView we added to the top of PivotPage.xaml . Before working on the ListView, Give the parent Grid a height of 50 and a good background that will contrast with white, I went with Blue. Now, onto the ListView. Let’s set the ListView.ItemsPanel to use our new HorizontalStretchPanel. Next, add some ListViewItems containing your new HeaderTab control. You’ll want one ListViewItem for each PivotItem you have. While you’re there, set the FontSize of your HeaderTab to 20.

Now, bind the SelectedIndex of the ListView to the SelectedIndex of the Pivot using an ElementName binding and set VerticalAlignment to bottom.

Here’s what it should look like thus far


Now, it’s time to add some style and animation to the ListViewItemContainer. To begin, extract the ListView’s default ItemContainerStyle, this screenshot shows how:


Give a name, I chose HeaderListViewItemContainerStyle, once you click Ok, the ListView will get a StaticResource reference to the style in the page’s Resources. Scroll up to the top of the page and expand the style. Yeah, it’s pretty long. the part I want you to get to is the Template property. Within here you’ll see some animations, but go past them until you see the ContentControl. This is what shows your HeaderTab control, I like to give my template parts names with strong prefixes, you don’t have to, but it’s easier for identification when it comes to animation.

Now, let’s edit that template to add an extra Grid so we can act on it to get some cool fading animation when the user changes tabs. What we’re going to do is put the new Grid behind the ContentControl so that we don’t block the Text. To make this easier, here is what the XAML looks like after renaming the parts and adding the Grid.


Lastly, I went with White for the Style’s foreground property, this gets inherited by the TextBlock in your HeaderTab control. It will contrast well against the Blue background of the page header Grid.

Step Five: Animating the Container’s Parts

This is something that you’ll want to play with and where Blend can help you get the exact results you’re looking for. What we’re going to do is add some keyframes to the existing States: UnselectedSelected and SelectedFocused. Here’s where the string naming of the template parts comes in handy. First, in the Unselected state we want to style it they way we want it to look when the tab is not in focus. In this state I want my new Grid to have zero height. Here’s what that looks like:


Now let’s go to the Selected and SelectedFocused states (they’re the same in my scenario). In this state I want the new Grid to be the full height of the tab and more importantly to have a white background.


Lastly, the sugar that adds the magic… the transition animation. The cool thing about states is that you don’t have to write long storyboards, just set a Default Transition for a particular state. You can add these right to the VisualStageGroups directly (don’t forget to add some Easing). Here’s what it looks like



Almost done! Go through the Pivot and PivotItems and delete all the x:UID properties, these will change your UI at runtime because of localization, best to get them out of the way now. Whew! now it’s time to fire up the emulator and take it for a spin. This is what you should be seeing, if not, download the sample app from here and see what went wrong.

Happy coding!



Page Transitions for Universal XAML Pages

Normally, if you want different page transitions (NavigationThemeTransition) for your Universal XAML Windows Phone 8.1 app, you’d set it on the page’s XAML directly. For example, let’s do a ContinuumTransition:

&lt;ContinuumNavigationTransitionInfo /&gt;

However, if you have a XAML page in your Universal app’s shared folder, you can’t use XAML because page transitions are not available for Windows 8.1 apps. Since there isn’t a conditional compilation for XAML, we’ll need to do it from the code behind.

In your OnNavigatedTo event, set up an #ifdef statement to check if the page is being used on PC or phone. Now with the ability to run platform specific code, we can programmatically add the transition to the Page. Here is the result:

//phone code

this.Transitions = new TransitionCollection
new NavigationThemeTransition
DefaultNavigationTransitionInfo = new ContinuumNavigationTransitionInfo()
//PC code


Now you can have the same transition effect you use for the rest of the phone app’s pages, enjoy!

WinRT MediaCapture Tips

As we approach Windows 10, many of you are considering updating your SL 8.0 apps to WinRT. In fact, Larry Lieberman and team recommend you do this and have shared some resources to help facilitate the move. I’ve done this for a couple apps so far and wanted to share some of my experience while migrating Silverlight AudioVideoCaptureDevice API to WinRT MediaCapture, because you’ll need to rewrite your approach.

The WinRT documentation helps with a lot of stuff, but there are holes that I had to discover for myself. To help ease the process, I’m sharing some of the solutions that I’ve discovered, uncovered and smash-my-head-on-the-desk about. Let’s get started:

MediaCapture class

This is your home base of media capture operations. Since it is a better description of what the class does, you’ll see name “mediaCaptureManager” used often. You’ll see it used throughout my code below (before starting, see the “gotchas” Suspension section).

Enumerating Devices (i.e. get front camera)

To get the current video devices attached to the device, first you need to enumerate over the phone/pc’s available video devices using the DeviceClass enum. The user’s device might be a desktop PC with a webcam, it could be a Surface Pro or a Lumia 520, you need to consider the possibilities and be prepared for them.

mediaCaptureManager = new MediaCapture(); //class scope
var devices = await DeviceInformation.FindAllAsync(DeviceClass.VideoCapture);

So instead of the old way of looking for the camera by name { i.e. if(deviceName.Contains(“front”) || deviceName.Contains(“ffc”)) }, you can now use the EnclosureLocation enum. I like to hold the results in a class-wide DeviceInformation object, one for the front cam and one for the rear (rear is also my default to catch webcams and the like), this lets me quickly switch later without having to reiterate over the list. Once you have your chosen camera, use it to initialize the MediaCapture object. You could use a switch statement like this:

foreach (var device in devices)
    case Windows.Devices.Enumeration.Panel.Front:
        frontCamera = device; //frontCamera is of type DeviceInformation
        isUsingFrontCam = true;
    case Windows.Devices.Enumeration.Panel.Back:
        rearCamera = device; //rearCamera is of type DeviceInformation
        //you can also check for Top, Left, right and Bottom

await mediaCaptureManager.InitializeAsync(new MediaCaptureInitializationSettings { VideoDeviceId = frontCamera.Id });

You have many MediaCaptureInitialization parameters available, but you only need the Id to start the camera. WARNING: If the device is using an attached WebCam (i.e. USB camera), EnclosurePanel will be null. Check for a valid device.Name.

MediaCapture Properties and Showing Preview

Next you want to consider the sensor rotation of the camera. If it is the front camera, you need to rotate it 270 degrees. This used to be a HUGE problem where you had to apply a transform to the UI control that is using the VideoBrush and again on the playback page. Since this only worked on the device, if you viewed the file on another device, it would still be rotated!!!

Thanks to WinRT’s VideoRotation enum, you can rotate the frames for both previewing and recording frames. This is also the time to hook into the following events: Failed (obvious) and RecordLimitationExceeded (save the video and let user know it got cut short).

if(!string.IsNullOrEmpty(mediaCaptureManager.MediaCaptureSettings.VideoDeviceId) &amp;amp;amp;amp;&amp;amp;amp;amp; !string.IsNullOrEmpty(mediaCaptureManager.MediaCaptureSettings.AudioDeviceId))
   //rotate the video feed according to the sensor

    //hook into MediaCapture events
    mediaCaptureManager.RecordLimitationExceeded += RecordLimitationExceeded;
    mediaCaptureManager.Failed += Failed;

    //device initialized successfully
    //no cam found

Now that you have the device initialized and any advanced properties set, it’s time to push frames to the UI. Here is the most straightforward way:

VideoCaptureElement.Source = mediaCaptureManager;
await mediaCaptureManager.StartPreviewAsync();

//video frames are being pushed to the CaptureElement (instantiated in XAML)

Switching Cameras and Sensor rotation

Now that CaptureElement is showing the video preview, let’s say you want to change cameras. You have to consider two main considerations: stopping current preview and setting up the next device. Here is how I do it (note that I am using Portrait orientation for this page)

private async Task SwitchCameras()
   await mediaCaptureManager.StopPreviewAsync();
   mediaCaptureManager = null;
   mediaCaptureManager = new MediaCapture();

   if (isUsingFrontCam)
      await mediaCaptureManager.InitializeAsync(new MediaCaptureInitializationSettings { VideoDeviceId = rearCamera.Id });

      await mediaCaptureManager.InitializeAsync(new MediaCaptureInitializationSettings { VideoDeviceId = frontCamera.Id });


   isUsingFrontCam = !isUsingFrontCam;

   PreviewMediaElement.Source = mediaCaptureManager;
   await mediaCaptureManager.StartPreviewAsync();

Disabling Screen Timeout

One thing you might not realize until you’ve gotten user feedback is the screen timeout. You do not want the user’s device to lock on them while they’re recording (or playing) media. This is accomplished with a DisplayRequest. One word of caution, make sure you are releasing the request when done or other unexpected app close. There have been reports (unconfirmed, but worth consideration) that this API is causing problems with the power button on user’s phones.

Here is how I do it:

//on the class level
private DisplayRequest dRequest;

//in your OnNavigatedTo event
if (dRequest == null)
   //disables timeout
   dRequest = new DisplayRequest();

//IMPORTANT! In your OnNavigatedFrom (or other last opportunity)
if (dRequest != null)
   dRequest = null;

Available Resolutions and Frame Rates

A full explanation is outside the scope of this article, however a high overview will help. Essentially, every video capture device reports it’s available resolutions (via firmware) to the OS. Here is a snippet from my app where I get all the available resolutions for the user’s cameras. This is so the user can select a preferred option, this is especially helpful for me because lower memory phones don’t have the horse power to process all the MFT frames (video effects). A lower frame rate allows me to provide a better end user experience for those users.

In this sample, I iterate over the options, save a pointer to each in my ViewModel via a custom object and use it later for when the user selects an option.

var mediaCaptureManager = new MediaCapture();
var devices = await DeviceInformation.FindAllAsync(DeviceClass.VideoCapture);

//GET CAMERAS HERE- same approach to get cameras as at the beginning of this article

if(rearCamera != null)
   await mediaCaptureManager.InitializeAsync(new MediaCaptureInitializationSettings { VideoDeviceId = rearCamera.Id });
   var mediaEncodingPropertiesList = mediaCaptureManager.VideoDeviceController.GetAvailableMediaStreamProperties(MediaStreamType.VideoPreview);

   if(AvailableResolutions.Count &amp;amp;amp;gt; 0) AvailableResolutions.Clear();

   if (mediaEncodingPropertiesList.Count &amp;amp;amp;gt;= 1)
       foreach (var mediaEncodingProperties in mediaEncodingPropertiesList)
         //I store list in custom collection and let user pick preferred item
         AvailableResolutions.Add(await CreateUserResolutionPropertyAsync((VideoEncodingProperties)mediaEncodingProperties));

//if front camera available
    mediaCaptureManager = null;
    mediaCaptureManager = new MediaCapture();

    if(AvailableFrontResolutions.Count &amp;amp;amp;gt; 0) AvailableFrontResolutions.Clear();

    await mediaCaptureManager.InitializeAsync(new MediaCaptureInitializationSettings { VideoDeviceId = frontCamera.Id });

    var frontPropertiesList = mediaCaptureManager.VideoDeviceController.GetAvailableMediaStreamProperties(MediaStreamType.VideoPreview);

    if(frontPropertiesList.Count &amp;amp;amp;gt;= 1)
       foreach(var mediaEncodingProperties in frontPropertiesList)
         AvailableFrontResolutions.Add(await CreateUserResolutionPropertyAsync((VideoEncodingProperties)mediaEncodingProperties));

I store the user’s selected preference and use it when setting up the camera. If you’re doing this and get stuck, shoot me an email and I’ll share my approach with you.



For some reason, when saving an .mp4 file created by the MediaCapture API, the file has a 0 length thumbnail. So, if you try to use GetThumbnailAsync on the saved file is a no-go. To workaround this on Phone, I use the Windows Phone MediaComposition API to create the final file that contains a valid thumbnail.

For Windows 8.1, I use the MediaCapture API itself to take a photo at the beginning of the video. I have reported this to the proper people, hopefully it will be fixed in Windows 10.


In order to properly handle suspension, it is recommended that you have a handle in App.xaml.cs for the MediaCapture object. This will let you manage it’s state properly when Resuming. For example, after newing-up, in the view do this:

MediaCapture mediaCaptureManager = new MediaCapture();

(App.Current as App).MediaCapture = mediaCaptureManager;


There are a lot of cool things you can do with the new MediaCapture API, the approach above is just my first attempt. I’m sure I’ll continue tweaking it to get the best performance. The lesson learned? It was completely worth the effort to migrate to WinRT.

To see what I’ve done so far, check out my app Video Diary (WP 8.1 or above) ( try the real-time effects, editing and next update will include user settable resolutions and framerates )

Report progress – IAsyncActionWithProgress

One of the best things you can do for your app’s users is to report the progress of an operation. Showing a progress bar can greatly increase the patience of the user, not knowing how long something is going to take can make the operation just feel longer.

Luckily, many WinRT Tasks will return an IAsyncActionWithProgress. I’ve seen many blog posts about this topic, but most are deeply involved and weren’t suited for a quick lookup. This post will show you a quick example, which you can apply in your app..

A quick summary is that you have two main options with one of these actions; await the action result directly or don’t await and hook into the Progress event and Completed event. As an example, I will use the MediaComposition class available for Windows Phone 8.1.

If you wanted to save the composition but still want to catch render failure, you’d do something like this:

var transcodeFailureReason = await mediaComposition.RenderToFileAsync(storageFile);

if(transcodeFailureReason == TranscodeFailureReason.None)

However, the rendering could take a long time, it’s better to show the user the progress of the operation. RenderToFileAsync will also give you an IAsyncActionWithProgress if you don’t use await. You’d hook in to the events I mentioned above. Here is what that looks like:

var result = mediaComposition.RenderToFileAsync(storageFile);
result.Progress += Progress;
result.Completed += Completed;

The progress event actually gives you the percentage completed of the operation in the second parameter. Just make sure you marshal back to the UI thread when updating the UI. Here is an example of using a TextBlock and ProgressBar to report progress.

private void Progress(IAsyncOperationWithProgress&amp;lt;TranscodeFailureReason, double&amp;gt; asyncInfo, double progressInfo)
Dispatcher.RunAsync(CoreDispatcherPriority.Normal, () =&amp;gt;
ProgressTextBlock.Text = string.Format(&amp;quot;{0}% complete&amp;quot;, progressInfo);
ProgressBar.Value = progressInfo;

Finally, in the Completed event, make sure the rendering happened without error and move on. Note that you are still on a different thread, if you have a list of items in the ViewModel to update you need to marshal it as well.

private async void Completed(IAsyncOperationWithProgress&amp;lt;TranscodeFailureReason, double&amp;gt; asyncInfo, AsyncStatus asyncStatus)
if (asyncInfo.GetResults() != TranscodeFailureReason.None)
//operation failed

Dispatcher.RunAsync(CoreDispatcherPriority.Normal, async () =&amp;gt;
await UpdateMyViewModelCollectionWithNewThing();

Showing the user progress adds professionalism to your app and makes the user’s experience much better.


How to disable display timeout in WinRT

For those of you who are building multimedia related apps, you’ll want to consider disabling the display timeout of the user’s device. This prevents the screen from dimming or locking while the user is playing/recording media.

In my case, I have a view where the user is doing some video recording. so I don’t want the screen to time out on that page

1)  Create a class scope variable::

private DisplayRequest dRequest;

2) On your OnNavigatedTo event, grab a new DisplayRequest and get a deferral

if (dRequest == null)


     dRequest = new DisplayRequest();



3) when the user is done, set it back to normal in the OnNavigatingFrom event:

if (dRequest != null)



     dRequest = null;


That’s it!

I’ll be also using this on media playback page, but in that case I wont use a “page loaded/unloaded” approach. Instead, I’ll wait for the media to be loaded into the MediaElement before getting the deferral and get the release on media ended.

Remember to be respectful when playing with power like this, do not do this for your whole app. Be mindful and skillful and apply it to just the parts that truly need it.