SilverlightShow: Silverlight Community

Pencho Popadiyn on N-puzzle WP7 application

editorial@silverlightshow.net (Silverlight Show ) — Mon, 09 May 2011 04:04:00 GMT

Don't miss...

Next in our WP7 showcase apps comes N-puzzle – a new, free gaming app developed by CompletIT and Pencho Popadiyn. Pencho is also a recognized article author at SilverlightShow (check his contributions).

Q1. Pencho - please introduce yourself briefly (experience, interests, key projects, etc) and tell us more about the application you created - what are the key functionalities, major differences from other similar applications on the market, why do you think people would want to install this app on their phone?

A. Hello! I’m Pencho Popadiyn, I live in Sofia, Bulgaria and work as a .NET Developer for CompletIT. I am developing Silverlight/WPF since the very beginning. I enjoy programming WP7 in my free time. In fact this is not my first WP7 game. Last month I released my first app, it was a mahjong based game (search for Shisen-Sho in the marketplace). And I received a lot of positive feedback from the users, and that encouraged me to move on. About the puzzle. Well, it is based on the classic and extremely popular N puzzle game, where you have a frame of numbered square tiles in random order with one tile missing. The object of the puzzle is to place the tiles in order by making sliding moves that use the empty space. The game offers a number of built-in images; also the user can choose a custom image from the phone gallery or even to use the today’s Bing image as a source. If you don’t like images, you can play the classic modes with numbers or letters. You can save a game in progress and complete it later; there are four different board sizes and many other features. Here are the links to the game:

Q2. Why a puzzle? How did you get the idea to create this app?

A.Well I developed the same application for Silverlight a long time ago. And now I decided to port it for WP7. By the way, the original Silverlight application is available on SilverlightShow. Check out here.

Q3. Which features were most challenging to develop in this game, and why?

A. Maybe the logic for downloading and using the today’s Bing image feature was most interesting. But generally as I said I had a Silverlight version of the puzzle, so it was relatively easy to port the project to WP7.
However, since this is my second game, I am trying to take a more general look at the things. I am trying to extract common functionality and build something like an own framework (for internal usages of course). As I come to my code from time to time I am seeing a lot of repeating code and patterns. Besides the standards utilities and helper classes, I and my colleagues are spending some time in discussing and analyzing how to design some more complex stuff. So we could use it in our future projects.

Q4. Could you reveal some tip, some solution you used to work around a specific problem faced during the development of your application?

A. Hmm, that’s interesting question. The game is not complex, so I didn’t have any big challenges. However, during the development I hit several problems. Here are some of them. Let’s take a look at the PhotoChooserTask. It took me four hours to understand that navigating to another page directly from the Completed event is wrong. It leads to unbelievable behavior of the application, e.g. events are not firing, other are fired twice and something similar.
I found other issues (bugs) with the tombstoning. For example, the Remove method of the application state dictionary is not working correctly, e.g. after the application activation event is raised, the entry is still there.
One of the biggest challenges was related with the ApplicationBar. The ApplicationBarButton and MenuItem does not allow you data binding and attaching commands to the click events. Since I am a MVVM guy, having code for calling view model’s methods in the code-behind of the view is real pain in the a**.
What I could advice the developers who are planning to start developing WP7 applications is to make their first steps with caution. There are a lot of unexpected obstacles. Also having WP7 device for testing is almost mandatory. I could tell you for sure, that testing on the emulator is not the same as testing on a real device (mainly in terms of performance and graphics).

Q5. Which technology did you used for your games, Silverlight or XNA?

A.Well, as a developer having experience with Silverlight and WPF, I used Silverlight for developing my first games. But right now I am getting started with XNA and it is not far the moment when I’ll release something written on XNA.

Q6. Do you plan to upgrade the game with any new functionality later on?

A. Yes I’ll definitely do it; furthermore I am planning to do it in the next 2 weeks’ time frame. I have a lot of ideas in my mind. For example, I am planning to add a video puzzle. So, instead of image, the user will be able to select a video for puzzle source. I think it will be really interesting. Also I’ll add history functionality. But first, next week I’ll release a small update for the Shisen-Sho game.

Q7. How do you see the future of WP7, and applications for WP7?

A. “The future is so bright”, as in the song of C-Block. Ok, now seriously, I think WP7 will transform in a great platform not only for games but for business applications too. We have to be just more patient. Remember what was the situation with Silverlight at the very beginning – lack of features and functionality, bugs, etc. Today Silverlight is a complete platform. The same is the situation with Windows Phone 7. It is just at the beginning of its way. Just wait till the end of the year, when the next major players - Nokia and Mango will enter the gameJ.

Q8. What other ideas for next WP7 applications do you have?
A. I haven’t decided yet what will be my next application, whether it will be a game or some application. I have several ideas and I am still discussing them with my colleagues. I am planning to release several apps and games in the next few months. Although they will be relatively simple, I am trying to make each next game much more complex than the previous one, adding more features and logic. I am still not planning to enter deep inside into the muddy water of the game development (for example, to create some complex shooter or action game). I want to build more confidence and experience (to pave the way, so to say)J. I want learn all specifics of the WP7 programming model in great, great details and try different programming approaches first, and then I’ll think for something more complex.

Thank you, Pencho! Wish lots of people would enjoy your game!

360 Degrees Feedback by Kevin Dockx

editorial@silverlightshow.net (Silverlight Show ) — Thu, 24 Feb 2011 04:14:00 GMT

In this white paper the article author Kevin Dockx revealed the challenges behind building a Silverlight-powered 360-degree employee review solution with his company RealDolmen. You may address any questions on this white paper inside the Comments section below.

Company Profile

Company name: RealDolmen
Website: http://www.realdolmen.com/
Industry: ICT
Brief company overview:

RealDolmen is one of Belgium’s largest ICT companies. We are a single-source supplier with wide expertise in various sectors (professional services, infrastructure, support, …) and technologies (the full Microsoft stack, Java, CAD/GIS, …). We have over 10.000 man-years of experience of service, a wide portfolio of ICT skills and a strong network of partners.

Project Overview

1. Describe what the project is about - goals, target users, key functionalities

The project, named 360 review, is all about automating 360 degrees review of persons, resulting in a report. A 360 review should be seen as “one person gets reviewed through a certain survey by a number of colleagues (and by himself)”, and this person is reviewed on a variety of subjects. The project has been designed to be offered in a Software as a Service model, with ease of use and reuse of inputted data in a multitude of languages in mind. The general business model is that a company that wants to engage in a 360 review of its employees comes to us, and we set up a client environment for this company. In that client environment, the company can input its employees, create questionnaires, start surveys and create reports from filled-out surveys. Once a survey starts, mails are sent out to the people that have to fill out the survey, and through the login details in that mail, they can open the application module which allows them to fill out the survey.

So, the project consists of 3 parts: the Management part, which allows the administrator (that’s us) to create new client environments. The Client part, in which a client can manage questions, persons, questionnaires, surveys, … And the Employee part, in which an employee can fill out a survey created in the Client part.

High on the list of priorities were an intuitive, easy-to-learn & fault-tolerant user interface, and low bandwidth use.

2. Did you have any limitations set - technologies to be used, time, resources, etc?

The technology choice was actually quite easy to make: as we needed a performant, intuitive user interface, combined with low bandwidth use, using Silverlight was a no-brainer. As with all projects we undertake, a budget is set in advance, so of course time & resources are limited.

3. How was the project team composed?

With all projects, we have functional analyst, technical analyst, general project manager, test team and developer roles. The key difference with this project was that we added a designer/devigner to the project team. To get a good user interface, that role is absolutely essential. Creating a good design takes up quite a lot of time: we had one devigner for 2 developers, and he was on the project during the complete duration of the project – but it was definitely worth it.

4. What Silverlight features were used in this project?

Almost every feature you’d expect in a line of business application: of course we used the data binding features heavily, but we also used parts of the Silverlight Toolkit (eg: TreeView, Charting), parts of the navigation framework, a bunch of custom controls, custom styling/theming and animations, validation, localization, … Data access is done with WCF RIA Services, backed by the Entity Framework on a SQL 2008 R2 DB, using both generated entities and custom DTO’s where necessary.

We also used a custom, internal reference architecture which filled in the missing parts (eg: we have a custom navigation framework built on top of the one that’s already available, allowing us to specify exactly which role has access to what part of the application, we have rules and components for caching, logging and exception handling, we have all the necessary classes for MVVM, services for dialog windows, services to trigger animations, …)

5. Project snapshots

(Click on the pictures for a larger view)

Problem and Solution Insight

1. What were the pros and cons for using Silverlight to achieve those goals?

A big pro is definitely the almost unlimited UI customization options Silverlight offers. The fact that Silverlight runs on the client was also a big pro – for example, we generate reports client-side: all we need is the data to generate it with. In our case (where the needed data for the report, which includes quite a few graphs, is much smaller than the resulting report itself), this means the bandwidth usage is lower (as the reports don’t have to be sent to the client, only the data needed for the report). Performance-wise, an average report 25-page report including graphs is generated in about 2 seconds on an average client machine – and we don’t depend as much on the amount of concurrent users generating reports on the server. In general, keeping performance in mind for this specific application, Silverlight is the right choice: once the data is available, all operations are done on the client.

A con was the availability of the plugin for possible customers: at the moment we started the project, it wasn’t as widespread as it is now. But currently, around 70% of internet-connected computers have the Silverlight plugin (source: riastats.com), so that isn’t an issue anymore.

2. What were the major Silverlight-related problems faced during development?

When we started development, we were working with Silverlight 3 and the then available version of WCF RIA Services, in Visual Studio 2008. By the time the project was completed, we were using Silverlight 4, Visual Studio 2010, and the latest version of WCF RIA Services. That means we went through 2 Silverlight versions, a new Visual Studio and 3 versions of WCF RIA Services during development – and some upgrades included changes that broke previously working code, especially in relation to WCF RIA Services. The main Silverlight related problem was definitely fast release of new versions: we lost quite some time because of that, and we had to throw away quite a bit of code we created for Silverlight 3 to support certain features that became available out of the box with Silverlight 4.

3. What was the reason to choose WCF RIA Services for data access? Did you consider other technologies as well?

Low bandwidth usage (when used correctly), client-side change tracking, built-in validation on client/server and the ability to precisely choose what’s going over the wire through metadata and change-tracked DTO’s are all reasons to choose for WCF RIA Services. Next to that, the built-in security options (Authentication Domain Services) obviously saved us a lot of time & effort.

For example, we didn’t want to submit every change in data to the server immediately: we wanted to keep this on the client and let the client decide when to sae the changes (resulting in a less chatty application). Having out-of-the-box change tracking really helps in scenarios like this. In essence, you can look at WCF RIA Services as having an Entity Framework-like ObjectContext to load data in, keep track of changes, … on your client.

WCF RIA Services is often marketed as a framework for rapid application development, which it definitely is, but it’s a lot more than that: when you starting looking at it more closely, you’ll find a very powerful, very extensible framework. You get so much out of the box, and if you need something else, it’s pretty easy to add. But you have to look past the marketing talk ;-)

4. Did you face any challenges with using navigation in your application?

Yes. We wanted to support deep linking, which drove us to the built-in navigation framework, but we quickly noticed that it isn’t sufficient (at all) for complex applications. For example: we needed to be able to navigate to a certain Uri, which had to create the UI by loading different views in different frames, and we had to be able to navigate to a certain “state” of a view, automatically. This kind of behavior isn’t available out of the box, so we heavily extended the existing navigation framework to get what we need. Through these extensions, we are now able to define a Uri and link it to different views in different states in different frames, and even define whether or not authentication/a certain role is required to access the Uri.

5. Did you use any third-party controls? (which one and why, if appropriate)

We used some controls from the Silverlight toolkit, but next to that we created all our controls ourselves. They were too specific to be available through third-party vendors, and it’s actually quite easy to create custom Silverlight controls.

6. What did you use for reporting?

For reporting we were looking for a solution which allowed us to create reports (in this case: Word documents) on the client. We evaluated a few possibilities, but SyncFusion DocIo really stood out for us: you can start from a template, easily fill in the data that’s needed and send the report to the client through a typical “Save as” dialog window. It’s also quite intuitive to use, and we had used the non-Silverlight versions of their reporting tools in the past, so we already had some experience with this.

Conclusion

Were the initially set goals achieved, within the expected resources? What else has left to be improved?

The initially set goals were definitely achieved, but we did experience a bit of overrun because of the various migrations we had to do due to the fast pace of new WCF RIA Services / Silverlight versions. However, we’re very happy with the application at the moment, and we get similar feedback from companies that use it.

As for possible improvements in the future: there are always things we can add, more functionality, extra graphs and reports, … This project will keep on evolving day by day, depending on customer feedback.

Andrej Tozon on Hey weigh! WP7 application

editorial@silverlightshow.net (Silverlight Show ) — Thu, 27 Jan 2011 02:50:00 GMT

Don't miss...

Show more books

Q1. Andrej - please introduce yourself briefly (experience, interests, key projects, etc) and tell us more about the application you created - what are the key functionalities, major differences from other similar applications on the market, why do you think people would want to install this app on their WP7?

