Kinect Development Without a Kinect

Huh? How can you develop software that integrates with the Microsoft Kinect if you don’t have a physical Kinect? We have a number of Kinect devices around the office, but they’re all in use. I want to test and develop on an application we’re writing, … there is another way.

Enter Kinect Studio v2.0. This application is installed with the Kinect v2.0 SDK, and allows you to record and playback streams from the Kinect device. It’s usually used to debug a repeatable scenario, but we’ve been using it to spread the ability to develop Kinect-enabled applications to engineers that don’t have a physical Kinect device. There are just a couple settings to be aware of to get this to work.

Someone has to record the streams in the first place. They can select which streams (RGB, Depth, IR, Body Index, etc. list of streams shown below) to include in the recording. The recording is captured in an XEF file that can get large quickly depending on what streams are included (on the order of 4GB+ for 1 minute). Obviously, you need to include the streams that you’re looking to work with in the application you’re developing.

Streams to Capture

Choose from many streams to include in the recording

So I have my .XEF file to playback, what next?

  • Open the XEF file in Studio.
  • Go to the PLAY tab
  • IMPORTANT: Select which of the available streams you want playback to contain (see screenshot below)
  • Click the settings gear next to the playback window, and select what output you want to see during playback. This does not affect what you’re application code receives from the Kinect. It controls display in the Studio UI only.
  • Click the Connect to Service button
  • Click PLAY

You should now start getting Kinect events in your application code.

Here’s what my studio UI looks like (with highlights calling out where to change settings).
Hope that helps.

Kinect Studio UI

Kinect Studio UI

What I do When Creating a New Machine for Development

Everyone has a build that makes them happy when it comes to their development machine. I particularly love to use Bootable VHDs. They allow me extreme flexibility in size, OS, and disposability. I know that sounds funny to some, but I burn through a new dev machine almost every 6 months. Lately it’s been ever project so the ease is great. I’m not going to go in to creating Bootable VHDs in this post, but my fellow InterKnowlogist Travis Schilling has covered it in this blog post. The steps work for both Windows 7 and Windows 8. I assume they will not change for Windows 10, but I don’t know.

I’ve followed this process twice in the last 3 months so it’s pretty comprehensive of what I need and do. Please do let me know your thoughts, suggestions, alternatives, and what you do! Cheers!

My Build

Dell Precision M4800, Core i7-4800MQ, 8GB RAM

SSD Size: 500GB

  • HOST OS Partition: 25GB (Windows 8.1 with Windows ADK – No updates)
  • Data Partition: 475GB

Bootable VHDs (Live on Data Partition)

  • DEV: 150GB
  • EXPERIMENTAL: 100GB
  • PRESENTATION: 50GB

Windows 8.1 Update or Higher

NOTE: “Restoration Tools” is a directory on the Data Partition (I always use the drive letter E:\) that contains installers that are required each time a new bootable vhd is created. This way the internet is not required in  order to get the machine up and running. This also significantly reduces down time caused by slow download speeds caused by some manufacturers and software providers.

Restoration Tools->Basics->M4800

  • BIOS not needed (M4800A03.exe)
  • System Tray->Dell Touchpad->Mouse
    • CHECK: Disable Touchpad & Pointstick when USB Mouse is present

Power Settings

Activate Windows

Start Full Windows Update

Control Panel\Appearance and Personalization\Display

  • Right-Click Desktop->Screen Resolution->Display (Back a level)
    • CHECK: Let me choose one scaling level for all my displays
    • ABOVE SELECT: “Smaller – 100%”

Add Printers

Disable Notifications

  • Win+I->Change PC Settings->Search and apps->
  • Search
    • Strict Search
  • Notifications
    • SWITCH “Show app notifications” to Off

Move Libraries (“C:\Users\Danny”, ALL)

  • Right-Click Library->Properties->Location (tab)
    • Input new shared directory location for library to share with other VHDs
      • (i.e. E:\Desktop)
    • Click Move
    • Accept move all Items

Taskbar and Navigation Properties

  • Right-Click Taskbar->Properties->Jump List
    • Set to 30 items

Add Toolbar to Taskbar for Recycle Bin

  • Right-Click Taskbar->Toolbars->New Toolbar
    • Select Folder with Shortcut to Recycle Bin (E:\Toolbar)

Remove Recycle Bin from Desktop

  • Right-Click Desktop->Personalize->Change Desktop Icons
    • UNCHECK: Recycle Bin

Finish Full Windows Update (Wait – Continuing before Windows is fully updated may cause instability in Windows. It’s best to fully patch Windows and then continue.)

Business Environment Install (Unless noted all apps can be found in Restoration Tools)

  • Office 2013
    • Setup Outlook and Lync
      • Outlook
        • File->Options->Reading Pane->Uncheck: Mark item as read when selection changes
    • OneNote
      • Can’t Open Hyperlinks: http://support2.microsoft.com/default.aspx?scid=kb;en-us;310049

Restoration Tools->Basics->Misc

  • 7zip
  • Notepad++
  • Cubby
  • Paint.NET
  • TreeSize (? Better app for purpose ?)
  • Chrome
    • Sign in to Chrome and all extensions
  • Camtasia
  • Snagit
  • ZoomIt
  • Skype
    • IM & SMS Settings->IM Settings-> Show Advanced Settings
      • Select: paste message as plain text
  • VLC
  • TweetDeck
  • http://baremetalsoft.com/baretail/
    • Restoration Tools->NoInstall
      • Enable Search: Pin to Start

