Get Microsoft Silverlight

Sunday, November 30, 2008

Interactive Silverlight Greeting Card

For the last couple of days I was trying to make an animated e-card using Silverlight. So here is the final result. The speciality of this card is that when we move the mouse over the card we can see it as if it is a 3D object and get the perspective view of the objects(Papervision 3D?). All the Trees and Mountains are Path objects and the particles falling down are random sized ellipses. I have used Microsoft Expression Blend to do most of this work


The important part of this Silverlight appplication is a Custom Panel called SpacialArrangePanel. This panel will arrange its children based on two Attached Dependancy Properties.
1) HangingPoint - A point determines its X and Y position in the space
2) ZDistance - A double value determines how far the object is in the Z-plane.

There is another DependancyProperty in the Panel called CameraPoint, which has been hooked to the Mouse Move points so that the mouse pointer acts as an Eye/Camera view point of the Panel.

I have added the InitParams query string in the HTML so that this card can be customized to use special Message and Name on it. Just change the Greeting and YourName parameters in the bellow HTML.

 <div id="silverlightControlHost">

        <object data="data:application/x-silverlight,"

            type="application/x-silverlight-2" style="width: 840px; height: 353px">

            <param name="source" value="http://ria-labs.com/silverlight/samples/xmascard1/XMasCard.xap"/>

            <param name="InitParams" value="Greeting=Merry Christmas,YourName=Jobi Joy"/>           

            <param name="minRuntimeVersion" value="2.0.31005.0" />

            <param name="autoUpgrade" value="true" />

            <a href="http://go.microsoft.com/fwlink/?LinkID=124807" style="text-decoration: none;">

                <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none"/>

            </a>

        </object>

    </div>



And here is the Source code

Saturday, November 15, 2008

Concave cornered Rectangle - Expression Blend Tip


An expression blend tip to create a Path looks like a concave cornered rectangle.  Put a Grid with 5*5 rows and columns. and add 4 ellipse and a rectangle as in the following XAML.

<Grid x:Name="grid" >
    <Grid.ColumnDefinitions>
     <ColumnDefinition Width="0.1*"/>
     <ColumnDefinition Width="0.1*"/>
     <ColumnDefinition Width="0.6*"/>
     <ColumnDefinition Width="0.1*"/>
     <ColumnDefinition Width="0.1*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
     <RowDefinition Height="0.1*"/>
     <RowDefinition Height="0.1*"/>
     <RowDefinition Height="0.6*"/>
     <RowDefinition Height="0.1*"/>
     <RowDefinition Height="0.1*"/>
    </Grid.RowDefinitions>
    <Rectangle Fill="#FF000000" Grid.Column="1" Grid.Row="1" Grid.RowSpan="3" Grid.ColumnSpan="3" StrokeThickness="0"/>
    <Ellipse Fill="#FFEA0000" VerticalAlignment="Stretch" StrokeThickness="0" Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" Grid.ColumnSpan="2"/>
    <Ellipse Fill="#FFEA0000" StrokeThickness="0" VerticalAlignment="Stretch" Grid.ColumnSpan="2" Grid.RowSpan="2" Grid.Row="3"/>
    <Ellipse Fill="#FFEA0000" StrokeThickness="0" VerticalAlignment="Stretch" Grid.ColumnSpan="2" Grid.Row="3" Grid.RowSpan="2" Grid.Column="3"/>
    <Ellipse Fill="#FFEA0000" StrokeThickness="0" VerticalAlignment="Stretch" Grid.Column="3" Grid.ColumnSpan="2" Grid.Row="0" Grid.RowSpan="2"/>
   </Grid>

Do the Subtract Path operation by selecting menu option Object -> Combine -> Subtract
Now you will get a Path object as bellow XAML.

<Path Fill="#FFA1A1A1" Stretch="Fill" Stroke="#FF000000" StrokeThickness="1" 
Width="50" Height="50" Data="M17.200002,0L120.4,0 120.4,2.3066998E-06C120.4,6.7378696,128.10079,12.200001,137.60001,12.200001L137.60001,85.400003C128.10077,85.400003,120.4,90.862138,120.4,97.6L17.200002,97.6C17.200002,90.862151,9.4993697,85.400003,0,85.400003L0,12.199999C9.4993663,12.200015,17.200002,6.7378725,17.200002,0z"/>

The above can be achieved in many different ways. You can use Expression Design or Adobe illustrator to generate a Path like this.
And if you are looking for a custom shape like this, you can create that by deriving a class from System.Windows.Shapes.Shape by doing some similar Geometry operations. Then we can define some dependency Properties for controlling the Concave radius too.