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

Advertisement

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

#564 – Other Places to Get Third Party Effects

May 23, 2012 Leave a comment

An effect in WPF changes the appearance of a visual element.  The .NET Framework comes with only a couple of effects, but you can find a few other third party effects on the web.

Here are some of the effects from the Pixel Shader Effects Library:

 

Filed under Graphics 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 , , , ,

#562 – Setting an Effect for an Element in Blend

May 21, 2012 3 Comments

You can set the value of the Effect property for any control deriving from UIElement.  An effect is a two-dimensional graphical effect applied to the control when it is rendered.

To apply an effect to a control in Blend, start by left-clicking on the Effects folder in the Assets panel.

The .NET Framework comes with two pre-defined effects, located in PresentationCore–BlurEffect and DropShadowEffect.  (The other effects shown above come from the Expression SDK for .NET 4).  You can drag either of these effects onto a control on the artboard, or a control listed in the Objects and Timeline panel.

Two Label controls, before adding effects:

After adding effects:

Corresponding XAML:

		<Label Content="Drop Shadow Effect" FontFamily="Cooper Black" FontSize="48"
			Margin="20,20,20,5" Foreground="#FF047800" HorizontalAlignment="Center">
			<Label.Effect>
				<DropShadowEffect/>
			</Label.Effect>
		</Label>
		<Label Content="Blur Effect" FontFamily="Cooper Black" FontSize="48"
			Margin="20,5,20,20" Foreground="#FF047800" HorizontalAlignment="Center">
			<Label.Effect>
				<BlurEffect/>
			</Label.Effect>
		</Label>

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