Sharker Khaleed Mahmud Silverlight Tips & Tricks

July 18, 2010

76. Working with PhotoShop brush effects in Silverlight

Filed under: Silverlight — Tags: , , — Sharker Khaleed Mahmud | shamrat231 @ 9:37 AM

[tweetmeme source=”shamrat231” only_single=false]

In this entry, I will try to explain and show you, how to use Photoshop to your advantage in Silverlight. So starting from today’s entry, next couple of article will be devoted to this subject before I shift my focus to working with Microsoft lab tools in Silverlight. There are lots of free psd available on the internet. So I am going to import one that would be a good example in this scenario. I have taken the mirror picture from deviantart gallery for demonstration purpose.

You can see the live example here [live demo]

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

There are lots of free psd available on the internet. For this scenario, i am going to use some sample brush effects. The one I am going to use is broken glass available here.

       

Ok, for now lets download the psd file and open it in Expression Blend 4. First start by creating a simple silverlight project. On the File menu, you will see that there are two options, since the download file is a psd file, I will choose the first choice. Once the file loaded, you will see on your user control section that some files are generated.

These files depend on the number of layers available on Photoshop file. For this case, the total markup generated here is very small.

MainPage.xaml

<Grid x:Name=”LayoutRoot” Background=”White”>
 0L500,0 500,500 0,500z” HorizontalAlignment=”Left” Height=”500″ UseLayoutRounding=”False” VerticalAlignment=”Top” Width=”500″>
  <Image x:Name=”unique_psds” Height=”393″ Canvas.Left=”0″ Source=”Photoshop-Brushes-Broken-Glass-psd9371_Images/unique_psds.png” Canvas.Top=”31″ Width=”500″/>
 </Canvas>
</Grid>

So by seeing the markup, you might wonder that the generated output is an image instead of full xaml markup of the design. So lets check the generated output actually works or not. One simple test case would be to change the background color of the main grid or add an image for the background of the grid.

So now modify the generated code to make it more flexible. For example, the background should stretch no matter what type of resolution the computer has.

MainPage.xaml.cs (modified)

<UserControl
 xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation
 xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml
 x:Class=”BrokenGlass.MainPage”
 >

 <Grid x:Name=”LayoutRoot” Background=”Black”>
  <Image Source=”Mirror_by_audpod.jpg” Stretch=”Uniform” Margin=”50″/>
  <Image x:Name=”unique_psds” Height=”220.5″ Source=”Photoshop-Brushes-Broken-Glass-psd9371_Images/unique_psds.png” Width=”141.5″ HorizontalAlignment=”Center” VerticalAlignment=”Center”/>
        <HyperlinkButton Content=”Samples from http://silverlightips.net by Sharker Khaleed Mahmud” NavigateUri=”http://silverlightips.net” IsTabStop=”False” Foreground=”White” HorizontalAlignment=”Center”/>
 </Grid>
</UserControl>

So far, I have finished adding the effects in blend and applying it in front of an image. In the next entry, I will continue more with this sample and show how to create controls and other amazing stuffs.

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

Sharker Khaleed Mahmud
Web Developer

Advertisements

2 Comments »

  1. […] 76. Working with PhotoShop brush effects in Silverlight […]

    Pingback by Photoshop Brush Effects Clipping in Silverlight « Sharker Khaleed Mahmud Silverlight Tips & Tricks — July 19, 2010 @ 9:29 AM

  2. […] Working with Photoshop Brush Effects in Silverlight (Sharker Khaleed Mahmud) […]

    Pingback by Windows Client Developer Roundup 034 for 7/26/2010 - Pete Brown's 10rem.net — July 26, 2010 @ 5:20 AM


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: