Screenshots for a UWP Xbox App

Screenshots for a UWP Xbox App

We’ve been doing a bit of work building out an Xbox app and part of the fit-and-finish of any app is aligning the application layout with those of the designs. One of the easiest ways to do this is to take a screenshot of the app and then mark it up alongside the original designs, which are hopefully high enough fidelity to allow you to do the final round of tweaks against. On Xbox we noticed that within a UWP application the normal double-tap of the Xbox button doesn’t seem to take a screenshot. This is was confirmed by a post on the forum (https://social.msdn.microsoft.com/Forums/en-US/e100560d-a26b-48f8-a2bf-acce75ea4d26/uwpxbox-how-to-capture-screenshot-on-xbox-one-for-uwp-app?forum=wpdevelop) where the recommendation was to write code to take a screenshot.

I even started down the path of using similar code to extract a screenshot, when I remembered there was a developer portal that’s exposed when you switch the device into dev mode (see https://docs.microsoft.com/en-us/windows/uwp/xbox-apps/devkit-activation). I figured that once I took a screenshot using code, I’d need a way to get the image off the console, and that the developer portal was the way to do this.

The first thing to do is to go to Dev Home – there should be a link on the right of the home screen when your console is in developer mode. If you don’t see it but you’ve setup dev mode, it may be that your device has reverted to retail mode, in which case you’ll need to run the dev mode activation app again.

image

In Dev Home, there is an option to “Manage Xbox Device Portal”

image

Where you have one option, “Enable the Device Portal”

image

Once enabled you’ll need to configure authorisation by specifying username and password – write these down as you’ll need them shortly to access the dev portal.

image

The next step is to go to a computer that’s on the same network as the Xbox (or at least a network that can reach the Xbox). Enter the IP address with the corresponding port number (see previous screenshot which is shown after enabling device portal, which shows the IP address and port number of your console).

image

In most browser (this was Edge, but similar behaviour happens on most modern browsers) you’ll see a warning that the site you’re attempting to access can’t be verified. You need to expand, in this case, Details in order to see a link that will allow you to continue on to the device portal.

image

Now that you’re in the device portal, select the Media capture node on the left.

image

Click the “Capture Screenshot” at any point to screenshot whatever’s currently being displayed on the Xbox.

image

You’ll also be prompted to open or save the captured image.

Why String Interpolation is a BAD thing

Why String Interpolation is a BAD thing

So I’ll set the scene – I was reviewing some code and refactoring it. First thing to do was to go through and take a look at the Resharper comments as they do a good job at tightening up sloppy code. In this instance I came across code that looked a bit like this:

var url = “http://someservice.com/”;
url += queryParameters;
DoSomething(url);

Of course, this can easily be refactored using string interpolation to

var url = $“http://someservice.com/{queryParameters}”;
DoSomething(url);

Which looks so much cleaner. Unfortunately this has actually just made my code even worse – I still have this horrible nasty string literal, now with embedded code. Argh, who does this stuff. Next step, factor the string out into a constants, or ideally configuration file.

private const string ServiceUrlTemplate = “http://someservice.com/{0}”;

and then:

var url = string.Format(Constants.ServiceUrlTemplate,queryParameters);
DoSomething(url);

I’m sure there are a ton of other ways to make this nicer and perhaps more readable but having a string literal with interpolation is not one of them.

Additional Note: If you’re not using Resharper or another equivalent tool, you’re not working effectively. Start using a refactoring tool today and don’t ignore the warnings. Spend time everyday reviewing and improving the code you write

Call out to the ADAL team! – Authenticate Using External Browser

Call out to the ADAL team! – Authenticate Using External Browser

In my post, Authorizing Access to Resources using Azure Active Directory, I talk about authenticating using the built in browser on the device, rather than authenticating via a webview, which is all too common. Unfortunately despite being fully supported by Azure Active Directory, the team responsible for ADAL haven’t, as far as I can tell, provided support for using an external browser to authenticate.

I was super impressed when I just downloaded the Facebook app on Windows, that it supports “Log in with Browser”.

image

In my opinion, this not only represents a more secure form of authentication (since I can validate the website I’m signing into), it is also a better experience, since I’m already logged into Facebook in the browser anyhow.

I definitely encourage developers to consider using the external browser, rather than supporting SDKs and libraries that us the in-app browser.