Category Archives: Win8

My modern “Start Screen” (Part 1)


image

I saw a design of a mocked up start screen on Deviant Art that I liked more than the one in Windows 8. It had gradients, shadows, 3D depth definitely went against some of the design goals of metro.

Below is what the current Windows 8 “start screen” looks like :

image

Below is the mocked up deviant art “start screen” design :

start_screen_unmetro_by_zainadeel-d4wszjj

What I liked about this is the use of gradients, shadows, depth to each tile ,… Pretty much all of those features are forbidden in current win8 metro design.

So I wanted to reproduce something similar using my favourite technologies XAML/C#/DirectX(SharpDx) ..

 

Design Analysis

 

image

Analysing the deviant art “tile” we see the following..

1. Depth to each tile, almost a 3D like effect, achieved using some form of “Drop Shadow” effect

2. Inner radial gradient for each tile that gives an inner glow like effect surrounding the icons in each tile

It’s a very artsy/pastel like overall effect .. I like it a lot Smile

So the question is how do we achieve this in WinRT XAML/C# ?

 

My proposed XAML/C# solution

When i see this design i immediately think Direct2D and Effect Graphs. The only way to get these shadow/Glow effects is using DirectX.

So my proposed solution would be to render it using SharpDx on a Direct2D surface utilizing effects. Further rendering this D2D surface in a XAML SurfaceImageSource (SIS) or SwapChainBackgroundPanel (SCBP).

image

Taking each of these parts lets create a tree of the UI proposed elements

image

Each tile will consist of the following visual elements that are rendered from bottom to top. This is the proposed “visual tree” of each tile.

 

Let’s Build it

 

As mentioned above I need to generate shadow/glow effects as well as a radial gradient so the only option for me is to use SharpDx.

There are numerous posts and examples of how to setup a SharpDx pipeline to render Dx content in XAML so I won’t be covering that here …

 

Step 1: Immediate Mode rendering requires me to maintain my own “visual tree”

In the XAML world, retained mode world, we are spoilt because a visual tree is maintained for us by the framework.

In the DirectX world, immediate mode world, we have to manage the rendering of each of the UI elements ourselves, including all the state between each frame!

I wrap all this logic in the Renderer classes…

image

 

I have a list that will hold the items for rendering “_renderTree”

image

 

Step 2: Preparing my assets

The assets for my tiles consists of

a) Background Images for the tiles

image

b) Icons for the tiles

image

 

All these assets will need to be loaded as textures and cached so that we don’t need to keep doing File IO reads.

To load a media element i have a method that wraps all that up in the BaseRenderer class. Its called “LoadAssetAsync”, and as the name suggests it loads it asynchronously. It uses the storage API’s to read the asset and then WIC to work with the bytes.

image

 

Once the asset is loaded from the file system i cache it for reuse later in case we need to re-render the entire _renderTree.

image

Loading assets and caching them for use as textures on a Direct surface is a very very difficult skill to learn, the only way to fully grasp this idea is to just throw yourself into the deep end and make many MANY mistakes Smile

Step 3: Drawing the Tiles

We have our assets, we have a way to create a render tree next step is to load that tree with our UI elements that use these cached assets!

I have a method that wraps up the creation of the Tiles

image

The actual logic to create a tile is wrapped up in another method called “_createTile”

This is where things get interesting as now i need to work with Effect Graphs

Step 4: Drawing a Tile

Fist step is to create a “BitmapSource” effect, this will be the bottom most image, the background image.

image

This BitmapSource effect will be used as input into an effect graph.

Note that i use a variable passed in to define the “Background Image” to use, if you step thru the code you’ll notice it goes through “step 2” above to cache the asset so if we reuse this effect, or re render this UI element it will use the cached version.

As you can see below if we render just the BitmapSource effect it is the FULL image, it does not look like a tile at all. And it doesn’t honour the width/height of the proposed tile dimensions (in this example a tile is 200px by 200px)

image

If you noticed from Step 2 above each of the backgrounds are oddly shaped and not the classic “tile” shape of a square, or rectangle (2 squares). We need to somehow scale the background to fit into the tile shape we want..

image

I used a direct2d “Scale” effect, and this scale effect acts on the “bitmap source” effect from above. Notice the * above. This is an effect graph Smile

Rendering this Scale effect, below is the result.

image

 

