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

Happy 2nd Birthday to Material Design In XAML

Happy 2nd Birthday!

Material Design In XAML Toolkit Turns Two Years Old

On 1st February 2017 Material Design In XAML marks it’s 2nd year since it appeared on GitHub. Right up front I have to apologise for all the bugs I haven’t fixed. Plenty of people are helping out, but the project can only move so fast. I always try to prioritise API quality over cramming in more fixes and updates. Hopefully this shows, as I feel that on the whole the library is easy to use, robust, and ultimately helps make apps look great.

birthdaycake

It’s been a busy, successful, and rewarding two years. Sometimes frustrating, always educational. I’m continually dealing with users over email, Twitter, GitHub, Gitter; it’s now got to the point where support is probably 75% of the time I spend on the project. Surely the biggest highlight for me was getting a Microsoft MVP award off the back of this work (and Dragablz), and traveling to Seattle for the MVP Summit. It was great to meet so many people I’ve got to know on GitHub and Twitter.

Two years in I’d like to share some stats on this project. .Net itself is undergoing major open source shakeup, with a big emphasis on the web/ASP side of things. WPF is perhaps more of a “niche” tech, and may not be the bleeding edge XAML platform a anymore, but still has plenty of use, and the some of these stats illustrate the continuing popularity of WPF and the growing popularity of the toolkit:

  • Nuget downloads: 84,839
  • Average Nuget downloads per day: 118
  • GitHub stars: 2,340
  • GitHub forks: 4734
  • GitHub average views per day: 1675
  • GitHub average unique visitors per day: 319
  • Website average unique visitors per day: 177
  • Gitter chat room users: 300+ users

Two years ago, all these stats were a big fat zero. The trend has been upward ever since. I’ve seen and supported students, enterprises and hobbyists use the toolkit to help bring modern styling, palettes and UX flow to their desktop apps, and there are now
continually new projects appearing on GitHub referencing the library.

This isn’t a monster JavaScript framework, and is much smaller than friend, and big-brother WPF project, MahApps. But it’s healthy, and it’s growing.

Currently I’m focusing on “doobry”, a NoSQL editor for Azure DocumentDb. I feel this is becoming a great example of how to utilise Material Design In XAML on the desktop to create useful, attractive apps. Obviously there will be more to come for the toolkit itself over the next 12 months.

doobry

Thanks to all the users, contributors and everyone who has supported the library over the last 2 years!

