Sharker Khaleed Mahmud Silverlight Tips & Tricks

July 26, 2010

80. Wet Effect in Silverlight

Filed under: Silverlight — Tags: , , , — Sharker Khaleed Mahmud | shamrat231 @ 8:56 AM

[tweetmeme source=”shamrat231” only_single=false]

In this entry, I am going to create a wet effect using Blend in Silverlight. It is more of a trick then a tip. The idea is actually pretty simple. This will be the second effect that I am creating for my effects library. I plan to create some more effects before I put all the effects into a dll for ease of use for others. Many other things will actually follow, but for now lets create a second effect. Try start finding a picture with a wet glass effect in search engines. One example would be the one I am using…which i found in some adobe tutorial blog. The given text here is changeable at code level. Have fun with it. 

You can see the live example here [live demo]  

The SOURCE CODE(.zip) is at the end of the page for download.  

  

The above are some example that are found in search engines. Now we need another picture on which we can reside the wet effect. One such picture that i randomly picked out from the Flickr is shown below.  

   

Now comes the ordering. The one that is added last hides the other one. What is needed here is to put that wet effect on the second picture. So reduce the opacity of the crowd image.  

  

Ok, so basically we are almost done giving a wet effect. Lets add some text eg. Silverlightips.net and make the textblock center in both horizontal and vertical direction. Add some blur effect  

MainPage.xaml  

<Grid x:Name=”LayoutRoot” Background=”Black”>
  <Grid Width=”800″ Height=”600″>
  <Image Source=”/weteffect.png” Stretch=”Fill”/>
  <Image Source=”crowd.jpg” Stretch=”Fill” Opacity=”0.2″ />
  <TextBlock x:Name=”text” Text=”silverlightips.net” TextWrapping=”Wrap” FontSize=”96″
   FontWeight=”Bold” TextAlignment=”Center” VerticalAlignment=”Center” HorizontalAlignment=”Center” RenderTransformOrigin=”0.5,0.5″ FontFamily=”Lucida Handwriting”  >
   <TextBlock.RenderTransform>
    <CompositeTransform ScaleY=”2″/>
   </TextBlock.RenderTransform>
   <TextBlock.Effect>
    <BlurEffect Radius=”5″ />
   </TextBlock.Effect>
   <TextBlock.Foreground>
   <ImageBrush ImageSource=”crowd.jpg” Opacity=”.5″ />
   </TextBlock.Foreground>
  </TextBlock>
  </Grid>
  <HyperlinkButton Content=”Samples from http://silverlightips.net By Sharker Khaleed Mahmud” NavigateUri=”http://silverlightips.net” VerticalAlignment=”Top” HorizontalAlignment=”Center” Height=”30″ IsTabStop=”False” Foreground=”White” />
 </Grid>  

In the above code, I added some brush image on the text, gave some blur effect and placed the text above both images. Now change the pictures and the text and you can end up having your own wet effect on your text and image.  

  

As always, you can download the source code from here [download link  

Sharker Khaleed Mahmud
Web Developer  

Advertisements

2 Comments »

  1. […] Wet Effect in Silverlight (Sharker Khaleed Mahmud) […]

    Pingback by Windows Client Developer Roundup 035 for 8/2/2010 - Pete Brown's 10rem.net — August 2, 2010 @ 4:40 AM

  2. nice work

    Comment by srinivas — August 13, 2010 @ 6:19 PM


RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Blog at WordPress.com.

%d bloggers like this: