Easing into Silverlight animation – Announcing www.easing.co

After asking a specific question about easing functions on StackOverflow.com I received a comment from user AnthonyWJones. It occurred to me that a lot of people must have the same problem. That is: How to choose an appropriate Easing Function for a given visual effect.

The range of Easing Functions is currently only 33, but most have properties to allow variations on that theme resulting in a huge number of permutations.

The idea is that we build a Silverlight application that will show working examples of each easing type and common useful settings. Further, it would allow  users of the application (i.e. you, the public) to supply keywords for any given Easing configuration. This will allow a search, based on English descriptions of the desired effect, to show appropriate sample settings and active demo.

The end result of the idea is that a few hours ago, and only 20 minutes after the idea formed,we created www.Easing.co to contain the proposed Easing project.

The site will hold a place-holder blog initially, describing the Silverlight development, but later it will house the final application.

It should be an interesting project. If you would like to contribute, contact us through this form on Easing.co.

Thanks, Dave

Default Form Button Behaviours for Silverlight

Behaviours are a great way to encapsulate useful functionality in a self-contained object. These objects can be attached to XAML elements in a Silverlight page to enable features that the elements do not themselves contain or know about.

A feature present in Win Forms and missing from Silverlight is the concept of Default Submit and Cancel Buttons. That is: a button that is clicked automatically when Enter or Escape is pressed while entering  text in TextBox controls on a form.

Type text into any of the 3 TextBox controls below and press the Enter key to “submit” the form or the Escape key to “cancel” the form. For test purposes random numbers appear under the buttons to show that the button actions have been fired (you can just press the Go or Cancel buttons directly to see this).

Install Microsoft Silverlight

The example above uses our new DefaultButtonBehavior and CancelButtonBehaviour. The features are:

  • Can be attached to single text boxes, or to entire forms.
  • Can be enabled independently of the text boxes (this property is bindable).
  • Can ignore empty text boxes (this property is bindable). This is useful for single text box user controls, like a search box.
  • Automatically presses and releases the target button, based on the Enter or Escape key press and release, to give good visual feedback.

We have released this behaviour  to the Expression Gallery. Feel free to download and try it out. Feedback and suggestions welcomed!

Stack Overflow: All quiet on the Silverlight front

We’ve been on StackOverflow.com for about 5 weeks now. One of the things we have noticed is a relative lack of traffic on the Silverlight tag/area when compared to other more common subjects like C#.

One positive result of the low traffic, is that today I was awarded a Gold “Unsung Hero” badge:
Unsung Hero!

Swells with pride… until you realise: that means at least 25% of 150 or so answers have been marked as “the answer”, but nobody has up-voted them as “useful”.

Luckily we are just there to learn and teach. The ranking system is a nice touch, but if anything seems to lead to a rush of poor answers. People compete to earn points and focus more on speed and less on good content.

Still a very worthwhile place to hang out (for computer geeks anyway) :)

Cheers, Dave

Silverlight Control Inheritance Tree

Here is another trivial app. The interesting feature is that it is hosted in a ViewBox control, so resizes to fit the Silverlight control in this page:

Install Microsoft Silverlight

Using the ViewBox as a visualroot container

The same ViewBox based Silverlight control is reused here with a 100 by 100 size:

Install Microsoft Silverlight

The ViewBox control is a very cool addition to control top level scaling of Silverlight apps.

Silverlight plugins for WordPress – practical example

This is a test of the Silverlight Plugin for WordPress by Tim Heuer. Move your mouse over the Silverlight control to start additional animation.

Install Microsoft Silverlight

Documentation was a bit light on the ground but a Google cached copy of Heuer’s blog page revealed the required parameters. The trick is to place your Silverlight component’s XAP file into the root of your blog website (it was not specified, but we figured out this by watching the http requests with the Firefox Http Headers adding).

The widget injects all the require Javascript for you. The WordPress widget marker syntax (inside square brackets) is:

silverlight: <app>, <width>, <height>, <initParams>, <minVer>

The parameters are:

  • app is the XAP filename
  • width is the display width of the Silverlight component (optional)
  • height is the display height of the Silverlight component (optional)
  • initparams maps to the initiparams of the Silverlight component (optional)
  • minVer maps to the minRuntimeVersion required for your app (optional)

Cheers, Dave

Stack Overflow… Now it’s a good thing

HiTech Magic Ltd is proud to announce it is now an active member of StackOverflow.com.

This is a great opportunity to both hone our skills solving problems as well as contributing to the code community. Come join us there and answer, or ask, a coding question or two!

Our Avatar is Rincewind the inept “Wizzard” from a game we worked on many years ago (Discworld II). He represents our search for enlightenment in a very complicated world of computing :) The artwork for Discworld II (consisting of 50,000 hand-drawn animation frames) was produced for us by Hanna Barbera’s division in the Philippines. Our very best wishes go out to [Sir] Terry Pratchett.

Cheers, Dave

Microsoft Prism 4.0 at Alpha

The long awaited Prism 4 is getting closer to a release version. As of Aug 18 Prism is now at Alpha status.

We are actively working with the Alpha version now. Among other tweaks some libraries have been renamed and/or combined to simplify the namespaces. This will mean some revisiting of your project files, to remove old library references and add the new ones, but it will be worth it in the end!

