Category Archives: Metro App

Radial gradients + Mini-path geometry sprites + infinite-scrolling inertial canvas = :)


image

I’m slowly building up some very cool controls and general learning’s around XAML & SharpDx and I want to share 3 of them with you today..

 

Radial Gradients in XAML

So I’ve said it a couple of times before, WinRT XAML does not have support for RadialGradientBrush, and the Brush class itself is sealed so you can’t even extend it to create your own.

SharpDx to the rescue Smile

SharpDx lets us create RadialGradientBrush for using as a fill

image

I use that radial gradient as a fill for a rectangle that is rendered on a Direct2D surface in my demo app

image

 

Here is the result of the Radial Gradient rendered…

image

 

Mini-Path-Language sprites on Direct2D

I created a simple converter that turns mini path language to Direct2D PathGeometries. It’s not perfect and is based off the open-source library for a Silverlight one “Silverlight string to path geometry”.

I used Blend to create the path asset

image

Took the “DATA” for the asset (mini-path-language describes the data structure) and converted it to PathGeometries which I used as sprites for rendering on a Direct2D surface.

 image

 

 

Infinitely scrolling inertial layer

I created a simple control called an “Inertial Layer” that has sensitivity properties on how sensitive it moves in the X,Y directions. Also these layers are wired up to a “Conductor” control that listens to “ManipulationDelta” data from sensor(touch) events and broadcasts these to the “inertial” layers.

I have 2 new controls “InertialLayer” and “Conductor” that wraps up the functionality needed for infinite inertial scrolling

image

I have 4 Inertial Layers in XAML and each layer for simplicity sake has a rectangle in it, each layer can actually contain any XAML or DirectX element!

image

The Conductor is initialized in code and when it starts it pushes data to the InertialLayers ]

image

 

Video Demos

Here is a video taken from my HTC Titan, excuse the hand movements. I wanted to try to show the smoothness of the animations when encoder isn’t interfering with it.

 

Here is a video taken with Encoder

 

 

Code

 

image

 

Problems

The “ManipulationDelta” were being negatively impacted by the Direct2D surface high frame-rate rendering. I had to reduce the D2D Surface to 30fps to compensate. I raised the issue here

 

Conclusion

I’m slowly getting the hang of DirectX (via SharpDx) as well as working out how best to combine XAML and DirectX. It’s the combination of these two UI technologies that will create those amazing UI/UX’s that we see in movies.

I have some other very very cool controls and ideas that I’ll show you over time, I’m just slowly working out the kinks in all of them..

Please share your experiences with WinRT, XAML & DirectX. There’s not enough of you guys/gals posting … are you all under NDA and working on super cool secret things ? Hey I am BUT I’m still blogging Winking smile 

Share your awesome experiences people !!!

‘XamlUIPresenter’ , what are you ? :)


image

There is an interesting API in the WinRT XAML namespace that sounds damn interesting BUT no public examples of how to use it. Even the MS folks are quiet about it ..

What does “XamlUIPresenter” do?

XamlUIPresenter

The documentation explains it as such …

image

reference : msdn

A xaml visual tree on a D3D surface ?! Seriously that is some awesome sauce right there. I can’t begin to tell you how excited that one sentence makes me Smile

Problem is how do you use it, and is it even working ?!

Blend 5

All Google or Bing searches for the term ‘XamlUIPresenter’ leads back to the msdn page, no examples or demos at all. There’s a conspiracy to hide this api from us, I’m sure of it !!! Smile

Anyway by chance in my normal day to day reflecting of all things that i find interesting, i chanced upon it’s use in Blend 5 for Metro Apps .. !!!!

Let me explain how they use it ….

Blend Design Surface – Artboard

If you don’t already know Blend and Visual Studio share the same design surface rendering engine.

image

In the world of Expression Blend the design surface is an “DeviceViewArtboard” which is itself an “Artboard” which itself is just a xaml “Control” . Remember Blend is after all a XAML (WPF) app.

image

A Silverlight App in Blend is rendered on the design surface using the “SilverlightArtboard” which is an “Artboard” (note it doesn’t derive from DeviceViewArtboard)

image

A WPF App in Blend is rendered through a weird way which I believe is legacy, it hasn’t been re-written with the Artboard approach, if your interested use reflector to see how its done otherwise I won’t cover it here

