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

#439 – Using a DropShadow with a Border, part II

November 29, 2011 1 Comment

I described earlier how you can use two sibling Border elements to end up with the effect of a Border with a DropShadow.  We did this because specifying a DropShadowEffect for a Border will lead to all of the child elements contained in the Border getting the same drop shadow.

A cleaner way to avoid the drop shadows on the child elements is to just specify a value for the Background property of the original parent Border, so that it becomes opaque.

            <Border Margin="10" BorderBrush="DarkGray" BorderThickness="1" CornerRadius="4"
                    Background="{x:Static SystemColors.ControlLightLightBrush}">
            	<Border.Effect>
            		<DropShadowEffect/>
            	</Border.Effect>
                <StackPanel Orientation="Vertical" Margin="5" Visibility="Visible">
                    <Label Content="Rounded corners are everywhere"/>
                    <Button Content="Push Me" Padding="30,5" Margin="5" HorizontalAlignment="Center"/>
                </StackPanel>
            </Border>


You can get some nice effects by using the combination of a gradient fill for the background along with a drop shadow.

Filed under Controls Tagged with , , , , ,

#436 – Using a Drop Shadow with a Border

November 23, 2011 2 Comments

If you specify a DropShadowEffect for a Border, all elements within the border will get a drop shadow.

        <Border Margin="10" BorderBrush="Black" BorderThickness="1">
            <Border.Effect>
                <DropShadowEffect/>
            </Border.Effect>
            <StackPanel Orientation="Vertical" Margin="5">
                <Label Content="Staying within borders"/>
                <Button Content="Do It"/>
            </StackPanel>
        </Border>


If you want the drop shadow around only the Border, you can create two sibling borders–one that has the drop shadow but no content and one that has the content and no drop shadow.

        <Grid>
            <Border Margin="10" BorderBrush="Black" BorderThickness="1" Background="White">
                <Border.Effect>
                    <DropShadowEffect ShadowDepth="2"/>
                </Border.Effect>
            </Border>

            <Border Margin="10" BorderBrush="Black" BorderThickness="1">
                <StackPanel Orientation="Vertical" Margin="5">
                    <Label Content="Staying within borders"/>
                    <Button Content="Do It"/>
                </StackPanel>
            </Border>
        </Grid>

Filed under Controls Tagged with , , , ,