Set Default File Type Associations

  • All associations for Notepad should be changed to Notepad++
  • Search “Default”->Default Programs->Associate a file type or protocol with a program

Pin Chrome Applications (Pandora, Wunderlist)

  • From Pandora (Pick favorite Station)
    • Click Hamburger Icon->More Tools->Create application shortcuts
      • ONLY CHECK: Taskbar

Enable IIS

  • .NET 3.5
  • .NET 4.5
  • IIS 6 Compatibility
  • Other settings as desired

Full Windows Update (Wait – Again, to prevent instability fully patch Windows at this time.)

Dev Environment Install – Do in Order (Unless noted all apps can be found in Restoration Tools)

  • SQL Server 2012 Dev Edition (MSDN)
  • Visual Studio 2010 (MSDN)
  • Visual Studio 2013 (MSDN)
    • Disable Start Page (Check box at bottom of page)
    • Perform all updates
    • Update Snippets Directory
    • Options->
      • Documents->
        • Check: Auto-load changes, if saved
      • Startup->
        • Show empty environment
        • Uncheck: Download content
      • Tabs and Windows->
        • Uncheck: Allow new files to be opened in the preview tab
    • In Debug Mode->
      • Output Window
      • Solution Explorer
      • Team Explorer
      • Changes
      • Pending changes
  • Resharper
    • Use VS Intellisense
  • Xamarin
  • Telerik
  • Beyond Compare
    • Setup VS (Optional)
  • Xaml Spy
  • Snoop
  • Kaxaml
    • Don’t use as default .xaml file opener
  • MongoDB
    • Still working to figure this one out…

