Displaying Content from a Surface to an XBox One Using "Play To"

The Surface family of devices (or any device/PC running Windows 8) is capable of wirelessly sending video content from many modern applications to an XBox One on the same network using a technology known as Play To. Play To is particularly useful for streaming video from your browser. Setting it up is quick and easy, but not terribly intuitive.

XBox One Surface 2

You may have also heard the term Miracast. Miracast is a different technology and is essentially a peer-to-peer, Wi-Fi Direct HDMI cable. In other words, a wireless monitor. Miracast is superior in the fact that it works with all applications without modification. Unfortunately there are only a couple of Miracast receivers on the market today, and this technology is outside the scope of these instructions.

Projecting applications is done by swiping in from the right to display the charms bar, and selecting devices. You'll get the menu below:


While in an application that supports it, selecting the Play menu presents you with the available output devices:

Play To Menu

Noticeably missing is the option for the XBox. Unfortunately this isn't quite as automatic as the Apple AirPlay system. We have to set a few things up first to get it to show up here.

First, confirm that Play To is enabled on your XBox by using the Settings app, and selecting preferences. There you'll see the option to enable Play To.

XBox One Play To Settings

Go back to your Surface and reopen the charms bar and select Devices, and then Play, just as you did before. This time select Add a device. This is a deep-link into the settings app.

Add a device

From this screen, select Add a device:

Add PC Devices

It should detect the XBox One:

Select a Device

If your XBox doesn't show up, ensure that you're on the same subnet, and confirm that your network is open and test by using the SmartGlass application to confirm connectivity.

After a bit of installation, the XBox One should show up in the list of Play Devices. Once it's showing up, open up in Internet Explorer, start playing a video of your choosing, and select your XBox as the Play To target:

XBox One in Play Menu

Selecting the XBox system will cause the currently playing video to display on the XBox. Once the initial handshaking is done, you can switch videos, and even allow the Surface to go into standby, and the video will keep playing. Keep in mind that there are a limited number of applications that have Play To support. If your favorite application is lacking support, be sure to reach out to the author and ask them to add it.

Like this post? Please share it!

See a mistake? Edit this post!

Blogging Awesomeness with a Static Generator and Markdown

You'll notice I have a completely updated blog, and it's blazing fast! I've been through a lot of blogging platforms, and was never quite happy. Now, I've taken an entirely new approach that completely changes how I blog.

To show you just how fast it is, I can now spider every page on my blog, over 800+ pages, in 20 seconds or less:

Broken Link Checker Results

The Problem with Traditional Blog Engines

Blog engines typically work by generating pages on-the-fly from a database. As features get added, the code complexity increases, and the performance suffers. Web applications take the approach of generating their content at the last possible moment, when a request is made, while the user is waiting for their content. To solve this problem, the blog engines add yet another layer of complexity for caching. What we end up with is a beast like WordPress, with a massive caching solution like W3 Total Cache.

WordPress is Slow Like a Turtle

Next, layer in the entire class of problems that are created when we throw versioning into the mix. If you're not up-to-date, you may be vulnerable to hacking attempts. If you are up-to-date, you may have broken something, meanwhile, your users get to read server errors.

How do you back up your blog? You do back up your blog right? Do you back up just the content, or do you back up the application and the content database? Databases are powerful, but must be managed, and when it comes to my blog that takes time away from writing content.

Post images are also more difficult than they should be. In WordPress, they're "kind of" associated with your post, but you have to get them there somehow, and then link them properly.

Static Blog Generation from Markdown

In the past, I've used a number of tools to create blog posts. In the beginning, I used the best editor in the world, Notepad.exe. Then, I moved on to Windows Live Writer. I even tried the built-in WordPress editor. They all fell short. Writing HTML is easy as a developer, but writing well-formed HTML is not easy as a human. Many of my posts looked and rendered fine, but were missing a tag here or there.

When I used Live Writer, the HTML it generated was valid, but not very appealing. It felt wrong using it, and it never did handle images quite right. The naming was archaic, and by default the image would link to another copy of the same image. Syntax highlighting was also problematic. This was solved by using a Live Writer add-in, but the HTML it generated was far from ideal.

My latest obsession is Markdown. I know it's been around for a long time (2004?!), but I didn't see the value until recently. Turns out, it solves all the problems I had with editors and HTML. It lets me focus on writing content, and it's guaranteed to output valid HTML (well, you can intentionally break it if try hard enough). It's easy to read, and it's easy enough to parse that if I ever want to convert to something else, I can't imagine it would be difficult.

I've been patiently watching the Ghost platform, which is a Node.js blogging engine that uses markdown as the editor syntax. Very interesting. However, it actually only solved one of my complaints.

What I really wanted, was a way to write my posts in markdown, in a semantic folder structure:

|-- 11
    |-- my-incredible-post
        |-- an-image-for-my-post.png
        |-- another-image-for-my-post.jpg

As it turns out, there are static content generators that will take this content, process it, and output standard HTML. (more on that below) My blog content is now convention based instead of configuration based. The top-level folders determine the nesting organization (I use year/month). The post folder name determines the post URL. All images are referenced locally and then rewritten as needed by the generator.

Metadata is easy, just put human-readable YAML at the top, and it can be used during the generation phase.

layout: post
title: Blogging with a Static Generator and Markdown
date: 2013-12-01

We don't have to worry about HTML encoding, URL encoding, or JavaScript encoding. We just write our text and let the static generator deal with that.

To include code blocks, I simply indent them with a tab or 4 spaces per-line.


You can edit your markdown in any text editor such as Sublime Text, or something like MarkdownPad, which gives you a live preview. I store the post drafts in Skydrive so that they're accessible anywhere. I can edit them on any computer, or my tablet with Write RT.

Note: To import my content from WordPress, I created a rudimentary Node.js import tool.

Static Generation

Jekyll Homepage Screenshot

Jekyll is a fine static content generator, but I found a platform I like even better. DocPad is a fully modular content engine that is infinitely extensible and written in Node.js, which is right up my alley. At its core, it's very basic yet highly extensible with additional packages. I was able to get it running almost immediately. During development, it will monitor a set of folders, and when a file is added or changed, it will automatically process the file and put it in a corresponding output folder.

The power of this type of tool is amazing. The file extension will determine which processors get applied. If we want to process a file as markdown and convert to HTML, we can just call it Want to process it with the CoffeeKup templating engine? Call it You can even chain extensions to process the file with multiple engines sequentially. Want to use a CSS processor like SASS then minifiy the result? Just call it mystyle.css.min.sass.

Ultimately, we end up with a completely static website that contains a semantic file structure for the source and output. The fact that the website is static but dynamically generated gives us some major advantages:

  • We can host the site anywhere and it won't require any CPU power. Just bandwidth. We even have the option to host in a CDN, allowing the site to be served locally anywhere in the world.
  • The site itself is unhackable. The site is content, we're no longer connected to the hosting engine.
  • Versioning the site is easy. The files are text, and can be versioned easily in source control.
  • The site itself is uncrashable. The web server can crash, but we don't have code that can crash.

Amazing Automatic Deployment

I love Windows Azure for hosting. The fact that you pay only for what you use, a little or a lot, combined with power and simplicity make it an easy choice. Even though I work for Microsoft, this blog is my own, and I DO pay for it out of my own pocket.

I'm hosting my blog engine and the content in Azure, and I have Azure Web Sites configured to watch my repository, and automatically deploy when changes are made. The swap is completely seamless, with zero downtime between versions.

Azure Deployment Screenshot

Azure actually uses Node.js to run DocPad, generate the site, and then host it. After that, Azure simply serves out the static files, which IIS is extremely efficient at.

Here is my Azure usage in production. It could actually be used within the free tier of Azure (I may actually try that now).

Azure Website Usage

New Theme - Content is King