A. My name is Andrej Tozon and I’m working as a contractor with my own company in Slovenia. I’ve been developing for Windows for nearly 20 years now, working through a lot of technologies and languages in my past. Currently, my primary work interests are Silverlight, WPF and, lately, Windows Phone 7. I’m also a Client Application Development MVP.
My first WP7 application, Hey weigh!, is a simple weight tracking tool, which you can use to track your weight. It’s a very basic, free app that lets you enter your weight for a day and keeps history for last 30 days. History is, besides in a scrolling list, also represented by a line chart. I wanted to keep it simple and clean so I only included those features I myself thought I needed to track my weight, so I could also say that it was a very personal project :) If that basic feature set and the looks appeal to other people, that’s great. There are other similar apps on the marketplace, offering additional features and users may find them more useful than mine. And that’s what’s so great and important about taking part in the large, global marketplace – you offer your vision of an application and watch the users all over the world responding to it.

Q2. What was the motivation behind creating this application? How did you get the idea?

A. I think the key moment came around last Christmas, when people were led many discussions about food and having to take care when and how much to eat. Needing to control my weight myself occasionally, a weight tracking application seemed like a perfect warming up application that would lead me into the world of actual Windows Phone 7 development. I wanted to learn about the whole WP7 development lifecycle, including publishing to the marketplace, so I chose to do a simple application that I would offer as free, as free was (and currently still is) the only way I could get the application on the marketplace.

Q3. What were the challenges you faced when moving from Silverlight to the phone environment? What are the common difficulties a WP7 first-timer may face while developing his first app?

A. Being used to Silverlight 4, there were some initial hiccups with regard to lack of APIs, which is due to the fact that the Silverlight version on WP7 is based on a Silverlight 3. You just need to forget a few things you learned when developing with Silverlight 4. You also have to pay a lot more attention to how your application performs on the phone - there is fortunately plenty of reading available on the web in this area. One last thing to mention is you have to be very familiar with application design guidelines and marketplace submission requirements so you can design your application right from the very start. And don’t forget – even when you start thinking you’re very well read on the whole WP7 development story, the real fun begins when you get your hands dirty and put your theory into practice.

Q4. Could you reveal some tip, some solution you used to work around a specific problem faced during the development of your application?

A. There was one thing I wanted to get into the application and that was making data entry as simple as possible. I started with a simple text box but soon ran into many problems. I set textbox’s InputScope to “Number”, which limits data entry to numeric characters. But this setting wasn’t working out because user could enter other characters besides numerals, which called for entry validation, etc. I also thought that manual entry wasn’t the best approach anyway, because with weight tracking, every new entry is only a slight modification of a previous entry, so why force user to delete and/or retype the whole number, if there are better ways of adjusting the weight?
So I came up with an idea of a custom number picker, which I based on the existing DatePicker that’s part of the Silverlight Toolkit for Windows Phone 7. The looks and behavior are similar, except that here you’re entering a decimal number instead of a date. The weight entry is faster this way because you only need to adjust the number tiles a bit to reach the new number and confirm it. No manual text entry is required at all.

Q5. Have you faced any performance challenges with Hey Weigh!? Was it hard to optimize your app so it may run smooth on the device?

A. Not really, because I wanted to keep application very simple and lightweight, but at the same time, I did want to try and put to work some of the performance guidelines that are emerging on the web through various weblogs - for example minimizing the (de)serialization time and data size, or loading data in the background after the application starts to ensure application shows its main screen as soon as possible.

Q6. How do you see the future of WP7, and applications for WP7?

A. I think the future of Windows Phone 7 looks good. Let’s not forget that this is first a phone first, and everything else, like it being an application platform, comes second. At least that’s how I look at things. Calls should be very easy to make and the phone (its OS) shouldn’t get in the way. WP7 does a good job with integrating with different services and social media networks, but there is still a lot of room for improvement. We’re only using the first version of phone’s OS today, so I’m very confident in that experience will only get better in the future.
Windows Phone also makes a great application platform. Developers love it because it’s easy to program against, and those with previous experience with the .NET platform (and Silverlight in particular), they should feel like at home. The marketplace is growing bigger every day and there are some really great apps out there. OS performance improvements aside, my only wishes are that their prices stay in a reasonable range, to see more free apps and for Microsoft to enable every developer in the world (regardless of their country) to publish their apps (free or paid) on the marketplace as soon as possible.

Q7. What other ideas for next WP7 applications do you have?
A. I have some ideas for my next applications, a couple of them games, which I would love to discuss about, when they get ready to publish and I could publish them myself, under my name. Unfortunately I don’t have a developer account myself, because Slovenia is not one of marketplace-supported countries; however, our local Microsoft office (their DPE team) was kind enough to publish the application in my behalf, which I thank them for.

And with hopes for these marketplace-related issues to be resolved soon, I thank you for inviting me to have this interview.

Thanks for sharing your first experience with WP7, Andrej! Looking forward to see your next applications on the WP7 market!

Tim Greenfield on PuzzleTouch WP7 Application

editorial@silverlightshow.net (Silverlight Show ) — Mon, 13 Dec 2010 00:00:00 GMT

Don't miss...

Show more books

The next WP7 developer who we introduce to you is Tim Greenfield who will reveal some secrets behind the creation of his PuzzleTouch application. Tim also gives some advices to those of you who consider to start developing for Windows Phone 7.

Q1. Tim - please introduce yourself briefly (experience, interests, key projects, etc) and tell us more about the application you created - what are the key functionalities, major differences from other similar applications on the market, why do you think people would want to install this app on their WP7?

A. My name is Tim Greenfield, I am a software engineer working for Vertigo Software and the founder of PuzzleTouch and MyPadlock. I am also a blogger, speaker, and former Silverlight Insider. My WP7 app, PuzzleTouch Jigsaw Puzzles is a jigsaw puzzle game with very realistic looking puzzle pieces and a natural feel to moving and snapping the pieces together. Besides dozens of interesting puzzles to choose from, you can also take a picture with your camera and turn it into a jigsaw puzzle. Plus, you can email these personal puzzles to friends or post them on Facebook from within the app, allowing friends and family can play your puzzle on the web for free. PuzzleTouch Jigsaw Puzzles also has an advanced mode to add even greater challenge.

Q2. What was the motivation behind creating this application? How did you get the idea?

A. The idea was essentially a “no-brainer”. I had invested over a year into developing the award winning website: PuzzleTouch.com (written in Silverlight), so I already had an extensive code-base that I knew I could easily leverage for the phone. Furthermore, the mobile platform is in many ways an even better venue for jigsaw puzzles. After all, you can touch the pieces like you would real with real jigsaw puzzles, the device is portable which makes it great for traveling, killing time in airports, …etc (something impossible to do with real jigsaw puzzles tethered to your dining room table :) And last, your phone has a built in puzzle maker… your phone’s camera!

Q3. Did you have any performance when you started your application on the device? What were the main challenges to make it perform fast enough?

A. I had already spent a good deal of time fine-tuning the PuzzleTouch.com website to handle various performance intensive tasks such as supporting 1000 piece jigsaw puzzles that you can easily zoom and pan as well as video jigsaw puzzles that play moving videos inside each puzzle piece. So, in many ways I was fairly far along already. However, after porting, I found I was still pushing the limits of the phone’s hardware. My main troubles were related to frame rate when dragging and rotating puzzle pieces. In the end, I did an exhaustive review of how I was using hardware acceleration and animations and fine tuned it further to boost the frame-rate during game play.

Q4. What were the challenges you faced when moving from Silverlight in/out of the browser to the phone environment?

A. Design, design, design. I wanted my app to look like a Windows Phone 7 app and not like a ported website. Starting with the PuzzleTouch.com code base got me very far very fast but I had to avoid temptation to simply rebuild a smaller version of my website for the phone. I actually ended up finishing the app for the phone and then throwing it away and starting over with the design. In the end, I moved away from having multiple pages leading up to the actual puzzle play screen and instead used the panorama control to build a succinct, user-friendly interface all on a single page to select or create your jigsaw puzzle.

Q5. Did you have to drop some features from your Web-based version to make it work fast?

A. Yes. As mentioned, PuzzleTouch.com supported up to 1000 pieces as well as video jigsaw puzzles. 1000 piece puzzles would not make sense on such a small screen nor would it perform reasonably well. And Silverlight for WP7 doesn’t support VideoBrush (the only way to build video jigsaw puzzles). Both features had to be dropped but it actually allowed me to clean up my UI by not presenting the user with so many choices. I honed in on what the best number of pieces would be on the phone and tweaked the app to make the experience as good as possible instead of trying to build a one size fits all app as the website tries to do.

Q6. Could you reveal some tip, some solution you used to work around a specific problem faced during the development of your application?

A. WP7 doesn’t support pixel shaders yet, and drop shadows were paramount to the realistic look and feel of the puzzle pieces. Fortunately, I came up with an alternative by creating a duplicate set of translucent black puzzle pieces and placing them behind the real puzzle pieces at a small offset. I was able to animate their position when the pieces were rotated to give the effect of a fixed light source while rotating the pieces and expand them when the piece was touched to give the appearance of the puzzle piece being lifted ever so slightly off the screen for a little 3D realism. In the end, it performed great and looked 100 times better than without any kind of drop shadow. Sometimes these little details make all the difference and it was well worth the time to get it right.

Q7. Have you faced any performance challenges with PuzzleTouch? Was it hard to optimize your app so it may run smooth on the device?

A. As mentioned, the underlying PuzzleTouch technology was already fairly well tuned and made great use of hardware acceleration so most of the work was already done. However, I did spend a fair amount of time looking at the performance readouts on the phone and made minor adjustments until I was happy. Fortunately, most of the same performance considerations in Silverlight for the web apply to the phone so in the end, I was actually able to roll some of my WP7 changes into the web version to improve it as well. All of this really demonstrates the power of code-sharing and why it is strategically important for Microsoft to develop Silverlight web/desktop with Silverlight for WP7.

Q8. How do you see the future of WP7, and applications for WP7?

A. WP7 is very appealing from a consumer perspective; in my opinion it competes on just about every level with Android and iPhone. It has some serious catch up to do to compete as a brand, but the platform’s quality and feature set is surprisingly on par and in some ways better than the competition. The handful of features it is missing will almost certainly show up in vNext, and because the phone carriers have limited control over the updates, users won’t be stuck with an outdated OS like they are with Android.

From the developer’s perspective, I actually see the developer’s story as possibly one of the greatest benefits to the platform. Microsoft has arguably the best programming stack available today and by leveraging Silverlight and XNA, developers won’t have to learn anything new and can even re-use vast amounts of code and external libraries to make development even faster. Furthermore, because the specifications are more tightly controlled and the phone carriers can’t meddle with the OS, app compatibility across different devices is practically irrelevant (the opposite from Android). In the end, these advantages are huge and we are sure to benefit from an amazing marketplace in both the number and the quality of apps available.

Q9. What considerations a Silverlight developer should make before starting to develop for WP7?

A. #1: If you’re porting an app, expect to redesign it. Not just for limited real-estate and touch support, but for the entire UX. #2: If you’re starting from scratch or porting, teach yourself what good design on a Windows Phone 7 looks like. Go out to the marketplace and look at the other apps. What do and don’t you like and why? #3: Familiarize yourself with some of the WP7 basics. Spend an hour on each of the following topics by building a quick proof of concept app to test the waters with: hardware acceleration, panorama and pivot controls, navigation, tombstoning, & touch. Once you have these basics under your belt, you’ll be far less likely to paint yourself into a corner down the road. #4: People are going to hate me for saying this, but don’t go overboard worrying about performance right from the start. Build POCs for the areas you suspect may have performance issues but don’t be afraid to rely on refactoring too. I’ve read blogs stating to stay away from binding and to stick to code-behind. While it is definitely true that this will result in better performance, sometimes you just don’t always need better performance and I’d say in most cases: bind away and tweak later. Don’t sacrifice clarity for performance if you don’t need to.

Q10. What other ideas for next WP7 applications do you have?

A. I actually just released my second WP7 app called BobbleHead that allows you to make bobblehead dolls on your phone. You can take pictures of friends, and put their face on some pretty funny bobblehead bodies then shake, poke and push the head to make it bobble like a real bobble head doll. A free trial is included and it was a ton of fun to build. Additionally, I’m also working a new version of PuzzleTouch for Kids (PuzzleTouch Jr.) and a more difficult version of PuzzleTouch (PuzzleTouch Extreme). Coming soon!

Q11. What is your opinion about Silverlight 5 and the new features announced at FireStarter?

A. I think this might actually be the most impressive Silverlight release since v2. There are a lot of great improvements for performance as well as productivity that Silverlight developers will be able to leverage to make Silverlight even more powerful than it already is. Silverlight is quickly becoming the premium platform for desktop and web development and I’m constantly impressed by the pace and level of innovation we’re seeing. Presumably, most of these great improvements will also find their way into the WP7 platform soon as well.

Thanks, Tim! Hope we talk to you again soon and discuss your BobbleHead App!

Laurent Duveau on Morse Code Flash Light WP7 Application

editorial@silverlightshow.net (Silverlight Show ) — Fri, 03 Dec 2010 00:00:00 GMT

Don't miss...

Show more books...

The next Windows Phone 7 application that we bring to your attention is Morse Code Flash Light – one app created mostly for fun. Its author, Laurent Duveau, agreed to share some details about the app as well as some tips on developing for WP7.

Q1. Laurent - please introduce yourself briefly and tell us more about the application you created - what are the key functionalities, major differences from other similar applications on the market, why do you think people would want to install this app on their WP7?

A. I am a Silverlight MVP and co-founder of RunAtServer Montreal (www.runatserver.com), we are specialized in Silverlight and Windows Phone apps. We do Architecture/Dev/UI Design/Coaching/Training/Speaking...
My “Morse Code Flash Light” app allows the user to translate text in morse code, then use the phone as a flash light to “read” it. Obviously it falls in the “funny tools” category, I don’t know if anyone will ever seriously use it, but who knows… anyway it was fun to build and it’s free! Try the “Shake for a random word” feature…

Q2. What was the motivation behind creating this application? How did you get the idea?

A. The idea came from my left brain; it’s a “toy” project… I needed an excuse to try development for the phone. As an experienced Silverlight developer I wanted to learn this new platform and see if there were any big differences. Since then we have had more serious mobile projects at work but they are not deployed yet.

Q3. What were the challenges you faced when moving from Silverlight in/out of the browser to the phone environment?

A. It was not that hard, tools are the same (VS2010 & Blend), C#, .NET, … there are some specificities, like the Silverlight version, phone features, entire touch UI (make BIG buttons), but nothing major.
The “31 days of Windows Phone 7” by Jeff Blankenburg helped a lot:
http://www.jeffblankenburg.com/post/31-Days-of-Windows-Phone-7.aspx

Q4. Could you reveal some tip, some solution you used to work around a specific problem faced during the development of your application?

A. I didn’t really had problems while developing, but more during the Marketplace certification process. My problem was around navigation and the back button behavior which was really weird at first. To make it short: circular navigation is not recommended, get the user to press the back button instead.

Q5. Have you faced any performance challenges with Morse Code Flash Light? Was it hard to optimize your app so it may run smooth on the device?

A. Not really because this is a very little app. But it is true that you need to optimize your dev for the phone, much more than regular Silverlight. You have limited screen real estate, limited performance, ... any list of data needs UI optimization with things like defer loading, local cache.

Q6. How do you see the future of WP7, and applications for WP7?

A. I see a great potential in the WP7 platform, both in terms of applications to create (everything is to be done, we need to fill the marketplace!), and for developers, because if just a part of the army of .NET developers realize how easy it is to create WP7 apps, that will be crazy! To have a great mobile platform you need a Marketplace with tons of apps.

Q7. What other ideas for next WP7 applications do you have?

A. I have a few more ideas for WP7 applications… something around location services… wait and see!

Q8. What is your opinion on the recent announcement by Microsoft on the future of Silverlight and HTML5?

A. I am happy to see Microsoft adding some diversity in its RIA strategy and will focus on HTML5 as well. There has been a lot of confusion around this message but this is all what it is. We have Silverlight for the richness and HTML5 for the reach. For me Silverlight has never been a tool to kill everything else. I have always been a strong advocate of using Silverlight only if needed and where there is real values add. I will almost never use Silverlight for regular websites, it does not make sense.
So the shift in strategy does not change anything in my job and for my business, I have always used Silverlight for rich line of business applications for intranet or desktop, and that will not change anytime soon. Doing web stuff for the iPad is HTML(5) only, so I’m glad that Microsoft focus on that as well, this is a market they can’t ignore. I am sure we will soon have tools in Visual Studio to help produce HTML5.

For more information on Laurent’s future projects visit his blog http://weblogs.asp.net/lduveau or follow him on Twitter @LaurentDuveau.

Johan Dahlbäck on Marathon WP7 Application

editorial@silverlightshow.net (Silverlight Show ) — Wed, 01 Dec 2010 00:00:00 GMT

Don't miss...

Show more books...

The next WP7 application we present is called Marathon and it keeps track of your movement with the help of a GPS-receiver. It’s the perfect companion for sporting activates such as running, skiing or even skydiving. We introduce you to Johan Dahlbäck who will tell us how otherwise his app can be used.

Q1. Johan - please introduce yourself briefly and tell us more about the application you created - what are the key functionalities, major differences from other similar applications on the market, why do you think people would want to install this app on their WP7?

A. I'm 24 years old and live in Stockholm, Sweden. I've been working as an IT-consultant for the past 2.5 years, mainly with SharePoint development. On my spare time I'm working on my application "Marathon", which is a tool that uses the location service on the device to record the users movement. It's mainly made for runners, but works well for most outdoor sports where you measure distance (someone actually used Marathon during a skydive, so I guess it's up to your imagination :)). One neat feature a lot of people appreciate is the voice announcement, which can be set to trigger at time or distance intervals. I'm using it together with my previous recordings to compete against myself and give me the motivation I need to reach my goals. Running is quite popular now days, and I believe most people will find an application such as Marathon useful for their training.

You don't have to be serious runner to use it, it can still be fun to keep track of your results.

Q2. What was the motivation behind creating this application? How did you get the idea?

A. I started running a few years ago. At that time I didn't live close to any trial, so I had no idea how well I performed. It was about the same time smartphones started to show up with GPS-receivers, so I got the idea of creating Marathon to solve this problem. I bought a Windows Mobile device and started coding, unfortunately my motivation wasn't that great during the winter and it took almost a year before the application was ready for its first release.

Q3. What were the challenges you faced when moving from Silverlight in/out of the browser to the phone environment?

A. I had very little experience with Silverlight prior to Windows Phone. So I can't say I did such a transition. But I guess one of the biggest differences is how you interact with the device. Phones have small screens, so it doesn't fit much information on one page. You'll also have to worry about performance to keep a smooth user experience and not drain the battery. The phone apps can be interrupted at any time, so you have to make sure you can restore the current state.

Q4. Which measures does Marathon track? Which measure was the hardest to implement?

A. Marathon mainly tracks the distance you've moved (both vertically and horizontally), so it can provide you with information about your speed, altitude change, calories burned, distance and time. It also keeps all your positions so it can plot it on a map (this feature didn't make it to the first release, but it's available if you upload your result online). The hardest part was to make sure the charts didn't consume to much resources. They are based on the charts in the Silverlight Toolkit, which were not originally developed for Windows Phone. They still work great, but it was a bit of a risk to use them since I wasn't able to do any tests on a real device until a few days before release.

Q5. Have you faced any performance challenges with Marathon? Was it difficult to optimize your app so it may run smooth on the device?

A. Since I couldn't get hold of a Windows Phone 7 device during the development I tried to stick to simple animations and standard controls as much as possible for the first version. I did get hold of a developer device for 5 days before the release, so I could do some tweaking and make sure everything was working as intended. The most difficult part was to make sure the device response quickly when it's unlocked after a recording. At that time I have to update the graphs and the map. It turns out that the way I was using the Bing Maps control locked the UI while it was downloading data. I didn't realize this until it was too late to fix for the first version, so I had to remove the map (I blame the good 3G reception where I live ;)).

Q6. From a developer point of view, what are the challenges while working with the GPS? Is it easy to use the API? What could Microsoft do better?

A. The location service in Windows Phone 7 works great, I can't imagine a way to make it easier to use. Marathon was first developed for Windows Mobile which wasn't as easy to work with. Some of the early devices had quite some problem to get the first fix, so it was hard to know if it was my fault or the devices GPS-receiver. With Windows Phone 7 it just works. It's always a bit tricky to work with GPS since the signal is far from perfect, but I could reuse my previous code by simply replacing the GPS-wrapper. So the hard work I put down for my Windows Mobile application came to good use once again.

Q7. How do you see the future of WP7, and applications for WP7?

A. The platform has a lot of potential thanks to Silverlight and XNA. Both are great technologies which let the developer focus on the features of their applications and games. Since there are strict hardware restrictions you don't have to worry about performance on different kind of devices, which also makes it a lot easier to develop. Smartphones today are all about third party applications, so the most important feature is to make sure the developer have great tools to work with.

Q8. What other ideas for next WP7 applications do you have?

A. I still have a lot of features I want to add to Marathon, so I'll probably not start with anything new for a while.

Q9. What is your opinion on the recent announcement by Microsoft on the future of Silverlight and HTML5?

A. With Silverlight on phones, soon the Xbox and in cars (Windows Embedded Automotive) it's really making up for its original codename "WPF/E" (Windows Presentation Foundation Everywhere). It's an amazing technology and so is HTML5. Now that they are starting to overlap each other more and more the choice of technology isn't always crystal clear. But they both have a future and I don't believe any of them will be killed off by the other in the near future. When it comes to phone applications I welcome HTML5 as an alternative (but not replacement) to Silverlight. More and more companies want quite simple applications to expose their products for end users in one way or another. They'll benefit a lot if they can support Windows Phone, Android and iOS without writing 3 applications from scratch.

Thanks, Johan. Keep running ahead with Silverlight!

Dimaz Pramudya on Fuel My Car WP7 Application

editorial@silverlightshow.net (Silverlight Show ) — Tue, 30 Nov 2010 00:00:00 GMT

Don't miss...

Show more books...

The next author we’re going to meet is Dimaz Pramudya who was kind enough to share with us some details on his latest project – the Fuel My Car WP7 app. Dimaz also hints about his next WP7 app which we are going to keep an eye on.

Q1. Dimaz - please introduce yourself briefly (experience, interests, key projects, etc) and tell us more about the application you created - what are the key functionalities, major differences from other similar applications on the market, why do you think people would want to install this app on their WP7?

A. Hi everyone, I’m Dimaz Pramudya and I’ve been working in a number of industries in the past 5 years as a Technical Consultant. Few years ago, I was thrilled to invent SOAK along with few of my teammates, which we ended up winning the Software Design category for Microsoft Imagine Cup 2008 in Paris. Fast forward to today, I am the founder of salenear.me, a website that allows people to find great deals near them on their mobile phones.

At around June this year, I created a WP7 application called “Fuel My Car”. In a nutshell, Fuel My Car is a social mobile application that one can use to find nearby petrol stations. The major differences from similar application are the great User Experience and the ability to find the near real-time prices for petrol stations near them which we achieve through a combination of fuel price feed from data agencies and the social interaction from the users.

Q2. What was the motivation behind creating this application? How did you get the idea?

A. I found it hard to find nearby petrol stations if I was driving in an unknown area. Also, I would love to know the fuel price in advance so that I can make my buying decision accordingly.

Q3. What were the challenges you faced when moving from Silverlight in/out of the browser to the phone environment?

A. The user experience is completely different. When you are building Silverlight in browser, chances are you will be connected to the internet 99% of the time. Where as in the mobile context, you can’t rely on internet connectivity. You may be online at one time, and offline the next minute because you are going through the underground tunnel.

Hence, when building a phone application, you should cater for the offline scenario and provide intuitive way to tell the user that they are currently offline.

Q4. Could you reveal some tip, some solution you used to work around a specific problem faced during the development of your application?

A. One of the tricky challenges is how to let the user know whether the application is in online / offline mode. I could just popup a message or stick in a label somewhere, but that’s not a great user experience. Then, the thought came to me. What if I “dim” the background image so that the users see a “greyish” background when they are offline and the full color background when they are online? From the comment I’ve got on my blog (www.dynamicslight.com), people love this sort of experience.

Q5. Have you faced any performance challenges with Fuel My Car? Was it hard to optimize your app so it may run smooth on the device?

A. I faced several performance issues mainly with Listbox and loading images. Luckily, David Ans (Delay) shared the code for DeferredLoadListBox and LowProfileImageLoader which solves my perf issue.

Q6. From a developer point of view, what are the challenges while working with the GPS? Is it easy to use the API? What could Microsoft do better?

A. Getting the right accuracy from the GeoCoordinateWatcher without sacrificing the responsiveness of the application. But apart from that, I’m pretty happy with the GPS implementation.

Q7. How do you see the future of WP7, and applications for WP7?

A. Looking at the growth of WP7 right now, I would see it takes off mid next year. Combined with the easy to use development tools, I think WP7 is a heaven for SL / .NET Developers.

Q8. What other ideas for next WP7 applications do you have?

A. At the moment, I’m finishing up the WP7 application for my new venture www.salenear.me The application enables bargain hunters to discover and search for great sales around them. Stay tuned for updates @salenearme

Q9. What is your opinion on the recent announcement by Microsoft on the future of Silverlight and HTML5?

A. HTML 5 is great if you are targeting the latest browsers, however you will run into issues if your users are using older browsers. Plus your development experience isn’t going to be as nice as Silverlight *yet*. I think by Microsoft going Silverlight for their WP7 really shows the great commitment on the platform at least for the next few years.

Thanks, Dimaz, for revealing more on Fuel My Car. We hope to meet again soon to discuss your Sale Near Me app.

Paul Juenger on WHS Phone WP7 Application

editorial@silverlightshow.net (Silverlight Show ) — Tue, 30 Nov 2010 00:00:00 GMT

Don't miss...

Show more books...

Next in our series of featured WP7 applications comes WHS Phone – an app that lets you connect to your Windows Home Server and stream music, view photos, and much more. We talk to its author Paul Juenger on why this application will have a shelf life of more than a couple of weeks.

Q1. Paul - please introduce yourself briefly (experience, interests, key projects, etc) and tell us more about the application you created - what are the key functionalities, major differences from other similar applications on the market, why do you think people would want to install this app on their WP7?

A. My name is Paul Juenger. I am a software engineer for a defense contractor and specialize in ASP.NET. When I’m not working, spending time with family, or golfing, I research and develop applications with Microsoft technologies that I do not get use at work; i.e. Silverlight, WPF, MVC, WCF, etc. Around July of this year I became really interested in Windows Phone 7.

My first application is WHS Phone. WHS Phone is a WP7 Silverlight application that lets you connect to your Windows Home Server and stream music, access photos, and manage your server. You no longer need to pick and choose the music, podcasts, and photos that you want to sync with your phone because of limited space. WHS Phone integrates with the photo library allowing you to select photos from your phone’s library and upload them to your Windows Home Server. You can also download photos from your server to the phone’s library to view them offline. WHS Phone allows you to view server disk space and usage, manage users and shares, and view computers that are connected to your Windows Home Server. If you have a Windows Phone 7 and a Windows Home Server then you will really enjoy WHS Phone.

Q2. What was the motivation behind creating this application? How did you get the idea?

A. When I was brainstorming for application ideas I started by examining my IPhone. It was full of applications that were mostly games that I would play for a week or two and then quickly go into a folder never to be seen again. This helped me come up with three requirements: it must be something that I personally would use, something that users would want to pin to their start screen, and something that would have a shelf life of more than a couple of weeks. The idea came to me when I was reading an article about Skydrive integration with Windows Phone 7. Skydrive is a nice feature, but why would I want to limit myself to 25 gigabytes when I have over three terabytes of storage in my own private little cloud (my Windows Home Server). That’s when I decided to write WHS Phone.

Q3. What were the challenges you faced when moving from Silverlight in/out of the browser to the phone environment?

A. I had very little Silverlight exposure when I started writing WHS Phone. I wrote a client/server chat application when Silverlight 2 was released and that was about it. The biggest hurdle for me was learning xaml. I have a strong working knowledge of how things work in Win Forms and ASP.NET, but Silverlight is different. I had to take a couple days off from developing WHS Phone and just learn xaml, Expression Blend, and how to use templates.

Q4. Could you reveal some tip, some solution you used to work around a specific problem faced during the development of your application?

A. The Silverlight Toolkit for Windows Phone is an open source project hosted at CodePlex. It provides some controls missing from the WP7 SDK such as the wrap panel, list picker, and context menu, to name a few. It saved me a lot of time during development. Telerik also has a set of controls for WP7 that provides these controls as well (free download available here).

Q5. Have you faced any performance challenges with WHS Phone? Was it hard to optimize your app so it may run smooth on the device?

A. One performance issue that I came across in WHS Phone is a listbox with a couple hundred items in it that uses images in the data template. It is fine with static images, but the photo browser in WHS Phone displays thumbnails. I found that making a call to return the list of photos and then use a background thread to get the thumbnails worked well. I also only load the thumbnails that are visible to lower the amount of data transferred.

Q6. What is the target audience of WHS Phone?

A. The target audience is anyone who has access to a Windows Home Server. It is not just for administrators of the Home Server. You can configure the permissions for each user on the server through the WHS Phone add in. For instance, my wife can stream music and access photos, but I have the server management features turned off for her account. She loves it.

Q7. Technologically speaking, how do you enable music streaming directly from your server to the phone?

A. Music Streaming was a challenge, but is not something I would like to disclose at this time. :)

