Category Archives: Blend

MVP Summit 2013


image

I’ve been an MVP for 5 years, the first year was as an Expression Blend MVP, the next 4 years were/are for Silverlight (I’m still an MVP)!

Going to the MVP summit is a massive trek for an Aussie like me, its a very painful 20+ hour flight(door-to-door) so for the last 4 years I passed on the trip.

However this 5th year I decided to go because like most of my Silverlight colleagues we felt it could be our last, Winking smile

Besides my fascination with Silverlight (all things XAML really) I’m also an avid follower of technologies that help me create crazy UI/UX experiences so delving into HTML/DirectX is not uncommon! And I also like to know the very low level details of the technologies I use, so hacking at the bits in the runtimes is part of what I do Smile

This is what I wanted to get out of the MVP summit…

 

1. Finding out about MS’s future strategies for XAML/HTML/DirectX, the UI stacks in Windows / Windows Phone / XBox and its other platforms.

2. Finding out about the .NET strategy .

3. Talk to experts in 1 & 2 above both from MS and from other MVP’s

I had a clear goal what I wanted to do on my trip!

 

And this is what I got out of the MVP Summit (and I’m being very careful not to break NDA here) …

 

1. put faces to twitter names, hung out and discussed cool stuff ! Invaluable!

2. “This info is off limits”, “Can’t talk about that” for a lot of the stuff I wanted to know about (XAML & WinRT) Sad smile

3. Confirmed my suspicions on the .NET strategy, confirmed what I was seeing in Windows Phone 7/7.5/8 and WinRT/.NETCore . There is a lot going on that has been brewing for many many years. We have been seeing it in Silverlight 3/4/5 and in Silverlight on Windows Phone. BUT it all made sense after some of the sessions and discussions with MS folk. Can’t really say much more !

4. Learned of 2 multi-year hush-hush projects that are as encompassing as Roslyn that explains a lot of what’s been going on with Silverlight

5. Saw that MS teams that adopted xaml (wpf / silverlight) early are in a great position to become agile going forward. These designers/developers are what i consider experts in XAML and can bend it to there wills, they are now in a great position to deliver agile UI/UX updates to us for there respective products!

6. SurfaceRT with TypeCover + OneNote is perfect for conferences, i must of typed the equivalent of 20 pages of notes..

7. The MS folks that were available to us were great people that wanted to be as open as possible BUT couldn’t. They really do care about the developer community BUT MS are at an inflection point with there tooling/frameworks/runtimes, and so they were not allowed to discuss such things!

8. This was the general tone of my introduction to people …

me: Hi

MVP 1: Hi, I’m david

me: Hey I’m Jose ..

MVP 1: ohhh (looking down at my tag)… your a Silverlight MVP …. <long uncomfortable pause> … im sorry!

me:  Smile its all cool!

 

9. Blend Tooling has been playing catch up for 3 years. Lots of refactoring and bringing in new platforms ,XAML-WinRT and HTML-CSS-WinJS, has caused Blend to stagnate in the innovative features category. They have smart people working on the blend tooling BUT seems like they still have about another year to go with all this convergence … Overall I liked what I “heard” from the Blend team and of the direction of it in VS .. Just sad that WPF/SL had to suffer! (note i said HEARD because we really didn’t see anything it was all discussions)

 

Summary

 

So in summary the top 5 topics / discussions / sessions that I found most interesting

5. Visual Studio vNext  …

4. TypeScript

3. Roslyn

2. JIT

1. BCL

 

Sorry I could not expand more on certain things (like 1 above Winking smile), NDA blah blah blah…

Know this, I am very excited about the direction of .NET.. Its had a great decade already and all signs point to an even better decade going forward!

Feels like MS are doubling down on .NET Smile

 

 

Jose Fajardo

Silverlight MVP

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!

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

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 …

‘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!

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