76. Working with PhotoShop brush effects in Silverlight

[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