Alan Beasley (EvilBeezle)

New MEF Video Player Controls (1st Draft – Article to follow…)

arbeasley@dsl.pipex.com — Sun, 13 Jun 2010 16:55:45 GMT

Here is my first draft of producing the Video Player controls that will feature in Michael’s new article. This design is obviously open to reworks, as I’m not sure about the volume control at present. Looks like a Ventilation grill!!! It is possibly all a bit over the top, but this is excise, so some room to go a bit nuts!!!
The colour scheme is all tied to a single colour resource for easy editing, although this does presently restrict me from setting different colours for the framework & infill elements. However, when designing CONTRAST is King! if it works in one colour, it will look even better in multiple colours. But enough chat, here are some (mono-colour) 1st Draft screenshots:

This control grid is built using a simple frame structure, as shown in the image below.

I made this grid in Expression Design, by laying out a selection of Ellipses & Rectangles, grouping & aligning them as needed. The used a variety of “Path Operations” to join & trim the elements as needed. Once you have this grid you can instantly make the inner control elements, just like using a “Pastry Cutter” or “Cookie Cutter” on an ellipse, the result is shown below.

I don’t show it here, but to give the buttons a chamfer (inner & edge detail) i shrunk the individual elements shown above, & scale them to about 90% of the original. Then using them as overlays on the main/full button area.

To give the frame an extra element of design & control, I created a set of Path lines (Stroke/edge lines) to match the grid, this allows for a variable width highlight line alone the centre lines of the frame. (A little tweaking is needed to the scale, when the Stroke thickness is changed. As do the applied blur effects…

The Icons were also created in Expression Design.

Whole article coming soon!!!

I still trying out different styles for the ProgressBar, Volume & Details areas of the panels, as shown below. (A bit of a mismatch so far!!!)

I’ll get it sorted for the final version, as well as a multiple coloured version! :-)

How to Toggle (Show/Hide) using Behaviours (Behaviors) between Visual States or Storyboards in Expression Blend for Windows Phone 7

arbeasley@dsl.pipex.com — Thu, 27 May 2010 23:44:00 GMT

Thought I better quickly Blog this, as I struggled with showing & hiding a visual element on the Phone touch interface for quite a while… And couldn’t seem to find the answer anywhere on the Web. And then all of a sudden it came to me & I wished I could have kicked myself! :-) I am so dumb!!!

Basically if you have situation where you need to either show or hide a visual element, you need to know what State you are in. As you can’t attach 2 different Triggers (Behaviours) to the same element, & expect to activate/fire them in an alternating manner with the same action (i.e. a mouse click). Blend will only ever fire one & continue to fire the same one. (The closest in the Z order i presume…) And my first thought was, that i needed some code to determine what state I was in. But you don’t!

All you need to do is set up 2 dummy elements like Rectangles with a Fill set to 0% Alpha (Transparent, but HitTestVisible) & attach your 2 Behaviours to these dummy elements. You set the first behaviour to the front Rectangle, & when this trigger fires, you shrink/move the front Rectangle (as well as performing the actions you really required). This reveals the back rectangle, so it then intern, can accept a Trigger fire from a second Behaviour attached to it. During this second trigger fire you reinstate the front rectangle & your back to where you started!!! Sorted! – A toggle type behaviour with no code…

Expression Blend (Silverlight) UI Designer Tutorials

arbeasley@dsl.pipex.com — Tue, 11 May 2010 17:54:00 GMT

A growing collection of written Designer based tutorials for all UI designers in Expression Blend.

Starting with buttons! And expanding from there…

Follow this link for the series: http://openlightgroup.nethttp://www.openlightgroup.net/Articles/tabid/97/Default.aspx