Q8. What other ideas for next WP7 applications do you have?

A. A friend and I have a prototype application that brings WHS Phone functionality to Windows 7.

Q9. How do you see the future of WP7, and applications for WP7?

A. WP7 is a very promising platform. I hear a lot of people say that it is too late in the game to release a new phone operating system. I say why? Is “the phone” going away and Microsoft does not have enough time to catch and surpass the Android and IPhone market? Of course not. Only time will tell the impact of Windows Phone 7. I would have liked to have seen it release a year or two ago, but think about the integration features of WP7. It connects to xBox Live, Skydrive, Zune, integrates SharePoin, has a Silverlight front end, and runs the full XNA 4.0 framework. It wasn’t just a matter of building a new operating system. Microsoft had to improve all of these technologies so they could integrate into the operating system. After using my WP7 for a couple weeks now I think it is a winner. I have had a number of loyal IPhone and Android users ask to see my phone and immediately say “Wow, that’s fast and smooth, does my carrier have phones with WP7?”

As for application development, Microsoft knows how to produce good developer tools. WP7 development is a dream compared to IPhone and Android development. The WP7 emulator is fast and debugging directly on the phone is very easy. Since Microsoft is requiring minimum phone hardware specs and are controlling OS updates I think we will have to deal with far less fragmentation than Android developers. Building a game that can be run on WP7, xBox, and Windows is very compelling. It really is an enjoyable and powerful platform to develop for.

Q10. What is your opinion on the recent announcement by Microsoft on the future of Silverlight and HTML5?

A. I know my view might not be what your typical reader wants to here, but I am an ASP.NET developer, sorry.

My initial reaction was shock. Silverlight has had good market penetration and a lot of big companies, such as Netflix, use it. But, after the announcement sunk in, I have to say I agree with Microsoft’s choice to back HTML 5. As an ASP.NET developer I look forward to working with HTML 5. Have you seen the hardware accelerated HTML capabilities of IE 9? I feel it is a step in the right direction and I applaud Microsoft for their decision to back an open standard over their own product. That said, I do not think it is the end of Silverlight. It is just too good of a product to let it just go away.

Thanks, Paul, for your accurate answers. Looking forward to your new projects.

More information about this application can be found at http://www.whsphone.com/

René Schulte on Pictures Lab WP7 Application

editorial@silverlightshow.net (Svetla Stoycheva ) — Thu, 18 Nov 2010 09:58:00 GMT

Garry McGlennon on ezyTip WP7 application

editorial@silverlightshow.net (Svetla Stoycheva ) — Wed, 17 Nov 2010 11:48:00 GMT

Gergely Orosz on Cocktail Flow WP7 application

editorial@silverlightshow.net (Svetla Stoycheva ) — Wed, 17 Nov 2010 11:04:00 GMT

Case Study: SilverlightShow Showcase

editorial@silverlightshow.net (Svetla Stoycheva ) — Fri, 30 Jul 2010 02:37:00 GMT

Since recently, SilverlightShow has a brand new Showcase section, with a much better, more intuitive interface to review all showcases featured on the website.

What did it take to redesign this section? What problems and issues had to be resolved, or have yet to be dealt with? We find this out in a case study submitted by one of CompletIT Senior Silverlight developers Nikolay Raychev. Nikolay has been responsible for the server-side development, integration with Silverlight solutions and SEO of the 2 main company websites - www.completit.com and www.silverlightshow.net. Due to his huge Silverlight experience he was assigned the development of the entire Showcase section.

Project Overview

1. Describe what the project is about - goals, target users, key functionalities

The main goal of the project was to replace the old (and also old-fashioned) showcase section of SilverlightShow with something new, interactive and easy to use. After the showcase page has loaded, all images had to be visible at once so the user could see all of them without going through pages, etc. The whole composition had to be zoomable, and also draggable, so the user could look at the items when the scene was zoomed in. A tooltip had to be displayed telling the user what’s the current item about. A dialog window had to show detailed information.

An important requirement was that the gallery had to support ordering by month so the user could see the latest items right away, as well as be able to browse through the items submitted earlier. The project had to be integrated in SilverlightShow using the existing data. The items had to open their old URLs so we wouldn’t lose the search engine indexation.

2. Did you have any limitations set - technologies to be used, time, resources, etc?

Since CompletIT is company is focused on delivering Silverlight solutions, and SilverlightShow is entirely dedicated to this technology there was no other choice but develop the module entirely in Silverlight. The timeframe was tight, not just because we are looking to expedite the redesign of SilverlightShow, but also because I had proposed to develop this project for my master’s thesis, and I had specific time constraints for that. Of course this required preparing tons of documentation to accompany the project, but it was definitely worth the efforts - I know that other university students, in addition to SilverlightShow visitors, will be able to learn from my experience.

3. What Silverlight features were used in this project?

Animations:
- Build-in animations API based on Storyboards
- Expression Blend 4 FluidMoveBehavior
ZoomablePanel and ZoomController – custom controls previously developed for our Book Shelf
RatingControl - custom control previously developed for our Book Shelf
EllipsePanel – custom control developed for the current project
Other custom controls and templates
Third-party Silverlight controls (Telerik RadWindow, ComponentOne RichTextBox, Toolkit ActivityControl
Render Transforms API:
- ScaleTransform
- TranslateTransform
DispatcherTimer
Mouse events API
VisualTreeHelper
3D Projection API
HTML Page API
MVVM
Prism
WCF - Silverlight enabled services

4. Project snapshots before / after

Before:

After:

Problem and Solution Insight

1. What were the pros and cons for using Silverlight to achieve those goals?

The main advantages of using Silverlight were:

Using the same business objects as were used in the server part
Easy consuming of the WCF services
Easy creation of animations using storyboards. Using Expression Blend FluidMoveBehavior for animating movement of objects from one list to another
Data Binding.

2. What were the major Silverlight-related problems faced during development?

In accordance with the provided design initially the items had to fill an ellipse and after clicking a button they had to order by month.

One of the problems was “How to make the items order as a filled ellipse?”

Together with Emil Stoychev we decided to make a custom layout control derived from Panel. At first I was thinking to start building the ellipse from the center when one of our colleagues – Bogdana Rakova came with the idea that the items can be divided into groups, for every group there would be columns and every column would have more items compared to the previous and the difference is n. This number n is different for the different groups and is decreasing for every next group. Finally the number n reaches 0. It’s enough to build half of the ellipse and you can mirror the rest. It’s good to work in such a smart team :) Colleagues are giving these clever ideas exactly when you need them. So I started developing the algorithm. It wasn’t so complex but wasn’t something you can build and test in a day or two. Finally a custom control called EllipsePanel was created.

Another problem was how to make items go smoothly to their positions ordered by month.

Here the Behaviors in Blend 4 came to use. I watched a video with Kenny Young at MIX who was showing how to use them. So I came with the solution with two ItemsControls. The first is making use of the EllipsePanel as an ItemsPanel in order to arrange the items as ellipse. The second one is using a StackPanel for the ordering by months and a second ItemsControl in its ItemTemplate for the ordering of items for every month. The real objects are moved from one list to another list structure in the ViewModel and the FluidMoveBehavior is making the visual part.

Conclusion

Were the initially set goals achieved, within the expected resources? What else has left to be improved?

We think that we managed to achieve the initial goals of the project, but there are still some issues to work on.

The initial load time should be improved. Now the application is waiting not just for the results from the service, but also for every image to load. We discussed to initially display a “Loading” image for every item until that item’s image loaded. We’ll further work on this.
The ellipse algorithm isn’t perfect so the width/height ratio of the ellipse varies depending of the number of items. This is also something we’ll be working to improve.

Of course, we’ll keep working to further improve and enhance this Showcase application, and for that we would surely count on the feedback of SilverlightShow users too!

Animated navigation between Pages

editorial@silverlightshow.net (Miroslav Miroslavov ) — Tue, 08 Jun 2010 07:46:00 GMT

This article is compatible with the latest version of Silverlight.

This is part 8 of the series “Silverlight in Action”

Here, we’re sharing our experience from the amazing CompletIT web site.

Introduction

In this session, we will cover one quite popular, but still very useful, technique for adding interaction to your web-site - "How to enable animations between pages using the Silverlight Navigation Framework". So, whenever we navigate to a page using HyperlinkButton, Browser history, Back / Forward browser buttons or just navigate to a deep-link, we'll be able to run animation between the content of the pages. This technique is very useful for both - Line Of Business (LoB) Applications and Rich Internet Applications (RIA). It also gives a lot of interactivity and enhance the overall User Experience of the web-site.

Plenty of different animations can be defined between the pages content. And here is one example of an animated transition between two pages.

A snapshot of the transition between Contacts page and Services page.

Try a simple transition between The ThreeDWorld page and The Book Folding Effect

Just click on the hyperlinks or navigate back / forward.

Implementation

The idea is pretty simple: in order to have animation between two contents, we need to have them both live before the whole transition finishes.

First, let’s start with inheriting from the Frame class and let’s name it TransitioningFrame. The Frame class is a simple ContentControl with enabled some Navigation features. And as a normal ContentControl, when the user navigates to another page (changes the Content), the old content will be thrown away (and that is what we need to workaround). We’ll do this with having two ContentPresenters in the ControlTemplate of the TransitioningFrame class. This idea is vey common and broadly used, for example, in the toolkit’s TransitionContentControl.

The TransitioningFrame class

 public class TransitioningFrame : Frame

 {

     private ContentPresenter currentContentPresentationSite;

     private ContentPresenter previousContentPresentationSite;

     public TransitioningFrame()

    {

         DefaultStyleKey = typeof(TransitioningFrame);

    }

     public override void OnApplyTemplate()

     {

         base.OnApplyTemplate();

         previousContentPresentationSite = GetTemplateChild("PreviousContentPresentationSite") as ContentPresenter;

         currentContentPresentationSite = GetTemplateChild("CurrentContentPresentationSite") as ContentPresenter;

         if (currentContentPresentationSite != null)

         {

             currentContentPresentationSite.Content = Content;

         }

     }

     protected override void OnContentChanged(object oldContent, object newContent)

     {

         base.OnContentChanged(oldContent, newContent);

         if ((currentContentPresentationSite != null) && (previousContentPresentationSite != null))

         {

             currentContentPresentationSite.Content = newContent;

             previousContentPresentationSite.Content = oldContent;

             VisualStateManager.GoToState(this, "Normal", false);

             VisualStateManager.GoToState(this, "Transition", true);

         }

     }

 }

The trick is to run an animation (go to “transition” state) when the content is changed.

The TransitioningFrame ControlTemplate

The control template is also very straight forward. It will keep the two content presenters and will also define the transition animations. We will use VisualStateManager for dealing with the animations. And let’s define two states:

