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

Comments

Sameer C. Thiruthikad said…
That's cool Jobi. That 3D feeling is great!
Sunday, November 30, 2008 at 8:52:00 PM PST
morat said…
Pretty good post. I just stumbled upon your blog and wanted to say that I have really enjoyed reading your blog posts. Any way I'll be subscribing to your feed and I hope you post again soon.


Kenali dan Kunjungi Objek Wisata di Pandeglang | Blog SEO | cah bagoes | oes tsetnoc | blogger
Thursday, October 29, 2009 at 2:23:00 AM PDT
Anonymous said…
I don’t know If I said it already, but this so good stuff keep up the good work. I read a lot of blogs on a daily basis and for the most part Belajar seo blogspot just wanted to make a quick comment to say I’m glad I found your blog. Thanks.

Best regards
Seo Motivation Oes tsetnoc
Monday, November 23, 2009 at 9:24:00 AM PST
Arya Wiradana said…
thanks my dear.. this is great article for me. I recently came across your blog and have been reading along. I thought I would leave my first comment. I don't know what to say except that I have enjoyed reading.

Regards
Bali car rental
Thursday, December 10, 2009 at 10:17:00 PM PST
Anonymous said…
The cold winter, does not seem too for wedding. Most recently, the cold one after another, hangzhou air temperature pelter, let many wedding in late November bride is due a single wear gauze or dress, will feel cold, wear too much and feel very bloated. For the bride, the winter is the biggest test how wedding in temperature and balance between poise.

Don't be too upset, actually this season only fees cheap Wedding Dresses, marriage can create a different character "winter wedding", also more memorable.

You can use the glittering and translucent white fairy tale, cheap cell phones
,the artistic conception to dress up oneself's wedding, choose blue, green, white ice cold tonal, decorous atmosphere to create beautiful, Can borrow snow machine and bubble machine build indoor romantic atmosphere, snowflake, feathers, Christmas tree,cheap cocktail dresses, even is the element such as silver crystal, can add to your winter wedding dreamy colour, cheap jewelryyou can even in a pile of snowman YingBinChu lovely, guests, we must take it and will soon be well.


Anothre set of ralph lauren polo in three colors. Ralph Lauren Polo Shirts come with a graduation of colors on the chest. The new shiki Cheap polo shirts logo is on the chest. Comes in all layres and can be worned tucked in or out Wholesale Polo Shirts -50% OFF.
Also comes with sculpted collar and arm cuffs.Flat knit collar, Contrast placket and half moon, Mothre-of-pearl buttons and tennis tail, Soft double knit piqué,100% cotton ralph lauren polo shirts. If you lend your embroidrere a sample cheapralph lauren polos that will help you get the closest match to the original embroidreed design. The artwork you provide will sreve as a template for your embroidrey set-up but discount ralph lauren polos can't be used to identify some stitch types, cheap polo shirts Cheap Polo Shirtsgive precise sizing of embroidreed elements and show thread polo clothing colors.
Wholesale Polo Shirts
Ralph Lauren Polo Shirts
Discount Ralph Lauren Polos
Monday, December 28, 2009 at 11:25:00 PM PST
CharonMok said…
This is very beautiful. I've just created my own website to sell some pop-up cards. They're absolutely beautiful. If you are interested in pop-up cards. It is exactly what you are looking for: custom pop up cards pop-up cards
Friday, March 25, 2022 at 5:58:00 PM PDT
Post a Comment

Popular posts from this blog

Time Picker User Control

The easiest way to create a WPF TimePicker control is to make a user control wrapped for TimeSpan CLR object. Here is a very simple sample which does that. Basically TimeControl is having 4 DPs one for the entire Value (Which is a TimeSpan) and individual Hours, Minutes and Seconds. (We can optionally add Days and Milliseconds also to make the control rich). Here is a C# class TimeControl.xaml.cs public partial class TimeControl : UserControl { public TimeControl() { InitializeComponent(); } public TimeSpan Value { get { return ( TimeSpan )GetValue(ValueProperty); } set { SetValue(ValueProperty, value ); } } public static readonly DependencyProperty ValueProperty = DependencyProperty .Register( "Value" , typeof ( TimeSpan ), typeof ( TimeControl ), new UIPropertyMetadata ( DateTime .Now.TimeOfDay, new PropertyChangedCallback (OnValueChanged)));
Read more

A simple Multiselect ComboBox using expression Blend

Image
I have often seen requirements to have a combobox with multiple selection enabled. We know thatWPF ListBox control is having two special properties, which enables the multiple selection but the combobox doesnt have those public IList SelectedItems { get; } public SelectionMode SelectionMode { get; set; } There are many ways we can make a multiselect combo box 1)Create a custom control from the scratch and have a Listbox in the dropdown 2)Extend the combobox and add the above properties to it 3)Edit the Combobox control template to add necessary controls and binding. I am going to describe the 3rd idea from the above list, which is a total Expression Blend work, so no need of VS2008 to make a multiselect combobox from a simple combobox. Place a combobox in to the editing area and right click on the control to create an copy of the Control template. Now you can see the Control's tree on the left side of Expression Blend The ItemPresenter inside the scrollviewer is actually the
Read more

A Simple Radial Panel for WPF and SilverLight

Image
Geometry was one of the coolest topics in school for me. Probably because it uses a lot of figures to convey the concepts. Here I am trying to explain how we can leverage the Layout system in WPF and Silver light by taking an example of creating a Radial Panel. A RadialPanel lays out its children in a circular fasion. So before going in to the technical details, let us see how this problem get solved algorithmically.If you are asked to arrange a bunch of items in a circular path, what all things would you consider?. 1) How much space do I have? – Say X * Y rectangular area is the available size. 2) I will draw an approximate Circle (Or ellipse) inside the X*Y space. Assuming that the Radii are ‘Rx and Ry' 3) How many items are there to arrange? Say N – number 4) I know that 360 degrees are the total angular space for a circle. So angular distance between each item will be 360/N degrees. 6) I can calculate the coordinate point to which an item should be placed. That is by doing the
Read more