[use reflector to see how WPF renders to the design surface artboard]

A Metro HTML app in Blend is rendered on a design surface using the “HtmlAartboard” which is “DeviceViewArtboard”

image

A Metro XAML app in Blend is rendered on a design surface using the “WindowsUIXamlAartboard” which is also a “DeviceViewArtboard”

image

Simply put the relationship looks like this for the 3 different rendering types of Silverlight apps, HTML Metro apps, XAML Metro apps.

image

I am only going to concentrate on the XAML Metro app side of things from this point onwards …

an Artboard’s “ImageHost”

Without getting into too much detail each “Artboard” contains an “ImageHost”, which as the name suggests is the host of an image, how that image is created is what interests me Smile

In the case of the WindowsUIXamlArtboard the image host is a class of type “XamlImageHost

image

And if you trace it through the actual instance that is assigned to the ImageHost is a class called “WindowsUIXamlImageHost” that is found in the Microsoft.Expression.WindowsXamlPlatform.dll .

image

I should point out that each of the different development platforms has it’s own “Platform” dll and the dll’s normally follow a common layout & resource pattern.

image

Everything we want to know is found in the WindowsXamlPlatform …

Now when you look at WindowsUIXamlImageHost in the WindowsXamlPlatform dll there is a presenterWrapper property.

image

And this PresenterWrapper class happens to sit in the same namespace…

image

Two very interesting things in this class ….

1. this class references “Windows.UI.Xaml”

image

2. this class PInvokes the “CreateXamlUIPresenter” call from Windows.UI.Xaml.dll

image

I think we found ourselves code that uses the XamlUIPresenter Smile

Blend uses XamlUIPresenter ?!

As it turns out Blend, for XAML Metro apps, uses the XamlUIPresenter API in WinRT to render a visual tree on a Direct3D surface which intern is displayed in the artboard in the designer

Not 100% sure about this BUT it appears that the PresenterWrapper.RootVisual contains the xaml visual tree that will be rendered in a D3D surface

image

The PresentSiteWrapper wraps up all the logic to make the interop calls between managed/native for rendering surfaces handle pointers etc.

image

Here’s the PresentSiteWrapper interface incase your interested

image

So it does a bunch of native calls to pass thru the visual tree and return back the D3D surface which in turn is turned into BitmapData for rendering in the artboard.

Conclusion

This XamlUIPresenter api is damn interesting and if it does what i think it does is very very useful. Rendering a Xaml metro app in a “window” in the desktop looks possible from where I’m sitting.

Now that I know how it works and the basic plumbing it needs next step is to try to use it to render Xaml visual trees on a Direct3D surface from within a metro app. I really want to be able to take a visual tree and render to the GPU as is, then possibly print that tree ?! Smile  A future post will explore this!

In Silverlight we can output a visual tree to the WriteableBitmap for printing and doing cool things with, could we do the same with XamlUIPresenter ?!

Maybe this api is intentionally undefined because MS is still working out the story around it. …

Smile

A ‘Paper’ like “2-Page” Close Animation


image

If you follow me on Twitter you’ll know that I love the iPad app ‘Paper’ . And what’s crazy cool about this app is that it was built by ex-Microsoft people that were working on the Courier project Smile

The company is called 53, and the app can be found in iTunes here .

This app has some really awesomely executed animations and it’s these that I want to try to reproduce in a Metro app.

I’ll try to keep the animations as simple as possible BUT I expect that in the end I may need to resort to DirectX 3D. Also I plan on taking several posts to complete this, as I will be experimenting with a lot of techniques..

Here’s a video of the animations that I hope to reproduce over the course of several posts..

 

“2 pages” to “Closed” view

So this first post will be an attempt to emulate the “2 pages” view to “closed” view. Please excuse the poorly drawn sketch …

image

Right Page

A simple rectangle half the width of the screen aligned to the right. I gave it an off white fill color just so that it can be distinguished from the left side.

image

Left Page

A simple rectangle half the width of the screen aligned to the left

image

 

Slider to emulate 2 finger gesture

Because I wanted to make this as simple as possible I am not going to try to get the 2 finger gesture working right now, in it’s place I’ll have a slider that does pretty much what the 2 finger pinch does .

