#573 – Workspaces in Blend

June 5, 2012 Leave a comment

When you work in Blend, you can move windows around within Blend, or move them outside of the main Blend GUI.  Blend restores the last known arrangements of windows when you start up again.  You can also save a particular arrangement of windows, so that you can later restore the same arrangement.  These saved configurations are known as workspaces.

To save your current window configuration, select Save as New Workspace, under the Window menu.  You’ll be asked to give the new workspace a name.

After creating a new workspace, you can switch between it and other workspaces by selecting a workspace under the Workspaces submenu in the Window menu.

You’ll notice that there are two preexisting workspaces: Design and Animation.  Design is the default workspace that shows up when you first start Blend.  Animation puts the Objects and Timeline window below the artboard so that storyboard timelines can be wider.

Advertisement

Filed under Blend Tagged with , , ,

#572 – You Can Move Windows Outside of the Blend GUI

June 4, 2012 1 Comment

You can easily move windows around in Blend, customizing the layout of your workspace.  You can even move a window outside of the main Blend window.  This can be especially handy if you have more than one monitor, since you can maximize the Blend GUI on one monitor and move one or more panels to the other monitor.

The image below shows a screen capture showing two monitors.  The Tools panel and the artboard are contained in the main Blend window, which is maximized to fill the rightmost monitor.  A number of other windows have been moved outside of the Blend GUI, onto the leftmost monitor.

Filed under Blend Tagged with , ,

#571 – Moving Windows Around in Blend

June 1, 2012 2 Comments

While working in Blend, there are a number of different windows (panels) that you work with.  The image below shows the default configuration, with the Tools panel on the far left, and another panel with Projects/Assets/Triggers/States tabs, etc.

You can move any of these windows around within Blend, except for the artboard (the area in the center of the screen that contains the Design and XAML views.  The artboard will take up all remaining space not used by other windows.

To move a window, left-click and drag it to the desired location.  For example, we can move the panel containing the Objects and Timeline tab, so that it sits below the panel containing the Properties tab.

You can also left-click and drag on a particular tab, to move it to another panel.  (E.g. Move Resources tab down next to Objects and Timeline).

Filed under Blend Tagged with , , ,

#569 – Setting Transforms from within Blend

May 30, 2012 Leave a comment

You can set both layout and render transforms for an UIElement from within Blend.

To configure a transform, just select the user interface element and then find the Transform area of the Properties panel.  You’ll see that you can set properties for both layout and render transforms.

You can configure a number of different transforms.

A Translation moves an element left/right or up/down.

A rotation transform rotates the element.

A scale transform scales the element.  You can change the element’s X and Y dimensions independently.

A skew transformation slants the element, relative to the X or Y dimension (or both).

You can change the centerpoint of the element, with respect to other translations that you apply.

You can also flip the control horizontally or vertically.

Filed under Blend Tagged with , , , ,

#568 – Setting Text-Related Properties in Blend

May 29, 2012 Leave a comment

You can set text-related properties for a control using the fields in the Text area of the Properties panel.

For example, you can set the font family, font style and font size for a Label control.

Or you can click on the tab with the paragraph mark to see properties relating to formatting, where we can set a TextAlignment property for centering a block of text.

 

Filed under Blend Tagged with , ,

#567 – Setting Layout Related Properties in Blend

May 28, 2012 Leave a comment

The Layout are of the Properties panel will let you set properties that are related to layout of a control.  This includes things like margins, alignment, height and width and padding.

By default, only some of the full set of layout properties are shown.

You can, however, click on the downard facing arrow icon to see more advanced properties.

Properties shown can depend on panel that the control is hosted in.  For example, a control hosted within a Grid will include Row, Column, RowSpan and ColumnSpan properties.

Filed under Blend Tagged with , ,

#566 – Setting Properties of an Effect in Blend

May 25, 2012 Leave a comment

Like other elements, you can set various properties of an effect in Blend using the Properties panel.

In the example below, we’ve added a DropShadowEffect to a Label.  If you select the effect in the XAML editor or the Objects and Timeline panel, you’ll see several properties that we can set for this effect.

For example, we can increase the ShadowDepth, so that the shadow appears further away from the Label.

Filed under Blend Tagged with , , ,

#565 – Workaround for Inability to Scroll ScrollViewer in Design Mode in Blend

May 24, 2012 1 Comment

When you’re working in Blend and have some scrollable content in a ScrollViewer, you won’t be able to see all of the content at design time because Blend doesn’t let you scroll the ScrollViewer.

This can be frustrating, since you want to see your content at design time.  In the example above, I have a series of Image controls in a vertical StackPanel, but I can only see the first couple.

The trick to working around this limitation is to put your content into a UserControl and then put that UserControl into the ScrollViewer.  You can then scroll the contents of the UserControl on the artboard.

Create a UserControl.

Move your content into the new UserControl.

Remove design-time width and height.

Go back to the window that contains your ScrollViewer.  Find the UserControl in the Assets panel and drag it into the ScrollViewer.

You can now scroll at design time.

Filed under Blend Tagged with , , ,

#563 – Additional Effects in Expression SDK

May 22, 2012 1 Comment

In addition to the two effects that come with the .NET Framework, you can get access to a number of other effects when you download and install the Expression Blend SDK for .NET 4.

Once you install the SDK, you’ll see the new effects show up in the Effects folder of the Assets panel.

The effects include:

  • Bloom – Make bright areas appear brighter
  • Color Tone – Render a visual using shades of two colors
  • Emboss – Make visual appear raised or stamped
  • Magnify – Magnify a circular area
  • Monochrome – Render using shades of a single color
  • Pixelate – Reduce resolution, rendering as large pixels
  • Ripple – Apply visual that looks like rippling liquid
  • Sharpen – Sharpen image edges
  • Swirl – Apply effect that twists entire image

 

Filed under Graphics Tagged with , , , ,

#561 – Drawing a 3D Donut Using a Radial Gradient

May 18, 2012 3 Comments

Here’s another visual effect that you can easily create in WPF and Blend, using a gradient.

Let’s say that you want to draw a ring or donut-shaped object that looks 3D.  You can start by using the Ellipse shape to draw a circle.

Next, set the Fill property of the Ellipse to use a radial gradient.  Define five gradient stops, as shown, and use the gradient tool to position them as shown.

For the hole in the middle of the donut, you can use an opacity mask.  Use a paint program to create an opaque circle that is the same size as the circle, but with a smaller transparent circle in its center.  (Trick: Run your app and screen capture what you have so far, then tweak it in a paint program).  Finally, set this image as the OpacityMask of the Ellipse.

<Ellipse.OpacityMask>
    <ImageBrush ImageSource="Images\Mask.png"/>
</Ellipse.OpacityMask>

Voila.

Filed under Graphics Tagged with , , , , , ,

← Older posts