Compiled Experience Windows Platform Development en Tue, 25 Nov 2014 20:25:36 +0000 Tue, 25 Nov 2014 20:25:36 +0000 Turning good apps into great ones <p>Last week I did a talk for the <a href="">Microsoft Student Accelerator</a> on the little things that turn good apps into great ones.</p> <p>I&#39;ve had requests for the slides which are below.</p> <iframe src="" width="402" height="327" frameborder="0" scrolling="no"></iframe> Wed, 26 Nov 2014 00:00:00 +0000 (Nigel Sampson) Spectrum <p>Another week, another open source project, introducing <a href=""><strong>Spectrum</strong></a>.</p> <h3>What is it?</h3> <p>Spectrum is a library to manipulate colours in the .NET framework, specifically in the RGB, HSL and HSV colour spaces.</p> <p>It&#39;s currently not designed to the be all and end all in terms of colour but more to assist developers in building harmonious colour schemes for their applications.</p> <p>It exists as two parts:</p> <ol> <li><strong>Spectrum</strong> is the core library that contains the classes you&#39;d expect in a library such as this. It&#39;s a portable class library covering all the major platforms (math is very portable).</li> <li><strong>Spectrum.Universal</strong> is the interesting part and is where I hope to extend most of all, it&#39;s a playground for how we can use colour space calculations in our apps. It&#39;s portable across Windows 8 and Windows Phone 8.1.</li> </ol> <h3>How does it work?</h3> <p>The core Spectrum library has only three classes <code>Color.RGB</code>, <code>Color.HSL</code> and <code>Color.HSV</code>, these naturally have methods to convert between themselves.</p> <div class="highlight"><pre><code class="language-csharp" data-lang="csharp"><span class="kt">var</span> <span class="n">accent</span> <span class="p">=</span> <span class="k">new</span> <span class="n">Color</span><span class="p">.</span><span class="n">RGB</span><span class="p">(</span><span class="m">240</span><span class="p">,</span> <span class="m">150</span><span class="p">,</span> <span class="m">9</span><span class="p">);</span> <span class="kt">var</span> <span class="n">hsl</span> <span class="p">=</span> <span class="n">accent</span><span class="p">.</span><span class="n">ToHSL</span><span class="p">();</span> <span class="n">Assert</span><span class="p">.</span><span class="n">AreEqual</span><span class="p">(</span><span class="k">new</span> <span class="n">Color</span><span class="p">.</span><span class="n">HSL</span><span class="p">(</span><span class="m">36.6</span><span class="p">,</span> <span class="m">0.928</span><span class="p">,</span> <span class="m">0.488</span><span class="p">),</span> <span class="n">hsl</span><span class="p">);</span> </code></pre></div> <p>The <code>Color.HSL</code> class has number of helper methods to create other related colours.</p> <div class="highlight"><pre><code class="language-csharp" data-lang="csharp"><span class="kt">var</span> <span class="n">hsl</span> <span class="p">=</span> <span class="k">new</span> <span class="n">Color</span><span class="p">.</span><span class="n">HSL</span><span class="p">(</span><span class="m">90</span><span class="p">,</span> <span class="m">0.5</span><span class="p">,</span> <span class="m">0.5</span><span class="p">);</span> <span class="kt">var</span> <span class="n">compliment</span> <span class="p">=</span> <span class="n">hsl</span><span class="p">.</span><span class="n">ShiftHue</span><span class="p">(</span><span class="m">180.0d</span><span class="p">);</span> <span class="kt">var</span> <span class="n">analogous</span> <span class="p">=</span> <span class="n">hsl</span><span class="p">.</span><span class="n">GetAnalogous</span><span class="p">();</span> </code></pre></div> <p>It gets more interesting when we start to use <strong>Spectrum.Universal</strong>. This contains a few Xaml Value Converters that can shift between <code>Windows.UI.Color</code> instances for us.</p> <p>Given resource declarations like the following:</p> <div class="highlight"><pre><code class="language-xml" data-lang="xml"><span class="nt">&lt;converters:ComplimentConverter</span> <span class="na">x:Key=</span><span class="s">&quot;Compliment&quot;</span> <span class="nt">/&gt;</span> <span class="nt">&lt;converters:ShiftLightnessConverter</span> <span class="na">x:Key=</span><span class="s">&quot;ShiftLightness&quot;</span> <span class="nt">/&gt;</span> <span class="nt">&lt;converters:ShiftHueConverter</span> <span class="na">x:Key=</span><span class="s">&quot;ShiftHue&quot;</span> <span class="nt">/&gt;</span> </code></pre></div> <p>and our base accent colour:</p> <div class="highlight"><pre><code class="language-xml" data-lang="xml"><span class="nt">&lt;Color</span> <span class="na">x:Key=</span><span class="s">&quot;AccentColor&quot;</span><span class="nt">&gt;</span>#FF0088D1<span class="nt">&lt;/Color&gt;</span> <span class="nt">&lt;SolidColorBrush</span> <span class="na">x:Key=</span><span class="s">&quot;AccentBrush&quot;</span> <span class="na">Color=</span><span class="s">&quot;{StaticResource AccentColor}&quot;</span><span class="nt">/&gt;</span> </code></pre></div> <p>We can create lighter and darker versions of that same colour using</p> <div class="highlight"><pre><code class="language-xml" data-lang="xml"><span class="nt">&lt;SolidColorBrush</span> <span class="na">x:Key=</span><span class="s">&quot;LightenedAccentBrush&quot;</span> <span class="na">Color=</span><span class="s">&quot;{Binding </span> <span class="s"> Source={StaticResource AccentColor}, </span> <span class="s"> Converter={StaticResource ShiftLightness}, </span> <span class="s"> ConverterParameter=0.3}&quot;</span><span class="nt">/&gt;</span> <span class="nt">&lt;SolidColorBrush</span> <span class="na">x:Key=</span><span class="s">&quot;DarkenedAccentBrush&quot;</span> <span class="na">Color=</span><span class="s">&quot;{Binding </span> <span class="s"> Source={StaticResource AccentColor}, </span> <span class="s"> Converter={StaticResource ShiftLightness}, </span> <span class="s"> ConverterParameter=-0.3}&quot;</span><span class="nt">/&gt;</span> </code></pre></div> <p>as well as create a minor accent colour</p> <div class="highlight"><pre><code class="language-xml" data-lang="xml"><span class="nt">&lt;SolidColorBrush</span> <span class="na">x:Key=</span><span class="s">&quot;SecondaryAccentBrush&quot;</span> <span class="na">Color=</span><span class="s">&quot;{Binding </span> <span class="s"> Source={StaticResource AccentColor}, </span> <span class="s"> Converter={StaticResource ShiftHue}, </span> <span class="s"> ConverterParameter=-120}&quot;</span><span class="nt">/&gt;</span> </code></pre></div> <p>We can now manage an app&#39;s full palatte of colour resources by tweaking a few base colours.</p> <h3>Where I can get this?</h3> <p>Source is on <a href="">GitHub</a>, and is also on <a href="">Nuget</a>.</p> Fri, 24 Oct 2014 00:00:00 +0000 (Nigel Sampson) Octokit.Caching <p>A few months ago I tweeted about a new open source project <a href=""><strong>Octokit.Caching</strong></a> but completely forgot do any more announcing.</p> <blockquote class="twitter-tweet" lang="en"><p>Simple etag caching for Octokit <a href=""></a> cc <a href="">@shiftkey</a> <a href="">@haacked</a></p>&mdash; Nigel Sampson (@nigelsampson) <a href="">July 5, 2014</a></blockquote> <script async src="//" charset="utf-8"></script> <h3>What does it do?</h3> <p>It&#39;s a compact library designed to add simple caching to <a href="">Octokit.NET</a> a GitHub API client library for .NET. It maintains an internal cache of all requests and responses to and from the GitHub API. </p> <p>If you make a request where a cached response is already available then it appends the <code>If-None-Match</code> header with the cached <a href="">etag</a>.</p> <p>If the server returns a <code>304 Not Modified</code> then we return the cached response, otherwise we return the new response while modifying the cache.</p> <h3>Where&#39;s the cache?</h3> <p><a href="">Octokit.Caching</a> comes with an interface <code>ICache</code> and a default implementation <code>NaiveInMemoryCache</code></p> <div class="highlight"><pre><code class="language-csharp" data-lang="csharp"><span class="k">public</span> <span class="k">interface</span> <span class="n">ICache</span> <span class="p">{</span> <span class="n">Task</span><span class="p">&lt;</span><span class="n">T</span><span class="p">&gt;</span> <span class="n">GetAsync</span><span class="p">&lt;</span><span class="n">T</span><span class="p">&gt;(</span><span class="kt">string</span> <span class="n">key</span><span class="p">);</span> <span class="n">Task</span> <span class="n">SetAsync</span><span class="p">&lt;</span><span class="n">T</span><span class="p">&gt;(</span><span class="kt">string</span> <span class="n">key</span><span class="p">,</span> <span class="n">T</span> <span class="k">value</span><span class="p">);</span> <span class="n">Task</span> <span class="nf">ClearAsync</span><span class="p">();</span> <span class="p">}</span> </code></pre></div> <p>It&#39;s built for you to extend easily with something like <a href="">Akavache</a>.</p> <h3>Where can I get it?</h3> <p>The source is available on <a href="">Github</a> and is available on <a href="">nuget</a>.</p> Tue, 21 Oct 2014 00:00:00 +0000 (Nigel Sampson) Save time creating your application palette <p>A few months ago I wrote a post on <a href="/blog/posts/colour-palette/">building a colour palette for your app</a>, one thing I recommended is creating both the colour and brush resources for each colour separately, like so:</p> <div class="highlight"><pre><code class="language-xml" data-lang="xml"><span class="nt">&lt;Color</span> <span class="na">x:Key=</span><span class="s">&quot;PlaceholderColor&quot;</span><span class="nt">&gt;</span>#FFEBEBEB<span class="nt">&lt;/Color&gt;</span> <span class="nt">&lt;SolidColorBrush</span> <span class="na">x:Key=</span><span class="s">&quot;PlaceholderBrush&quot;</span> <span class="na">Color=</span><span class="s">&quot;{StaticResource PlaceholderColor}&quot;</span> <span class="nt">/&gt;</span> </code></pre></div> <p>Large apps can contain a lot of colours once you start including all the shades and tints of your primary colours and creating all these resources can a bit of a tiresome task.</p> <p>Thankfully we can make use of regular expressions (gasp!) to save some time in Visual Studio. </p> <ol> <li>Create all your colour resources</li> <li>Copy and paste them below the originals and select the copies</li> <li>Open Visual Studio&#39;s <strong>Replace in Files</strong> (Ctrl + Shift + F for me)</li> <li>Under <strong>Find options</strong> select Use Regular Expressions</li> <li>Set <strong>Look in:</strong> to Selection</li> <li>Set <strong>Find what</strong> to <code>&lt;Color x:Key=&quot;(?&lt;name&gt;\w+)Color&quot;&gt;#\w+&lt;/Color&gt;</code></li> <li>Set <strong>Replace with</strong> to <code>&lt;SolidColorBrush x:Key=&quot;${name}Brush&quot; Color=&quot;{StaticResource ${name}Color}&quot;/&gt;</code></li> <li>Hit <strong>Replace All</strong></li> </ol> <p>Hopefully this can save you a bit of time building your app or at least teach you what you can do with Visual Studio to save yourself some time.</p> Fri, 17 Oct 2014 00:00:00 +0000 (Nigel Sampson) My Favourite Visual Studio Extensions <p>A week or so ago I came across a post from <a href="">Scott Dorman</a> on his favuorite Visual Studio extensions and thought I&#39;d create mine.</p> <p>Initially I thought it would be a rather long list, but it turns out the out of the box experience is pretty good for me with a few changes.</p> <p>Here&#39;s my list (in no particular order).</p> <h3><a href="">Reference Extension SDK Locally</a></h3> <p>This was built by <a href="">Pete Goodman</a> while at [Marker Metro(, it takes a global reference to a Visual Studio SDK and turns into a local reference.</p> <p>It solves a number of problems:</p> <ul> <li>Don&#39;t have a laundry list of SDK&#39;s to install to build the project for new developers.</li> <li>Eases the pain on the build server not requiring SDK&#39;s to be installed.</li> <li>Allows different projects to reference different versions of the SDK.</li> </ul> <h3><a href="">Nuget</a></h3> <p>The go to package manage for .net, can&#39;t say much more than that.</p> <h3><a href="">Xaml Spy</a></h3> <p>Great tool for finding out why your xaml layouts aren&#39;t pixel perfect which I think is one of the things that makes good apps into great apps.</p> <h3><a href="">Resharper</a></h3> <p>This is the extension I can&#39;t live without, it&#39;s the one I install directly after Visual Studio and feel absolutely useless without it.</p> Tue, 14 Oct 2014 00:00:00 +0000 (Nigel Sampson) Store submission is just the first step <p>My Tech Ed New Zealand talk <a href="">Store submission is just the first step. Lessons from the launch of MovieJax</a> is now available to watch on Channel 9.</p> <p>It&#39;s a discussion about what we has developers need to think about post store submission and how we can prepare for some of these things before hand.</p> <p>Check it out and let me know what you think.</p> Thu, 09 Oct 2014 00:00:00 +0000 (Nigel Sampson) Spinkit.Xaml now supports Universal apps. <p>A few months ago I showed off <a href="">Spinkit.Xaml</a> a set of styles for Windows 8 Progress Ring to make your project look a little more interesting.</p> <p>I&#39;ve just pushed a new version to <a href="">Nuget</a> ( that supports Windows Phone 8.1 which means you can use the styles in univeral projects.</p> <p>Check it out and have a play, if you&#39;re uising it in a project then let me know.</p> Wed, 30 Jul 2014 00:00:00 +0000 (Nigel Sampson) App state and Caliburn.Micro <p>As well as posting here a lot of things relating to Caliburn.Micro will be on the new official website. The first is the start of a <a href="">discussion of application state</a>.</p> Wed, 23 Jul 2014 00:00:00 +0000 (Nigel Sampson) Brand new website <p>Some of you may have noticed but I&#39;ve rebuilt the website / blog. Previously it was sitting as a custom Asp.Net MVC app running on <a href="">Azure websites</a> using SQL Azure as a back end.</p> <p>In an effort to try new things this new website is using <a href="">Jekyll</a> and <a href="">GitHub pages</a>. While setting up the new website was a piece of cake most of the work went into preserving as many existing uri&#39;s as possible.</p> <p>If I have missed any I&#39;d love to hear about them.</p> Mon, 14 Jul 2014 00:00:00 +0000 (Nigel Sampson) Building a colour palette for your app <p>When creating your app on both the phone and tablet almost all <a href="">guidelines</a> will tell you create a consistent colour palette. There&#39;s a lot of tools out there to help you design your palette, <a href="">Kuler</a> from Adobe is a good example. But what&#39;s the best way to use our palette in your app?</p> <p>There&#39;s a couple of goals here, the first is we only want to have to define our colours once for the entire app. This way if we need to tweak them or do a wholesale replacement we&#39;re not spending hours hunting for every instance of that colour.</p> <p>The second is to provide an easy way to override existing theme resources.</p> <p>What I tend to do is create a separate resource dictionary for the palette, this is because it&#39;s usually imported into other dictionaries and I want to keep the repetition low. The other resource dictionary I&#39;ll create at this point is a theme overrides one, this contains all the redefinition of the built in resources using the new palette of colours.</p> <p>In our palette dictionary we&#39;ll want to define the colours and brushes separately, this is because despite most of the time we&#39;ll be using the brush there will be times the colour is required. Naturally the brush definition refers to the colour so we&#39;re sticking with our goals. Typically a colour / brush definition will look like:</p> <div class="highlight"><pre><code class="language-xml" data-lang="xml"><span class="nt">&lt;Color</span> <span class="na">x:Key=</span><span class="s">&quot;MajorAccentColor&quot;</span><span class="nt">&gt;</span>#FF2980B9<span class="nt">&lt;/Color&gt;</span> <span class="nt">&lt;SolidColorBrush</span> <span class="na">x:Key=</span><span class="s">&quot;MajorAccentBrush&quot;</span> <span class="na">Color=</span><span class="s">&quot;{StaticResource MajorAccentColor}&quot;</span><span class="nt">/&gt;</span> </code></pre></div> <p>Sometimes your designs may make use of the same colour but with different alpha (or opacity) values. For me if this brush is going to be used through the app I&#39;ll define it within the palette like so:</p> <div class="highlight"><pre><code class="language-xml" data-lang="xml"><span class="nt">&lt;Color</span> <span class="na">x:Key=</span><span class="s">&quot;MinorAccentColor&quot;</span><span class="nt">&gt;</span>#FF80B929<span class="nt">&lt;/Color&gt;</span> <span class="nt">&lt;SolidColorBrush</span> <span class="na">x:Key=</span><span class="s">&quot;MinorAccentBrush&quot;</span> <span class="na">Color=</span><span class="s">&quot;{StaticResource MinorAccentColor}&quot;</span><span class="nt">/&gt;</span> <span class="nt">&lt;SolidColorBrush</span> <span class="na">x:Key=</span><span class="s">&quot;MinorAccentOverlayBrush&quot;</span> <span class="na">Color=</span><span class="s">&quot;{StaticResource MinorAccentColor}&quot;</span> <span class="na">Opacity=</span><span class="s">&quot;0.5&quot;</span><span class="nt">/&gt;</span> </code></pre></div> <p>However if it&#39;s a one off I&#39;ll probably define the brush as inline XAML referring back to our colour resource.</p> <div class="highlight"><pre><code class="language-xml" data-lang="xml"><span class="nt">&lt;controls:Sidebar</span> <span class="na">x:Name=</span><span class="s">&quot;Sidebar&quot;</span> <span class="na">IsExpandedChanged=</span><span class="s">&quot;OnIsExpandedChanged&quot;</span><span class="nt">&gt;</span> <span class="nt">&lt;controls:Sidebar.Background&gt;</span> <span class="nt">&lt;SolidColorBrush</span> <span class="na">Color=</span><span class="s">&quot;{StaticResource SidebarBackgroundColor}&quot;</span> <span class="na">Opacity=</span><span class="s">&quot;0.5&quot;</span><span class="nt">/&gt;</span> <span class="nt">&lt;/controls:Sidebar.Background&gt;</span> </code></pre></div> <p>I try to name the colour / brush pairs in generic names more along the lines of their usage than what they look like colour wise. This is because they&#39;ll often be tweaked and it can look rather silly to have a resource named &quot;RedColour&quot; that&#39;s actually blue.</p> <p>Now our palette is defined let&#39;s make use of it, the first thing I go through and do is redefine quite a few of the out of the box theme resources to make the controls more in line with the rest of my app. It&#39;s these little bits that really polish an app, I die a little on the inside when I see the default purple in combo boxes and progress rings. I swear Microsoft chose that colour so people would be forced to deal with it but a lot don&#39;t.</p> <p>In my theme overrides resource dictionary I import the palette and start to define styles for the controls in terms of colours from the palette. We don&#39;t need to redefine every single resource, typically only the ones that add the accent colour. For instance with the ComboBox control the overrides are:</p> <div class="highlight"><pre><code class="language-xml" data-lang="xml"><span class="nt">&lt;ResourceDictionary.MergedDictionaries&gt;</span> <span class="nt">&lt;ResourceDictionary</span> <span class="na">Source=</span><span class="s">&quot;/Resources/Palette.xaml&quot;</span><span class="nt">/&gt;</span> <span class="nt">&lt;/ResourceDictionary.MergedDictionaries&gt;</span> </code></pre></div><div class="highlight"><pre><code class="language-xml" data-lang="xml"><span class="nt">&lt;SolidColorBrush</span> <span class="na">x:Key=</span><span class="s">&quot;ComboBoxItemSelectedBackgroundThemeBrush&quot;</span> <span class="na">Color=</span><span class="s">&quot;{StaticResource MinorAccentColor}&quot;</span> <span class="nt">/&gt;</span> <span class="nt">&lt;SolidColorBrush</span> <span class="na">x:Key=</span><span class="s">&quot;ComboBoxItemSelectedPointerOverBackgroundThemeBrush&quot;</span> <span class="na">Color=</span><span class="s">&quot;{StaticResource LightMinorAccentColor}&quot;</span> <span class="nt">/&gt;</span> <span class="nt">&lt;SolidColorBrush</span> <span class="na">x:Key=</span><span class="s">&quot;ComboBoxSelectedBackgroundThemeBrush&quot;</span> <span class="na">Color=</span><span class="s">&quot;{StaticResource MinorAccentColor}&quot;</span> <span class="nt">/&gt;</span> <span class="nt">&lt;SolidColorBrush</span> <span class="na">x:Key=</span><span class="s">&quot;ComboBoxSelectedPointerOverBackgroundThemeBrush&quot;</span> <span class="na">Color=</span><span class="s">&quot;{StaticResource LightMinorAccentColor}&quot;</span> <span class="nt">/&gt;</span> </code></pre></div> <p>That&#39;s pretty much it, a nice easy way to define your colour scheme realistically in any XAML app and reuse it well. </p> Thu, 10 Apr 2014 00:00:00 +0000 (Nigel Sampson)