For the slider I will have it slide 1 to 100 in steps of 1.

image

The reason we can use a slider to emulate the pinch, is because all we are concerned about with the pinch gesture is the distance between the 2 fingers (index and thumb) over time. So a slider ‘value’ over a min (0) and max (100) will suffice!

image

 

Animation to “Close” the 2 pages like a book

This is the fun bit, we need to animate the 2 pages in a way that looks like a book closing. I can think of several ways to do this BUT for now the simplest is to use a couple of “Transforms” to fake this 3D effect.

I created a storyboard called “sbClosePages” and arbitrarily am going to animate the page close over 2 seconds. It doesn’t matter how long you choose because in the end it will be the slider, or rather the pinch gesture, that will determine the duration of the close.

Lets start with the RIGHT PAGE :

image

What you’ll notice is that to get a nice page close effect you can use a combination of RenderTransform (scale, translate) and Projection (RotationY). I achieved this by simply trial and error in blend, sliding figures around to achieve the desired interaction.

image

image

image

image

The LEFT PAGE is exactly the same BUT the values for the transforms may be opposite as the pages are moving in opposite directions. It really is all about trial and error and visually experiencing the interaction. Blend is awesome for things like this, trying to do this in code or via numbers (no visual) would be very very difficult!

I’m not going to include every snapshot of the left page BUT if you want just look at the demo code to see the actual figures and screens.

image

What you’ll notice is that for the left page I needed to set the projections ‘CenterOfOrigin’ to achieve my desired effect, this again was a trial and error thing that would be near impossible to do if it wasn’t visual. Blend makes some things so simple that would normally be virtually impossible!

And the reason I needed to set the CenterOfOrigin is because I needed the right side of the ‘LeftPage’ to be the one that stays stationary during the animation.

Hooking up the slider to the storyboard

The last step is to run the storyboard in response to a gesture, in our case it is a slider that mimics a pinch.

First step is to wire up the sliders ValueChanged event.

image

image

Basically as we slide we want to set the storyboard to something between 0 and 2 seconds. Remember that the 2 seconds is the duration of the animation we defined above. The slider can move between 0 and 100, so if it moves to 50% then we want the storyboard to move 50% as well, which is 50% of 2 seconds = 1 second.

So the last step is to set the storyboard to the calculated value, and to do that we can use a very cool property on a storyboard called “Seek” . How seek works is it expects the storyboard to already be running, and when we set the seek it will go to that point in the storyboard Smile

So lets kick start the storyboard on the init of the page, note that if we let it run it will just execute the storyboard so we should also pause it immediately!

image

So now when the slider changes we can “Seek” a particular time on the storyboard Smile

image

And so when you run the app and slide the slider this is what you get Smile

 

Sample Code

 

image

 

Conclusion

 

I plan on creating a bunch of posts to replicate a lot of the ‘Paper’ app animations so stay tuned for those. But as you can see it is easy to achieve some of those effects with simple transforms BUT done visually.

Catch you guys around!

Custom Effects – Ripple Effect (Pixel Shader)


image

DirectX11.1 introduced a bunch of built in effects into Direct2D that span the following categories

image

In my previous posts I showed how you could use SharpDx to call and render some of these effects inside your XAML Managed Metro apps.

Effect Graphs

Lighting Effects

However in the case where you want to do something that these effects don’t cover, or if you want to create a more optimal effect than custom effects is what you want!

HLSL (a custom pixel shader)

HLSL is the “high level shader language” developed by Microsoft for DirectX for defining their shaders.

DirectX11.1 and Visual Studio 12 introduces a much needed revamped HLSL editing/developing experience. The editor is available in C# & C++ projects, BUT the compilation functionality is only switched on in C++ projects.

Below is a screenshot of what you see when choosing a pixel shader file to add to your C++ project.

image

Below is a sample of a .HLSL file that is filled in for a simple effect. In this case it’s the algorithm to produce a “Ripple” effect.

image

In a C++ project you can right click on the .hlsl file and configure how VS compiles that resource. You will see in the screenshot below the yellow highlights the specific outputs for my custom pixel shader

image

So when this project is compiled this particular resource (Ripple.hlsl) will generate a pixel shader with an extension of .cso (custom shader object)

image

