.Net, Azure, DocumentDb, Uncategorized, WPF, xaml

Introducing “doobry” for Azure DocumentDb

I’ve been beavering away at a little website and decided – after a bit of investigation and then seeing Scott Guthrie talk at Azurecraft, London – to use DocumentDb for the data storage.  At that point I didn’t have a massive amount of experience with NoSQL databases, but when I want to learn something I like to dive straight in, start coding, making mistakes, and hopefully come out the other side with some workable knowledge.

The website is node.js based, and I found the initial setup of DocumentDb pretty straight forward after running the the tutorials.  I was up and running quickly, but I soon realised I wanted a tool for developing and testing queries, and playing around with my dev database.  The Azure portal isn’t massively geared up for this.  I saw one application, but even in this web/cloudy world I knew that with my arsenal of Material Design In XAML Toolkit and Dragablz libraries, I could throw together a desktop app to grease the gears of developing the web app.


Yesterday I published the first full alpha release of that effort.  “doobry” is simple to use, yet slick and pretty feature rich.  With it you can:

  • Edit and run SQL queries
  • Create, edit, copy and delete collection documents
  • Work with multiple databases


It’s open source, free to use, and an installer is available:

It’s also a great showcase of all the things you can do with Material Design In XAML and Dragablz, utilizing features such as:

  • Docking and layout persistance
  • Advanced dialogs
  • Transitions

Hopefully if you are using DocumentDb this tool will help you get along in your development and support tasks.  And if you are developing WPF Material Design/Dragablz applications you might find some UX inspiration and helpful XAML techniques within the source.

.Net, C#, Design, Material Design, Uncategorized, UX, WPF, xaml

SemVer, MVP and finally, Material Design In XAML 2.0.

This release of Material Design In XAML has taken way longer than I hoped, and contains less than I had hoped, so I apologise for that.  I’m trying to follow SemVer, and a couple of breaking changes meant it was time to tick over to v2.  Up until now I’ve been keeping to small, regular releases, but knowing it was time to go to v2 I thought I’d go for a big, showcase release.  I failed.  In assigned issues to the milestone I bit off way more than I could chew, even with the help of my (awesome) contributors.


I read a tweet a while back saying someone couldn’t trust an open source library as the versions had ticked up high; indicating API instability.  There’s no doubt some truth in that, but in holding back a release (maybe so you can batch together several API changes) you start encountering the pitfalls of those longer release cycles.  Remember, that most open source projects are side projects, and time can be in short supply.  To be honest, I became a bit disheartened because I started realising I couldn’t deliver everything I wanted in this release.


So, I decided to draw a line under what we’ve got, roll the release, and get back to the shorter release cycles.  I try hard to keep the public surface of the library stable, but in the future, when it’s time to move, I will move more quickly.  Even if it means ticking over SemVer more regularly.


The good news.  The release is still pretty awesome.  New Chip controls, new Toggle styled listboxes, and many other enhancements.  Also, I’ve been privileged to receive a Microsoft MVP award for Windows Development.  I’m pretty stoked about this, it’s definitely nice to get some recognition for the open source journey I’ve been on over the last few years.  A big thanks is owed to everyone that’s helped this library grow and become something referenced in a lot of WPF systems.

Version 2.0 is now up on nuget.  Download and enjoy!

The full release notes are on GitHub.

.Net, C#, coding, Design, Material Design, UX, WPF, xaml

Material Design In XAML – 1.5

It’s a big new release for MD in XAML Toolkit! This release focuses on a new transitions API (when I say API, I mean fully usable from XAML), which takes the pain out of WPF storyboard-ing, making animations on individual elements, and between whole “pages” easy.

Release page.

To showcase what can be done I’ve created an entirely new demo app. What’s great is that I was able to build version 1.0 of the demo app in less than a day. All the animations are “out of the box”; straight from Material Design In XAML Toolkit, with zero fiddling with WPF storyboards or animations (but yes, the extensibility is still there!)

