Martin Grayson: Adventures of a 'Devigner' : Blend

Animated Layout Panel (from the Blacklight Controls)

Martin Grayson — Fri, 20 Feb 2009 12:04:00 GMT

A video from Mike Parker, introducing the Animated Layout Panel control, found in Blacklight!

Blacklight v2.0 (Dec08) is here!

Martin Grayson — Fri, 05 Dec 2008 19:51:00 GMT

It has been a really busy November for me, however, the December release of Blacklight has arrived. This release contains tonnes of bug fixes, as well as some really cool new features.

Check out the the new showcase here.

Get the latest release code from here.

Some of the new fully customisable controls and features include...

GLASS BORDER

The glass border give a glossy effect either over the top of content or behind.

PERSPECTIVE SHADOW BORDER

The perspective shadow draws a shadow behind the border giving a feeling of perspective, as if the border is standing upright...

RADIAL SHADOW BORDER

The radial shadow border give the effect that the border and its contents are hovering off of the ground. The shadow width and vertical offset are all customisable enabling you to create a greater sense of depth.

ANIMATED LAYOUT PANEL

Mike Parker has provided his first control to the project - the AnimatedLayoutPanel. This panel allows incredible deep levels of configuration to achieve the exact effect you are looking for. This must be seen... (Thanks Mike!)

LOADING ANIMATION

The cute little control gives you something to display when buffering a video, downloading an image / deep zoom content, waiting on a web service etc. You can also set the content to be what ever you please!

Go check it out at www.codeplex.com/blacklight.

Thanks,

Martin

Real World WPF Videos: Designers and Developers working together?!

Martin Grayson — Thu, 12 Apr 2007 20:22:00 GMT

The latest installment of the Real World WPF series! This time round, Nick Page (DPE), Paul Tallet (MS Developer) and I shoot the breeze about how developers and designers work together in practice. We talk through some of our own experiences and demonstrate some techniques in VS2005 and Blend.

See it here on Channel 9.

Real World WPF Videos: BSF Showcase

Martin Grayson — Wed, 28 Feb 2007 15:20:00 GMT

Two very exciting announcements for Adventures today... the first - our Real World WPF Videos are now featured on Channel 9 - all of the links below. Secondly - the second in the series is now availble to download too.

The BSF Showcase (Building Schools for the Future) was an exciting look at enriching learning and school administration through multiple platform and device technologies. I was fortuanate enough to work on this project alongside Carrie Longson and Paul Tallett as a WPF Des/Dev. The 2 videos show a walkthrough the solution we developer, and a 'behind the scenes' look at some of the cool features we added.

Check these videos out now at...

Real World WPF Videos: BSF Showcase

Real World WPF Videos: BSF Showcase, Behind the Scenes

And you can find the first videos here...

Real World WPF Videos: Introduction to Blend (Part 1)

Real World WPF Videos: Introduction to Blend (Part 2)

Real World WPF Videos: Introduction to Blend (Part 3)

Real World WPF Videos: Introduction to Blend (Part 4)

Fish Eye for the Blend Guy

Martin Grayson — Mon, 26 Feb 2007 15:32:00 GMT

Thought I would share a panel that I and one of my dev friends, Paul Tallett created a while back. I also wanted o show you how you can use it in Blend.

A while back, we wanted to create a panel that would scale up its contents depending how close the mouse pointer was - however - we didn't want the panel to take up anymore width - tricky. This neat effect is similar to the Fish Eye effect, similar to the list of words on 10x10.org. The only difference was, we actually scale down the items furthest away from the mouse, ensuring the panel doesn't require any extra width.

Paul took this spec and created the code for the custom panel (you can read the full development article here) and then handed me a file called FishEyePanel.cs. From here, it was really easy to use in my Blend project. I have attached a .zip file to this post containing an example project and the FishEyePanel.cs file - and so, here are the steps to use a custom panel in your Blend project...

With your Blend project open, go to the Project menu at the top, and click 'Add existing item...'
Now, browse to FishEyePanel.cs, and click 'Open' (you will see in your Project tab that the panel has been added
Go back to the Project menu, and select 'Rebuild Project'
The panel is now ready to use - simply open up the Asset Library from the bottom of the tool box, click on the CustomControls tab and hey presto - you will see the FishEyePanel in there, and ready to use.
Select it and then pop one onto your UI, then put stuff in.

Thing to remember, is that the FishEyePanel is very size aware, and will always scale its contents to fit its space. There are also a couple of properties you can play with found in the Miscellenous properties panel...

AnimationMilliseconds will change the responsiveness of the panel, and magnification will change how large the items scale up by.

Please have a play with the panel, feedback, and let me know if you have created any wack custom panels - would be great to start sharing these with everyone!

Martin

Creating a Glass Button: The Complete Tutorial

Martin Grayson — Fri, 16 Feb 2007 18:33:00 GMT

Well, it was a while back that I posted the first Creating a Glass button tutorial. Of course, that was based on the old look of Sparkle, and I have had some feedback recently that the project doesn't run anymore. Also, the completed tutorial never 'made it to press' leaving people with a rather lifeless button.

Well folks - GREAT NEWS - I have finished working on a all new glass button. And what better design to follow than some of the glass buttons in our shiny new OS.

The Windows Vista taskbar has some real nice buttons - they are see through and have an internal glow. So, I though I would base my all new complete glass button tutorial on these babies. I also hope there is enough content in the tutorial to help you explore other designs and other controls.

So, attached to this post are the full instructions for creating the buttons above. I have also attached the finished project if you want to explore what I have done.

This has been a while coming, so please enjoy!

Real World WPF Videos: Introduction to Blend

Martin Grayson — Wed, 14 Feb 2007 17:22:00 GMT

Well, it has been a little time since I last posted, and since, there has been a real flurry around WPF - at last, it is shipped! As is Windows Vista and Office 2007.

I have been busy on a number of projects, my learning from which I shall be sharing in the coming weeks. I have also been working with DPE (Developer and Platform Evangelism) to create a series of real world WPF Videos. The videos are focussed on real questions our customers are asking us about WPF and the tools they will need to get into to get the most from the platform.

The first video we shot was a 4 part introduction to using Microsoft Expression Blend (formerly Interactive Designer / Sparkle). Richard Godfrey and I walk through the new look tool and show you how to build a simple, but pretty, data driven application. I have posted the four links for the four parts below, as well as attached the data we used in the sample in case you want to have a crack yourself. It is a pretty simple scenario, so you may want to put your own twist and ideas in the mix.

Enjoy!

Introduction to Blend Part 1: Introduction

Introduction to Blend Part 2: Interface Overview

Introduction to Blend Part 3: 2D Build

Introduction to Blend Part 4: 3D & Effects

Martin Grayson: Adventures of a 'Devigner' : Blend

Animated Layout Panel (from the Blacklight Controls)

Blacklight v2.0 (Dec08) is here!

Real World WPF Videos: Designers and Developers working together?!

More Video Tutorials

Real World WPF Videos: BSF Showcase

Fish Eye for the Blend Guy

Creating a Glass Button: The Complete Tutorial

Real World WPF Videos: Introduction to Blend