Gepost door: antonidol | woensdag 9 juli 2008

Silverlight 2 beta 2 dropshadows using Blends

Lacking the DropShadow BitmapEffect that is present in Windows Presentation Foundation, we cannot use BitmapEffects to create shadows for containers. This doesn’t mean no shadows are possible in Silverlight 2. In the old days of CorelDraw 5 we used so-called Blends to create shadows in vector drawings. Blends are a feature that morphs one shape to another using several steps. In these steps new shapes are created that are in-between the starting and the resulting shape. Actually I think Expression Design does Blending. Just make sure the program can guess which vertices it can map to vertices on the resulting shape. If you don´t your shapes go haywire🙂.

Using XAML you can emulate Blends in vector drawing programs. Below is a piece of code that mimicks Blends. Note that the Margin used is always 1 to ensure a smooth gradient. Note too, that the used color is almost transparant Black. These transparent colors add up to a nice shade of gray. If you want to have a darker shadow, just make this color darker. I have not used Resources just to keep the XAML concise, but I would make editing the Shadow color easier. Actually, you can make a UserControl like a ShadowBorder that not only allows for changing the shadow color, but also the shadow direction. Anyone who makes a user friendly control like that, please let me know…

<Grid x:Name="LayoutRoot" Background="LightYellow" >
 <Grid  Width="300" Height="200">
  <Border CornerRadius="25" Margin="1" Background="#03000000">
  <Border CornerRadius="24" Margin="1" Background="#03000000">
  <Border CornerRadius="23" Margin="1" Background="#03000000">
  <Border CornerRadius="22" Margin="1" Background="#03000000">
  <Border CornerRadius="21" Margin="1" Background="#03000000">
  <Border CornerRadius="20" Margin="1" Background="#03000000">
  <Border CornerRadius="19" Margin="1" Background="#03000000">
  <Border CornerRadius="18" Margin="1" Background="#03000000">
  <Border CornerRadius="17" Margin="1" Background="#03000000">
  <Border CornerRadius="16" Margin="1" Background="#03000000">
  <Border CornerRadius="15" Margin="1" Background="#FFFFFFFF" />
  </Border></Border></Border></Border></Border>
  </Border></Border></Border></Border></Border>
  <Grid Margin="12" VerticalAlignment="Center" HorizontalAlignment="Center" >
   <TextBlock Foreground="Silver" Text="Your content here..." />
  </Grid>
 </Grid>
</Grid>

Njoy!


Responses

  1. Of course this works also when you need an OuterGlow effect. Replace the Color for a almost transparent White and off you go…

  2. Thahks!


Geef een reactie

Vul je gegevens in of klik op een icoon om in te loggen.

WordPress.com logo

Je reageert onder je WordPress.com account. Log uit / Bijwerken )

Twitter-afbeelding

Je reageert onder je Twitter account. Log uit / Bijwerken )

Facebook foto

Je reageert onder je Facebook account. Log uit / Bijwerken )

Google+ photo

Je reageert onder je Google+ account. Log uit / Bijwerken )

Verbinden met %s

Categorieën

%d bloggers op de volgende wijze: