Sunday, November 18, 2012

Creating Compound Paths with Expression Blend

There may be a time when you need to create an effect where you are looking THROUGH an item, and lining up artwork to make it look that way is difficult and unpredictable. My favorite technique to take care of this is using compound paths in order to see what is behind an item.

The following screens show an extremely basic example of how to create a usable compound path shape.

1. Draw a basic ellipse

2. Draw another ellipse on top, this one is smaller to create a thick border effect.

3. To see how the shape is now "see through" I put a yellow rectangle in the background

 4. Select both ellipses, and then go to the top menu "Object" > "Path" > "Make Compound Path"

5. This is the result, you will now see the yellow rectangle through the circle.

I also used this technique to create text where each letter can have a different gradient color or a separate blend angle. 

1. I created the text box, and then converted the text to paths. With the TextBlock or TextBox selected go to "Object" > "Path" > "Convert To Paths"

After this, the text has been converted to different path sections, however they are still a compound path (the text is a compound path to begin with so the letters look right) and need to have the compound paths "released".  

"Object" > "Path" > "Release Compound Path"

Now the text will become solid shapes, you won't see the inside of the "P" nor the inside shape of the "A"

Select both paths that make up the "P" and make those into a compound path, then select the paths that make up the "A". Doing this with all the paths selected, they will be connected and you will not be able to give them each a separate fill.

This is a lot easier than trying to draw any text or number shape to be used in a design or control.

The screenshots below show a border with a compound path and how it displays the color(s) behind it. Now, I can simply change the color of either the background or of the blue ellipse in a control, instead of changing an entire group (the border, background and the ellipse). 

This is  the "animation" using the example. When you mouseover the button, the only change is the opacity of the element in the background. The blue one is visible when normal, but opacity is zero when mouseover with the red one now having an opacity of 85%.

Link to example 
NOTE: The design work is done in the file "CompoundPath.xaml" - but the button style is defined in a resource dictionary where I copied the design over and then added the animations using the button's existing template. It is included in the downloadable file for reference. 

I have uploaded the project here. I'm going to continue to update this as I create new examples and test out new ways to design using Blend and making it easier for me to create layouts even faster. :)

Tuesday, November 13, 2012

Error while rendering XAML in the designer view

Error message in Visual Studio 2010

Error message shown in Blend (Note: The window in Blend is much shorter, I spliced together two screenshots to show the full error message)

Fixed the error by going through the page (or control) and deleting all of the "d:LayoutOverride" commands that were inserted while designing in Blend.

Not sure why this worked, even had the mc:Ignorable="d" in the header, but it worked.

Monday, November 12, 2012

Problem ChildWindow

Today graced me with this new (ok, kind of new - the verbiage is always the same but never does mean the same depending on how you hold your head or cross your eyes) error:

throw new
Error("Unhandled Error in Silverlight Application Cannot resolve TargetName contentPresenter.  
at MS.Internal.XcpImports.VisualStateManager_GoToState(Control reference, String StateName, Boolean useTransitions, Boolean& refreshInheritanceContext)\n  
at System.Windows.VisualStateManager.GoToState(Control control, String stateName, Boolean useTransitions)\n  
at System.Windows.Controls.Primitives.ToggleButton.ChangeVisualState(Boolean useTransitions)\n  
at System.Windows.Controls.Primitives.ButtonBase.UpdateStateFlags(Boolean disable)\n  
at System.Windows.Controls.Primitives.ButtonBase.OnIsEnabledChanged(IsEnabledChangedEventArgs e)\n  
at System.Windows.Controls.Control.OnIsEnabledChanged(Control control, EventArgs args)\n  
at MS.Internal.JoltHelper.FireEvent(IntPtr unmanagedObj, IntPtr unmanagedObjArgs, Int32 argsTypeIndex, Int32 actualArgsTypeIndex, String eventName, UInt32 flags)");

Turns out, it wasn't throwing an error based on the button being used to fire the event/open the window nor was it the window itself. It was another control on the page that had a "contentPresenter" that didn't even communicate with the window itself.

It seems that the child window (modal since it is Silverlight) sent all of the controls that were active on the page into the disabled state - and ONE of them had the issue with not being able to find "contentPresenter". So, it was the one user control... all the way over to the right and not talking to the child window that was being the problem child after all.