Transition state - run the animation between pages. (You will need to change this in order to make custom animations)
Normal state - enables the control to go back to Transition state, when needed.

 <ControlTemplate TargetType="TransitionFrame:TransitioningFrame">

    <Border HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"

            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"

            Background="{TemplateBinding Background}"

            BorderBrush="{TemplateBinding BorderBrush}"

            BorderThickness="{TemplateBinding BorderThickness}">

        <VisualStateManager.VisualStateGroups>

            <VisualStateGroup x:Name="PresentationStates">

                <VisualState x:Name="Normal" />

                <VisualState x:Name="Transition">

                      <Storyboard>

                          <ObjectAnimationUsingKeyFrames BeginTime="00:00:00"

                                                        Storyboard.TargetName="PreviousContentPresentationSite"

                                                        Storyboard.TargetProperty="(UIElement.Visibility)">

                           <DiscreteObjectKeyFrame KeyTime="00:00:00">

                                 <DiscreteObjectKeyFrame.Value>

                                     <Visibility>VisibleVisibility>

                                 DiscreteObjectKeyFrame.Value>

                            DiscreteObjectKeyFrame>

                            <DiscreteObjectKeyFrame KeyTime="00:00:01.300">

                                 <DiscreteObjectKeyFrame.Value>

                                     <Visibility>CollapsedVisibility>

                                 DiscreteObjectKeyFrame.Value>

                            DiscreteObjectKeyFrame>

                        ObjectAnimationUsingKeyFrames>

                         <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"

                                                        Storyboard.TargetName="CurrentContentPresentationSite"

                                                        Storyboard.TargetProperty="(UIElement.Opacity)">

                             <SplineDoubleKeyFrame KeyTime="00:00:00"

                                                   Value="0" />

                             <SplineDoubleKeyFrame KeyTime="00:00:00.300"

                                                   Value="1" />

                         DoubleAnimationUsingKeyFrames>

                         <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"

                                                        Storyboard.TargetName="CurrentContentPresentationSite"

                                                        Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)">

                             <SplineDoubleKeyFrame KeyTime="00:00:00"

                                                   Value="100" />

                            <SplineDoubleKeyFrame KeyTime="00:00:00.300"

                                                   Value="0" />

                         DoubleAnimationUsingKeyFrames>

                         <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"

                                                        Storyboard.TargetName="PreviousContentPresentationSite"

                                                        Storyboard.TargetProperty="(UIElement.Opacity)">

                             <SplineDoubleKeyFrame KeyTime="00:00:00"

                                                   Value="1" />

                             <SplineDoubleKeyFrame KeyTime="00:00:00.300"

                                                   Value="0" />

                         DoubleAnimationUsingKeyFrames>

                        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"

                                                       Storyboard.TargetName="PreviousContentPresentationSite"

                                                       Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)">

                             <SplineDoubleKeyFrame KeyTime="00:00:00"

                                                   Value="0" />

                             <SplineDoubleKeyFrame KeyTime="00:00:00.300"

                                                   Value="-100" />

                        DoubleAnimationUsingKeyFrames>

                    Storyboard>

                VisualState>

            VisualStateGroup>

        VisualStateManager.VisualStateGroups>

      <Grid>

             <ContentPresenter x:Name="PreviousContentPresentationSite"

                               Content="{x:Null}"

                               ContentTemplate="{TemplateBinding ContentTemplate}"

                               HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"

                               VerticalAlignment="{TemplateBinding VerticalContentAlignment}">

                <ContentPresenter.RenderTransform>

                     <CompositeTransform />

                ContentPresenter.RenderTransform>

             ContentPresenter>

             <ContentPresenter x:Name="CurrentContentPresentationSite"

                               Content="{x:Null}"

                               ContentTemplate="{TemplateBinding ContentTemplate}"

                               HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"

                               VerticalAlignment="{TemplateBinding VerticalContentAlignment}">

                 <ContentPresenter.RenderTransform>

                    <CompositeTransform />

                 ContentPresenter.RenderTransform>

            ContentPresenter>

        Grid>

     Border>

 ControlTemplate>

Conclusion

Animations are one of the very powerful tools, provided by the Silverlight engine. And it’s great that we can use them to animate the transition between pages. This can give our web-site, so much interactivity, richness and good impressions. The good news is that is as easy as creating a custom animation and add it to Transition state of TransitioningFrame template.

Download the code

Stay tuned for more articles from this series coming up next week.

Navigation in 3D world of 2D objects

editorial@silverlightshow.net (Miroslav Miroslavov ) — Mon, 31 May 2010 11:30:00 GMT

This article is compatible with the latest version of Silverlight.

This is part 7 of the series “Silverlight in Action”.

Here we’re sharing our experience from the amazing CompletIT web site.

Introduction

It’s always complicated, when you have to deal with 3D objects. No matter what environment and framework you choose, you’ll need to learn a lot of complicated structures and procedures in order to implement even a simple scenario. But the bigger problem in Silverlight is the lack of “native” support for 3D (those helpful frameworks). There are some available frameworks out there, but they tend to be very heavy (because of the complex nature of the 3D), so when you need good performance, you’d better to do everything on your own.

That’s why in this article, we’ll create a very simple 3D framework, that will allows us to position normal 2D objects like Grids, Buttons, Borders and TextBlocks in a 3D world and also allows us to move the camera(the viewer) all over the place.

A snapshot of the 3D world

Try the navigation by yourself.

Just click and drag to move the Camera and wheel the mouse to zoom.

Implementation

We will implement a simple 3D abstraction. In order to do that, we will define a class to hold the 3 coordinates – X, Y, Z of each object, that will be placed on the 3D scene. This class will also define the Camera (the Viewer’s position) and will allow us to project each object on the screen based on the coordinates and the camera position. The actual projection will calculate the needed translation and scaling. You can read more information about the 3D projection here.

The ThreeD class

In order to make it possible to set on each element on the scene, x, y and z coordinates, lets define the corresponding attached properties. Also since the scene will support only one viewer (camera), we can define its coordinates as static double properties.

 public static readonly DependencyProperty XProperty =

     DependencyProperty.RegisterAttached("X", typeof(double), typeof(ThreeD), new PropertyMetadata(0.0));

 public static readonly DependencyProperty YProperty =

     DependencyProperty.RegisterAttached("Y", typeof(double), typeof(ThreeD), new PropertyMetadata(0.0));

 public static readonly DependencyProperty ZProperty =

     DependencyProperty.RegisterAttached("Z", typeof(double), typeof(ThreeD), new PropertyMetadata(0.0));

 public static double CameraX

 {

     get;

     set;

 }

 public static double CameraY

 {

     get;

     set;

 }

 public static double CameraZ

 {

     get;

     set;

 }

 public static double CenterScreenX

 {

     get;

     set;

 }

 public static double CenterScreenY

 {

     get;

     set;

 }

 public static double GetX(DependencyObject obj)

 {

     return (double)obj.GetValue(XProperty);

 }

 public static void SetX(DependencyObject obj, double value)

 {

     obj.SetValue(XProperty, value);

 }

 public static double GetY(DependencyObject obj)

 {

     return (double)obj.GetValue(YProperty);

 }

 public static void SetY(DependencyObject obj, double value)

 {

     obj.SetValue(YProperty, value);

 }

 public static double GetZ(DependencyObject obj)

 {

     return (double)obj.GetValue(ZProperty);

 }

 public static void SetZ(DependencyObject obj, double value)

 {

    obj.SetValue(ZProperty, value);

 }

After we can set 3D coordinates to our normal visuals, we’ll need a method to project them on the screen. In order to do that, lets first clarify the scene. The screen is with Z = 0 coordinate, so every object will have positive Z and the viewer will be able to “fly” through them. And here is the actual projection method.

 public static void Project(FrameworkElement element)

 {

     CompositeTransform transform = element.EnsureTransform();

    double x = GetX(element);

    double y = GetY(element);

    double z = GetZ(element);

    if (CameraZ <= z)

    {

         element.Visibility = Visibility.Collapsed;

    }

    else

    {

         element.Visibility = Visibility.Visible;

         double factor = CameraZ / (CameraZ - z);

         transform.TranslateX = (x - CameraX) * factor + CenterScreenX;

         transform.TranslateY = (y - CameraY) * factor + CenterScreenY;

         element.Opacity = transform.ScaleX = transform.ScaleY = Math.Abs(1 - factor);

    }

 }

Let me explain the code in a couple of words.

When the camera goes “behind” the object, we will collapse it.
Otherwise – calculate the factor of the distance between the camera to the screen and the camera to the object. After that (x – CameraX) * factor will give us the X offset. (can look at this wiki diagram to see it more clearly). And at the end we normalize the coordinates by adding the Center of screen offsets.
And the scaling is also very important for the real 3D effect. The Opacity is not obligatory, but can be added for more realistic effect.

The ThreeDPanel class

In order to make the camera live, lets create an attached behavior for a panel. This class will hold the logic of moving the camera, zooming and projecting the objects back to 2D. It’s as simple as moving the camera’s X, Y and Z coordinates responding to Mouse events.

 private static void FixZIndex(Panel panel)

 {

     int index = 0;

     foreach (UIElement child in panel.Children.OrderBy(ThreeD.GetZ))

     {

        Canvas.SetZIndex(child, ++index);

    }

 }

 private static void PanelSizeChanged(object sender, SizeChangedEventArgs e)

 {

     var panel = (Panel) sender;

     ThreeD.CameraX = ThreeD.CenterScreenX = e.NewSize.Width/2;

     ThreeD.CameraY = ThreeD.CenterScreenY = e.NewSize.Height/2;

     FixZIndex(panel);

     ProjectChildren(panel);

 }

 private static void PanelMouseMove(object sender, MouseEventArgs e)

 {

     var panel = (Panel) sender;

     if (isDragging)

     {

         Point currentPoint = e.GetPosition(panel);

         Move(panel, currentPoint);

     }

 }

 private static void PanelMouseLeftButtonUp(object sender, MouseButtonEventArgs e)

 {

     var panel = (Panel) sender;

     isDragging = false;

     panel.ReleaseMouseCapture();

 }

 private static void PanelMouseWheel(object sender, MouseWheelEventArgs e)

 {

     var panel = (Panel) sender;

     Point zoomCenter = e.GetPosition(panel);

     Zoom(panel, zoomCenter, Math.Sign(e.Delta)*zoomChange);

 }

 private static void PanelMouseLeftButtonDown(object sender, MouseButtonEventArgs e)

 {

     var panel = (Panel) sender;

     panel.CaptureMouse();

     isDragging = true;

     startDragPoint = e.GetPosition(panel);

 }

 private static void Move(Panel panel, Point currentPoint)

 {

     ThreeD.CameraX -= ((currentPoint.X - startDragPoint.X)/2);

     ThreeD.CameraY -= ((currentPoint.Y - startDragPoint.Y)/2);

     ProjectChildren(panel);

     startDragPoint = currentPoint;

 }

 private static void Zoom(Panel panel, Point zoomCenter, double deltaZoom)

 {

     ThreeD.CameraZ -= deltaZoom;

     ThreeD.CameraX += (zoomCenter.X - ThreeD.CameraX)*(deltaZoom/ThreeD.CameraZ);

    ThreeD.CameraY += (zoomCenter.Y - ThreeD.CameraY)*(deltaZoom/ThreeD.CameraZ);

     ProjectChildren(panel);

 }

 private static void ProjectChildren(Panel panel)

 {

     foreach (FrameworkElement element in panel.Children)

     {

         ThreeD.Project(element);

     }

 }

It’s also tricky to change the items Canvas.ZIndex property according to theirs Z coordinate (It’s done in the FixZIndex method).

The MainPage xaml

Using this simple 3D framework is as easy as setting the needed 3D coordinates and manipulating the camera. Have a look at the code and check yourself.

 "LayoutRoot"

         Background="{StaticResource background}"

         ThreeDWorld:ThreeDPanel.IsThreeDPanel="True">

    "200"

          ThreeDWorld:ThreeD.Y="100"

          ThreeDWorld:ThreeD.Z="100"

          MaxWidth="300">

        "Red" />

          "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam blandit mattis ullamcorper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas" />

     "100"

           ThreeDWorld:ThreeD.Y="250"

           ThreeDWorld:ThreeD.Z="50"

           MaxWidth="300">

          "Green" />

          "Etiam porttitor leo at turpis mattis sed convallis tortor consequat. Donec vel sodales felis. Fusce euismod mollis aliquet. Morbi nec augue ipsum, non sodales risus. Fusce at sem vel diam congue vestibulum ut a enim. Praesent eget lorem vitae purus sagittis ultricies." />

    "300"

          ThreeDWorld:ThreeD.Y="225"

          ThreeDWorld:ThreeD.Z="150"

          MaxWidth="300">

          "Blue" />

          "Suspendisse sit amet nunc hendrerit enim iaculis bibendum. Sed ut metus nec felis congue interdum et at orci. Duis imperdiet, mi eget eleifend porta, dui lacus consequat tortor, ac euismod purus ipsum id purus. Sed sollicitudin elementum ultrices. Vestibulum hendrerit dolor justo." />

    "400"

          ThreeDWorld:ThreeD.Y="125"

          ThreeDWorld:ThreeD.Z="125"

          MaxWidth="300">

         "Yellow" />

          "Vivamus nulla tortor, ornare et commodo nec, gravida eget justo. Nunc dignissim, nibh a posuere auctor, libero odio pretium turpis, convallis placerat sem sapien eget lectus. Curabitur nulla sapien, mollis auctor egestas vitae, tincidunt et ante." />

    "500"

          ThreeDWorld:ThreeD.Y="300"

          ThreeDWorld:ThreeD.Z="100"

          MaxWidth="300">

          "Ivory" />

          "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam blandit mattis ullamcorper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas" />

    "500"

          ThreeDWorld:ThreeD.Y="175"

          ThreeDWorld:ThreeD.Z="140"

          MaxWidth="300">

          "Gold" />

          "Suspendisse sit amet nunc hendrerit enim iaculis bibendum. Sed ut metus nec felis congue interdum et at orci. Duis imperdiet, mi eget eleifend porta, dui lacus consequat tortor, ac euismod purus ipsum id purus. Sed sollicitudin elementum ultrices. Vestibulum hendrerit dolor justo." />