Now that the background image is scaled to fit the desired tile size we need to crop out the bits that fall outside. For this I use the “Crop” effect.

image

The input to the “Crop” effect is the previous “Scale” effect ( * above ). I should point out that the “Order” property above is used to order the layers for rendering, its like the z-index in web programming.

Rendering this “Crop” effect we get the 200px by 200px tile Smile

image

So we used an effect graph to draw the background of a tile.

 

Step 5: Rendering the inner glow

The inner glow is a rectangle with a radial gradient applied to it. Its pretty simple, and i’ve used this in previous demos Smile

image

It uses the RectangleGeometry in the SharpDx library

image

And the radial gradient applied

image

And rendered it looks like this:

image

 

 

Step 6: Rendering the outer shadow

The outer shadow is achieved using the “Shadow” effect. And the input to the shadow effect i’ll use the “Crop” effect from step 4 above. I could of used the scale or bitmapsource effect, as all i wanted was the outline of the tile.

image

The shadow effect rendered looks like this :

image

 

 

Step 7: icon & label

The Icon is rendered using a BitmapSource effect and to make it stand out I put a shadow effect around it . The reason i put a shadow around it is that if the background image blends too much into the icon it will be hard to see the icon.

image

This is the icon + shadow rendered:

image

The label is rendered using DirectWrite, ive wrapped the call into a method that does all the magic

image

image

 

Step 8: putting all the layers together

So rendering all the layers from step 4 to step 7 we get a tile Smile

image

Zoomed in :

image

Step 9: other useful tips

I used a “staging” texture to render the tiles so that when the user pans and zooms it uses this “staged” texture to render rather than re-rendering the entire renderTree.

image

When rendering the tiles i swap in my “staging” bitmap. Then the tiles are drawn in this staged target

image

After the tiles are finished drawing on the staged bitmap i swap back in the original render target

image

Now I have all my rendered tiles in a nice staged bitmap that i can manipulate when panning/zooming.

So the actual rendering to D2D uses this “Staged” bitmap ..

image

As you can see from above i also render “Debugging” info and a nice “Designer Surface Region” that represents the screens dimension.

 

 

Final Result (part 1)

Running the WinRT-XAML-C# demo after the initial load the frame rate settles to around 55-60 frames per second (fps) which is what I expected.

image

A zoomed in view of a tile we see the outer shadow, inner radial gradient etc. Exactly the effects i was going for Smile

image

 

Here’s a quick video of the demo running , its got a low fps due to screen recording and running simultaneously.

 

Sample Code

All my code can be found in my demo GIT project that i plan on using to also build my applications with.

image

Git Hub url : http://github.com/LiquidBoy/ModernApps

 

Conclusion

 

Part 1’s goal was to create tiles that have gradients, shadows and depth using an D2D effect graph. I pretty much achieved that Smile

The next step, part 2, will be to add the animations to the tiles and wire up some interaction between XAML and the D2D surface.

D2D Effect Graphs mixed with XAML is a very cool combination that i hope to master over time, i will admit thou it is a hard concept and skill to grasp. Patience and lots of reading is required, plus lots of reverse engineering samples!

I haven’t had this much fun in ages Smile , SharpDx gives us FULL access to DirectX / DirectWrite / WIC pretty much everything we need to create awesomeness from within XAML/C# ..

The fun continues with “part 2” where i try to animate all these tiles!

One possible future for Desktop?!


image

So last week, 25th march 2013 , a video leaked of someone using a version of Windows with a new UI/UX interaction for the start screen.

We believe it may be Windows Blue or possibly Windows 9?! or might be just MS internal developer’s/designers trying out some ideas ?!

Bottom line is it was an interesting new metaphor for desktop apps that was being shown off. Or more importantly a more connected experience between modern shell and desktop shell

UI/UX

The user starts in the start screen

image

They swipe bottom-to-top  to get to the apps list, incidentally in Windows Phone to do the equivalent is swipe right-to-left Smile [Windows learning more from Windows Phone, nice ! ]

image

image

Click on a desktop app (in this case a modernized SkyDrive desktop app)

image

 

At the moment the desktop skydrive app window is not in focus, click on the desktop to give the window/desktop focus (notice the window chrome has changed to that of being in focus)

image

At anytime swipe top/bottom edges to get to the AppBars (top/bottom), see how the top app bar can show a possible list of apps running on the desktop, notice the (+) as well.

