A new Brand Silverlight contest – Ball Watch Silverlight Contest

Hey, we love contests and Microsoft knows that. Oh yeah!

What could be better for Silverlight developers & designers than to sharpen their skills while learning the newest tool on the town for showing off their skills… with the goal of winning a fabulous Watch that silently says “Hey I’m a great Silverlight professional” don’t you think that would be great?

The prize watch is the following one, the Engineer Hydrocarbon TMT Watch (retail value $3,399 – wow!)

Well, Microsoft has offered the market this great contest, which you can learn more here http://expression.microsoft.com/es-es/ff714455%28en-us%29.aspx?ocid=ballwatch-ms and here: http://expression.microsoft.com/es-es/ff723792%28en-us%29.aspx.

The only think I’d like to ask is if you could open this contest overseas, I love to participate in contests and I know you respond to feedback :).

So, would you kindly mind making this contest global?

Thanks from the Sunny western-European sunny Spain šŸ™‚ !!

Project3DToMouse, a mouse powered 3D projection behavior

Behaviors were a great addition for Silverlight 3 and just have become better for Silverlight 4. One of my playgrounds at home have been Projection animation experiments for providingĀ  advanced – or crazy – interactions and effects… The main thing is this is not simple to implement and it’s hard to let it be “fine tuned” by a designer or even by yourself, as who wants to recode everything if you can get a great interface for personalizing your effects without much effort?

Thus I’ve made the 3D projection to mouse behavior.

You can try it out here:

http://www.brainsiders.com/playground/Project3DToMouse/default.html

What does it do?

  • It animates a the projection of a FrameworkElement on the X and Y axis in the proportion of the position of the mouse regarding another FrameworkElement, normally the main Canvas, LayoutRoot.
  • It calculates the projection and applies it with certain amplitude degrees for the X and Y axis. Why not only one amplitude? because you might want your content not to turn the same degrees horizontally as it does vertically, screens aren’t squared and maybe you want a concrete effectĀ  (only horizontal, or only vertical).
  • Also, it does this as an animation on a configurable time and on a configurable EasingFunction, which is good for a designer, so you can make it move smoothly or in a funny elastic way :).
  • I have set up a flag to decide if you want to make the orientation of the projection towards the mouse, facing it or against it.
  • It also has a nice animation to go back to the starting position if the mouse gets out of the application.

Going to the code, everything is categorized and with descriptions to help it being used, adapts well to FrameworkElements that have a fixed or dynamic height and width and the storyboard is generated on the go in memory so it is not possible to step over other animation, this meaning that this behavior can be applied to more than one element in the same UserControl.

The wiring up is done on the OnAttached and OnDetaching events, the Invoke does nothing so it could be deleted.. I have used the TargetedTriggerAction because I need the pick up the behavior from a control that takes the whole screen and apply the projection effect to another control, preferably smaller to appreciate the effect. It would be good if we could deactivate the “invoke” so that designers would not get confused.. just my 5 cents.. šŸ˜‰

On how to use it, this is easy, copy the Project2Mouse.cs file to your project and that’s it. At least it is easy for a developer, for a designer it would be cool if we could configure a behaviors folder and leave there all the behaviors encapsulated as “dll”, so Blend would load and show up the behaviors blend has, the ones on the project and the ones at the folder… then it would add references as needed at the project.

Other thing I am finding difficult is that the current Behaviors interface is good for having 10 to 20 Behaviors, it turns difficult to locate quickly a behavior. It would be good if they could be categorized or tagged (author, description, category and tags (1 .. n would be great).

To get it, it is published at the Microsoft Expression Behaviors Gallery, here: http://gallery.expression.microsoft.com/en-us/Project3DToMouse

I am thinking on publishing Ā some other interaction behaviors – after cleaning a bit the mess that happens when playing with different behaviors until you get the desired effect, that is..

If you happen to have an idea of an interesting behavior I’d be happy to hear it and try to implement it :).

New Themes launched for Silverlight 4 – This is great but… is enough?