Taskbar Icon Order (Enable Win + [#], ex: Win + 1 launches IE):

  1. IE
  2. Pandora
  3. Chrome
  4. File Explorer
  5. VS13 (Always in Admin Mode)
  6. SQL12
  7. Wunderlist
  8. Excel
  9. Snoop (Always in Admin Mode)

WPF Round Table Part 2: Multi UI Threaded Control – Fixes

Introduction

Click here to download code and sample project – Fixed

Here are the past articles in the WPF Round Table Series:

In my last post I discussed a control I made that allowed for a user to create inline XAML on different UI threads. Today, I am going to discuss a couple of the pitfalls I ran into when attempting to resolve an issue a user asked about

FrameworkTemplates

So, a user, rajesh, asked about how to solve a particular issue with having 4 controls with busy indicators loading all on separate threads. As I was attempting to construct a solution my first instinct was to simply use the ThreadSeparatedStyle property and set the Style’s Template property with the look you want, sort of like this:

<Style TargetType="{x:Type Control}">
	<Setter Property="Template">
		<Setter.Value>
			<ControlTemplate TargetType="{x:Type Control}">
				<multi:BusyIndicator IsBusy="True">
					<Border Background="#66000000">
						<TextBlock Text="Random Text" HorizontalAlignment="Center" VerticalAlignment="Center"/>
					</Border>
				</multi:BusyIndicator>
			</ControlTemplate>
		</Setter.Value>
	</Setter>
</Style>

Suddenly, I was hit with a UI thread access exception when attempting to do this. The problem arises from how WPF allows users to design FrameworkTemplates. WPF instantiates the templates immediately, which will cause threading issues when attempting to access this setter value on our separate UI thread. The key to solving this is by deconstructing the template into a thread safe string by using XAML serialization. First we will grab any FrameworkTemplates from the style:

var templateDict = new Dictionary<DependencyProperty, string>();
foreach ( var setterBase in setters )
{
	var setter = (Setter)setterBase;

	var oldTemp = setter.Value as FrameworkTemplate;

	// templates are instantiated on the thread its defined in, this may cause UI thread access issues
	// we need to deconstruct the template as a string so it can be accessed on our other thread
	if ( oldTemp != null && !templateDict.ContainsKey( setter.Property ) )
	{
		var templateString = XamlWriter.Save( oldTemp );
		templateDict.Add( setter.Property, templateString );
	}
}

Then, while recreating our Style on the newly created UI thread, we reconstruct the template:

foreach ( var setterBase in setters )
{
	var setter = (Setter)setterBase;

	// now that we are on our new UI thread, we can reconstruct the template
	string templateString;
	if ( templateDict.TryGetValue( setter.Property, out templateString ) )
	{
		var reader = new StringReader( templateString );
		var xmlReader = XmlReader.Create( reader );
		var template = XamlReader.Load( xmlReader );
		setter = new Setter( setter.Property, template );
	}

	newStyle.Setters.Add( setter );
}

Now we are able to design our UI thread separated control inline our main Xaml and also any FrameworkTemplates that are defined within.

XAML Serialization Limitations

I actually ran into another error when attempting to insert my custom UserControl into the UI thread separated Style’s template. It involved a ResourceDictionary duplicate key error. This problem absolutely dumbfounded me; not only in trying to understand why the same resource would try to be defined twice, but also how can there be duplicates on a newly created UI thread. After racking my head for hours to come up with a work around solution I eventually found out the direct cause of the error in question. It had to do with how the XamlWriter class serializes the given XAML tree. To give you an idea let’s say we have our ThreadSeparatedStyle defined like this:

<Style TargetType="{x:Type Control}">
	<Setter Property="Template">
		<Setter.Value>
			<ControlTemplate TargetType="{x:Type Control}">
				<Border Width="100" Height="50" VerticalAlignment="Bottom">
					<Border.Resources>
						<converters:ColorValueConverter x:Key="ColorValueConverter"/>
					</Border.Resources>
					<Border.Background>
						<SolidColorBrush Color="{Binding Source='Black', Converter={StaticResource ColorValueConverter}}"/>
					</Border.Background>
					<TextBlock Text="Random Text" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White"/>
				</Border>
			</ControlTemplate>
		</Setter.Value>
	</Setter>
</Style>

When Xaml.Save attempts to serialize the ControlTemplate here is our string result:

<ControlTemplate TargetType="Control" 
				 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
				 xmlns:cpc="clr-namespace:Core.Presentation.Converters;assembly=Core" 
				 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
	<Border Width="100" Height="50" VerticalAlignment="Bottom">
		<Border.Background>
			<SolidColorBrush Color="#FF000000" />
		</Border.Background>
		<Border.Resources>
			<cpc:ColorValueConverter x:Key="ColorValueConverter" />
		</Border.Resources>
		<TextBlock Text="Random Text" Foreground="#FFFFFFFF" HorizontalAlignment="Center" VerticalAlignment="Center" />
	</Border>
</ControlTemplate>

Now, if we decided to wrap this into a UserControl, called RandomTextUserControl, it may look like this:

<UserControl x:Class="MultiUiThreadedExample.RandomTextUserControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:converters="clr-namespace:Core.Presentation.Converters;assembly=Core">
	<UserControl.Resources>
		<converters:ColorValueConverter x:Key="ColorValueConverter"/>
	</UserControl.Resources>
	<Border Width="100" Height="50" VerticalAlignment="Bottom">
		<Border.Background>
			<SolidColorBrush Color="{Binding Source='Black', Converter={StaticResource ColorValueConverter}}"/>
		</Border.Background>
		<TextBlock Text="Random Text" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White"/>
	</Border>
</UserControl>

When we replace our current XAML with this control we will receive the ResourceDictionary XamlParseException because it is trying to include ‘ColorValueConverter’ more than once. If we go back to our Xaml.Save result we will find our culprit:

<ControlTemplate TargetType="Control"
                 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                 xmlns:mute="clr-namespace:MultiUiThreadedExample;assembly=MultiUiThreadedExample"
                 xmlns:cpc="clr-namespace:Core.Presentation.Converters;assembly=Core"
                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
	<mute:RandomTextUserControl>
		<mute:RandomTextUserControl.Resources>
			<cpc:ColorValueConverter x:Key="ColorValueConverter" />
		</mute:RandomTextUserControl.Resources>
		<Border Width="100" Height="50" VerticalAlignment="Bottom">
			<Border.Background>
				<SolidColorBrush Color="#FF000000" />
			</Border.Background>
			<TextBlock Text="Random Text" Foreground="#FFFFFFFF" HorizontalAlignment="Center" VerticalAlignment="Center" />
		</Border>
	</mute:RandomTextUserControl>
</ControlTemplate>

As you can see, XamlWriter.Save is actually including our parent level resources from RandomTextUserControl. This will cause duplication issue since it will attempt to add the resources displayed here plus the ones already defined inside RandomTextUserControl. The reason is because XamlWriter tries to keep the result self-contained. Meaning, the final result will be a single page XAML tree. Unfortunately, the process tends to add any referenced resources that may come from the overall application. This limitation, along with others, are actually documented by Microsoft. So, the solution here is to either put all your resources into the first content elements resources property or define the design of your control using a template, like this:

<UserControl x:Class="MultiUiThreadedExample.RandomTextUserControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:converters="clr-namespace:Core.Presentation.Converters;assembly=Core"
             xmlns:multiUiThreadedExample="clr-namespace:MultiUiThreadedExample">
	<UserControl.Template>
		<ControlTemplate TargetType="{x:Type multiUiThreadedExample:RandomTextUserControl}">
			<ControlTemplate.Resources>
				<converters:ColorValueConverter x:Key="ColorValueConverter"/>
			</ControlTemplate.Resources>
			<Border Width="100" Height="50" VerticalAlignment="Bottom">
				<Border.Background>
					<SolidColorBrush Color="{Binding Source='Black', Converter={StaticResource ColorValueConverter}}"/>
				</Border.Background>
				<TextBlock Text="Random Text" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White"/>
			</Border>
		</ControlTemplate>
	</UserControl.Template>
</UserControl>

I actually prefer this method since it reduces an unnecessary ContentPresenter from being created and allows for more seamless TemplateBinding with the parent and Triggering.

Sideloading Windows Store Apps – Install and Configure the Key

In a previous post, I described the process of obtaining a Microsoft key to use for Windows Store apps that are sideloaded (not obtained or installed via the store).  We have taken this approach most recently with the “Magic Wall” software that we built for CNN. Now that you have the key, let’s configure a machine with that key to install and run the sideloaded application.

I was surprised to see that there is nothing to do to the application itself to enable it for sideloading.  You don’t embed your key in the app – it’s completely stand-alone.  This kind of makes sense and has a huge benefit of allowing you to use the same sideloading key for any application, even if it wasn’t originally intended to be sideloaded.  You DO still have to sign your application with a code-signing certificate.  Let’s take care of that first. 

Sign the App With Code Signing Certificate

In your WinRT application project manifest, Packaging tab, use the button to “Choose Certificate…”.  Point to your code signing cert, provide your password, and you’re good.

Sign the application

Sign the application

Now build your app, and create the app package.  You only need two files from the directory of files created by the app package tool: 

  • the .appx (application and resources bundled for installation)
  • the .appxsym (debug symbols, useful for digging through crash dumps, etc)

The appx is still not signed, it’s just built with the certificate.  Now let’s sign it.  Open a command prompt with administrative privileges, and run the following command, providing the path to the certificate and the certificate password.

SignTool sign /fd SHA256 /a /f {PathToCertificate} /p {Password} {PathToAppx}

Install Sideloading Key

Next you have to configure the machine where you want to sideload the application.  You only have to do this once for each machine, and then you can sideload any applications on it.  Again, the key is not tied to the application.  You can easily find this info online, but here it is again for reference.

From an administrative command prompt:

The command below installs the sideloading key on the machine.  Use the key that you got from the Volume License Center key manager.  You should see a success message when it completes.

slmgr /ipk {your sideloading key without curly braces}

Then run the next command, which “activates” the sideloading key.  You must be connected to the internet to run this command, as it will connect with the Microsoft licensing servers to verify the key.  Unlike the GUID above, the GUID used below is not specific to your sideloading key.  Everyone should use this same GUID. You should see a success message when it completes.

slmgr /ato ec67814b-30e6-4a50-bf7b-d55daf729d1e

Allow Trusted Applications to Install

Next, a simple registry entry allows the OS to install trusted applications (those that are signed).   Add the following key and value to the registry.  You should add the “Appx” key if it doesn’t already exist.

HKEY_LOCAL_MACHINE\Software\Policies\Microsoft\Windows\Appx\AllowAllTrustedApps = 1 (DWORD)

Install the Application

Finally, you install the application using PowerShell. Copy the .appx and .appxsym to the target machine where you have enabled sideloading from above. From a PowerShell command prompt, use the following command.

Add-AppxPackage {PathToAppx}

Now you can find the installed application on the start screen list of all apps, or through search. Pin it to the start screen or run it from there.

That’s it.  Hope that works for you.

WPF Round Table Part 2: Multi UI Threaded Control

Introduction

Click here to download code and sample project – Fixed

Here are the past articles in the WPF Round Table Series:

In this series I want to express some of the knowledge I gained in WPF over the years when tackling unique situations. For today’s post though I would like to discuss something that was created quite recently after a brief discussion with coworkers about multi UI threaded controls. I always knew how to create a window on a separate UI thread, but what if you wanted a control to be part of a main window, yet have its own dispatcher message pump?

New Window UI

Well to start off we need to understand how to even spawn a new WPF supported UI thread. This article explains how to launch a window on a completely new UI thread. The creation process is actually quite simple as demonstrated in this code snippet:

Thread thread = new Thread(() =>
{
	Window1 w = new Window1();
	w.Show();
	w.Closed += (sender2, e2) =>
	w.Dispatcher.InvokeShutdown();
	System.Windows.Threading.Dispatcher.Run();
});

thread.SetApartmentState(ApartmentState.STA);
thread.Start();

Here we start by simply creating a new thread which will host our new Window. Inside the thread we create a window and make sure the Dispatcher (which will get automatically created on demand for this thread when accessed) starts the message pump. We also handle shutting down the message pump on the window’s Closed event. At the end we set the thread’s ApartmentState to be single-threaded apartment (STA) rather than multithreaded partment (MTA) since WPF UI threads cannot be multithreaded. Once we start the thread we can see our new window now runs on its own UI thread.

Non-Interacting Host

Although a new window has its benefits, what if you want a UI independent control placed inside your main window? Well this MSDN article explains how this process can occur using a HostVisual class. The greatest benefit HostVisual provides is a way to arbitrarily connect any Visual to a parent visual tree. Unfortunately, there is not a way to fully measure, arrange, and render an item through a HostVisual without a presentation source. So we create our own presentation source which simply contains and displays our HostVisual to show in our window. Here is the main components of the class:

private readonly VisualTarget _visualTarget;

public VisualTargetPresentationSource( HostVisual hostVisual )
{
	_visualTarget = new VisualTarget( hostVisual );
	AddSource();
}

public override Visual RootVisual
{
	get
	{
		return _visualTarget.RootVisual;
	}

	set
	{
		Visual oldRoot = _visualTarget.RootVisual;

		// Set the root visual of the VisualTarget.  This visual will
		// now be used to visually compose the scene.
		_visualTarget.RootVisual = value;

		// Tell the PresentationSource that the root visual has
		// changed.  This kicks off a bunch of stuff like the
		// Loaded event.
		RootChanged( oldRoot, value );

		// Kickoff layout...
		UIElement rootElement = value as UIElement;
		if ( rootElement != null )
		{
			rootElement.Measure( new Size( Double.PositiveInfinity, Double.PositiveInfinity ) );
			rootElement.Arrange( new Rect( rootElement.DesiredSize ) );
		}
	}
}

protected override CompositionTarget GetCompositionTargetCore()
{
	return _visualTarget;
}

And running the sample project you can test this by toggling the busy indicator:

toggleThe main caveat with this method is that you are unable to interact with the control, which is fine for the purpose I want for this control. But even though I was able to create a control independent of the UI I still had issues positioning the thread separated control in relation to my main window.

Decorator with Child Elements

I managed to stumble upon another article that not only addressed the issue of alignment, but goes one step further by allowing the control to have child elements as well. I’ll include a ‘Child’ property along with a ‘ContentProperty’ attribute at the header of my class so that I can create UIElements right into XAML. Here is the logic that helps display our UI content onto a separate thread:

protected virtual void CreateThreadSeparatedElement()
{
	_hostVisual = new HostVisual();

	AddLogicalChild( _hostVisual );
	AddVisualChild( _hostVisual );

	// Spin up a worker thread, and pass it the HostVisual that it
	// should be part of.
	var thread = new Thread( CreateContentOnSeparateThread )
	{
		IsBackground = true
	};
	thread.SetApartmentState( ApartmentState.STA );
	thread.Start();

	// Wait for the worker thread to spin up and create the VisualTarget.
	_resentEvent.WaitOne();

	InvalidateMeasure();
}

Since we are creating a new HostVisual we need to make sure we define the parent-child relationship between the HostVisual and our UI control by calling ‘AddLogicalChild’ and ‘AddVisualChild’. Let’s take a look at how we are creating our UI content on a separate thread:

private void CreateContentOnSeparateThread()
{
	if ( _hostVisual != null )
	{
		// Create the VisualTargetPresentationSource and then signal the
		// calling thread, so that it can continue without waiting for us.
		var visualTarget = new VisualTargetPresentationSource( _hostVisual );

		_uiContent = CreateUiContent();

		if (_uiContent == null)
		{
			throw new InvalidOperationException("Created UI Content cannot return null. Either override 'CreateUiContent()' or assign a style to 'ThreadSeparatedStyle'");
		}
		_threadSeparatedDispatcher = _uiContent.Dispatcher;

		_resentEvent.Set();

		visualTarget.RootVisual = _uiContent;

		// Run a dispatcher for this worker thread.  This is the central
		// processing loop for WPF.
		Dispatcher.Run();

		visualTarget.Dispose();
	}

}

Here we can see us using our VisualTargetPresentationSource custom class to contain the HostVisual. The ‘CreateUiContent’ method is simply a protected virtual method that creates our content for us and can be overrided by inheriting classes. To make sure both our child content and the HostVisual is represented in our control we need to override the ‘VisualChildrenCount’, ‘LogicalChildren’, and ‘GetVisualChild’ methods to take both elements into account. Although this will allow for allow our content to render, our UI separated content will have measuring issues if the Child content has limited size or merely does not exist. To fix this we are going to override the ‘Measure’ and ‘Arrange’ methods like so:

protected override Size MeasureOverride( Size constraint )
{
	var childSize = new Size();
	var uiSize = new Size();

	if ( Child != null )
	{
		Child.Measure( constraint );

		var element = Child as FrameworkElement;
		childSize.Width = element != null ? element.ActualWidth : Child.DesiredSize.Width;
		childSize.Height = element != null ? element.ActualHeight : Child.DesiredSize.Height;
	}

	if ( _uiContent != null )
	{
		_uiContent.Dispatcher.Invoke( DispatcherPriority.Background, new Action( () => _uiContent.Measure( constraint ) ) );
		uiSize.Width = _uiContent.ActualWidth;
		uiSize.Height = _uiContent.ActualHeight;
	}

	var size = new Size( Math.Max( childSize.Width, uiSize.Width), Math.Max( childSize.Height, uiSize.Height) );;
	return size;
}

protected override Size ArrangeOverride( Size finalSize )
{
	if ( Child != null )
	{
		Child.Arrange( new Rect( finalSize ) );
	}

	if ( _uiContent != null )
	{
		_uiContent.Dispatcher.BeginInvoke( DispatcherPriority.Background, new Action( () => _uiContent.Arrange( new Rect( finalSize ) ) ) );
	}

	return finalSize;
}

As you can see I am treating our main parent control mostly like a panel where I either fill out the space given or take the max size of either my Child element or the size of the element on the separate thread.

Thread Separated Style

Although we have our ‘CreateUiContent’ method to instantiate our control from code, what if we want to create our control from a style right within XAML? Well we can create a DependencyProperty called ‘ThreadSeparatedStyle’, but the style itself must be instantiated on the new UI thread or else we’ll run into thread exceptions. In order to get around this issue we are going to recreate the style on the fly using reflection through an anonymous call. Here you can see how this occurs when the style changes:

private static void OnThreadSeparatedStyleChanged( DependencyObject d, DependencyPropertyChangedEventArgs e )
{
	var control = (UiThreadSeparatedControl)d;
	var style = e.NewValue as Style;
	if ( style != null )
	{
		var invokingType = style.TargetType;
		var setters = style.Setters.ToArray();

		control._createContentFromStyle = () =>
		{
			var newStyle = new Style
			{
				TargetType = invokingType,
			};
			foreach ( var setter in setters )
			{
				newStyle.Setters.Add( setter );
			}

			var contentt = (FrameworkElement)Activator.CreateInstance( newStyle.TargetType );
			contentt.Style = newStyle;

			return contentt;
		};
	}
	else
	{
		control._createContentFromStyle = null;
	}
}

Since I use the style’s target type to instantiate the control, the assigned target type in the style should not refer to a base control. I am also holding onto all the setter values for the style so they are preserved on recreation. Although I could avoid using reflection and recreating the style altogether by placing the style in a Themes defined folder Generic.xaml, by doing it this way it allows me to define the style at the same time I create the control:


<multi:UiThreadSeparatedControl IsContentShowing="{Binding ElementName=Toggle, Path=IsChecked}">
	<multi:UiThreadSeparatedControl.ThreadSeparatedStyle>
		<Style TargetType="multi:BusyIndicator">
			<Setter Property="IsBusy" Value="True"/>
		</Style>
	</multi:UiThreadSeparatedControl.ThreadSeparatedStyle>
</multi:UiThreadSeparatedControl>

The convenience of having this as an option seemed to outweigh trying to avoid reflection. Especially since it is much more intuitive to define your styles anywhere in XAML, not just UI independent resource dictionaries.

FrozenProcessControl

Now how could we use this type of control in our application? One scenario could be a case where you want to display a busy cursor if the window happens to freeze. Although it is quite a bad practice for your application to ever freeze. Usually this problem can be circumvented by offloading certain functionality onto a separate, non-UI thread. But sometimes you are left without a choice in the matter. For instance, say you are using a third party control that has become an integral part of your application and suddenly adding new, large amount of data causes the control to inefficiently load all its components on the UI thread. You may not have access to the controls source code or do not have time to replace the control. It would be a much better user experience to at least display something to the user to let it know some form of action is still happening rather than staring at a frozen screen. This is where our FrozenProcessControl comes into play.

At first we will extend our UiThreadSeparatedControl and override the ‘CreateUiContent’ method:

protected override FrameworkElement CreateUiContent()
{
	return new BusyIndicator
	{
		IsBusy = true,
		HorizontalAlignment = HorizontalAlignment.Center
	};
}

We will also have two Timers; one for polling the main window for no response, and another when the window is non-responsive for too long. Here is how our polling method is handled:

private void PollMainWindowTimerOnElapsed( object sender, ElapsedEventArgs elapsedEventArgs )
{
	_pollMainWindowTimer.Stop();
	_nonResponseTimer.Start();
	if ( _mainWindowProcess.Responding )
	{
		_nonResponseTimer.Stop();
		if ( _isContentDisplaying )
		{
			_isContentDisplaying = false;

			_threadSeparatedDispatcher.BeginInvoke( DispatcherPriority.Render, new Action( () =>
			{
				_uiContent.Visibility = Visibility.Hidden;
				_pollMainWindowTimer.Start();
			} ) );
		}
		else
		{
			_pollMainWindowTimer.Start();
		}
	}
}

As you can see we immediately start our non-responsive timer because if the main window’s process is unable to respond, accessing the process will cause the thread to freeze until activity happens again. If we do happen to gain response again and our busy indicator is displaying we need to update its visibility using its UI thread dispatcher to access the separate UI thread. Here we can see how our non-response timer is handled:

private void NonResponseTimer_Elapsed( object sender, ElapsedEventArgs e )
{
	_pollMainWindowTimer.Stop();
	_nonResponseTimer.Stop();

	_isContentDisplaying = true;

	_threadSeparatedDispatcher.BeginInvoke( DispatcherPriority.Render, new Action( () =>
	{
		_uiContent.Visibility = Visibility.Visible;
	} ) );
}

This is pretty straight forward, if the poll timer is frozen from accessing the process we do not want any further events to happen until the window is active again. After that we update the visibility using the separate UI thread to show our busy indicator. Here we can see the control in action in our demo by hitting the Freeze button, viewing the busy indicator on the far right freeze, and then suddenly seeing our thread separated control run on top:

frozen

Conclusion

Overall, this is quite a useful control, but the major caveat to using this is there is no ability to accept user input. Other than that this could easily help offload the build time for certain, display-only controls.

Querying Entities from Azure Storage Tables using Javascript

After enabling the Azure storage to allow cross-origin requests using CORS. Now we are ready to query the storage entities using Javascript.

Know the URL

We start off by reading Microsoft Azure post about querying entities. According to the post, we can make a GET request to the Azure table using:

var urlPath = https://{accountName}.table.core.windows.net/{mytable}(PartitionKey='<partition-key>',RowKey='<row-key>')?$select=<comma-separated-property-names>
  • Partition key and Row key are used to query a specific entity.
  • The select query is used to filter on that specific column. (e.g.$select=timestamp will grab the entities’ timestamp).

Build the Signature

As reference, Microsoft Azure’s blog about Authentication for the Azure Storage Services, it shows what we need to construct the Signature String.
The formula to build the signature is Signature=Base64(HMAC-SHA256(UTF8(StringToSign)))

Things To Know:

  • Shared Key Lite Authentication (Table Service) has a Signature String:

    StringToSign = Date + "\n" 
                   CanonicalizedResource
    

    Shared Key Authentication (Table Service) has a Signature String:

    StringToSign = VERB + "\n" + 
                   Content-MD5 + "\n" + 
                   Content-Type + "\n" +
                   Date + "\n" +
                   CanonicalizedResource;
    
  • Canonicalized Resource has a format of: “/{accountname}/{query string}
    For example, If you want to call a GET request on:

    https://myaccount.table.core.windows.net/mytable()?$filter=<query-expression>&$select=<comma-separated-property-names>
    

    The query string is: mytable() [do not include anything after ‘?’]. So the Canonicalized Resource will be: /myaccount/mytable()

  • Secret Key:
    Log in to your Microsoft Azure Portal -> Select the Storage account you want -> Manage Access Keys -> Primary Access Key or Secondary Access Key
  • Lastly, the most confusing of all, encrypting the Signature String and Secret Key to form the Signature
    For encryption, I used Crypto-JS.
    Basically, we need to perform SHA-256 hash to produce the signature. Using Crypto-JS, it will be:

    var signature = CryptoJS.enc.Base64.stringify(CryptoJS.HmacSHA256(CryptoJS.enc.Utf8.parse(stringToSign), CryptoJS.enc.Base64.parse(secretKey)));
    

Request Headers

There are only 2 required request headers when doing a request to Microsoft Azure:

  • Authorization=”[SharedKey|SharedKeyLite] {AccountName}:{Signature}”
    (e.g. Authorization: SharedKeyLite testaccount1:uay+rilMVayH/SVI8X+a3fL8k/NxCnIePdyZSkqvydM=)
  • Date or x-ms-date – make sure it’s in UTC.

Optional:

  • x-ms-version – version of the operation for the request.
  • Accept – content type of the response payload.
    • application/atom+xml
    • application/json;odata=nometadata
    • application/json;odata=minimalmetadata
    • application/json;odata=fullmetadata

In Action…

So using JQuery ajax, we call:

$.ajax({
		url: urlPath,
		type: 'GET',
		success: function (data) {
			//do something to data
		},
		beforeSend: function (xhr) {
			xhr.setRequestHeader('Authorization', "SharedKey " + accountName + ":" + signature);
			xhr.setRequestHeader('x-ms-date', dateInUTC);
			xhr.setRequestHeader('x-ms-version', '2014-02-14');
			xhr.setRequestHeader('Accept', 'application/json;odata=nometadata');
			xhr.setRequestHeader('DataServiceVersion', '3.0;NetFx');
			xhr.setRequestHeader('MaxDataServiceVersion', '3.0;NetFx');
		},
		error: function (rcvData) {
			console.log(rcvData);
		}
	});

And you are done! Happy Coding.

NEAdNUG: Crawl, Walk, Talk – Windows Universal App Lifecycle and Cortana API

Always more time for firsts! This was my first time giving a remote presentation! HUGE THANKS to NEAdNUG and everyone else who attended with that group or online! It’s a strange feeling to be so immersed in tech and be able to connect with people on the other side of the country.

Crawl Walk Talk – Windows Universal App Lifecycle and Cortana API

Repo: CrawlWalkTalk

It’s always a pleasure to work with such talented people across the globe. I hope my materials were found to be relevant and helpful. Feedback and Pull Requests are always welcome. Hope to see you at the next User Group!

Sideloading Windows Store Apps – Purchase the Key

Back in April, Microsoft announced that it was making it much easier to obtain a sideloading key for deploying “internal” line of business Windows Store applications. Until then, it was ridiculously prohibitive to acquire a key, so the sideloading story was crippled.  The above link (and this one) has the details, but suffice it to say that you are now able to get a sideloading key for $100. Sounds easy, right?

I set out to buy a key for us to use at InterKnowlogy, but … I searched high and low for information on WHERE to buy such a key. We get our volume licensing via our Microsoft Gold Partnership, and that’s not one of the qualifying methods for already having a sideloading key.  WHERE can I buy the key?

After many calls, I find that the Microsoft Volume License Service Center does not sell it, but instead recommends a volume license re-seller.  (I’m not trying to buy a volume license, just a single license for unlimited sideloading.)  I assume there are lots of volume license re-sellers, but that I ended up with was Software House International (SHI).

LONG story short:  this key is being offered as part of the Open License Program, which allows you to setup an account even though you haven’t or won’t be buying LOTS of (volume) licenses.

Setup the account, purchase the “Windows Sideloading Rights” license (QTY 1), part #4UN-00005.

No good.  You must buy at least 5 items to qualify for a “volume license”.  WHAT?  I only need a single license, that gives me UNLIMITED sideloads.  Why would I need more than one?

The fix (salesman’s idea): find the cheapest thing in their catalog and buy 4 of them:  “Microsoft DVD Playback Pack for Windows Vista Business” (QTY 4).  $4.50 each!!

Make the purchase, $111.58, and now I have some sweet DVD playback software to give away to developers as prizes!  :)  Download the key, and next blog post, I’ll show you how to use the key to sideload.

Really cool that Microsoft made it cheap to get a sideloading license, but the mechanics of the process (at least to purchase) are still pretty wonky.

(We have taken this approach most recently with the “Magic Wall” software that we built for CNN.)

WPF Round Table Part 1: Simple Pie Chart

Introduction

Click here to download code and sample project

Over the years I have been presented with many different situations while programming in WPF, which required a certain Control or class to be created to accommodate. Given all the various solutions I created throughout the years I thought it might be helpful to someone else. During this ongoing series I am going to post some of the more useful classes I have made in the past.

Simple Pie Chart

In one project I was assigned to redesign, there was data coming in that we wanted represented in the form of a pie chart. Initially, we simply displayed the information in the form of one out of many static pie chart images. A specific image would get selected based on what the percentage was closest. Although this solved our immediate needs I believed generating this with GeometryDrawing would make the chart much more accurate and should not be too difficult to create. My immediate goal was to try and represent some type of pie chart in XAML to get an idea of how it could be represented dynamically. Initial searching led to this solution involving dividing a chart into thirds. Following the example given will produce a subdivided geometric ellipse:

Pie Chart Example - 1

Programmatically Build Chart

Unfortunately, using strictly XAML will not work when attempting to create a pie chart dynamically. This is definitely a great starting point in how we could create this Control, but I needed a better understanding how to create geometric objects programmatically. Doing some more searching I came across this Code Project that describes how to create pie charts from code. My pie chart will be much simpler containing only two slices and taking in a percentage value to represent how the slices will subdivide. I still use an Image to represent how the geometry will be drawn and begin the creation of the root elements:

_pieChartImage.Width = _pieChartImage.Height = Width = Height = Size;

var di = new DrawingImage();
_pieChartImage.Source = di;

var dg = new DrawingGroup();
di.Drawing = dg;

Since I know my starting point of the pie will always be at the top I then calculate where my line segment will end (the PieSliceFillers are brushes representing the fill color):

var angle = 360 * Percentage;
var radians = ( Math.PI / 180 ) * angle;
var endPointX = Math.Sin( radians ) * Height / 2 + Height / 2;
var endPointY = Width / 2 - Math.Cos( radians ) * Width / 2;
var endPoint = new Point( endPointX, endPointY );

dg.Children.Add( CreatePathGeometry( InnerPieSliceFill, new Point( Width / 2, 0 ), endPoint, Percentage > 0.5 ) );
dg.Children.Add( CreatePathGeometry( OuterPieSliceFill, endPoint, new Point( Width / 2, 0 ), Percentage <= 0.5 ) );

My CreatePathGeometry method creates both the inner and outer pie slices using a starting point, the point where the arc will end, and a boolean for ArcSegment to determine how the arc should get drawn if greater than 180 degrees.

private GeometryDrawing CreatePathGeometry( Brush brush, Point startPoint, Point arcPoint, bool isLargeArc )
{
	var midPoint = new Point( Width / 2, Height / 2 );

	var drawing = new GeometryDrawing { Brush = brush };
	var pathGeometry = new PathGeometry();
	var pathFigure = new PathFigure { StartPoint = midPoint };

	var ls1 = new LineSegment( startPoint, false );
	var arc = new ArcSegment
	{
		SweepDirection = SweepDirection.Clockwise,
		Size = new Size( Width / 2, Height / 2 ),
		Point = arcPoint,
		IsLargeArc = isLargeArc
	};
	var ls2 = new LineSegment( midPoint, false );

	drawing.Geometry = pathGeometry;
	pathGeometry.Figures.Add( pathFigure );

	pathFigure.Segments.Add( ls1 );
	pathFigure.Segments.Add( arc );
	pathFigure.Segments.Add( ls2 );

	return drawing;
}

A better to visualize this is through a XAML representation:





And with that we are able to create quick an easy pie charts as shown here:

Pie Chart Example - 2

Multi Pie Chart

Although this is suitable for a two sided pie chart, but what if you wanted more? That process is pretty straight forward based off what we already created. By including two dependency properties to represent our collection of data and brushes, we only need to rewrite how my segments are created:

var total = DataList.Sum();
var startPoint = new Point( Width / 2, 0 );
double radians = 0;

for ( int i = 0; i < DataList.Count; i++ ) { 	var data = DataList[i]; 	var dataBrush = GetBrushFromList( i ); 	var percentage = data / total; 	Point endPoint; 	var angle = 360 * percentage; 	if ( i + 1 == DataList.Count ) 	{ 		endPoint = new Point( Width / 2, 0 ); 	} 	else 	{ 		radians += ( Math.PI / 180 ) * angle; 		var endPointX = Math.Sin( radians ) * Height / 2 + Height / 2; 		var endPointY = Width / 2 - Math.Cos( radians ) * Width / 2; 		endPoint = new Point( endPointX, endPointY ); 	} 	dg.Children.Add( CreatePathGeometry( dataBrush, startPoint, endPoint, angle > 180 ) );

	startPoint = endPoint;
}

As you can see, the main difference is now we are accumulating the radians as we traverse the list to take into account any number of data objects. The result allows us to add any number of data items to our pie chart as shown here:
Pie Chart Example - 3

Conclusion

Although I did not get as much use for this class as I would have preferred, developing this helped me gain experience in manipulating geometry objects, which does not happen often enough.

What is CORS?

There are lots of instances that an app will need to call a GET/POST request to another domain (from a different domain where the resource originated). Once the web app starts doing the request, the response will throw an “Access-Control-Allow-Origin” error. Then you ask yourself, what now?

One solution is CORS (Cross-origin resource sharing), which allows all resources (like JavaScript) to make cross origin requests.
Here is an example of how to add CORS Rule to allow a request to Azure storage tables using Azure SDK.

1. Build the connection string

string connectionString= "DefaultEndpointsProtocol=https;
AccountName={account name/storage name};
AccountKey={PrimaryKey|SecondaryKey}";

2. Create the CloudTableClient

CloudStorageAccountstorageAccount = CloudStorageAccount.Parse( connectionString);
CloudTableClient client = storageAccount.CreateCloudTableClient();

3. Add CORS Rule
* as wildcard

CorsRule = new CorsRule()
{
  AllowedHeaders = new List<string> { "*" },
  AllowedMethods = CorsHttpMethods.Connect | CorsHttpMethods.Delete | CorsHttpMethods.Get | CorsHttpMethods.Head | CorsHttpMethods.Merge
	| CorsHttpMethods.Options | CorsHttpMethods.Post | CorsHttpMethods.Put | CorsHttpMethods.Trace, 
  //Since we'll only be calling Query Tables, let's just allow GET verb
  AllowedOrigins = new List<string> { "*" }, //This is the URL of our application.
  ExposedHeaders = new List<string> { "*" },
  MaxAgeInSeconds = 1 * 60 * 60, //Let the browswer cache it for an hour
};

4. Add rules to client

ServiceProperties serviceProperties = client.GetServiceProperties();
CorsProperties corsSettings = serviceProperties.Cors;
corsSettings.CorsRules.Add( corsRule );
//Save the rule
client.SetServiceProperties( serviceProperties );
  • After #4, there should already be cors rule connected to an account name.
    In order to double check what cors rules are there for that account name, we can use:

    ServiceProperties serviceProperties = client.GetServiceProperties();
    CorsProperties corsSettings = serviceProperties.Cors;
    

NOTE: If we need to put cors rule for blobs, we will just change CreateCloudTableClient():
CloudBlobClient client = storageAccount.CreateCloudBlobClient();