It looks a bit like this:


You can get your hands on the new demo at it’s new GitHub page.

On top of that there is also a small demo in the main Material Design In XAML Toolkit demo project.

To understand usage of the new transitions API, take a look at both demos and check out the wiki page.

I say this every release, but it’s always true, there have also been some great additions and fixes from the community (which is really growing nicely).  Full release details are here.

I guess with any software library it takes a while to gain traction, but this library is now just over a year old, seems to have plenty of users and I’m seeing some nice looking UIs appear.  With 1.5 I’m hoping for some nice animation flourishes!

Happy UXing!


P.S. n00b to Material Design In XAML Toolkit?  Check out the Getting Started guide.


C#, Design, MahApps, Material Design, UI, UX, WPF, xaml

Icon Pack – Material Design In XAML 1.4

New for release 1.4 of Material Design In XAML Toolkit is a full icon pack.  Icon design is a skill itself and finding or creating good icons when designing an application can be a time consuming task.   To help  in this regard I am pleased to announce that the entire Material Design Icons collection is now included in the library.


It’s a  great collection, containing over 1,400 icons, including many of  the standard icons we see on Android phones and many more additional icons added by its own community.   It’s worthwhile heading over to the website to get an overview of the icons, and there’s a search feature to help  you track down the icon you’re after.

Using the icons in your WPF application is easy.  Assuming you’ve already installed Material Design In XAML Toolkit, the XAML is as simple as:

<materialDesign:PackIcon Kind="ShareVariant" />

To give you: share-variant-16.png

The icons are SVG based, so scale nicely:

<materialDesign:PackIcon Kind="ThumbUp" Height="24" Width="24" />
<materialDesign:PackIcon Kind="ThumbUp" Height="36" Width="36" />
<materialDesign:PackIcon Kind="ThumbUp" Height="48" Width="48" />

thumb-up-24.png  thumb-up-36.png  thumb-up-48.png

You can see the entire icon collection in the main demo application:



Furthermore, the base class for the icon has been added to ControlzEx (credit to @punker76 for this idea), so in the future you may well see MahApps use the same API for Modern Design Language icons, giving WPF developers a common, simple icon XAML syntax:

<materialDesign:PackIcon Kind="SomeMaterialIcon" />
<mahApps:PackIcon Kind="SomeModernIcon" />

Release Details

Various other fixes, enhancements, performance improvements have recently gone into the library.  Versions 1.3.1, 1.3.2, and now 1.4.0 contain some welcome community contributions.  To see details of all changes hit the Releases GitHub page.

.Net, C#, coding, Roslyn

Generate a C# Enum with Rosyln

I’m currently working on an Icon Pack for my Material Design library and need to generate an enum containing a list of all the icons.  Before you delve into this code you should know that the same result could no doubt be achieved using simple string manipulation in a lot less time.  But I took this as an opportunity to learn a little about Roslyn, so if that’s what you’re after then read on.

I set about creating a code template for the enum with the intention of using Roslyn to clear the dummy enum values out and re-populate the enum with a new list.  Sourcing the list of values is the easy part and not discussed here.

To begin with, this is my starting code template:

namespace MaterialDesignThemes.Wpf
    /// ******************************************
    /// This code is auto generated. Do not amend.
    /// ******************************************

    /// <summary>
    /// List of available icons for use with <see cref="Icon"/>.
    /// </summary>
    /// <remarks>
    /// All icons sourced from Material Design Icons Font - <see cref="https://materialdesignicons.com/"> - in accordance of 
    /// <see cref="https://github.com/Templarian/MaterialDesign/blob/master/license.txt"/>.
    /// </remarks>;
    public enum IconType

First lesson.  If you want to do something similar, install the .Net Compiler Platform SDK.  Stupidly I didn’t do this until I had the code 75% complete.  The solution below looks pretty simple but as is oft the way, figuring it out was the hard part.  The Syntax Visualizer Visual Studio add-in included in the SDK would have got me there a lot quicker.