Cheers, Dave

Microsoft Prism 4.0 in pre-release

Prism is a pattern of modular development, used to produce “very large” applications. The current platforms that Prism targets are WPF and Silverlight. Prism was developed by Microsoft and is available to the development public as an open source project here.

The basic premise of Prism is one of divide and conquer. The divide is cleverly performed by using loose coupling of modules (in English that means that modules know little if anything about each other).

Prism includes a practice referred to as Unity. The Unity container is responsible for providing interfaces to modules and objects on request and acts as the central port of call that modules use to communicate with other modules.

There is a very good set of videos giving examples of Prism on the Channel 9 site here.

The latest version combines a second practice known as MEF (Managed Extensibility Framework). This is another Microsoft produced open source project. MEF uses clever techniques to identify requirements in projects, at runtime, by analysing “import” and “export” directives that exist only in the Metadata of the project. MEF is designed to allow for a plug-in style environment, like the Visual Studio IDE.

We are now using Prism and MEF on a medium to large scale project that is expected to have a lifespan of many years.

We will post updates on techniques as we progress on the project. I must say it’s good to be back on hard-core Silverlight development after a spell of APS.Net development.

Thanks, Dave

Using VSTO Excel Smart Tags With Pattern Matching (Regular Expressions)

We are currently developing an Excel Add-in to be used for hostel renting companies.

The existing system we were shown overuses one particular worksheet to contain 10 different columns of rental details, per bed, per day. That results in a very wide worksheet indeed with 1000s of columns. In order to reduce this to a simple bed per date grid of renting/availability the repeated information is extracted to additional worksheets and there will now be one date (column) per bed (row).

Removing such a large amount of needed information from the main worksheet leaves a usability problems: how to easily display and access the associated detail information in a convenient manner.

Excel supports a couple of useful features we can make use of. The first is cell comments. The second is Smart Tags.

Cell Comments

Any cell in a worksheet supports comments. Comments are simple mult-line text entries, shown when you hover over the cell and are ideal for displaying an extra layer of detail. If a comment is present a small red triangle is shown in the top right corner of the cell.

We will use the cell comments to display a copy of all the detail information for that guest booking. Although this adds a lot of duplicate data to the worksheet, it is well worth the overhead to have all the booking details available on every occupied date/bed.

While working on this part of the problem, we found that accessing the comment text string is not well document, but the easiest solution is to call cell.Comment.Text(Type.Missing, Type.Missing, Type.Missing)

Smart Tags

Smart tags are a very cool way of adding context menus that are sensitive to cell content. If a match is found a small purple triangle is shown in the bottom right corner of the cell. The context menus can then provide somewhere to place navigation to related information (e.g. using the cell value as a lookup key).

You have 2 basic choices with Smart Tags. They can have:

  • A list of keywords to match exact words in cells, or (more usefully)
  • A list of regular expressions to match against cell content

We decide to use a contrived system of placing a Guest Id in the bed/date cells of the booking sheet. The Guest Id is of the form yyyymmnnnn. It makes perfect sense to use regular expressions (like @”\d{10}” to match on any number with exactly 10 digits.

A similar contrived system for the beds to rent uses a code of the form roomname-bedletter e.g. G5-A or Flat1-D. In this instance a regular expression of @”\w[\w\d]{0,5}-\w” was used.

Assuming an include like using VSTO = Microsoft.Office.Tools.Excel at the top of the main ribbon .cs file, within the load event of our VSTO ribbon we added code like this:

VSTO.SmartTag guestTag = new VSTO.SmartTag(“http://hitechmagic.com#guest”, “Guest Id”);
guestTag.Expressions.Add(
new System.Text.RegularExpressions.Regex(@”\d{10}”));
Microsoft.Office.Tools.Excel.
Action guestDetailsAction = new Microsoft.Office.Tools.Excel.Action(“Guest details…”);
guestDetailsAction.Click +=
new VSTO.ActionClickEventHandler(guestDetailsAction_Click);
Microsoft.Office.Tools.Excel.Action bookingDetailsAction = new Microsoft.Office.Tools.Excel.Action(“Booking details…”);
bookingDetailsAction.Click +=
new VSTO.ActionClickEventHandler(bookingDetailsAction_Click);
guestTag.Actions = new Microsoft.Office.Tools.Excel.Action[] { guestDetailsAction, bookingDetailsAction };
Globals.ThisAddIn.VstoSmartTags.Add(guestTag); 

 

 

 
Basically this creates a new Smart Tag, adds a regular expression to the list of expressions, sets an array of 2 menu actions as the current actions (each with response events connected), then adds the Smart Tag to the global list of Smart Tags.

 

Results

When we run the add-in with matching values in the cells, we immediately saw little purple triangles on any cells with Guest Id numbers. When we hover over the cell, a little info icon appears beside or below the cell. Clicking the info icon produces a popup (context) menu and clicking the “Guest Details” or “Booking details” options triggers the event handlers you hooked up as expected.

All-in-all our use of Smart Tags went very smoothly and added considerable value for a few hours investigation.

Cheers, Dave

WordPress Themes