Modern Desktop – prototyping Jerry’s Windows 9 vision


image

I recently came across a design from one Jerry Jappinen for modernizing the “desktop” ..

I thought it would be fun to take his designs to the next level and prototype it as a WinRT-XAML-C#-SharpDx APP.

Also the goal with this post is to share my thought process on how I would go about architecting such a design.

 

The Design

 

Jerry came up with some nice ideas for the “modern” windows desktop ..

image

 

image

image

 

And Jerry’s “hopes and dreams” for Windows 9 …

image

 

** I personally want to call out to Jerry to thank him for sharing. Its contributions like his that makes coding up today’s prototype worth while … :)

 

 

My Initial Breakdown of the Design

 

The main elements of the designs that I can make out are …

 

image

 

 

image

 

image 

 

The finished Prototype (still images)

 

Jumping ahead so that you can see what the end prototype looks like.

(there is a video of it running at the end of the post, these still images are not reflective of the prototype as all the animations are not visible)

 

image

 

image

 

image

 

Technologies I will use

 

 

 

Project layout

 

Generally for quick prototyping I like to have a simple folder structure for my assets/content/code .. The idea is to rapidly prototype ideas!

 

image

 

  • Assets – images, videos, general visual content
  • Controls – reusable UI components.
  • Converters – Convert data into something that the UI can use
  • Messages – MVVMLight Event Aggregator message definitions
  • Models – General data objects that is reusable and often basic types
  • Services – generic services reusable across the view models
  • ViewModel – the implementation logic behind views, generally has the “brains” of how a UI behaves and sometimes looks.
  • Views – contains the UI of the app, majority of UI is bound to VM’s and rarely do we use code behind

 

Background

 

I always tend to start with getting the background up and running for all my projects, and the main reason is i like to be visually immersed in my app from day one. I tend to do F5 (run my app) quite a lot during the course of the day so having a stimulating background makes it so much easier to keep my creative juices flowing :)

 

The goal with the background will eventually be to render it via Direct2D and incorporate rich effects and animations. For now it will only be an image and possibly rotating between a couple of them.

 

image

 

This background control renders in the MainPage.xaml and is z-ordered at the very bottom of the visual tree underneath all the other visual elements

 

image

 

 

User

 

The user details of the app consists of a View and View-Model . List most of the UI in the rest of the prototype i use MVVMLight to wire up the two.

 

image

 

image

And as you can see the important bits of the UI is filled in via binding, even thou its a prototype i find it faster to knock out the V’s and VM’s

image

 

And with most of my ViewModels i always have “sample” data that is visible at design time and runtime!

 

image

And as you can see BLEND has the sample data at design time that makes styling so much easier

image

 

The rest of the components share a similar architecture, V-VM , sample data, all important bits are bound! I won’t go into too much details for the future controls, i will however highlight interesting things!

 

Taskbar

 

The important things to know about taskbar are ..

 

1. Taskbar is split up into 3 different sections (tasks, status, time) and each is layed out and flows nicely so in the future when we have different device sizes and orientations these areas can nicely flow

image

 

2. The basic unit is a TILE … These Tiles are reused all over the place and this tile is as lean as possible

image

 

3. Where possible I try to use VECTOR assets rather than bitmaps. ALL the icons in my prototype are PATHs that i took from MetroStudio and bound via the VM’s to the Views!

 

image

One of the major reasons i like using vectors is when the user ZOOM’s into my UI they retain high fidelity …

 

4 .When tiles animate in I try to use “Transitions” over custom storyboards or custom code ..

image

 

 

 

Windows

 

A window consists of a Chrome and the Content. Ill cover the content below in the “App” section..

image

As each “Tile” in the taskbar is clicked a Window is created and placed in a “Windows” collection and rendered via binding to the View. Its important to know that its ALL about binding ViewModel’s to Views as much as humanly possible

image

 

 

 

Windowed Apps (eg. YouTube)

 

Now an APP that loads within a Window’s “CONTENT” area is very interesting … The approach I’ve taken is that the XAML for the APP is defined as PURE XAML with NO CODE BEHIND.

And more importantly this APP’s XAML is “dynamically” loaded in when needed.

In the case of the YouTube app, the only APP i’ve wired up to prove my point, is a pure XAML only UI…

image

This XAML is dynamically loaded into the VisualTree ONLY when needed, i.e. when the YouTube app tile is clicked.

image

 

The XAML has a binding to a ViewModel that currently is embedded within the prototype app, BUT ideally these VM’s will be separated into there own dlls and hopefully in the future possibly injected/MEFed in .. Cross fingers we are allowed to do this in the future!

image

 

The XAML View binds to the VM …

image

 

My goal is to have many different XAMLs that the USER can choose from for each APP. In the case of this demo YouTube app, a user in the future may choose from several different XAML skins , each of them bound to the same VM (YoutubeViewModel)..

 

Performance & Tuning

 

At every step of the way, as i created each control and F5d to see the running progress of my prototype, I made sure to continually check the taskmanager and do relevant memory watching.. I’ve learnt to proactively trace my app upfront rather than at the very end :)

I’m currently at 32mb footprint, quite happy with that ..

 

image

 

Other Info

 

  • All messaging between the View Model’s/Controls/Views/Services is done via Event Aggregator …
  • View-VM binding as much as possible , near zero code behind. Note i have no issue around codebehind, i just wanted to push as much logic into my VM’s so i can easily change views when i wanted to!
  • The SharpDx rich background will come in the next blog post
  • The SpinKit styles for loading animations are awesome… :)
  • Total time to prototype this was about 12hrs
  • The demo works targeting x86/64, ARM!

 

 

Video of the prototype

 

Here’s a quick 3min video of the running prototype on my Surface RT (1st generation). Because great care was taken to target ANY CPU i could easily target ARM :)

The second part of the video shows me running it natively on my laptop (Intel CPU).

 

 

 

Demo Code

 

You’ll need VS2013 to run the demo code ..

 

image

 

 

Conclusion

 

This first blog post was purely to get the architecture and the major XAML pieces done .. Next step is to do the SharpDx background ..

I have to admit that the tooling story has greatly improved since last i used it, windows 8.0 version of tooling. It was a pleasure to use Blend and VS2013, i had zero blend crashes :)

Even after all these years, WPF, Silverlight, Jupiter … i still honestly believe XAML is the best UI technology out there! :)

2 responses to “Modern Desktop – prototyping Jerry’s Windows 9 vision

  1. Pingback: Windows App Developer Links – 2014-02-05 | Dan Rigby

  2. SOOOO AWESOME!!!!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s