Conclusion

Sometimes is better for simple scenarios to have simple solutions, as that one. It is lightweight and performs well, as well as, is doing what it’s suppose to do – abstracting the complex 3D world and give us an easy way to create more beautiful User Interface. For more complex scenarios regarding 3D in Silverlight, you can look at the Kit 3D available at codeplex.

Download the code

Stay tuned for more articles from this series coming up next week.

Book Folding effect using Pixel Shader

editorial@silverlightshow.net (Miroslav Miroslavov ) — Tue, 25 May 2010 00:00:00 GMT

This article is compatible with the latest version of Silverlight.

This is part 6 of the series “Silverlight in Action”.

Here we’re sharing our experience from the amazing CompletIT web site.

Introduction

In this article, we’ll examine one very interesting approach for creating Rich UI. It’s a program that manipulates the UI just before the actual rendering on the screen – and it’s called PixelShader. Its name says that this program is processing the Pixels (of a frame that Silverlight renders), and Shader stands for a program that calculates the rendering effect, most of the time - on the GPU.

Pixel shaders in brief:

Pixel shaders are written in HLSL (High Level Shader Language) and are usually saved in “.fx” files.
The code is compiled using DirectFX compiler into “.ps” file.
In Silverlight, the compiled effect is wired by inheriting the ShaderEffect base class.
After that you can apply this effect on UIElements, using the UIElement.Effect property.
At runtime, the effect is executed on each pixel, rendered for that Element(bitmap) and we end up with a new bitmap that is visualized on the screen.

Writing pixel shader effects is very tricky. The HLSL is not very common language and somehow it might be confusing. In order to feel more comfortable during reading this article, we recommend that you to take a look at this article – it’s about shader basics and contains stuff that you’ll need to know in order to create custom pixel shaders.

And let’s see how to create a “Book folding Pixel Shader effect” like this one:

A snapshot of folding the page content

Try the folding by yourself. Just click on the Image.

Implementation

The ExampleFolding.fx

Pixel shaders can define global input variables by using the so called registers (There is one parameter that is compulsory - sampler2D input - this is the input bitmap). In our example, we’ll need one more parameter (left) that will be the left position of the element after folding, relative to the original element position. It’ll vary from 0 to 0.5. This can also be the folding angle, but for the sake of simplicity, we’ll use left as an input parameter. At the end, when we run the actual animation on this parameter from 0 to 0.5 and back to 0, we’ll have a folding effect.

Having the left parameter, we’ll use a simple math to transform the current point passed to the main function of the shader (uv). Once we have transformed the point, we’ll get the pixel for that point from the original bitmap – the input parameter.

The transformation of the current point is done by, first, transforming the bitmap bounds to fit in the new bounds (having smaller width) and, second, by interpolating the point, considering the angle of folding.

 sampler2D input : register(s0);

 float left : register(c0);

 float4 transform(float2 uv : TEXCOORD) : COLOR

 {

     float right = 1 - left;

     float2 tuv = float2((uv.x - left) / (right - left), uv.y); // transforming the curent point (uv) according to the new boundaries.

     float tx = tuv.x;

     if (tx > 0.5)

     {

         tx = 1 - tx;

     }

     float top = left * tx;

     float bottom = 1 - top;        

     if (uv.y >= top && uv.y <= bottom)

     {

         float ty = lerp(0, 1, (tuv.y - top) / (bottom - top)); //linear interpolation between 0 and 1 considering the angle of folding. 

         return tex2D(input, float2(tuv.x, ty)); // get the pixel from the transformed x and interpolated y.

     }

     return 0;

 }

 float4 main(float2 uv : TEXCOORD) : COLOR 

 {         

     float right = 1 - left;

     if(uv.x > left && uv.x < right)

     {

         return transform(uv);

     }

     return 0;

 }

Something that might be very interesting is that during folding, we can see behind the element with the applied effect. This is due to the following code:

 float4 main(float2 uv : TEXCOORD) : COLOR 

 {         

    float right = 1 - left;

    if(uv.x > left && uv.x < right)

    {

        return transform(uv);

    }

    return 0;

 }

We’re returning 0 for all points outside the new boundaries and 0 means transparent color.

The ExampleFoldingEffect.cs

This is the class that wires the ExampleFolding.ps and the UIElements. It has two Dependency properties for the shader parameters (the input and left).

 using System;

 using System.Windows;

 using System.Windows.Media;

 using System.Windows.Media.Effects;

 namespace FoldingEffect

 {

     public class ExampleFoldingEffect : ShaderEffect

    {

         public static readonly DependencyProperty InputProperty = RegisterPixelShaderSamplerProperty("Input", typeof(ExampleFoldingEffect), 0);

         public static readonly DependencyProperty LeftProperty = DependencyProperty.Register("Left", typeof(double), typeof(ExampleFoldingEffect), new PropertyMetadata(0.0, PixelShaderConstantCallback(0)));

         public ExampleFoldingEffect()

         {

             PixelShader pixelShader = new PixelShader

                                         {

                                              UriSource =

                                                  new Uri("/FoldingEffect;component/ExampleFolding.ps", UriKind.Relative)

                                         };

             this.PixelShader = pixelShader;

             this.UpdateShaderValue(InputProperty);

             this.UpdateShaderValue(LeftProperty);

         }

         public Brush Input

         {

             get

             {

                 return ((Brush)(this.GetValue(InputProperty)));

             }

             set

             {

                  this.SetValue(InputProperty, value);

             }

         }        

         public double Left

         {

             get

             {

                 return ((double)(this.GetValue(LeftProperty)));

             }

             set

             {

                 this.SetValue(LeftProperty, value);

             }

         }

     }

 }

Applying the Effect

Applying ExampleFoldingEffect is as easy as applying any other effect (like built-in DropShadowEffect).

 <Border BorderBrush="Black"

         BorderThickness="2"

         Margin="10"

         Padding="5">

     <Image Source="Desert.jpg" />

     <Border.Effect>

         <FoldingEffect:ExampleFoldingEffect x:Name="foldingEffect" />

     Border.Effect>

 Border>

Animating the Effect

The shader itself is static if applied once. If we apply the effect for example with a value of 0.25, we’ll see the static half-folded image and that’s it. In order to accomplish the result of animated folding, we’ll have to create an animation over that effect and more precisely – over the Left dependency property. In this way, on each frame of the animation, the effect will be applied again with updated Left property, so the image will be more/less folded.

 <Storyboard x:Name="foldAnimation">

     <DoubleAnimationUsingKeyFrames Storyboard.TargetName="foldingEffect"

                                     Storyboard.TargetProperty="Left">

        <EasingDoubleKeyFrame KeyTime="00:00:00.5"

                                 EasingFunction="{StaticResource easeOut}"

                                 Value=".5" />

        <EasingDoubleKeyFrame KeyTime="00:00:01"

                                 EasingFunction="{StaticResource easeIn}"

                                 Value="0" />

     DoubleAnimationUsingKeyFrames>

 Storyboard>

Conclusion

Pixel shaders are very powerful Silverlight features that allow us to manipulate UI rendering on a pixel level. Once that you are comfortable with HLSL, you’ll be able to do amazing things with ease. There are also a lot of great examples out there on the web, built for WPF or Silverlight. You can also browse and examine some of them by using the Shazzam tool, which also gives you a very good environment for creating pixel shaders.

Download the code

Stay tuned for more articles from this series coming up next week.

Smoke effect

editorial@silverlightshow.net (Miroslav Miroslavov ) — Mon, 17 May 2010 07:52:00 GMT

This article is compatible with the latest version of Silverlight.

This is part 5 of the series “Silverlight in Action”.

Here we’re sharing our experience from the amazing CompletIT web site.

Maybe the hardest feature to implement from the entire site was the Smoking menu effect. We’ve tried out a lot of ideas and I’m going to summarize some of them:

We thought to use a video as a background, but its performance was bad. Blending the video with the background was hard to do. Randomizing the smoke to make it more realistic would be almost impossible if using a video, as well.
After that we tried to make a Path that looks close to one knot from the smoke. We copied that path for example 50-100 times, randomized these paths in some manner and animated them to move like smoke. This idea was partly close to the effect, but still far away from a real smoke effect. And also hard to scale.
One very interesting approach that we found was to create a snapshot of real smoke. And then to use PixelShader effect to create the fluid movement of the smoke. This idea could be implemented but needs a lot of work, more than basic physics knowledge and the writing of lots of code in HLSL, which wasn’t that easy. Also it was not very clear if this was going to perform good enough (knowing that the whole site is moving and flying around).
Particle system. There are already some Silverlight smoke particle system realizations out there on the web. This was maybe the most obvious way of creating a smoke effect and also somehow easy to do, but the actual result was not very satisfying and didn't look like fluid smoke.

Here is a snapshot of the real look of the smoke.

Smoke effect in Action

The Idea - Sprite Animation

We’ve decided to implement an idea that is very old and well-know in games development. A sprite animation is a predefined sequence of related images that looks like an animation/movement when changed in a fast way. In our example we change smoke frames on 20 frames per second. All image frames are around 100.

Implementation

There are a couple of different approaches to achieve sprite by using Silverlight. And one of the widespread implementations includes creating an Image control in Blend for every frame and after that creating a Key-Frame animation that hides the previous and shows the new one. Also you can create a big image that has all the frames and you can then clip this big image to show the current frame.

But we’ve implemented it in another way. We hold only one Image control and change its Source property on every frame. We’ll create a base class called ImageSequenceControl that will do most of our job. It’ll hook up the CompositionTarget.Rendering event and will change the frames accordingly.

In the constructor of this control we’ll pass a parameter - fps (frames per second). When having it we can calculate the interval between the frames.

 protected ImageSequenceControl(int frames, double fps)

     : this()

 {

    this.frames = frames;

    averageInterval = TimeSpan.TicksPerSecond / fps;

 }

And here is the CompositionTarget.Rendering handler.

 //Raised before drawing of every frame.

 private void CompositionTarget_Rendering(object sender, EventArgs e)

 {

     long now = DateTime.Now.Ticks;

     //Since we run on custom fps, we need to check if it's time to draw new frame.

     if (now - lastTick < averageInterval)

         return;

    if (AutoReverse && now < pauseStart + pauseSec)

         return;

     //We've finished the frames and may start again.

     if (frame == frames)

     {

         if (AutoReverse)

         {

             Randomise();

             pauseStart = now;

         }

         frame = startFrame;

     }

     if (AutoReverse)

     {

         //Managing the opacity to make the effect of disapearing when reaching the last frames.

         double ratio = (double)(frame - startFrame) / (frames - startFrame);

         image.Opacity = .5 - 2 * (.5 - ratio) * (.5 - ratio);

     }

     //Show the next frame.

     image.Source = images[frame - 1];

     frame += 1;

    lastTick = now;

 }

The actual Image information (url sources) is implemented in the sub-classes like SmokeControl.

 public class SmokeControl : ImageSequenceControl

 {        

    private static readonly Random random = new Random();

     public SmokeControl()

         : base(118, 10)

     {

         AutoReverse = true;

         RenderTransformOrigin = new Point(0, 1);

     }

     protected override string GetImageName(int index)

     {

         return string.Format("Smoke/Comp 1 {0:000}.png", index);

     }

     protected override void Randomise()

     {

         CompositeTransform transform = this.EnsureTransform();

         transform.Rotation = random.Next(-30, 0);

         startFrame = random.Next(1, frames / 2);

     }

 }

Download the code

Stay tuned for more articles from this series coming up next week.

Flying objects against you

editorial@silverlightshow.net (Miroslav Miroslavov ) — Wed, 12 May 2010 00:00:00 GMT

This article is compatible with the latest version of Silverlight.

This is part 4 of the series “Silverlight in Action”.

Here we’re sharing our experience from the amazing CompletIT web site.

This time we will cover how to build kind of particle system with flying “3D” objects against you. In our example the objects are thrown against you when you click to open a menu item.

Lets first see how it looks.

And double click on the surface to see ‘Flying Objects against you’ in action.

The Idea

On double click we’ll create 50 fake 3D pyramids, that will fly against the screen. The effect of throwing is implemented using Scaling to simulate like the objects are flying against you and Translation to simulate the moving of the items. And at the end we’ll animate the opacity of the objects to make them disappear.

Of course you can create more objects and make them fly – like pigs, balls or something that comes to your mind.

The pyramids are simple 3 paths with random color for one of the sides and we’ll apply some random transformations to make them look more different and realistic.

Implementation

Lets discuss more on the actual effect and not the objects like pyramids.

First of all we’ll need a Canvas on top of everything to hold the flying objects, animate them inside and at the end remove the canvas from the scene. It’s as easy as a 3 steps.

 void ElementMouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)

 {

     long now = DateTime.Now.Ticks;

     if (lastTick - now <= 200)

    {

         Point point = e.GetPosition(null);

         Canvas canvas = new Canvas();

         LayoutRoot.Children.Add(canvas);

        var spreading = SpreadingObjects.GetSpreadAnimaion(point, canvas);

         spreading.Completed += (s, e1) => LayoutRoot.Children.Remove(canvas);

         spreading.Begin();

     }

     lastTick = now;

 }

In order to spread the objects on the scene we’ll need a staring point and the parent panel to hold the objects. And here is what happens in a couple of steps.

