#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 , , ,

#570 – Use Blend to Search for Properties

May 31, 2012 Leave a comment

Blend makes all properties of a user interface element available for editing via the Properties panel.  The properties panel is laid out in a way that makes finding a particular property fairly easy.  But if you’re having trouble finding a property and you know a portion of the property’s name, you can use the search box to search for the property.

In the example below, we select a Label control and then enter “align” into the search box.  We then see all of the properties that apply to a Label and have “align” as part of the property’s name.

Filed under Blend

#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 , , ,

#559 – Drawing a Masked Gradient in Blend

May 16, 2012 Leave a comment

You can use an opacity mask with simple shapes along with a gradient to get a style that looks like a gradient applied to a paper cutout.  For example, you might want the following cloud-like effect.

To do this, start with a Rectangle and use a linear gradient for its Fill property.

    	<Rectangle Height="400" Stroke="Black" Width="600">
    	    <Rectangle.Fill>
    	        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
    		    <GradientStop Color="#FFFBFBFB" Offset="0.504"/>
    		    <GradientStop Color="#FFD6E1EA" Offset="0.734"/>
    		    <GradientStop Color="#FF6EB5F5" Offset="1"/>
    		</LinearGradientBrush>
 	    </Rectangle.Fill>
        </Rectangle>

Now create an image with the shape of the clouds, using an opaque foreground (black in this example) and a transparent background (shown as checkerboard here).

Finally, use the new clouds image as an ImageBrush for the OpacityMask of the Rectangle.

<Rectangle Height="400" Stroke="Black" Width="600">
    <Rectangle.Fill>
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FFFBFBFB" Offset="0.504"/>
            <GradientStop Color="#FF6EB5F5" Offset="1"/>
            <GradientStop Color="#FFD6E1EA" Offset="0.734"/>
        </LinearGradientBrush>
    </Rectangle.Fill>
    <Rectangle.OpacityMask>
        <ImageBrush ImageSource="Images\CloudsMask.png"/>
    </Rectangle.OpacityMask>
</Rectangle>

Filed under Blend Tagged with , ,

← Older posts