Remember ALL the above is only possible in a C++ project because that is where the compile logic for shaders exists. I’m hoping, but highly doubt, that these compile features for hlsl arrive in C# projects.

*.CSO in our managed apps

So once we have this compiled custom shader object (cso) we can use SharpDx to instantiate a CustomEffect for it for use in our managed metro app.

So in the sample above take the Ripple.cso and include it as “Content” in your XAML/C# metro app

image

You’ll notice that we included the Ripple.hlsl file as well, this is a good habbit to get into as it gives you valuable information in understanding how the shader is suppose to work and more importantly how to create a “CUSTOM EFFECT” for the cso.

Our custom effect’s properties

Once we have the cso in our managed project we need to create all the managed wrappers around it to be able to use it. SharpDx makes this process easy …

This ripple.cso takes a bunch of properties as inputs, we are going to put those in a separate file and call it RippleEffects.cs

image

Now if you refer back to the ripple.hlsl you’ll remember that there was a “Constants” area that defines the effects properties Smile 

image

Now we know what properties are needed for our custom effect, let’s create a wrapper for our effect and pass these properties into it.

Custom effect wrapper

Now its’ time to load up our cso and pass in our properties and execute this effect! We are going to wrap all this up in a RippleEffect custom effect class!

SharpDx has done all the hard work for us and made doing this easy!

Below you can see we create a RippleEffect class and give it the functionality of a “CustomEffectBase” which is a SharpDx abstraction for a DirectX Direct2D CustomEffect.

image

 

Next step is to implement the Properties for our effects that we defined earlier. It’s also important to know that we can define default values for our effect properties!

image

Because we implemented the “CustomEffectBase” we need to override the “Initialize” method,it is in there that we load our cso and assign it to our custom RippleEffect.cs

Also in the Initialize we pass through an “EffectContext”, which is where we are going to load our RippleEffect into. This effect context is important because it has a lot of useful libraries for all things effect related!

image

I should point out that when we load up our custom effect we need to give it a unique guid “GUID_RipplePixelShader” so that it is unique within the effect context.

Everything else in RippleEffect.cs can easily be understood, just step through the code at your convenience. The important ones I’ve already explained Smile

Using our custom Ripple effect

ok now that we have created our custom “RippleEffect” let’s call it!

In the demos all rendering logic sits in “Render” classes, in our case its called an “EffectRenderer”.

To use this ripple effect I will use it as part of an effect graph. The first step of the effect graph is to create a BitmapSource Effect, which is basically just loading up a bitmap image. We will then pass this bitmap effect into the Ripple Effect creating an effect graph Smile

image

 

RippleEffect in a SwapChainBackgoundPanel

This is what this effect looks like when we apply it to a SwapChainBackgroundPanel

 

RippleEffect in a SurfaceImageSource

This is what this effect looks like when we apply it to a SurfaceImageSource

 

Code Sample

 

image

 

Conclusion

Creating custom effects from a cso via SharpDx is dead simple, it’s actually quite fun. SharpDx has made easy to wrap the effect in a managed wrapper which leaves you more valuable time to spend on your actual hlsl Smile

And the other thing I should point out is that SharpDx is a very thin wrapper on Dx and actually mirrors quite a lot of the api’s one for one, which means if you get used to the calling syntax of SharpDx you will feel right at home in the Cx/Dx world!

This post only covered custom “pixel shader” effects, stay tuned as there are other cool effects that I want to cover!!

Toying with the idea of a Metro “Ribbon” (part 1)


image

I’ve seen a couple of interesting comps of metro apps that have a ribbon, they actually look decent especially if your building a business productivity app.

I wanted to prototype a metro app with a ribbon to see what it would feel like. First is to create a simple ribbon, in future posts I’ll embellish this ribbon with rich touch/sensor driven experiences.

 

Inspiration

Below are two comps that I happened across on DeviantArt. They show what a metro app with a ribbon may look like, and understandably he used Word and Powerpoint in his comps.

demo1

[reference : Franmonzter]

 

demo2

[reference : Franmonzer]

 

Metro Icons

The demo I’m going to build needs lots of metro icons and luckily Syncfusion has come to the party with their thousands of icons Smile

image

 

These icons are provided as *.eps files or as Path’s in a nice *.xaml file.

image

An example of an icon is this “Android” icon

image

