Feeds:
Posts
Comments

Archive for the ‘Blend’ Category

A couple years ago I wrote a post regarding the WPF VisualBrush. As part of that post I discussed the TileBrush.

TileBrush is abstract and defines a number of useful properties for creating a repeating pattern.  For example you could set the source of the ImageBrush to a picture of a flower, then set properties to repeat the picture in five columns and three rows.

Expression Blend and TileBrush

Now that more developers and designers are adopting  Expression Blend it seems like a good idea to learn how Blend handles Tile brushes.  For this example I am using an ImageBrush but the similar techniques apply to the DrawingBrush and VisualBrush.

Add an Image to a Blend Project

The first step is to add an image to a Blend project.  Right-click the project in Project tab and choose "Add Existing Item".  Find an appropriate image and return to the Blend UI.

image

Insert an Image

Right-click the image in the project tab and choose "Insert".  This will add the image to the ArtBoard.

image

image

Convert to Brush Resource

Press the ‘V’ key to activate the Selection tool and click the image in the ArtBoard. Choose the "Make ImageBrush Resource" menu item as shown below.

image

Provide a key (Name) for the ImageBrush resource.

image

Using the Brush Transform Tool

Delete the existing Image from the ArtBoard.   Add another element to the ArtBoard, for this example I am using an Ellipse. 

image

Select the Ellipse with the Selection tool (press the ‘V’ key then click the Ellipse).  Select the Properties tab and then choose the Brush Resource.

 

 image

The ellipse is filled with the ImageBrush.

image

Transform the ImageBrush

Now it finally time to add columns and rows to the ImageBrush.  The Brush Transform tool (press the ‘G’ key) is the tool you are looking for.

image

 

image

image

Finally choose the TileBrush button in the Properties window and then choose a TileMode value.

image

You can continue to manipulate the tile in the Artboard. Resizing the Tile smaller adds more columns and row to the result.  Dragging the tile in the ArtBoard changes the top/left position of the tile.  Lastly you can skew and rotate the tile with the Brush Transform tool

image

image

Read Full Post »

 

There never seems to be enough screen space when working with Expression Blend or Visual Studio.   Sometimes in Blend the Artboard gets a little off center and you need to move it to see what you are working on.

In this screen shot the right edge of the button and window are not visible.

image

Scrollbars are so ’90’s

Are you tempted to grab the bottom scroll bar and move the artboard back into the center?

Before you do I’d like to point out another option.

Blend also has ‘the Hand”.

image

Click the Hand (or press the H key) and you can mouse drag anywhere on the artboard.

Now here is the tip.

You don’t have to actually have to select the hand in the toolbar or with the H key.  The secret is to hold down the Spacebar and mouse drag.  The benefit to this approach is that the Hand is only toggled on as long as you hold the spacebar.  Once you release the spacebar Blend returns to the previously selected tool.

Read Full Post »

One of my first disappointments when I started using Expression Blend was to find that it didn’t support the add-in model.  Tools like Adobe Photoshop have a plug-in model.  Visual Studio has a long history of supporting the extensible model via add-ins.  It seemed surprising to me that the Blend team hadn’t implemented a similar model.

Visual Studio Add-ins

It is hard to imagine working in Visual Studio without using add-ins.  CodeRush, from DevExpress, is a perennial favorite of mine. 

For the WPF developer there are two add-ins you really should add to your list.

Mole for Visual Studio, a fantastic debugger visualizer.

XAML Power Toys, generates LOB classes, datagrids and ListViews

The Hack

Josh Holmes has a great article telling how to hack Expression Blend to support add-ins.

Expression Blend, believe or not, has an add-in model. It’s highly unsupported but it exists. The unsupported nature of it means that you have to do a little Red Green style patching to get them to run in the first place and if they cause instability, don’t call Microsoft support. However, there are a couple of really cool ones that are out there.

Josh explains how to add three interesting add-ins to Blend.  It is hard to pick my favorite from the his list so I’ll only show you one.

Colorful Expression

image

Read Full Post »

image

Once you have a brush painted into a region you can use the Brush Transform tool (B) to visually alter the angle and other transform settings.  Simply grab the head, tail or body of the brush transform arrow and move to see the gradient change.  Rotating is easy too.  Move the mouse near the head/tail of the arrow, when you see the rotation icon appear hold the mouse button down and spin the arrow.

image

Hold the Shift key down while spinning and the rotation angle is constrained to 15 degree increments.

Read Full Post »

For as quick way to hide all toolbars; press Tab or F4.  Use the same key to show the toolbars again.

Read Full Post »

You probably know that you can scroll the Blend Artboard (work area) vertically by rolling the mouse wheel up and down.   In fact that shortcut works for most Windows applications.

Did you know that you scroll horizontally by holding down the Shift-key while scrolling the mouse wheel?

Read Full Post »

To quickly zoom in or out of the Expression Blend artboard (work window).

Hold the Ctrl-Key and scroll the mouse wheel.

Read Full Post »

Older Posts »