Content is king. Always has been, always will be. I wanted my blog to reflect that. In my old theme, I had the standard 2 column layout. The second column distracted from reading, made responsive design more difficult, and really served little purpose. The new design removes the chrome, and makes the content the focal point.

I can't take credit for creating the theme, I forked a website repository created by Erv Walter and used on his blog. This guy did amazing work setting this up. I have since made many modifications to the source to work with my system.


Comments are the one and only part of my blog that need to be dynamic. For this purpose, I turned to Disqus. Give it a try below!

I imported my comments and I was up and running. I'm happy to not have to deal with comment management and spam.


I'm really liking this setup. I use git to manage the source code for my blog, which is saved on GitHub. I can make changes to my content, check them in, and they are automatically deployed. It feels a LOT more lightweight than any other platform.

You can see the source for my blog in this repository. You can also fork it and use it for your own site within minutes if you like.

Give it a try!

Like this post? Please share it!

See a mistake? Edit this post!

Creating a Windows 8 Website Wrapper

I'm currently working on a Windows 8 app for my package tracking site, It's taking a long time to build, not because it's difficult, but because I'm trying to make the UI as useful as possible. In the meantime, I was looking for an app that I could quickly produce and get into the Windows 8 store. Wanting to play with the new WebView, I decided to build a wrapper for this blog, while adding enough value that it was a better experience than using a browser directly.

If you want to download the app, you can download it from the store with the name YTechie Blog.

The New WebView Control

I never used the WebView Control in Windows 8, but I heard knew that the control was dramatically improved in 8.1. For example:

  • New navigation control such as back, forward, stop, reload
  • Fixed z-order issues
  • Navigation interception

Embedding the WebView in my app was easy with this XAML:

<WebView Name="WebViewControl" Source=""></WebView>

If we run this app with any website, and then pin it side-by-side with the Internet Explorer version, you'll notice something very interesting. The IE version is rendered as if the browser is the full width of the screen, and then the content is scaled 50%. The WebView in our app, however, is actually fitting the width available, and is rendering the page at 100%. You'll notice that the responsive design of the page is kicking in, providing a better experience.

Metro IE vs WebView in App

Next, I added a busy indicator using the ProgressRing control. I centered the progress ring over the content with a higher z-index and some transparency. The goal was to make the indicator visible, but not obtrusive.

<ProgressRing Name="BusyIndicator" Height="100" Width="100" Background="White" BorderThickness="3" Padding="5" Opacity=".5" Visibility="Collapsed"></ProgressRing>

Then, I subscribed to the new navigation events:

WebViewControl.NavigationStarting += WebViewControlOnNavigationStarting;
WebViewControl.NavigationCompleted += WebViewControlOnNavigationCompleted;

When the WebView begins navigating, we want to display the progress indicator. Additionally, I wanted to take advantage of the fact that this is an app, and not just a website. If the user clicks on a link that navigates to another page within my blog, we'll simply take them there. However, if they click on an external link, we'll open it in the new Windows 8.1 side-by-side mode. This lets them maintain their current place, but read any supplementary information that is available. It's also easy for the user to switch back to full screen made for either app.

To indicate that we want to use the side-by-side view, we tell the URI launcher with the DesiredRemainingView flag set to UseHalf.

private async void WebViewControlOnNavigationStarting(WebView sender, WebViewNavigationStartingEventArgs args)
    if (args.Uri.Host.EndsWith("", StringComparison.CurrentCultureIgnoreCase))
        BusyIndicator.Visibility = Visibility.Visible;
           BusyIndicator.IsActive = true;

    args.Cancel = true;
    await Launcher.LaunchUriAsync(args.Uri, new LauncherOptions {DesiredRemainingView = ViewSizePreference.UseHalf});


I added my screenshots, added my app description, and rushed through the entire app submission processed. Within a few hours, I received an email saying that my app certification failed. Here are the details of the report I received:

Your app doesn't meet requirement 1.1.

  • The value or usefulness of the app is not clear.
  • The app is only valuable or useful in a subset of the languages that it claims to support.