(Birthday Cake from https://material.uplabs.com/posts/happy-birthday-icon

Advertisements
Design, UI, UX

UX Crimes Against Browser Notifications

Notifications are an issue.  We are overloaded with them.  A long time ago computers were invented to do things for us.  But now one of their primary purposes seems to be to sell us stuff or to get us to visit web pages or apps for longer (and of course that just leads to more advertising or selling).

My phone now  bombards me with so many notifications I have reached saturation point.  I just don’t care any more and I’m suppressing all notifications for an apps at OS level without a second thought.

It seems the latest onslaught seems to be the “no permanent opt out” UX anti-pattern which is starting to appear on websites, now that browsers are implementing notification APIs.

Just check this:

linkedin-nooptout

I can’t say “No”.  Just “Later”.  The website doesn’t trust me to answer the way it wants, so it will enforce the question on me, at regular intervals, for perpetuity.  I can hear the excuses from those responsible, “but the user might change their mind, how will they find the setting?”

Well, I’ve yet to change my mind.

Here’s another example of this nefarious anti pattern in action:

C1J4h7uXUAAnUbp.jpg

I’ve lost track of the amount of times I’ve now had to answer this question from Twitter.

It has become beyond irritating.

 

.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.

md-chips.png

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.

md-list-toggle.png

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.

MVP.jpg

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:

main.gif

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!

James

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.

MaterialDesignIcons.png

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:

IconPack.png

MahApps

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#, 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.

Links:

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.

NewCombo

TimePicker goes 24 hour

24hrClock

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

Thanks to pauloquicoli for helping out here.

Additional Slider theme

9c2a7e3a-8988-11e5-86ac-cef4159ba661

<Slider 
    Minimum="0" 
    Maximum="10" 
    Style="{DynamicResource MaterialDesignDiscreteSlider}"  />

DialogHost improvements

dialogs

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 🙂

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

WPF Dialog Boxes In Material Design In XAML Toolkit

(Note this article refers to a pre-release version, which can be found on nuget provided pre-release versions are included in your search.)

Message boxes.  Ever a source of frustration in WPF.  MahApps has some nice dialog boxes to which I recently helped out with an MVVM API, but Material Design In XAML Toolkit can run with or without MahApps so I wanted a custom implementation which would meet these goals:

  • Look similar to the dialogs we see on Android phones
  • Have an API which is useable from XAML, code-behind, and MVVM
  • Provide full flexibility on the content of the dialog.

All software is evolution and after a reasonable attempt of doing something similar for a client – which ended up with a bit of a code-smell around callbacks from the API – I’ve come up some composable pieces which I hope are flexible, easy to use, and – most importantly – provide an attractive GUI 🙂

The cornerstone is the DialogHost control.  It’s a content control, meaning the underlying content over which the popup dialog will be displayed can be targeted; to a specific area of your app, or the entire Window content.


<md:DialogHost>
    <md:DialogHost.DialogContent>
        <dialogContent />
    </md:DialogHost.DialogContent>
    <mainContent />
</md:DialogHost>

When the dialog is open, the underlying content will be dimmed and disabled.

Material Design Dialog

DialogHost.DialogContent (associated with DialogHost.DialogContentTemplate) is your typical XAML content object property for setting the content of your dialog.  You can infer from this that you can use MVVM to bind content, but there are multiple ways of populating the content, showing the dialog, closing the dialog, and processing responses, so here’s a list of all the strategies for using the dialog (after the gif):

Material Design Dialog

Open Dialog Strategies

DialogHost.OpenDialogCommand

<Button Command="{x:Static md:DialogHost.OpenDialogCommand}" />

RoutedCommand typically used from a button where optional content can be provided via the CommandParameter.

DialogHost.IsOpen

<md:DialogHost IsOpen="True" />

Dependency property, to be triggered from XAML, set from code-behind or via a binding.  Content must be set in DialogHost.DialogContent.

DialogHost.Show

DialogHost.Show(viewOrModel);

Async/await based static API which can be used purely in code (for example from in a view model).  Content can be passed directly to the dialog.

Close Dialog Strategies

DialogHost.CloseDialogCommand

<Button Command="{x:Static md:DialogHost.CloseDialogCommand}" />

RoutedCommand, typically used on buttons inside the dialog, where the command parameter will be passed along to the dialog response.

DialogHost.IsOpen

<md:DialogHost IsOpen="False" />

Dependency property, to be triggered from XAML, set from code-behind or via a binding.

HANDLE CLOSE STRATEGIES

The DialogClosingEventHandler delegate is key.  It provides the parameter provided to DialogHost.CloseDialogCommand, and allows the pending close to be cancelled.

The following mechanisms allow handling of this event, via code-behind, MVVM practices, or just from the code API:

DialogHost.DialogClosing

<md:DialogHost DialogClosing="DialogHost_OnDialogClosing" />

Bubbling RoutedEvent, which could be used in code-behind.

DialogHost.DialogClosingAttached

<Button Command="{x:Static wpf:DialogHost.OpenDialogCommand}" md:DialogHost.DialogClosingAttached="DialogHost_OnDialogClosing" />

Attached property, which accepts a DialogClosingEventHandler which makes it easy to subscribe to the closing event in a more localized area of XAML.

DialogClosing.DialogClosingCallback

<md:DialogHost DialogClosingCallback="{Binding DialogClosingHandler}" />

Standard dependency property which enables the a DialogClosingEventHandler implementation to be bound in, typically from a view model.

DialogHost.Show

var result = await DialogHost.Show(viewOrModel, ClosingEventHandler);

The async response from this method returns the parameter provided when DialogHost.CloseDialogCommand was executed.  As part of the Show() signature a DialogClosingEventHandler delegate can be provided to intercept the on-closing event, just prior to the close.

More Examples

More complete usage examples can be found in MainDemo.Wpf which is part of the Toolkit solution, primarily in MainDemo.Wpf/Dialogs.xaml.