Recently Tim Heuer has launched several “themes” for Silverlight, you can read about them in http://timheuer.com/blog/archive/2010/05/03/new-silverlight-4-themes-available-for-download.aspx and Ā http://timheuer.com/blog/archive/2010/05/17/silverlight-4-tools-released-and-new-application-templates.aspx.

This announcement has been done along with the launch of the Silverlight tools for Visual Studio 2010. Although this news was overwhelmed by the tools announcement, I think is very interesting since they are defining (or at least proposing) a standard for the definition of a complete theme structure for Silverllight …

We have been expecting a sample like this, because it is shows clearly the purpose of Silverlight & WPF for separating the Designer and Developer concerns and enables to showcase Blend as an efficient designer tool: Disconnect the interaction between the designer and on the part associated with the developer.

This separation of concerns was improved greatly with the appearance of behaviors in Blend 3.0 and Silverlight and now is better with improved support for Blend 4.0 (beta) and SL 4.0.

For now, the way to ā€œhandleā€ all this themes is to manually place a series of files in a folder of “Assets” which if done right includes various styles files, resource libraries, behaviors – see http://storage.timheuer .com/newthemes-structure1.png for a clearer picture – also this themes can incorporate any Font, image or video, according to the style in question.

This in itself is rather large achievement as we can decouple the interaction of styles and is relatively simple …. for a Developer … for a “pure” designer Ā this is complex and costs understanding and concentration…

I am proposing an evolution of this already great proposal, to make it greater..this is to further simplify the interaction model for the themes which enables to create and work on them separately, uncoupling them from the application, assigning them its own ā€œthemeā€ project type, like ā€œcosmopolitan.theme.dllā€ wich is nothing else than a Silverlight class library with a assigned dll.

This way, a designer can create a theme library like ā€œCosmopolitan.theme.dll”and the application can change the theme at any time using the theme dll without the need of having to delete files of styles, behaviors, images, fonts, etc … (which costs time and is prone to errors).

This also enables to have several associated themes and change them as we want through code or, better, a behavior.

There are some clear advantages of my proposal:

  • The designer can abstract from the complexity of the application and focus only on the design of the theme and its styles.
  • The designer avoids touching any code sensitive for the developer, even accidentally – favoring the separation and decoupling.
  • We favor a potential marketplace for “themes” for Silverlight. If I want to sell themes, it would be good that the technology supports them as separate beings.
  • Promotes the theme reuse for creating other themes, thus stimulating creativity and competitiveness “between designers (and also some developers).
  • It will make very visible at last the advantage of Blend and Silverlight to fully decouple the visual aspect and interaction with the application development. (Very necessary).

Ā 

On the other hand is very easy to set up a generic test project in which multiple pages are displayed that showcases all controls, SL controls, SDK controls, graphics, Toolkit controls as well as it would be easy to add our own controls dynamically. .. This would make wonderfully simple for the designer to test his theme very easily…

And, as a firm petition, this would be fantastic if this was enabled into Silvelright and it integrated on Blend

On the other hand, the type of proposed type of dll “theme.dll” is that of a normal Silverlight class library, it would be easy to make a ā€œbase template projectā€ Ā with implementations of all controls by default. Ā This would mean to only change or add a template to these themes dll’s… and modify the existing ones to allow dynamic loading and unloading based directory Assets, for instance). MEF we would allow to do this very easily ..

How do you see this? If you think this is a good idea, please vote for it on the Silverlight feature request! Let’s help everybody to make this technology a huge success!

The link to vote : http://dotnet.uservoice.com/forums/4325-silverlight-feature-suggestions/suggestions/793999-support-for-theme-projects-dynamic-theme-switchi

Or suggest how would you focus this? I am eager to read your suggestions and construct together what would be the best implementation for a native theme support for Silverlight.

MIX 10K Entry Techniques for reducing Silverlight code and XAML size

Preface…

As commented here are the full techniques I have applied for reducing the size of my MIX 10K entry, the ā€œSilverlight Magic Lanternā€, which can be found at the url http://mix10k.visitmix.com/Entry/Details/261.

The main basis of my entry was ā€œto surpriseā€ and that’s not easy being this the MIX Conference & MIX Online assistants a mix of Designers and Developers, some 100% developers, others 100% Designers and some rare cases 50% each – or even more rare cases 60 to 70% each…