It is provided in the “Applications\Applications.xaml” as a path:

image

Unfortunately putting this PATH into a resource dictionary for use as a StaticResource has A LOT of problems that Microsoft just refuses to fix Smile Even in WinRT these same issues exist : reference 

The solution I took was to store the “DATA” points as a string in a resource dictionary.

image

And when I dynamically created the icon I would read from the resource dictionary and create a PATH object using XamlReader ..

image

The benefit of using a PATH for my icons is that they scale well, and they can easily be programmatically styled (like selected/highlight/focus etc.)

 

Prototype

So here’s a video of a simple metro app using the metro icons and a makeshift Ribbon control. I created a simple animation for the selected tab, nothing too outlandish yet.

 

Issues encountered

 

DataTemplate.FindName is missing Sad smile . Unfortunately I needed to find an element in a datatemplate for a particular scenario, what is simple in WPF/Silverlight is impossible in WinRT-XAML! (unless someone can point me to an alternative approach)

reference : How to: Find DataTemplate-Generated Elements

Paths as static resources, as mentioned above I wanted to store a path in my resource dictionary BUT in the end had to resort to using a string to store the data.

Blend died on me hundreds of times a day, and in most cases it got painfully slow when rendering the design surface.

Also Windows 8, which is what I am developing on, had issues with the keypress response. I would type something and it would take several seconds for each character to be processed! This happens A LOT across ALL of windows 8 not just VS/Blend.

 

Sample Code

 

image

 

Conclusion

 

This prototype is enough to build on for future posts, I wanted to share this with you so you can download and experience it for yourself. It’s one thing saying “ribbons suck and shouldn’t be used in metro apps” and another thing to actually experience it and making that conclusion.

I believe there is a place in our metro apps for a ribbon BUT I’ll explore this in future posts Smile

Lighting Effects in your XAML/C# metro apps :)


image

So there’s a cool Dx/Cx demo in the consumer preview bits “Direct2D lighting effects sample”. It uses an effect graph to give cool lighting effects to your surfaces.

I wanted to turn that Cx sample into a C# sample, via SharpDx, so that I can use it to give my backgrounds a dynamic lighting effect. I’ve said many times before your applications background is vital to the overall UX of your application, applying effects such as lighting to it is just one of may great tools now available to us in the metro managed world Smile

 

1. Here’s a screen shots of the demo

 

This is the Home screen (below) where you can launch the 2 types of demos

image

This first demo (below) is using a SwapChainBackgroundPanel to render the lighting effects on

image

This second demo (below) is using the SurfaceImageSource to render the lighting effects on

image

 

2. Here is a video of the Xaml/C#/SharpDx sample in action :

 

 

 

3. Here is the source code :

 

image

 

4. Conclusion :

 

Now that WinRT/XAML promises a GPU optimized experience we should take advantage of that particularly to give our applications an advantage over others.

We want the best UI/UX and I strongly believe that applying things such as effects to our apps will give us that, of course they need to be applied in a tasteful and optimized/performant manner Smile

Lighting effects are awesome, especially if they’re done on your apps background and animates organically over time to give your app the feeling of being alive and responsive. I can’t wait to use this in my future apps!

Effect-Graphs in our XAML/C# metro apps using SharpDx :)


image

Thanks to SharpDx we can now create complex effect graphs (in code) in our WinRT-XAML/C# apps.

I took the Xaml/Cx D2DBasicEffectGraph sample from the consumer preview and pretty much redid it to work with SharpDx for us managed programmers Smile

 

1. Creating the Effect Graph

 

In this demo I graph 2 effects together ( BitmapSourceEffect –> GaussianEffect )

The BitmapSourceEffect feeds into the GaussianEffect (input)

image

 

2. Rendering the Graph on a Surface

 

Using a SurfaceImageSource I render the effect onto a D2DSurface. Also there are sliders to alter various exposed properties on the 2 above mentioned effects

image

 

3. Here’s a quick video of it in action:

 

 

4. Here’s the source of the sample:

 

 image

5. Conclusion

 

Effect graphs are very powerful and it’s the most exciting feature of Dx11.1 in my opinion. I can’t wait to show you guys more stuff that I’ve been dreaming up with WinRT/XAML/DirectX/C# and of course SharpDx Smile 

Exciting times ahead!!!