Prepare the objects
Translate them on the starting point.
Scale them down for example to .5 of their actual sizes.
Animate their position to random X and Y in a radios of 500 around the central point.
Animate their scale for example to 3 to make them fly against us.
Animate their opacity at the near end to make them disappear.
And finally use a CubicEase to give a more realistic effect to the animations.

 public static Storyboard GetSpreadAnimaion(Point startPoint, Panel objectsCanvas)

 {

     var spreading = new Storyboard();            

     for (int i = 0; i < ObjectFactory.PyramidsCount; i++)

     {

         FrameworkElement randomObject = ObjectFactory.CreatePyramid();

        CompositeTransform transform;

         randomObject.EnsureTransform(out transform);

         transform.TranslateX = startPoint.X;

         transform.TranslateY = startPoint.Y;

        transform.ScaleX = transform.ScaleY = .5;

         objectsCanvas.Children.Add(randomObject);

         var translateXAnimation = transform.CreateTranslateXAnimation(startPoint.X + RandomHelper.Next(-Radius, Radius),Seconds);

         var translateYAnimation = transform.CreateTranslateYAnimation(startPoint.Y + RandomHelper.Next(-Radius, Radius), Seconds);

         var scaleXAnimation = transform.CreateScaleXAnimation(3, Seconds);

         var scaleYAnimation = transform.CreateScaleYAnimation(3, Seconds);

         var opacityAnimation = randomObject.CreateOpacityAnimation(0, OpacityBeginTime, Seconds - OpacityBeginTime);

         translateXAnimation.EasingFunction =

             translateYAnimation.EasingFunction =

             scaleXAnimation.EasingFunction = scaleYAnimation.EasingFunction = new CubicEase

                                                                                    {

                                                                                        EasingMode = EasingMode.EaseIn

                                                                                    };

         spreading.Children.Add(translateXAnimation);

         spreading.Children.Add(translateYAnimation);

         spreading.Children.Add(scaleXAnimation);

         spreading.Children.Add(scaleYAnimation);

         spreading.Children.Add(opacityAnimation);

     }

     spreading.Completed += (s, e1) => objectsCanvas.Children.Clear();

      return spreading;

 }

Download the code

Stay tuned for the next articles from this series coming up next week.

Flipping panels

editorial@silverlightshow.net (Miroslav Miroslavov ) — Wed, 05 May 2010 10:22:00 GMT

This article is compatible with the latest version of Silverlight.

This is part 3 of the series “Silverlight in Action”

Here we’re sharing our experience from the amazing CompletIT web site.

In this ‘”how to” session, we’ll cover one of the most interesting and hardest to implement part of the site - How to flip the menu item and simultaneously show the actual page behind. The result of the effect should be like the page text is on the back of the menu.

Lets first see how it looks.

Flipping begin

Flipping back

See it in action

Idea

The trick is in having two elements that live independent of each other – the menu and the actual page. We will flip the menu to the half, hide it at that point and animate the page from the mid point to the center of screen with normal size. So first we need to find the mid-point where we’ll change them.

Here is what happens in more detailed steps.

Find the mid-point based on the centers of the menu item and the page
Prepare the two elements
1. Show the Page by changing it’s visibility
2. Hide it with Opacity = 0 (those two steps are to prevent Layout pass when showing the page and hiding the menu – basically it shouldn’t happen layout pass thought the entire animation)
3. Position the page at the mid-point and Rotate it on Y by –90°
4. Scale it back to the size that the Menu item will have at the mid-point
Begin flipping the Menu
1. PlaneProjection.RotationY to 90°
2. Translate the Menu item to the mid-point where will interchange with the page – TranslateTransform
Hide the Menu item – Opacity = 0
Show the Page – Opacity = 1
Flip the Page from the mid point to the center of the screen
1. Scale it to 1, to make it real size
2. Translate it to it’s original position
3. Rotate it on Y to 0

To implement this algorithm we’ll create Attached behavior for FrameworkElement with two attached properties:

IsFlipping of type bool – That will enable the flipping behavior for this element.
Element of type FrameworkElement – That will give reference to the element at the back.

Implementation

 FrameworkElement back = GetElement(element);

 if (back == null)

     return;

 PlaneProjection cardProjection;

 element.EnsureProjection(out cardProjection);

 ScaleTransform cardScale;

 TranslateTransform cardTranslate;

 RotateTransform cardRotate;

 SkewTransform cardSkew;

 element.EnsureTransforms(out cardScale, out cardRotate, out cardSkew, out cardTranslate);

 ScaleTransform backScale;

 TranslateTransform backTranslate;

 RotateTransform backRotate;

 SkewTransform backSkew;

 back.EnsureTransforms(out backScale, out backRotate, out backSkew, out backTranslate);

 PlaneProjection backProjection;

 back.EnsureProjection(out backProjection);

 backProjection.RotationX = -90;

 back.Opacity = 0;

 back.Visibility = Visibility.Visible;

 root.UpdateLayout();

 //Position the two animations to meet at the mid. point.

 double w = (back.ActualWidth + element.ActualWidth) / 2;

 double h = (back.ActualHeight + element.ActualHeight) / 2;

 double scaleX = w / element.ActualWidth;

 double scaleY = h / element.ActualHeight;

 double backScaleX = w / back.ActualWidth;

 double backScaleY = h / back.ActualHeight;

 Point center = element.TransformToVisual(null).Transform(new Point(element.ActualWidth / 2, element.ActualHeight / 2));

 double x = root.ActualWidth / 2 - center.X;

 double y = root.ActualHeight / 2 - center.Y;

 backScale.ScaleX = backScaleX;

 backScale.ScaleY = backScaleY;

 backTranslate.X = -x / 2;

 backTranslate.Y = -y / 2;

 DoubleAnimation mainProjection = AnimationFactory.CreateProjectionXAnimation(cardProjection, 90, Seconds);

 DoubleAnimation scaleXAnimation = AnimationFactory.CreateScaleXAnimation(cardScale, scaleX, Seconds);

 DoubleAnimation scaleYAnimation = AnimationFactory.CreateScaleYAnimation(cardScale, scaleY, Seconds);

 DoubleAnimation translateXAnimation = AnimationFactory.CreateTranslateXAnimation(cardTranslate, cardTranslate.X + x / 2, Seconds);

 DoubleAnimation translateYAnimation = AnimationFactory.CreateTranslateYAnimation(cardTranslate, cardTranslate.Y + y / 2, Seconds);

 mainProjection.EasingFunction =

     translateXAnimation.EasingFunction =

     translateYAnimation.EasingFunction =

     scaleXAnimation.EasingFunction =

     scaleYAnimation.EasingFunction =

     new QuadraticEase

         {

             EasingMode = EasingMode.EaseIn

         };

 DoubleAnimation backProjectionAnimation = AnimationFactory.CreateProjectionXAnimation(backProjection, 0, Seconds);

 DoubleAnimation backScaleXAnimation = AnimationFactory.CreateScaleXAnimation(backScale, 1, Seconds);

 DoubleAnimation backScaleYAnimation = AnimationFactory.CreateScaleYAnimation(backScale, 1, Seconds);

 DoubleAnimation backTranslateXAnimation = AnimationFactory.CreateTranslateXAnimation(backTranslate, 0, Seconds);

 DoubleAnimation backTranslateYAnimation = AnimationFactory.CreateTranslateYAnimation(backTranslate, 0, Seconds);

 var backOpacityAnimation = new ObjectAnimationUsingKeyFrames();

 backOpacityAnimation.KeyFrames.Add(new DiscreteObjectKeyFrame

                                     {

                                         KeyTime = TimeSpan.FromSeconds(0),

                                         Value = 1

                                     });

 Storyboard.SetTarget(backOpacityAnimation, back);

 Storyboard.SetTargetProperty(backOpacityAnimation, new PropertyPath("Opacity"));

 backProjectionAnimation.BeginTime =

     backScaleXAnimation.BeginTime =

     backScaleYAnimation.BeginTime =

     backTranslateXAnimation.BeginTime =

     backTranslateYAnimation.BeginTime =

     backOpacityAnimation.BeginTime =

     TimeSpan.FromSeconds(Seconds);

 backProjectionAnimation.EasingFunction =

     backScaleXAnimation.EasingFunction =

     backScaleYAnimation.EasingFunction =

     backTranslateXAnimation.EasingFunction =

     backTranslateYAnimation.EasingFunction =

     new QuadraticEase

         {

             EasingMode = EasingMode.EaseOut

         };

 var flipping = new Storyboard();

 flipping.Children.Add(mainProjection);

 flipping.Children.Add(scaleXAnimation);

 flipping.Children.Add(scaleYAnimation);

 flipping.Children.Add(translateXAnimation);

 flipping.Children.Add(translateYAnimation);

 flipping.Children.Add(backOpacityAnimation);

 flipping.Children.Add(backProjectionAnimation);

 flipping.Children.Add(backScaleXAnimation);

 flipping.Children.Add(backScaleYAnimation);

 flipping.Children.Add(backTranslateXAnimation);

 flipping.Children.Add(backTranslateYAnimation);

 flipping.Completed += (s, e1) =>

 {

     element.Visibility = Visibility.Collapsed;

 };

 flipping.Begin();

Using the behavior is as easy as declaring two visuals, for example Grids, and wire them up – one to serve as front page and one as back.

How to use the behavior

 <Grid x:Name="front"

       Height="100"

      Width="100"

       FlippingCard:DraggingBehavior.IsDraggable="True"

       FlippingCard:FlippingBehavior.IsFlipping="True"

       FlippingCard:FlippingBehavior.Element="{Binding ElementName=back}">

     <ContentControl Style="{StaticResource faceControl}"

                    Background="Yellow" />

 Grid>

 <Grid Margin="10"

       x:Name="back"

       Background="PowderBlue"

       MouseLeftButtonUp="BackMouseLeftButtonUp">

     <StackPanel HorizontalAlignment="Center"

                 VerticalAlignment="Center">

         <TextBlock Text="Back Page"

                    FontSize="48" />

         <TextBlock Text="Click to go back"

                    Foreground="Gray"

                    FontSize="18" />

     StackPanel>

     <Grid.Effect>

         <DropShadowEffect BlurRadius="5"

                           Color="Red"

                           ShadowDepth="0"

                           Opacity=".7" />

     Grid.Effect>

 Grid>

Download Source Code.

Stay tuned for the next articles from this series coming up next week.

Floating Visual Elements

editorial@silverlightshow.net (Miroslav Miroslavov ) — Tue, 04 May 2010 03:23:00 GMT

This article is compatible with the latest version of Silverlight.

This is part 2 of the series “Silverlight in Action”.

Here we’re sharing our experience from the amazing CompletIT web site.

As you may already know, every Silverlight application “must” have some objects floating around in a quite 3D manner. For example, let’s make a panel with happy faces floating around the screen in a controlled way, like this one.

See how it looks

Floating in Action

Idea

The idea is to create an attached behavior for a panel, so that when enabled, through attached property it’ll make all panel’s children float around. To make this effect we will use PlaneProjection and TranslateTransform. We’ll create Storyboard that will animate these properties, to random values (but in controlled manner with a threshold) and when it completes – the animation will begin again with changed “To” by random. This way we’ll create random continuous floating of the visual objects.

Implementation

We need a class that holds the attached property. Let’s name it FloatingService. It has one attached property, for instance IsChildrenFloating of type boolean to trigger the behavior and two more properties to handle the Maximum allowed values for the PlaneProjection and TranslateTransform. So when IsChildrenFloating is attached to the panel with value of true, all its children will start floating.

This is how we control the animation in the FloatingService class.

 var panel = sender as Panel;

 if (panel != null)

 {

     var projectionMax = GetProjectionMax(panel);

     var translateMax = GetTranslateMax(panel);

     foreach (UIElement child in panel.Children)

     {

         var storyboard = new Storyboard();

         PlaneProjection planeProjection;

         child.EnsureProjection(out planeProjection);

         DoubleAnimation projectionX = AnimationFactory.CreateProjectionXAnimation(planeProjection, random.Next(-projectionMax, projectionMax), seconds);

         DoubleAnimation projectionY = AnimationFactory.CreateProjectionYAnimation(planeProjection, random.Next(-projectionMax, projectionMax), seconds);

         DoubleAnimation projectionZ = AnimationFactory.CreateProjectionZAnimation(planeProjection, random.Next(-projectionMax, projectionMax), seconds);

         storyboard.Children.Add(projectionX);

         storyboard.Children.Add(projectionY);

         storyboard.Children.Add(projectionZ);

         ScaleTransform scale;

         TranslateTransform translate;

         RotateTransform rotate;

         SkewTransform skew;

         child.EnsureTransforms(out scale, out rotate, out skew, out translate);

         DoubleAnimation translateX = AnimationFactory.CreateTranslateXAnimation(translate, random.Next(-translateMax, translateMax), seconds);

         DoubleAnimation translateY = AnimationFactory.CreateTranslateYAnimation(translate, random.Next(-translateMax, translateMax), seconds);

         storyboard.Children.Add(translateX);

         storyboard.Children.Add(translateY);

         storyboard.Completed += (s, e1) =>

                                     {

                                         projectionX.To = random.Next(-projectionMax, projectionMax);

                                         projectionY.To = random.Next(-projectionMax, projectionMax);

                                         projectionZ.To = random.Next(-projectionMax, projectionMax);

                                         translateX.To = random.Next(-translateMax, translateMax);

                                         translateY.To = random.Next(-translateMax, translateMax);

                                         storyboard.Begin();

                                     };

         storyboard.Begin();

     }

 }

