Grant Hinkson Blog » Styling

New Fireworks Panel: Gradient Direction Editor

granthnk — Thu, 15 May 2008 16:56:20 +0000

Over the past several months I’ve been working on a new “BrushManager” panel for Fireworks. I’ve been creating all of the individual pieces as AS3 components, both for ease of development and maintenance reasons. The BrushManager (I’ll eventually come up with a better name) lets you quickly toggle between Solid Fill, and Linear or Radial Gradient Fill. The Gradient editing capabilities currently in my Gradient Panel will be migrated into this new panel, along with a new precision Gradient Direction Editor. I currently have a test version of the Gradient Direction Editor in a standalone Fireworks Panel, available for download below.

Take the panel for a spin and send me your feedback. It’s still a bit buggy at this point, so use at your own risk!

The video below is encoded at 1280 x 720, so be sure and watch in HD on the Vimeo site!

Fireworks Panel: Gradient Direction Editor from Grant Hinkson on Vimeo.

Download Preview Panel: Fireworks Gradient Direction Editor Panel

Podder Skinning Competition

granthnk — Sun, 27 Apr 2008 18:35:24 +0000

Calling all WPF Designers/Developers — Josh just announced the Podder Skinning Competition.

For those of you who’ve been thinking about creating your own custom skin, now you finally have some incentive to do it! Josh and I put in a lot of late nights to release Podder v2 in time for Mix ’08. That was almost two months ago, so I’m sure you’ve already had ideas for new skins that you just haven’t made time for. Well, you have until July to realize your vision – so get to it and impress us all!

Project Tangerine

granthnk — Tue, 11 Sep 2007 02:12:31 +0000

What is “Tangerine” you ask? Tangerine is a WPF “Exemplar” produced by the Infragistics User Experience Group (UxG) and Visual Design Group (VDG). An Exemplar is the term we use for a reference application. (Click the exemplar link to learn a little more about the terminology.) Instead of re-inventing the wheel here, I’m just going to paste in the description from our community site:
Tangerine v1.0 is a WPF-based asset browser application. It has a pluggable architecture so that you can provide any number of different back-end asset providers while reusing the same snazzy UI that’s based on Infragistics NetAdvantage for WPF toolset. In our first release, we have supplied an Amazon Web Services’ E-Commerce Service provider so that you can use the application to browse and search the Amazon.com catalogue. You can use the links below to both run the application (via ClickOnce deployment) now or download the solution and papers.

This application covers a huge range of techniques and technologies and is great way to increase your knowledge of WPF. We’ve used the xamCarouselListBox throughout the application in several different ways — hopefully this will inspire some additional creative uses of the control.

Using the Reflection Control in Code-Behind

granthnk — Tue, 27 Feb 2007 01:57:22 +0000

I’ve had a few people ask how to use the Reflection control in code-behind instead of purely through xaml, so I decided to post a quick�example here.�There’s not much to it, but it may not be obvious at first, so…First, create an instance of Reflector (either via XAML or procedurally). Below, I’m creating an instance named ref1. Next, set the ReflectionTarget property to the object you wish to reflect (in my case, a Rectangle named ‘rectangleToReflect’). That’s it! I have a little extra code to set the margin and alignment properties of ref1,�then I add it to my outermost Grid, ‘LayoutRoot’.��

Are you using the Reflection control in any of your projects? If so, send me a link or a screenshot and I’ll post it here.

private void Button_Click(object sender, System.Windows.RoutedEventArgs e)
�� {
�� // Create new Reflector object
�� Reflector ref1 = new Reflector();
�� // Set ReflectionTarget (the element to reflect)
�� ref1.ReflectionTarget = rectangleToReflect;
�� // Set a few layout properties
�� ref1.Margin = new Thickness(50, 50, 0, 0);
�� ref1.HorizontalAlignment = HorizontalAlignment.Left;
�� ref1.VerticalAlignment = VerticalAlignment.Top;
�� // Add reflection to LayoutRoot grid
�� LayoutRoot.Children.Add(ref1);
�� }