As for my entry to comment that it has tried to combine both wow factors, having coded in less than 10kb the following techniques:

– Bing search engine integration through REST.

– Usercontrol creation (for the knob) in very very small piece of code..

– Inverse kinematics programming – which btw I had never done before J. I’d like to thank Jeff Paries for his great book which covers some techniques on the matter… Btw, I bought the Flash Book as I did not know that there was a Silverlight one J. Now I have both.. you can get it here http://www.amazon.com/Foundation-Silverlight-Animation-Jeff-Paries/dp/143022407X – with no commission šŸ˜‰

– Magnifier effect – which was done initially with a shader (way cooler) and next with a writable bitmap in order to weigh less bytes L.

– Position the magnifier exactly where the inverse kinematics extreme was – that is no easy, believe me..

– Parallax effect with inverse-moving shadows, to provide a depth effect from the main front panel to the results at the back – At the end I had to take out the shadows in order to get more space available… L

Also I wanted to surprise graphically so I had the idea of enabling ā€œskin interchangeā€ but, sadly I had to take it out and let only one skin in place.. the nicest one of course… anyway it was way simple as it required only changing the source of the 6 images my entry uses… and it was implemented through a knob too ;).

Both of that got me the edge (I hope so at least) of being able to surprise both Designers and Developers.. and hopefully the Judges too – Anyway there are pretty good entries this year so, the best one will win!!! Good Luck to you all!!

Aaand… I will release the code (the one that is not fully compressed) in short so keep tuned…

The Techniques…

As, for the main topic of this post, the techniques used to reduce code size have been, in order of precedence:

1. Common sense Ć  Taking out code not used, comments, blank lines, etc.

2. Use of Var if the type name declaration is bigger…

3. In some cases use global variables so they haven’t got to be declared over and over. I had to do some metrics to see how much I was using an int variable to see how much space it was taking and declare it globally. Not the thing you do in your everyday code..

4. Use Inline if’s instead of normal if’s.

5. If you apply a compare rule more than once, package it in a Boolean ;):

If you have:

If ((a ==b) &&( c!=z))&….

And

If ((a ==b) &&( c!=z))&….

You can do

G = ((a ==b) &&( c!=z))

And make