If I had of used the Visualizer in VS 2015 earlier (View > Other Windows > Syntax Visualizer), upon highlighting my above code template I would have seen this, which gives you a pretty good idea of what we’re working with:


Second lesson.  The nuget package you are probably after is (took me a bit of digging to get the right one):


Also, I found ReSharper’s Hierarchy tool pretty useful to start understanding the class relationships; soon realising that we’re going to be spending a lot of time working with SyntaxNode objects and derivations thereof:


One of the first things to learn about Roslyn SyntaxNode objects is that they are immutable.  If you make a change then you’ll get a new one.  Obviously what we want to do is remove our AutoGeneratedDoNotAmend enum value (EnumMemberDeclarationSyntax) from the owning enum (EnumDeclarationSyntax) and replace it with a bunch of new members.  Meaning we’ll end up with a new enum/EnumDeclarationSyntax, in turn meaning we need to swap it out in the parent (NamespaceDeclaration) which again give us a new namespace, so we’ll have to swap that in the root’s children giving us a new root.  Effectively we start at the bottom and replace/renew everything walking up the ancestry of the tree.

Maybe there’s a better way, but this is my first crack at Roslyn and is very much a learning experience.

My first cut of the code (done prior to me installing the Visualizer/SDK, and using some pretend enum values) turned out like this:

private void UpdateEnum(string sourceFile)
    var sourceText = SourceText.From(new FileStream(sourceFile, FileMode.Open));
    var syntaxTree = CSharpSyntaxTree.ParseText(sourceText);

    var rootNode = syntaxTree.GetRoot();
    var namespaceDeclarationNode = rootNode.ChildNodes().Single();
    var enumDeclarationSyntaxNode = namespaceDeclarationNode.ChildNodes().OfType&amp;amp;amp;amp;amp;lt;EnumDeclarationSyntax&amp;amp;amp;amp;amp;gt;().Single();            

    var emptyEnumDeclarationSyntaxNode = enumDeclarationSyntaxNode.RemoveNodes(enumDeclarationSyntaxNode.ChildNodes().OfType&amp;amp;amp;amp;amp;lt;EnumMemberDeclarationSyntax&amp;amp;amp;amp;amp;gt;(), SyntaxRemoveOptions.KeepDirectives);
    var generatedEnumDeclarationSyntax = emptyEnumDeclarationSyntaxNode.AddMembers(

    var generatedNamespaceDeclarationSyntaxNode = namespaceDeclarationNode.ReplaceNode(enumDeclarationSyntaxNode, generatedEnumDeclarationSyntax);
    var generatedRootNode = rootNode.ReplaceNode(namespaceDeclarationNode, generatedNamespaceDeclarationSyntaxNode);


The end result was pretty good, we retain the namespace declaration, comments, but we’ve lost something in the formatting:

namespace MaterialDesignThemes.Wpf
    /// ******************************************
    /// This code is auto generated. Do not amend.
    /// ******************************************

    /// <summary>
    /// List of available icons for use with <see cref="Icon"/>.
    /// </summary>
    /// <remarks>
    /// All icons sourced from Material Design Icons Font - <see cref="https://materialdesignicons.com/"> - in accordance of
    /// <see cref="https://github.com/Templarian/MaterialDesign/blob/master/license.txt"/>.
    /// </remarks>
    public enum IconType
Aston,Villa    }

More digging and I learn how to create my enum member with “trivia” consisting of leading white space:

var leadingTriviaList = SyntaxTriviaList.Create(SyntaxFactory.Whitespace("        "));
var generatedEnumDeclarationSyntax = emptyEnumDeclarationSyntaxNode.AddMembers(
    SyntaxFactory.EnumMemberDeclaration(SyntaxFactory.Identifier(leadingTriviaList, "Aston", SyntaxTriviaList.Empty)),
    SyntaxFactory.EnumMemberDeclaration(SyntaxFactory.Identifier(leadingTriviaList, "Villa", SyntaxTriviaList.Empty)));               