Download Reflection Sample Project

Fireworks Gradient Panel

granthnk — Wed, 24 Jan 2007 04:58:03 +0000

I’ve been working on a custom Gradient Panel for Fireworks off and on for a while and wanted to go ahead and get it posted. It’s not in a final state, but it’s definitely usable as is. Having worked with XAML for quite a while now, I’ve grown to expect the ability to hand-tweak the offset values of GradientStops. Now I can do the same thing in Fireworks, all from the comfort of a panel!

I’m providing two ways to edit with precision: a zooming gradient stop interface and a grid of values. The attached photos show the Gradient Panel in action.

Download Fireworks Gradient Panel Extension

WPF Reflection Control

granthnk — Sun, 14 Jan 2007 22:11:32 +0000

I was considering some of the common things that people want to do when they first start working with WPF. Creating reflections is one of those things, and while it�s not terribly difficult to do, it does become a monotonous task. And what do you do when you find yourself doing the exact same thing over and over? You create a custom control of course!

The Reflector control exists to perform one task: simulate a reflection of an object. You just bind the ReflectionTarget property (found in the Appearances category in Blend) to another control and it does all the work for you. If you want to tweak the reflection, you can always edit the ControlTemplate in Blend, but the default settings should cover most cases. I’m also looking at the height and width of the target control, so if you set the height and width of the Reflector control to Auto, it will size itself automatically (in most cases).

Lee Brimelow just posted a tutorial called Reflections in Visual Studio and Blend
at ContentPresenter.com that shows how to manually create reflections. After watching that tutorial you’ll see what I’m taking care of automatically.

download WPF Reflection Control

(Note: Add a reference to this assembly in Blend by selecting the Project tab, right-clicking the References folder and selecting Add Reference. Browse to the assembly included in the zip file. Once you’ve added the reference, click the More Controls link on the tool menu (last item — double down arrows), and select the User Controls tab. You’ll see the Reflector control listed there.)

Microsoft Expression Suite Updates + WPF/E

granthnk — Mon, 04 Dec 2006 22:12:35 +0000

Wow — lots of big updates available from Microsoft today. At the top of my list is Microsoft Expression Blend. This is the latest version of what was formerly known as Microsoft Expression Interactive Designer. Lots of “under the hood” changes have been made in this release, but the first thing that everyone will notice is the updated UI. Check out the Expression Blog�for more details�on the public beta. A new version of Expression Design is now also available for download. It has undergone the same UI treatment as Blend. It’s UI has actually been implemented using WPF, so you’ll see the same collapsible panels, styling and icons in both applications. I just fired up Design briefly, so I’ll post more thoughts once I’ve spent a little time using the tool.

In addition to the Expression releases, Microsoft has release the first CTP of “WPF/E”, which stands for Windows Presentation Foundation/Everywhere. Learn more�via Mike Swanson’s post.

NetAdvantage 2006.3 and App Styling

granthnk — Tue, 21 Nov 2006 03:56:36 +0000

NetAdvantage 2006.3 was released earlier this month with great new features for those of us in the design community. Specifically, we’ve added some really nice touches to AppStylist, mostly revolving around resources.�Resource previews are now�everywhere resources are used; resources can be selectively imported and exported from library to library, which makes reuse across ISLs much more accessible. The color dialog has been updated to support an eyedropper tool and we’ve also added a Ribbon preview canvas.

We’re already working on updates for the next release, but I’ll have to wait a while longer before I share. Really cool stuff though!

�I was recently�demoing AppStyling to existing customers who had yet to use the technology. They were amazed. They were smiling and nodding their heads in approval as I demoed skinning the live running app using AppStylist Runtime support. When you work with this stuff it’s easy to forget how cool it is.

�Check out NetAdvantage AppStylist and the AppStylist New Features page.