Your app doesn't meet requirement 4.1.

Notes from Testers:

The app has declared access to network capabilities and no privacy statement was provided in the Description page. The app has declared access to network capabilities and no privacy statement was provided in the Windows Settings Charm. This app didn't appear to provide value or didn't seem useful to the reviewer.

Ouch! Admittedly, I had rushed this through, and I expected problems. Time to fix it.

Privacy Policy

This one is extremely common. If you use network functionality at all, a privacy statement is required. Fortunately, this is very easy to fix in Visual Studio 2013. Add a new file of type "Settings Flyout".

Settings Flyout Item Type

Change the text and add in a privacy policy. Here is a template I found on the web:

This application does not share personal information with third parties nor does it store any information about you. This privacy policy is subject to change without notice and was last updated on DATE. If you have any questions feel free to contact me directly at EMAIL

Now just wire up the new settings flyout in the App.xaml.cs by overriding the OnCommandsRequested method.

private void OnCommandsRequested(SettingsPane sender, SettingsPaneCommandsRequestedEventArgs args)
    var privacy = new SettingsCommand("PrivacyPolicy", "Privacy Policy", (handler =>
        var pp = new PrivacyPolicy();

More Functionality

Now, let's get back to making this app more useful. Admittedly, I rushed through the app submission process. This time, I took the time to add more than a single screenshot, and I also clearly articulated the reason why this app is better than using a browser directly.

I also added a forward and back button to the bottom AppBar.

Then, I added a recent posts button, that uses a MenuFlyout. I wanted this menu to lazy load the first time it was tapped, so I added an event handler for Opening. The code turned out to take longer than expected. Because of the way that the menu renders, I had to create all of the menu items ahead of time and hide them.

private void RecentPosts_Loading(object sender, object e)
    var menuFlyout = RecentPosts.Flyout as MenuFlyout;

    if (menuFlyout == null)

    var menuFlyoutItems = menuFlyout.Items;

    if (menuFlyoutItems == null)

    //Check if we already loaded this list
    if (menuFlyoutItems.Count > 0)

    var menuItems = new MenuFlyoutItem[10];
    for (var i = 0; i < 10; i++)
        var item = new MenuFlyoutItem { Text = "Loading recent posts..." };

        if (i > 0)
            item.Visibility = Visibility.Collapsed;

        menuItems[i] = item;


Then, the ReadLatestPosts method reads the items from the RSS feed, and populates the pre-created items:

private async void ReadLatestPosts(MenuFlyoutItem[] menuItems)
    var feedClient = new SyndicationClient();

        var feedData = await feedClient.RetrieveFeedAsync(new Uri(""));

        var itemNumber = 0;
        foreach (var feedItem in feedData.Items)
            if (itemNumber < 10)
                menuItems[itemNumber].Text = feedItem.Title.Text;
                menuItems[itemNumber].Visibility = Visibility.Visible;

                //We have to run this on the UI thread:
                menuItems[itemNumber].Click += (sender, args) => Dispatcher.RunAsync(CoreDispatcherPriority.Normal, () =>
                    var url = feedItem.Id;
                    WebViewControl.Navigate(new Uri(url));
    catch (Exception)
        menuItems[0].Text = "Error Reading Feed!";

Recent Posts Flyout Menu

The end result is that the app lazy loads the recent posts and renders the items on the fly. The experience is very fast and doesn't feel laggy.


I submitted the app again, and this time it passed the certification stage. In fact, it took less than 5 hours for the app to go through the entire certification process and show up in the app store.

I plan on adding additional features such as a live tile of new posts, push notification support, and possibly some enhanced navigation features. It makes for a great place to learn about Windows App development. If no one downloads my app, that's alright. There are plenty of opportunities for

Like this post? Please share it!

See a mistake? Edit this post!

Jason Young I'm Jason Young, software engineer. This blog contains my opinions, of which my employer - Microsoft - may not share.

@ytechieGitHubLinkedInStack OverflowPersonal VLOG