Archive for the ‘Styling’ Category

Pages (2): 1 2 »

New Fireworks Panel: Gradient Direction Editor

Author: granthnk
Filed under: Fireworks, General, Styling

Thursday
May 15,2008

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

6 Comments

Podder Skinning Competition

Author: granthnk
Filed under: .NET, Skinning, Styling, WPF, XAML

Sunday
Apr 27,2008

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!

0 Comments

Project Tangerine

Author: granthnk
Filed under: .NET, General, Styling, WPF, XAML

Monday
Sep 10,2007

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.

0 Comments

Using the Reflection Control in Code-Behind

Author: granthnk
Filed under: .NET, General, Styling, WPF, XAML

Monday
Feb 26,2007

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

0 Comments

Fireworks Gradient Panel

Author: granthnk
Filed under: Fireworks, General, Styling

Tuesday
Jan 23,2007

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.