Current result:

public enum IconType
    Aston,        Villa    }

This is good, but I now realised I needed to add a line feed, but to do this I needed the sibling “CommaToken” node to have the correct trailing trivia. I discovered this by tweaking my initial template to include two enum values and taking a look at the Syntax Visualizer:


Yikes. This is starting to give me a headache.

Remembering that these toys we are playing with are immutable, I concocted a new method to pull all the comma tokens, and replace with new comma tokens with trailing line feed trivia:

. . .
generatedEnumDeclarationSyntax = AddLineFeedsToCommas(generatedEnumDeclarationSyntax);
. . .

private static EnumDeclarationSyntax AddLineFeedsToCommas(EnumDeclarationSyntax enumDeclarationSyntax)
    var none = new SyntaxToken();
    var trailingTriviaList = SyntaxTriviaList.Create(SyntaxFactory.ElasticCarriageReturnLineFeed);

    Func<EnumDeclarationSyntax, SyntaxToken> next = enumSyntax => enumSyntax.ChildNodesAndTokens()
        .Where(nodeOrToken => nodeOrToken.IsToken)
        .Select(nodeOrToken => nodeOrToken.AsToken())
            token =>
                token.Value.Equals(",") &&
                (!token.HasTrailingTrivia || !token.TrailingTrivia.Any(SyntaxKind.EndOfLineTrivia)));

    SyntaxToken current;
    while ((current = next(enumDeclarationSyntax)) != none)
        enumDeclarationSyntax = enumDeclarationSyntax.ReplaceToken(current,
            SyntaxFactory.Identifier(SyntaxTriviaList.Empty, ",", trailingTriviaList)

    return enumDeclarationSyntax;

Our result now is looking much better:

namespace MaterialDesignThemes.Wpf
    /// ******************************************
    /// This code is auto generated. Do not amend.
    /// ******************************************

    /// <summary>;
    /// List of available icons for use with <see cref="Icon">.
    /// </summary>
    /// <remarks>
    /// All icons sourced from Material Design Icons Font - <see cref="https://materialdesignicons.com/"/> - in accordance of
    /// <see cref="https://github.com/Templarian/MaterialDesign/blob/master/license.txt"/>.
    /// </remarks>
    public enum IconType
        Villa    }

There’s just that last curly bracket which needs knocking down a line, but I guess I’ll just have to get back to that…

.Net, C#, Design, Material Design, Uncategorized, UX, WPF, xaml

Material Design In XAML Toolkit: version 1.2

I’m happy to say that Material Design In XAML Toolkit version 1.2 has rolled, bringing yet more polish and features that are hopefully going to help people bring their desktop applications to life.


Key features of note:

ComboBox styling

This great PR as brought the combo style bang up to date with Google’s spec, and it looks great.


TimePicker goes 24 hour


<materialDesign:Clock Is24Hours="True" DisplayAutomation="Cycle" />

Thanks to pauloquicoli for helping out here.

Additional Slider theme


    Style="{DynamicResource MaterialDesignDiscreteSlider}"  />

DialogHost improvements


The DialogHost control provides Material Designed themed popups and also provides a comprehensive API to deal with popup dialogs, which have traditionally been a pain point for WPF developers. This release polishes some of the API for both MVVM and code-behind scenarios.  Some great community testing has helped round this off, and also some code comes from here.

Read more about DialogHost popups


Thanks to all contributors for helping to not only move this project forward, but also helping drive its success; it’s really exciting how much traction this library has gained since I started it.

Coming Next

For 1.3 I’ve already started working on a “Multiple Floating Action Button” which is quite common on Android, and there will be a few smaller tweaks.  Also, as ever, I’ll be plugging away at Dragablz as I try and approach a version 1.0.  UWP stuff?  Still a pet project at the moment 🙂