So we create Storyboard from code, to hold the 5 animations – for rotating X,Y,Z and translating X,Y. And when the Storyboard finishes we choose new random values for end of the animations and start it again.

And now we only need to use the attached behavior to begin the floating of visuals.

How to use the behavior

 <StackPanel FloatingObjects:FloatingService.IsChildrenFloating="True"

             FloatingObjects:FloatingService.TranslateMax="10"

             FloatingObjects:FloatingService.ProjectionMax="25"

             Orientation="Horizontal"

             VerticalAlignment="Center">

     <StackPanel.Resources>

         <Style TargetType="ContentControl"

                x:Key="faceControl">

            <Setter Property="Height"

                     Value="75" />

            <Setter Property="Width"

                     Value="75" />

            <Setter Property="Margin"

                     Value="10" />

            <Setter Property="Effect">

                <Setter.Value>

                     <DropShadowEffect BlurRadius="5"

                                       Color="Black"

                                       Opacity=".7" />

                 Setter.Value>

             Setter>

            <Setter Property="Template">

                 <Setter.Value>

                     <ControlTemplate>

                         <Grid>

                             <Rectangle Fill="{TemplateBinding Background}" />

                             <Ellipse Height="10"

                                      Width="10"

                                      Fill="Blue"

                                      Margin="20 20 0 0"

                                      HorizontalAlignment="Left"

                                      VerticalAlignment="Top" />

                             <Ellipse Height="10"

                                      Fill="Blue"

                                      Width="10"

                                      Margin="0 20 20 0"

                                      HorizontalAlignment="Right"

                                      VerticalAlignment="Top" />

                             <Path Data="M0,0 A 10, 10 0 0 0 25, 0"

                                   Stroke="#FFFA0D0D"

                                   HorizontalAlignment="Center"

                                   VerticalAlignment="Bottom"

                                   Margin="0 0 0 10"

                                   StrokeThickness="2" />

                         Grid>

                     ControlTemplate>

                 Setter.Value>

             Setter>

         Style>

     StackPanel.Resources>

     <ContentControl Style="{StaticResource faceControl}"

                     Background="Yellow" />

     <ContentControl Style="{StaticResource faceControl}"

                     Background="Silver" />

     <ContentControl Style="{StaticResource faceControl}"

                     Background="Cyan" />

     <ContentControl Style="{StaticResource faceControl}"

                     Background="Green" />

     <ContentControl Style="{StaticResource faceControl}"

                     Background="Brown" />

 StackPanel>

Download the code

Stay tuned for the next articles from this series coming up next week.

Visuals staring at the mouse cursor

editorial@silverlightshow.net (Miroslav Miroslavov ) — Thu, 22 Apr 2010 11:28:00 GMT

This article is compatible with the latest version of Silverlight.

This is part 1 of the series "Silverlight in Action".

Here we’re sharing our experience from the amazing CompletIT web site.

Let's suppose we want our visual objects to "watch" and "follow with eyes" the mouse cursor while it moves around. The idea is simply to define our visuals to be somehow on a different Z coordinate than the actual screen is. This way while moving the cursor around, the visual objects will look and follow the mouse. We'll use a simple PlaneProjection to achieve this.

This is very important part of the actual “look and feel” of the web site. The main menu items are following the mouse while moving the cursor around.

See how it looks

Following in action

Implementation

The idea is to create an attached behavior for a panel, so all its children will stare at the mouse. We need two attached properties of the behaviour:

IsChildrenFollowingMouse - just to enable the behavior for that panel.
ItemsZ - the Z coordinate of the Items. This means how far the items are from the screen.

We need to handle the MouseMove event, so we can rotate our visuals in such a way, that they will look like are following the mouse.

Here is the actual magic

 private static void panel_MouseMove(object sender, MouseEventArgs e) 

 { 

     var panel = sender as Panel; 

     if (panel != null) 

     { 

        var point = e.GetPosition(panel); 

         var z = GetItemsZ(panel); 

         foreach (FrameworkElement item in panel.Children) 

         { 

             var center = item.TransformToVisual(panel).Transform(new Point(item.ActualWidth / 2, item.ActualHeight / 2)); 

             //Vector from current point to 3D center of the item. 

             double len = Math.Sqrt(Math.Pow(center.X - point.X, 2) + Math.Pow(center.Y - point.Y, 2) + z * z); 

             double cosOy = (center.Y - point.Y) / len; 

             double cosOx = (center.X - point.X) / len; 

             PlaneProjection projection; 

             EnsureProjection(item, out projection); 

             projection.RotationX = Math.Acos(cosOy) * (180 / Math.PI) - 90; 

             projection.RotationY = 90 - Math.Acos(cosOx) * (180 / Math.PI); 

         } 

     } 

 }

What we actually do is just a simple math. We calculate the angles between the line (from the cursor to the center of the item) and the Ox and Oy axes of the item’s surface (the item's actually with different z-coordinate from the screen). Having the angles, we can calculate the needed RotationX and RotationY properties. You can see the drawing over the screenshot for reference.

So let's see how we use the newly created Attached properties, to force our panel's children to track the mouse.

How to use the behavior

 <Grid x:Name="LayoutRoot"> 

     <Grid.Resources> 

         <Style TargetType="StackPanel" 

                x:Key="st"> 

            <Setter Property="FollowingMouse:FollowingService.IsChildrenFollowingMouse" 

                    Value="True" /> 

             <Setter Property="FollowingMouse:FollowingService.ItemsZ" 

                     Value="200" /> 

         Style> 

     Grid.Resources> 

     <StackPanel Orientation="Horizontal" Style="{StaticResource st}"> 

         <StackPanel.Resources> 

             <Style TargetType="ContentControl" 

                    x:Key="faceControl"> 

                 <Setter Property="Height" 

                         Value="75" /> 

                 <Setter Property="Width" 

                         Value="75" /> 

                 <Setter Property="Margin" 

                         Value="10" /> 

                 <Setter Property="Template"> 

                     <Setter.Value> 

                         <ControlTemplate> 

                             <Grid> 

                                 <Ellipse Fill="{TemplateBinding Background}" /> 

                                 <Ellipse Height="10" 

                                          Width="10" 

                                          Fill="Blue" 

                                          Margin="20 20 0 0" 

                                          HorizontalAlignment="Left" 

                                          VerticalAlignment="Top" /> 

                                 <Ellipse Height="10" 

                                          Fill="Blue" 

                                          Width="10" 

                                          Margin="0 20 20 0" 

                                          HorizontalAlignment="Right" 

                                          VerticalAlignment="Top" /> 

                                 <Path Data="M0,0 A 10, 10 0 0 0 25, 0" 

                                       Stroke="#FFFA0D0D" 

                                       HorizontalAlignment="Center" 

                                       VerticalAlignment="Bottom" 

                                       Margin="0 0 0 10" 

                                       StrokeThickness="2" /> 

                             Grid> 

                         ControlTemplate> 

                     Setter.Value> 

                 Setter> 

             Style> 

         StackPanel.Resources> 

         <ContentControl Style="{StaticResource faceControl}" 

                         Background="Yellow" /> 

         <ContentControl Style="{StaticResource faceControl}" 

                         Background="Silver" /> 

         <ContentControl Style="{StaticResource faceControl}" 

                         Background="Cyan" /> 

         <ContentControl Style="{StaticResource faceControl}" 

                         Background="Green" /> 

         <ContentControl Style="{StaticResource faceControl}" 

                         Background="Brown" /> 

     StackPanel> 

 Grid>

Download the code.

Stay tuned for the next articles from this series coming up next week

Completit.com - the challenges behind building a corporate website in Silverlight

editorial@silverlightshow.net (Svetla Stoycheva ) — Fri, 16 Apr 2010 01:55:00 GMT

CompletIT – the company behind SilverlightShow – has recently launched its new corporate website, done entirely in Silverlight. In this case study, CompletIT CTO Emil Stoychev and Development Lead Miroslav Miroslavov reveal the challenges faced during the management and development of this Silverlight project.

Company Profile

Company name: CompletIT
Website: http://www.completit.com/
Industry: Software Development, Consultations, Trainings
Brief intro to company: CompletIT is a privately owned company specialized in Silverlight software development, Silverlight training and consulting services. Founded in 2006, the company has successfully delivered more than 30 customer projects, ranging from small business applications to large enterprise solutions. CompletIT was selected as Microsoft Featured Silverlight Partner for March 2010, and is a Microsoft Certified Gold Partner.

Project Overview

Project goals and key functionalities

The main goal of the project was to show what CompletIT can do with Silverlight without saying a word. We wanted to demonstrate to our website visitors (who are our current or potential customers) what can be achieved with Silverlight, what a powerful technology it is, what level of interactivity may be achieved with it, how the user experience may be improved by using Silverlight. Among the key functionalities in the project are flying 3D objects, interactive navigation with some object flying in the clouds, animated page flipping, animated 360˚ navigation flip, 3D world in which you can move.

Project limitations - technologies to be used, time, resources, etc.

We are focused on Silverlight so that technology was a must. It was hard to estimate the project duration as the application was too futuristic and nothing like what we've been working on before. We decided on a fairly optimistic timeframe for completion of the project, and only because of the commitment and experience of the whole team we managed to meet it.

Silverlight features used in this project

Animations:
- Build-in animations API based on Storyboards
- Custom animations based on CompositionTarget.Rendering
- Custom animations based on DispatcherTimer
- Sprite animations
WriteableBitmap API for performance optimizations
3D Projection API
Render Transforms API
- ScaleTransform
- TranslateTransform
- RotateTransform
- SkewTransform
Math formulas
Mouse events API
Custom controls and templates
WCF - Silverlight enabled services
Third-party Silverlight control

Other technologies used

WCF services, Sitefinity CMS

Project snapshots - before / after

Problems Faced and Solutions

One of the hardest problems was "How to make smoke effect?"
We've tried a lot of ideas and read almost everything on the net about "how to simulate smoke", but all of them had problems and they weren't exactly what we needed. But finally we came up with the solution on our own. We've created a Sprite-like animation with preset frames, some custom control logic and finally - we had a great smoking main menu!

Another huge problem was "How to make the whole application deep-linkable, navigateable and fully integrated with browsers?"
We needed to be integrated with the browser, but also the pages had to navigate to each other using animation. We thought about using TransitioningContentControl from the Silverlight Toolkit, but instead of control we needed to transition between pages. And that's how we came up with solution. Now we have nice transitions and animations while navigating back and forward.

The whole look and feel of the site is amazing. But how can all of this work in the browser, and perform well enough?
Performance was the hardest thing to deal with. We read a lot of blogs and articles, watched a lot of videos from the biggest conferences. Finally, we summarized all performance tips and tricks and implemented most of them. We also created some custom animation logic to achieve better performance. We ended up with a very well-performing website (considering all these nice animations).
Of course all the features like 3D world and the animations in it, flying and floating things were also interesting problems. But with the very powerful Silverlight APIs, we've been able to implement them with ease.

Conclusions

We think we managed to achieve the initial goals of the project, because we received a lot of positive feedback, a lot of compliments for our work. There aren't many Silverlight based application on the web that incorporate so many animations and interactivity. The final performance that we achieved is more than pleasant - we got around 30% CPU usage which talks both for the platform and for the quality of our applications. For comparison, most of the DeepZoom based applications use more than 70% of CPU.

People like interactivity, animations, weird design ideas and we think Silverlight is more than appropriate to build that kind of stuff. For future projects we would definitely bet on great user experience and interactivity.

SilverlightShow: Silverlight Community

Pencho Popadiyn on N-puzzle WP7 application

Don't miss...

360 Degrees Feedback by Kevin Dockx

Andrej Tozon on Hey weigh! WP7 application

Don't miss...

Tim Greenfield on PuzzleTouch WP7 Application

Don't miss...

Laurent Duveau on Morse Code Flash Light WP7 Application

Don't miss...

Johan Dahlbäck on Marathon WP7 Application

Don't miss...

Dimaz Pramudya on Fuel My Car WP7 Application

Don't miss...

Paul Juenger on WHS Phone WP7 Application

Don't miss...

René Schulte on Pictures Lab WP7 Application

More on this topic..

Garry McGlennon on ezyTip WP7 application

More on this topic..

Gergely Orosz on Cocktail Flow WP7 application

More on this topic..

Case Study: SilverlightShow Showcase

Project Overview

Problem and Solution Insight

Conclusion

Animated navigation between Pages

Introduction

Try a simple transition between The ThreeDWorld page and The Book Folding Effect

Just click on the hyperlinks or navigate back / forward.

Implementation

The TransitioningFrame class

The TransitioningFrame ControlTemplate

Conclusion

Navigation in 3D world of 2D objects

Introduction

A snapshot of the 3D world

Try the navigation by yourself.

Just click and drag to move the Camera and wheel the mouse to zoom.

Implementation

The ThreeD class

The ThreeDPanel class

The MainPage xaml

Conclusion

Book Folding effect using Pixel Shader

Introduction

Pixel shaders in brief:

A snapshot of folding the page content

Try the folding by yourself. Just click on the Image.

Implementation

The ExampleFolding.fx

The ExampleFoldingEffect.cs

Applying the Effect

Animating the Effect

Conclusion

Smoke effect

Here is a snapshot of the real look of the smoke.

Smoke effect in Action

The Idea - Sprite Animation

Implementation

Flying objects against you

The Idea

Implementation

Flipping panels

Flipping begin

Flipping back

See it in action

Idea

Implementation

How to use the behavior

Floating Visual Elements

See how it looks

Floating in Action

Idea

Implementation

How to use the behavior

Visuals staring at the mouse cursor

See how it looks

Following in action

Implementation