The bottom app bar itself has interesting icons, one even resembles what you would see on the standard desktop task bar (the wifi network status icon). One can even assume that the classic desktop taskbar is nothing more than an app bar in this new modern world Smile

image

Notice in the classic Windows 7 taskbar they introduced those previews? Don’t they resemble what you would put in the top app bar ?! Smile

image

 

The bottom app bar , ill call it my task bar, in the leaked video can eventually get you back to the app list ..

image

This is part of the leaked video that shows the UI/UX experience

 

Actual Chinese link to video : http://www.win8china.com/html/4519.html

 

Conclusion …

This may be just internal designers/devs playing around with new Desktop / Modern UI metaphors ..

It could be MS’s answer to osx, linux etc multi-desktop views…

It’s interesting the idea of layering an modern app over the desktop itself that is window aware, that idea intrigues me.

This whole notion of mixxing the classic desktop as nothing more than a render layer within a modern app is something i want to explore ..

And this modern app layered on top of the desktop can give life to the desktop and the currently in focus window.. I like that idea!

I hope this video is for real, and the Modern Desktop UI/UX workflow is as well!

Smile

Lightning (SharpDx/XAML/C#/WinRT)


image

The other day I came across a very cool XNA demo, Michael Hoffman’s ‘How to Generate Shockingly Good 2D Lightning Effects’ .

I needed to redo this in my current favourite UI stack XAML/SharpDx/C# .

1 hour later i was done, thanks to the SharpDx toolkit it’s a breeze to bring across demos like this.

Here is the video of the Win8 lightning demo app :

 

Technologies used

1. SharpDx Toolkit – this is built ontop of SharpDx and it helps abstract out some of the hard concepts that can confuse new starters in the directx space. It shares a lot of ideas with XNA (Game/GraphicsDevice/Content Pipeline etc).

2. XAML – Using a Swap Chain Background Panel to render the Dx content

3. C#

4. WinRT – this is a modern app, uses the new API’s from the Windows team.

 

Interesting Techniques

1. Making SpriteFonts – I used MakeSpriteFont from the DirectX Toolkit to create the Lightning Font used in the Lightning Text.

2. SpriteFont to Point– the demo makes use of SpriteFonts, and getting the point information from a sprite and rendering each point as a lightning position. There are about 1000+ points created from the word “Lightning”, and its these points that are rendered in 3D using the Lightning technique.

3. 2 render targets to render the Lightning Text. The demo shows creating 2 render targets (currentFrame, lastFrame) that are used to push the 1000+ points and lightning textures on. We then push the currentFrame into the backbuffer of the device for rendering..

 

Sample Code

can be found on Skydrive

 

Final words …

I highly recommend looking at some of the techniques employed in this demo. Its a pretty cool lightning effect Michael came up with..

Have fun …

WinRT/XAML Colour Picker (using SharpDx)


image

I needed a colour picker for an app I’m building and it turns out no ones built a WinRT XAML one yet.

So this is my very simple colour picker!

I use bitmaps to represent the swatch (in my case i have 3 different types).

I use SharpDx to get the “Pixel Buffer” of the selected swatch

Where ever the mouse or pointer is i get the pixel under that position via the pixel buffer and from that i get the colours (RGBA)

This is what the colour picker looks like

image

 

This is a quick video of the colour picker :

 

Here’s the code

image

All my XAML/C#/SharpDx demos


image

As promised here is all my samples in one huge project, and working on Windows 8 Release Preview (RP).

It is only demo code and I follow a very loose way of programming, which means I pay more attention to getting things done creatively than in frameworks and coding styles.

Quick 4 min video of the demos

[note that the frame-rate of the running app is slow because I am screen recording simultaneously]


List of the demos

Alpha Pad – shows a quick and nicely animated alpha keypad using tilt tiles and the tile wall

image

Numeric Pad – a numeric keypad built using tilt tiles and a tilt wall with nice fluid animations in.

image

Dynamic Backgrounds – as mentioned in a previous blog post, this demo shows how to use SharpDx and Direct2D to create dynamic backgrounds for your app

image

Animated Gifs – using SharpDx to get to the WIC and D2D libraries we can go above and beyond what Silverlight/XNA could ever offer and build our own media experiences . In this case implement the animated gif in xaml ourselves. A previous blog post covered this demo..

image

Composite Modes – shows you how to implement different composite modes for when you try composing textures on a Direct2D surface. The ideas also translate to how you would compose on a D3D surface.

image

Interpolation Modes – shows you how to implement different interpolation modes for your D2D drawn textured effects.

image

Lighting Effects – using D2D and build in effects  to show how to create cool lighting effects. This previous post covers this demo .

image

Ripple + Pixelated custom effects – again using D2D and effect graphs we show how to create custom effects (ripple/pixelated) and graph them together to create cool effects. A previous post covers this demo.

image

Ribbon – playing around with the idea of a metro ribbon and how it would feel like using it. This previous post covers this demo …

image

Data Entry – experimenting with creating my data entry forms using a quick metadata driven approach, using reflection. The reason for this is that configuring D2D Effects of D3D settings for your scene would take a lot of xaml configuration screens, I was hoping for a very quick meta-data driven approach to creating these screens.

image

image

Inertial Dots – introducing the conductor and inertial controls. 2 new controls that I hope to leverage a lot in future UI/UX’s as they deliver some cool animated effects . I talked about this demo in a previous post.

image

Cube – a 3D cube rendered using SharpDx via Direct3D

image

Cube Wall – playing around with rendering 300+ textured cubes using an imagebrush

image

Tile Texture – I want to experiment with creating cool metro tiles, this demo is the precursor to that. The idea was to create a simple tile on a Dx surface that I will later play around with

image

Tile Wall – just like the “Tile Texture” demo , this is a wall of tiles that I hope to use in the future to experiment with a wall of metro tiles.

image

Bursting Circles 1 & 2 – A batch of circles that are being batch rendered on a Dx surface via D3D and SharpDx. These 2 demos are purely experiments on ideas I have for building out my own Sprite Batch, this is teaching me about things like caching on the GPU, Vertex/Pixel shader constants, the right types of lists to use for best performance, type of blending to use  etc. Lost of learning is going on with these 2 demos ..

image

image

Demo Code

[please note that this will be updated when I have time to, I am quite busy and this is a side project. ]

image

Conclusion

I’m having a lot of fun coding on top of WinRT XAML using SharpDx and C#. [again a big thank you to Alexandre Mutel who owns the SharpDx project Smile ]

It’s all about using the technologies that you find most rewarding, and for me that is XAML (Silverlight, WPF, XAML) and DirectX …

It’s clear to me that mixing XAML and DirectX is how we are going to deliver those amazing UI/UX’s that we see in movies, and they may not make sense in business apps today BUT I honestly believe in x years time we wont’ be having this argument..

Get the experience under your belt today with 2D, 3D, XAML, you won’t regret it in the future!

And in respect to HTML, I seriously can’t see web technologies delivering us  the amazing UI/UX’s that we see in movies, and that’s all I want to be doing! So power to all you web programmers out there, but for me XAML and DirectX all the way!

Dynamic backgrounds


image

update : Demo code works for Release Preview (RP)

Don’t be afraid to create crazy backgrounds for your managed metro apps. This is a quick post on how to do just that using some of the techniques I’ve been posting about.

For this post ill stay simple BUT the next post I promise to go crazy with the colors, textures, geometries and especially the animations Smile

 

Idea

The idea is simple, you have your DirectX layer underneath your XAML layer and you render dynamic things on the Dx layer. These dynamic things for this demo are simple geometries, colors and radial gradients.

image

 

Demo screen shots

This is a plain white background with a radial gradient painted ontop of it using D2D (via SharpDx) and the Tiles are rendered on the XAML layer above the D2D layer.

image

Press on the blue tile

image

Press on the Red tile

image

Press on the Green tile

image

Press the Orange tile

image

 

Demo video

 

Demo code

image

UPDATED : Now works for Release Preview

Conclusion

Don’t be afraid to give your managed metro apps some crazy DirectX rendered backgrounds, think outside of the box and experiment. These are after all consumer apps that need to wow the user.

SharpDx gives us some great tools to do crazy things, I hope to show you some of these crazy things in my next post!

Animated gifs in XAML/C# :)


image

Someone the other day tweeted a link to some very cool animated gifs. I love animated gifs Smile !!

I have always wanted animated gifs in Silverlight/WPF BUT for reasons unknown they never came. They would have been perfect for A LOT of scenarios where creating storyboard animations would have been overkill.

Well turns out WinRT XAML, firmly rooted in Silverlight XAML, also doesn’t have GIF support nor will it probably ever get it. BUT it does have WinRT support and it has access to DirectX & WIC via SharpDx!!

And today on Twitter Jeremiah Morrill tweeted that WIC has support for GIF’s, this intrigued me. Can I build my own support for animated gifs in XAML using DirectX & WIC (via SharpDx) ?!

Challenge is on ……

This is the animated gif I will try to render…

Source : “Savannah Rain” (frommetoyou)

Default XAML/C# metro app project + SharpDx

I created an empty managed metro project and added the necessary SharpDx bits, basically like I have been over the last several posts.

As always this project has a effect renderer that will render to a (Direct2D or Direct3D) surface via a (SwapChainBackgroundPanel or SurfaceImageSource). Again this is what I’ve been doing in all my SharpDx posts to date so just go back to those or the samples if you’ve forgotten Smile

image

 

Animated GIF resource

Now just add the Animated GIF as a content resource to the project. I could load it in via a URI BUT I thought it would be easier to just include it for now .

image

 

Load GIF via WIC

Ok this is where it gets interesting, SharpDx gives us access to WIC from C#. Question is does it have the GIF bits.

As I’ve said many times before SharpDx is a very thin/performant wrapper over C++ libraries (but just to clarify there will always be an overhead to using WIC via this wrapper even thou it is small). This wrapper is a metadata mapping generated api so technically the GIF bits of WIC should have come across. Lets test it out.

Lets instantiate a WIC GIFDecoder that will be used to read the animated GIF resource. The “asset” is simple the internal uri to the gif content.

image

Next when we animate this gif we need to know how many frames to animate. The GIF spec defines this…

image

Now for each frame we want to get the bitmap of that layer and store it for rendering. There is a lot going on in this code BUT in a nutshell an object is created that lets us get at the bytes of data for a particular frame in the gif. (its easy to follow just step through the code , that’s how I learnt

image

As it turns out for GIFS the first layer normally has the entire bitmap contents of the GIF and all the other frames above that contain delta information.. Also the ‘delta’ frames are all offseted so we need to get the offset (left,top) of those frames and store them for rendering of that frame later on..

image

 

So assuming that SharpDx’s GIF WIC works fine that’s basically all we need information wise.. We just need a way to store those frames and render them to the UI.

…. hello SpriteBatch Smile

SpriteBatch

The best way to render a series of textures in the graphics world is via a spritebatch. Lets create a very very dirty one that will serve our purposes ..

I’m not going to go into too much detail of how this dirty spritebatch works, it’s not in the truest sense a spritebatch BUT it will do for now..

image

This spritebatch will keep a cache of the GIFs frames that I will render on a DirectX Surface. I’ve defined 2 lists to store the static frames ( 0 ) and the rotating frames ( 1 – 7 )

image

I’ve created a way to add sprites (frames) to my spritebatch via the methods

1. DrawAlways  – sprites that will always get rendered on each loop of the rendering pipeline eg. frame 0 of the aimated gif

2. DrawRotating – sprites that will rotate there appearance with each loop of the rendering pipeline eg. frames 1 to 7 of the animated gif

image

 

These methods are called when we are decoding our GIF (the section prior to this outlined this process)

image

The sprite batch, as expected, has the ability to render itself and all it’s sprites. In my example it will render on a D2D surface and will use the much loved BitmapEffect to render the layer Smile .

Also note that the offset(_texturesRotatedOffset) for the layer needs to be rendered for the 1-7 frames

image

Now if you don’t understand the above just step through the code, it will all make sense..

Does this all work ?!

Does SharpDx’s support for WIC GIF’s work for animated gifs ?!

 

Running the demo

 

Here’s some awesome gifs from a very cool site

 

Here’s the metro xaml/c# demo running one of those animated gifs. Note that the framerate is low because of the simultaneous video recording going on. Without it it runs buttery smooth at 65-70fps. Smile 

 

 

Sample code

 

image

 

Conclusion

 

I started out this experiment fully expecting it NOT to work… I was so surprised that it actually did Smile . Animated gifs in a XAML managed metro app!!! Damn!!

XAML/WinRT + DirectX/WIC (via SharpDx) is turning into a killer combination of features for building pretty amazing new experiences. I’m only now getting familiar with the frameworks, I can’t wait to see what I’ll be creating a month from now!

I’m loving XAML/DirectX …