If (G & … everywhere else..

6. Change constants defined by its direct value that is depending on the length of its value and its use, obviously.

7. Reduce functions using anonymous functions. For example:

nextSegment.MouseLeftButtonUp += new MouseButtonEventHandler(nextSegment_MouseLeftButtonUp);

void nextSegment_MouseLeftButtonUp(object sender, MouseButtonEventArgs e) { zoomActivated = false; }

Can be converted into:

nextSegment.MouseLeftButtonUp += delegate(object s, MouseButtonEventArgs e){ zoomActivated = false; };

8. Use Object & Collection Initializers, like:

ksi.go(new List<string>() { “Small”, “Medium”, “Large” }, “Size”);

9. Reduce functions size c hanging the default parameters sender by s for example, as the previous code piece.

10. Reduce the use of the usings, that is easily done by deleting/commenting them all and resolve all the dependencies manually.

11. Use Alias on the usings, but be careful, be aware this is only necessary in the case you have to write the entire namespace path in case of conflicts with a declaration of the same name.

12. Subclass a class you are using with just the signature – I did end up not using this as it was not worth it.

13. Reduce the use of XAML files – for example, app.xaml is not really needed.

14. Reduce app.xaml.cs size -Ć  most of its code can be greatly reduced. Mine ended looking like this:

public class App : Application

{

public App()

{

StartupEventHandler ha = null;

if (ha == null)

{

ha = delegate(object s, StartupEventArgs e)

{

base.RootVisual = new mh();

};

}

base.Startup += ha;

}

}

15. Minimize XAML Code: there is a lot of code that Blend adds and it is not necessary, there is also a lot of code pieces that are set up but also are default so taking them out does not affect the render.

16. Refactor the variable names, function names, and all the other names! I recommend that this is done first in a 3 to 6 length name so it still has some meaning – at the end you can refactor that to only 1 or 2 characters if needed… So you can touch the code with full understanding of what you have coded J.

17. Use only one – C# file šŸ˜‰ – that will help reduce even more the use of the usings & also the own size of the extra files usage. This will reduce the namespace definition and usage to only one.

18. As the final step I compressed the code, I coded a simple tool that took a file and got all the whitespaces, carriage returns, etc.. it’s about 3 to 6 hours coding something like that.

Ā 

Other ideas..

Other ideas I had but did not use but I think it’s cool to mention them :D:

1. Compressing the XAML

Compress the xaml (zip it) and uncompress it in runtime and render it over user control placeholders. As Silverlight comes with a compress/decompress utility the code needed for this is really small! I even looked up for the best way to do this (check this great post: http://www.sharpgis.net/post/2009/04/21/REALLY-small-unzip-utility-for-Silverlight.aspx) but the point is that I have to do whatever the ā€œInitialize component doesā€. In my case is this:

[System.Diagnostics.DebuggerNonUserCodeAttribute()]

public void InitializeComponent() {

if (_contentLoaded) {

return;

}

_contentLoaded = true;

System.Windows.Application.LoadComponent(this, new System.Uri(“/bml;component/IKSegment.xaml”, System.UriKind.Relative));

this.LayoutRoot = ((System.Windows.Controls.Canvas)(this.FindName(“LayoutRoot”)));

this.ScaleSegment = ((System.Windows.Media.ScaleTransform)(this.FindName(“ScaleSegment”)));

this.RotateSegment = ((System.Windows.Media.RotateTransform)(this.FindName(“RotateSegment”)));

this.IKSegmentImage = ((System.Windows.Controls.Image)(this.FindName(“IKSegmentImage”)));

this.brazo = ((System.Windows.Controls.Image)(this.FindName(“brazo”)));

}

Which is not small code and it is unclear that this will end up giving me the edge… šŸ˜‰

That technique is only for xaml intensive applications… but will keep this for next year’s MIX 10K :D.

1. Compressing different CODE pieces and compiling/running it ā€œon the goā€

Other technique I put my eye on was to have code zipped and unzip and make it run on the client but… it just can’t be done L it needs to travel back to the server, be compiled and returned to the client, then attached and et voila! It lives! This way would make the application to atone with the rules as all the code used would be in the XAP file – it just will be transferred to the server, compiled and returned back as an assembly J. I explored this for my Magnifier Tool but ended up not using this as there was no time and still had some ā€œbasic code compressionā€ techniques to try out.

Anyway if you are interested, this is the best reference I found on how to apply this technique: http://nokola.com/TryCSharp/ Thanks Nokola!

At the end..

Hope you enjoyed the article, if you liked it I’d like to get your feedback, maybe with a comment? J

Thanks for reading!!

Dynamic Backgrounds

As this is a era of new user experiences, I’ve created a codeplex project to gather different user experience experiments with the target of offering an interactive background to the user, one that interacts with his mouse movements and enhances the experience without being too captivating not to get the user’s attentino for the whole website experience..

The main idea of this project is to keep adding clear implementation of these background techniques. By now there is only one which is a parallax multi-layer background that allows us to provide different elements across multiple randomly dynamically generated layers, it moves the layers more or less depending on how far away they are from the monitor so it provides a interesting depth feeling.

I used this for the Inetians contest and also other websites, some of them did not see the light 😦 – it was a 2nd silverlight contest in the shape of http://silverlightchallenge.eu/Ā but this time for the world, but the bad timing (the crysis) helped it not to become a reality… now we’re flooeded by contests so it doesn’t make sense – if you think it would make sense having a worldwide contest and make a big buzz, just let me know as this is a matter of looking for sponsors… everything else is written down šŸ˜‰ – you can get a glimpse here http://silverlightchallenge.ineta.org/Ā but I do not assure it will be working tomorrow, I’ve advised… please take in account it’s a work in progress and left unattended.. my apologies for that

There is other site that is using this approach in an evolved way, with more powerful algorythms with a star theme, with randonmly generated star shapes and a better mouse-driven animation, but it’s still to be finished and published šŸ˜› – I can’t talk!!! or some company that starts with “M” and ends with “t” Ā will cut my tongue or worse…

Please, download the code and let me know what do you think… it is hosted at codeplex; http://dynamicbackgrounds.codeplex.com/

Have fun

INETIANS 10k entry – code released :)

Well it took some time but I have published the full source code of my Mix 10k entry http://2009.visitmix.com/MIXtify/TenKDisplay.aspx?SubmissionID=0138.

inetians
Ā 
It comes from some background experiments with parallax, inspired in old age video games and an interesting entry from Jose Fajardo, http://www.cynergysystems.com/blogs/page/josefajardo?entry=what_a_beautiful_thou_distracting in which he introduced a very interesting parallaxĀ background effect that I tried to emulate and make it a bit toolable –Ā  a codeplex project for this background system is on its way ;).

You can get the code here: http://inetians.codeplex.com/

Have fun!

Slides and demos of my talk at KulenDayz..

Thank you KulenDayz!

I am very thankful to have went to the famous european Event KulenDayz, name that comes with the game of mixing Cool Days and the famous “Kulen”, a great famous spicy food which is also, the logo ofĀ  the event, which can be seen next:

Kulen Dayz

There I was very happy to be able to provide an introduction to the new Silverlight version, 3.0, which will see the light in short time, the 10th of July.

As promised, here are my slides and the demos I showcased there. Note that I took off the videos in order to make the demos as small as possible.

I’ll be glad to answer any question regarding the slides or the demos.

And, as for the event, I’ll try to make a post in short, but, for now, here are some images I took there: http://www.flickr.com/photos/joslat/sets/72157619870531664/

Hope you enjoyed the session šŸ™‚

www.houssesandcovers.com is live :)

And it’s a new brand Silverlight 2.0 only website ..

Only to share this simple website that I have done completely with Silverlight 2.0, http://www.houssesandcovers.com/

On it I have used some very interesting open source libraries, AgTweener (http://agtweener.codeplex.com/), nice library for implementing animations and ARLayout (http://arlayout.codeplex.com/) this is to make the layout absolutely adaptable and resizeable to the browser’s size –Ā  Try to change the browsers size and see what I mean –

Also, I’ve used some snippets of code from very interesting sites, making a special mention to the samples from Terence Tsang’s Shinedraw websiteĀ  (see http://www.shinedraw.com/), and also some example from the Silverlight Gallery which I have adapted for doing the image gallery.

The design is also mine, so feel free to make recommendations and suggestions.. šŸ˜›

Fighting with VS 2008 SP1 Beta…

Two days ago, for writting an article about Silverlight integration with ADO.Net Data Services I decided to install Visual Studio 2008 Service Pack 1 (Beta!), just to find that after the install, that went wrong and with problems it got dll problems withĀ Silverlight 2 beta 2…

I’m still at it as I did it at once in my two computers, Desktop (Vista ultimate sp1 (x64) and Laptop (XP SP2) and all are being “in processs” right now…

There are loads of information about this issue, being the main one and recommended at the Silverlight official website, there is some very interesting information at the Scott Gutrie’s blog, and others like the Web developers blog, And also there is an interesting article onĀ  how to download all the SP1 (also mentioned on the sp1 documentation)..

Also, be sure to read the Visual Studio Service Pack 1 Beta documentation, it is worth it. As Agent 86 said, did you read the 467th page? šŸ˜‰ Just joking but would be great if things weren’t sometimes so complicated..

As on where am I now, I did all the repairs and followed procedures on my laptop but somthings not working so I am uninstalling all and will install the sp1 again.. if that doesn’t work, will do this from a clean (again) Visual Studio 2008 Professional install..

As on the Desktop, I already did this (quad core & 8 Gig ramĀ helps on this matters) and had issues installing the sp1 as it didn’t recogniced there was a Visual Studio installed… to say I had VS Team System 2008 and thinking this was for this, I unistalled and installed the professional version.. but still doesn’t find it! and it is installed!! so I am downloading the vs 2008 sp1 manually to try installing it piece a piece… let’s see..

If anybody wants to suggest other way of actions, I’m fully open..

For now, these are my 5 cents..

Silverlight Viewbox

On the past MVP Summit, on which I assisted as an ASP.Net MVP (curiously my activity last year has been mostly of WPF and Silverlight talks) I commented the need of having the WPF Viewbox control on Silverlight 2.0… Silly of me I didn’t realized that I could do it myself as it’s pretty easy to subclass or define user controls for this new version, fortunately my seat companion and one of the main Spain WPF & Silverlight experts, Miguel Jimenez, told me ā€œHey, why don’t you make it yourself?ā€ And well, he was absolutely right, so here it is… at least a preliminary version of it that more or less does the work I need done.

I basically inherited from the Canvas panel (first tried from the panel base class, but realized it would be easier through Canvas subclassing). Then I wanted it to scale its contents when its allowed space (width and height) grows up or down. Then I added dynamically a ScaleTransform and a TranslateTransform on it’s constructor, added them to a TransformGroup and added it to the Class RenderTransform property (inherited from Canvas).

//Initialization

this.ST_scale = new ScaleTransform();

this.TF_offset = new TranslateTransform();

//We add a transform with the Scale and Translate Transforms…

TransformGroup tg_transformViewbox = new TransformGroup();

tg_transformViewbox.Children.Add(this.ST_scale);

tg_transformViewbox.Children.Add(this.TF_offset);

//We add this Transform to the ViewBox (Subclassed from the Canvas class)

this.RenderTransform = tg_transformViewbox;

Then the only thing left to it was to implement an override for the ArrangeOverride function (more info here: http://msdn.microsoft.com/en-us/library/system.windows.frameworkelement.arrangeoverride(VS.95).aspx ).

There I determine the scale ratio, choosing the minimum ratio from the X and Y calculated ratios. Also I adjust the offset for the Y or X axis, to adjust more properly the positioning.

protected override Size ArrangeOverride(Size finalSize)

{

//We scale the contents based on the desired size width and height.

double scaleX = finalSize.Width / this.DesiredSize.Width;

double scaleY = finalSize.Height / this.DesiredSize.Height;

//By default we only allow an “uniform” Stretch attribute option.. we could add the attribute and held the logic in this function.

// See: http://msdn2.microsoft.com/en-us/library/system.windows.media.stretch.aspx and http://msdn2.microsoft.com/en-us/library/system.windows.controls.viewbox.stretch.aspx

// To do this more seriously, we should also add the StretchDirection and Stretch properties too.

if (scaleX > scaleY)

{

//Lowest scale ratio wins (Y axis is lower)

this.ST_scale.ScaleX = scaleY;

this.ST_scale.ScaleY = scaleY;

this.TF_offset.X = (finalSize.Width – this.DesiredSize.Width * scaleY) / 2;

this.TF_offset.Y = 0;

}

else

{

//Lowest scale ratio wins (X axis is lower)

this.ST_scale.ScaleX = scaleX;

this.ST_scale.ScaleY = scaleX;

this.TF_offset.Y = (finalSize.Height – this.DesiredSize.Height * scaleX) / 2;

this.TF_offset.X = 0;

}

return base.ArrangeOverride(finalSize);

}

And this is all is there to it… I didn’t needed to override the MeasureOverride (check http://msdn.microsoft.com/en-us/library/system.windows.frameworkelement.measureoverride(VS.95).aspx). Also if you want to know more about creating custom panels, there are some things to read:

The code has been uploaded here: <<<viewboxzip>>> but has a small problem that I realized afterwards.

As a small notice, this code is licensed under MS-PL (http://www.microsoft.com/resources/sharedsource/licensingbasics/publiclicense.mspx).

This problem is that the ā€œoriginalā€ WPF Viewbox only allows one control and this one is a Canvas so it allows multiple controls positioned together, so it resizes all accordingly, including the layout, which is respected.

Anyway this is the behavior I wanted to obtain, but it is not the WPF Viewbox behavior, so it’s not Ok… for a WPF Viewbox to do this I should put a Canvas inside the Viewbox and then the controls inside the Canvas.

Hope you have fun with it.Ā  šŸ˜‰

The link for the source code donwload is here: viewboxzip