Physics Behaviors in Silverlight 3.0

 

Hi All,

From last two days, I was learning about the “Physics Behaviors”. How to Use Them? How to Apply Them? I am not at all good in Physics. But, tried some “Physics Behaviors” in my game. I have seen some “COOOOOOOOOOL” Demos from the below site -

http://www.andybeaulieu.com/Default.aspx?tabid=67&EntryID=165

and I got inspired by “Andy Beaulieu”. Thanks to Andy!!.

I have downloaded a library called “PhysicsHelper 3.0.0.1 Beta”. Below is a link for the same-

http://physicshelper.codeplex.com/Release/ProjectReleases.aspx?ReleaseId=30208

This is Awesome!!

So, just to see some capabilities of “Physics Behaviors” using in Silverlight 3.0, I have designed a simple game. Well, You can “Play” Online. Below is the demo -

Important Note – The above Demonstration is “without writing any Code”. I have used Microsoft Expression Blend 3.0. That’s All!!

But in this Blog I am not writing “How to do that?" Step – By – Step Lab Manual as usual. The reason is I want to understand first How the Physics Works for these behaviors by My Self. Once I am done with that, I will come up with Step By Step Lab Manual.

Till the Time Enjoy !!

30 Transition Effects In Silverlight 3.0

 

Hi All,

The purpose of writing this blog is to show you that now you can apply “30 Transition Effect in Silverlight 3.0”. In my last blog, I have shown “23 Pixel Shader Effects in Silverlight 3.0”. If you have not seen it yet, please have a look at it and then proceed to apply these Transition Effects in your application.

For this demo, you must see the video which is available on “Channel 9”. Below is the link for the Video -

http://channel9.msdn.com/shows/Continuum/WPFFXDemo

To Apply these effects you will have to now download the library called “WPFSLFx” from “CodePlex.com”. It’s a .ZIP file. Below is a link for the same -

http://codeplex.com/wpffx

Unzip the downloaded file at your preferred location. You will see a folder called “WPFSLFx”. If you drill down the folder you will see “SL” folder. Within that folder you will get a library called -

1) SLTransitionEffects.

It contains 30 different Transition effects which you can try out online. Below is a Demo for the same -

The below table shows all the names of the transitions which you can apply in your Silverlight 3 application.

SR.NO.	Transition Name
1	Banded Swirl Transition Effect
2	Blinds Transition Effect
3	Blood Transition Effect
4	Circle Reveal Transition Effect
5	Circle Stretch Transition Effect
6	Circular Blur Transition Effect
7	Cloud Reveal Transition Effect
8	Crumble Transition Effect
9	Disolve Transition Effect
10	Drop Fade Transition Effect
11	Fade Transition Effect
12	Least Bright Transition Effect
13	Line Reveal Transition Effect
14	Most Bright Transition Effect
15	Pixelate In Transition Effect
16	Pixelate Out Transition Effect
17	Pixelate Transition Effect
18	Radial Blur Transition Effect
19	Radial Wiggle Transition Effect
20	Random Circle Reveal Transition Effect
21	Ripple Transition Effect
22	Rotate Crumble Transition Effect
23	Saturate Transition Effect
24	Shrink Transition Effect
25	Slide In Transition Effect
26	Smooth Swirl Grid Transition Effect
27	Swirl Grid Transition Effect
28	Swirl Transition Effect
29	Water Transition Effect
30	Wave Transition Effect

Now, to apply above transitions let’s see the step-by-step guide lines-

1) Create a Silverlight 3.0 application using Microsoft Expression Blend 3.0.

2) Once you are done, add a project “SLTransitionEffects” from the location where you have unzipped the “WPSLEfx” zip file. My location is -

C:\WPFSLFx\WPFSLFx\SL\SLTransitionEffects

3) Then compile the SLTransitionEffects Library and add a reference of the same into your Silverlight project as shown below-

4) Now, Add at least two images in the Silverlight project and add a “Image Control” on MainPage.xaml file with height and width as per you specifications. Set one image as a source to image control.

5) Now the most important thing, add one “ImageBrush” as a user control resource as shown below-

<ImageBrush ImageSource="Tulips.jpg" x:Key="ImBrush"/>

6) Now, Select a Image control which you have on MainPage.xaml and go to property window.

7) Now, go to “Appearance section” and you will see the “Effect” property and a “New” button. Click that button and then you will see out Transition effect library in a “Select Object” dialog box. And you will see 30 different classes under the “SLTransitionEffects” library. Each class presents a Transition Effect as shown below-

8) For this demonstration I will use “DropFadeTransitionEffect” class. So, make a choice of  “DropFadeTransitionEffect class and click “OK” button.

9) Now, you will see three properties-

I) OldImage- This is the property to which we will set the “ImageBrush” we have created in our earlier steps as shown below-

II) Progress – This property is the most common property which you will find in almost all the transition classes. Now, Create a “StoryBoard” (Animation) for five seconds. and change the “Progress” property from 0 – 1.

III) RandomSeed – Let it be zero.

So, you are done!! Start the animation on some button click event of the MainPage.xaml file and see the Transition effect applied on your Image. Very Simple !!!

Now you can try applying the Transition Effects on the Silverlight Controls as per your preference.

So, what are you waiting for!! Download the Library and Try all the “30 Transition Effects in Silverlight 3.0 Applications”.

Enjoy!!!

Pravinkumar.

 

23 Pixel Shader Effects in Silverlight 3.0

 

Hi All,

Yesterday, I was just going through the Pixel Shader Effects in Silverlight 3.0. and found one interesting video on Channel 9 about WPF Effects library on CodePlex. This library is modified for “Silverlight 3” and contains 23 effects for Silverlight 3 as well. Below is a link for the same-

Video Link- http://channel9.msdn.com/shows/Continuum/WPFFXDemo/

Library Link - http://codeplex.com/wpffx

So, Download this library. It’s a .ZIP file. Extract it as per your preferred location and you will see a Folder SL, which contains a Library -

1) SLShaderEffectLibrary.

To see these effects Live, below is a table which I made with all “23 Pixel Shader Effects” -

List of 23 Pixel Shader Effects-

SR.NO.	Pixel Shader Effect Name	Snapshot of the Effect
1	Banded Swirl Effect
2	Bloom Effect
3	Bright Extract Effect
4	Color Key Alpha Effect
5	Color Tone Effect
6	Contrast Adjust Effect
7	Directional Blur Effect
8	Embossed Effect
9	Gloom Effect
10	Growable Poisson Disk Effect
11	Invert Color Effect
12	Light Streak Effect
13	Magnify Effect
14	Monochrome Effect
15	Pinch Effect
16	Pixelate Effect
17	Ripple Effect
18	Sharpen Effect
19	Smooth Magnify Effect
20	Swirl Effect
21	Tone Mapping Effect
22	Toon Shader Effect
23	Zoom Blur Effect

To apply these effects, here is a step-by-step lab manual -

1) Create a Silverlight 3 project using Microsoft Expression Blend 3. Here I took a Sketch Flow project of Silverlight 3.0.

2) Once you are done with this, Add the project “SLShaderEffectLibrary” from the location where you have extracted the .ZIP file. My path where the “SLShaderEffectLibrary” is as below-

C:\WPFSLFx\WPFSLFx\SL\SLShaderEffectLibrary

3) Now compile the project “SLShaderEffectLibrary” and add the reference of this library into our Silverlight project as shown below-

4) Now add a Image control in our Silverlight control. Set your favorite picture to the image. Once you are done with this, now let’s add a effect on this image.

5) Find the “Effect” property of the Image under Appearance section, and click the “New” button as shown below-

6) Now, You will see a “Select Object” Dialog box. Within this dialog box drill-down the “SLShaderEffectLibrary” and you will see all the shader classes which you can apply to your Image-

7) Now change the properties as per your requirement and see the effect on your image.

Note-: I have created a StoryBoard for each effect and applied it to different images. If you want to try out the same create a story board and change the properties of each effect.

8) So, what are you waiting for !! Try out all the effects by downloading the Library.

Enjoy!!

Pravinkumar

SketchFlow in Silverlight 3.0 using Microsoft Expression Blend 3

 

Hi All,

What I was waiting for is now Available !!

Silverlight 3.0 RTW and Microsoft Expression Blend 3 with SketchFlow are available for download. Please find the links to download below-

Microsoft Silverlight 3 Runtime
http://www.microsoft.com/silverlight/resources/install.aspx
Microsoft Expression Blend 3 with SketchFlow
http://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=92e1db7a-5d36-449b-8c6b-d25f078f3609
Microsoft Silverlight 3 SDK
http://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=2050e580-f1d5-4040-bb09-e6185591b6b5
Microsoft Visual Studio 2008 Tools
http://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=9442b0f2-7465-417a-88f3-5e7b5409e9dd

Most importantly what I was waiting for is Sketch Flow. So, to show few capabilities of Microsoft Expression Blend 3 SketchFlow, I tried out a very simple demo.

This demo is about customers, products and their orders. So, when customers start the application they will see the Welcome Screen. Then they can see other customers, the available products and their order status. Then they can see the complete report of their own. At the end they can check out their self.

During this demonstration, if customers would like to give few feedbacks on the products which they are purchasing, they can give a feedback. By using this feedback, the company owner can rectify or appreciate the feedback which he can see as a designer.

So, let’s try out this example and see how we can build the White Board kind of Sketch Flow in Silverlight 3.0 using Microsoft Expression Blend 3 with Sketch Flow-

So, install Microsoft Silverlight 3.0 Runtime, Microsoft Silverlight 3.0 SDK and Microsoft Expression Blend with SketchFlow on your machine.

1) First step is to look at how you create a Sketch Flow project by using Microsoft Expression Blend 3. So, just look at the below screen shot-

2) If you observe, you can see that you can create a sketch flow project separately for Silverlight 3.0 applications or WPF application. So, let’s make a choice of “Silverlight 3 SketchFlow Application” and name it as “FirstSketchFlowApplication”.

3) Once you create a project, you will see the window like below which has different sections which we will discuss one by one-

a. Projects Window- this window will show you a structure of Silverlight SketchFlow project. It has several new items added as shown below-

First item is Fonts folder which contains different fonts. Screen 1 is a second item which is the first screen for our project. Third item this is most important item that is Sketch.Flow. This file shows the available screens, their connections with the other screens and lots more. You open this file and see what it shows when we finish our Sketching. Forth item is SketchStyles.xaml which contains bunch of styles and Visual states which will be utilized by our Scetchflow project.

b. Second window is SketchFlow Map. Now this is the window which is going allow you to sketch multiple screens, connect those screens with each other and lots of other functionality. Basically this window is used to Model the Flow, do Navigation and composition.

You will see a small tool box at the bottom of the SketchFlow Map window which will allow you to add screens, map the screens, remove the screens etc.

c. Now if you make a choice of screen shown in Blue rectangle, you will see a small toolbar which is again allow you to add-

i. Connected Screen.

ii. Connect an existing screen.

iii. Create and insert a component screen.

iv. Change visual tag.

4) So, next step is renaming the screen 1 by the name “Start”. And by clicking a small button “Create a Connected screen” just draw the SketchFlow as shown below-

The above Sketch flow shows couple of windows like, Start, WelCome, Customers, Products, Orders, CheckCustomerReport, CheckOut.

5) Now, press “F5” and See the output of your application. The application will look like as shown below-

6) If you could see at the left hand of the screen you will see a panel called “SketchFlow Player”. This player has couple of options as described below-

a. The first section is your “start Section”.

b. Second section is your “NAVIGATE Section”. Where it will show all the windows which you can navigate through.

c. Zoom panel.

d. “FEEDBACK section”- This one is great. Your customers now can give a online feed back by using the tools shown in FEEDBACK section. Later, your designer can open the feedback given by the customers and act upon that and do the necessary changes.

e. MAP- your customers can see the entire sketch and flow of the navigation which is available in your application.

f. Try out these few sections from SketchFlow Player.

7) Now as you have seen the first output, let’s use other features which are available with SketchFlow.

8) So, let’s starting designing the screens which are almost empty which we have created in our pervious steps. When you think about designing the screens, you can use all the controls which are there available in Blend. But probably the look and feel which you are looking for while sketching the prototypes for your applications, the regular controls might not give the sketch look and feel.

9) For that in Sketch Flow of Silverlight we have couple of new Sketch controls which you can use in your sketching applications as shown below-

10) In the above figure, click to Asset from the blend toolbox and go to “Styles group” -> “SketchStyles” section. You will see 33 new Sketch controls which are already styled for Sketching. Now you can start using these controls for your screens.

11) So, let’s start designing our first screen called “Start”. Open the screen in the design mode and design the screen as shown below-

12) Here I have used a control from Sketch section called “TitleCenter-sketch” for the titles and drawn the happy faces by using a tool called “Pencil” from the standard control model.

13) Now as you have finished designing “Start” Screen, let’s start designing “WelCome” screen. Open “WelCome” screen in a design mode and design the screen as shown below-

14) While designing the “Welcome” Screen, I have used “Button-Sketch” and “Rectangle-Sketch” controls from the Style group of Asset.

15) Important Point-this small menu will be displayed only on the WelCome screen. What if we would like to display this Menu on all the other screens which we have designed in our previous steps? Yes, we can do that very easily. But How?

16) By making a “Component Screen”. So, for that select “Rectangle-Sketch” and “Button-Sketch” from the objects and Timeline windows, Right Click to the selection and from the context menu click on “Make into Component Screen...” It will show you one dialog box asking the name of the screen. Name the component screen as “ResuableMenu” and click ok button.

17) Now you will see a change in “SketchFlow Map” window as below-

18) Now as you are ready with the reusable component let’s use it on multiple screens. For that Drag and Drop the reusable component on the screen wherever you want to use the menu. Then open those screens and align the menu as per the design specifications.

19) This is how the final “SketchFlow Map” Should look like.

20) Now as we have finished drawing our SketchFlow, let’s design the other screens as shown below-

21) “Customers” screen should look like as below- here I have used “ListBox-Sketch” control along with title and reusable component we just created.

22) “Orders” screen should look like as below- here I have used “ListBox-Sketch” control along with title and reusable component we just created.

23) “Products” screen should look like as below- here I have used “ListBox-Sketch” control along with title and reusable component we just created.

24) Now let’s use some other features of SketchFlow. For example now we will try out setting up navigation to our menu buttons to the respective pages in our application.

25) To do this let’s open the “Reusable Menu” into design mode. Make a choice of a “Customer Details” button, Right Click to the Button and Go To -> Navigate To - > and make a choice of a windows to which you want to navigate as shown below-

26) Repeat the same procedure to other buttons as well. Now press “F5” and test the application by clicking the buttons and navigating to the specific pages.

27) Now let’s try out “States in SketchFlow”. For this you will have to add one simple demo screen in to your existing project by the name “StatesExample” and design the screen as shown below-

28) To add a screen “StatesExample”, “Create a connected Screen” from our existing screen “WelCome”. Then add our reusable component by dragging the “ReusableMenu” on to our “StatesExample” screen. Add title to screen and draw “Rectangle-Sketch control”. Draw few “Button-Sketch” on top of your rectangle. So, your screen should look like below-

29) Now as your design is completed, let’s add few states to our application by defining the transition time by some duration. To do this, go to States window. You can get this window from Windows Menu - > States.

30) Now add the State by the name “SampleStateGrp” and let’s specify the duration to 2 Seconds as shown below-

31) Now add four different states by the name

a. “None” which will do nothing.

b. “One” – once you add this state draw a rectangle with some colour on the “StateExample” window.

c. Repeat the step “b” for state “Two” and “Three”.

32) Now once you are done with this, let’s attach our states “One”, “Two” and “Three” to the buttons “One”, “Two”, and “Three” respectively by right clicking to each button and going to “ActiveState Menu” from the context menu and make a choice of respective state as shown below-

33) Now Hit “F5” and test your application by navigating to “StateExample” window and click the respective buttons and see the output.

34) Now the most important point, Taking Feedback Online from the Customers and acting on that feedback as a Designer.

35) To do this run your application by pressing “F5” and use the Feedback option from the SketchFlow Player as shown below-

36) If you see there is enable Ink option available. If you click that you can make a choice of the colour and put your feedback on the design as well as you can write comments on the same.

37) Once you are done writing comments and feedback on the design, now export this in form a file. So, if you click the option “Show Feedback option” you will find Export option. Type the Author name and then click OK button. As soon as you click the button, you will see the save dialog box which will asked you to save the feedback. Save it by the name “StartScreenFeedback”.

38) So, now customer has given the feedback. So, let’s act as a Designer and open this feedback in Microsoft expression blend and act on the same. To do this, let’s go back to Blend.

39) Now click on “Window” menu. And click on Feedback submenu.

40) It will show you the Feedback menu at the left hand side of the window. From this window you can load the Feedback file which is send by the customer by browsing it from the given location.

41) Once you load the file, you will see a Bulb icon into “SketchFlow Map” window over the “Start” screen icon as shown below-

42) When you finish your SketchFlow and when your customer would like to have a Design document which they can refer, Microsoft Expression Blend has awesome feature. This has a direct integration with Microsoft Office Word. That feature is “Export To Microsoft Word”.

43) To export the design documentation to Microsoft Word, go to File Menu -> Export to Microsoft Word option.

44) When you click the menu, you will see the dialog box for exporting the design documentation to word. Give a name to the document and export it to a specific location as shown below-

45) Then check the document.

46) Now as we are finished with “Exporting the Design Document to Microsoft Word”, let’s try out the next feature.

47) Next feature is binding data to different “Sketch Controls” using dummy data from Microsoft Expression Blend 3.0.

48) To use the dummy data from Microsoft Expression Blend, go to “Window Menu->Data” . This window will allow you to either use Live Data or Dummy Data as per the requirement.

49) Data Window has two options-

a. Add Sample Data Source.

b. Add Live Data Source.

50) We will try out “Add Sample Data Source” as shown below-

51) Click on “Define New Sample Data” menu. Give a name as “CustomerDataSource”. You will see by default two properties.

52) Now if you want to add multiple properties, modify the data type of the properties, edit the same data and many other features, you can do that as shown below-

53) So, try out the other options as per your requirement. For our demo, let’s create three data sources with the following specification-

a. CustomerDataSource-

          i. CustomerID.

         ii. CustomerName.

b. OrdersDataSource-

           i. OrderID.

          ii. OrderDate.

c. ProductDataSource-

            i. ProductID.

           ii. ProductName.

          iii. ProductPicture.

54) Once you are done with creating the data source, let’s open “Customer screen” and “Drag & Drop” the “Collection” from the Customer Data Source on Customer’s details List box. Repeat the same steps for other list boxes in our customer’s screen. Your should see the “Customer Screen” output like below-

55) Now open the “Orders Screen” and “Product Screen” and repeat the procedure as above by “Dragging & Dropping” the above data source collections to the respective screens. Then see the output. So, we are almost done with the data binding.

56) So, that’s it from my side for time being. There are whole bunch of features available with SketchFlow for prototyping in Silverlight 3.0 and Microsoft Expression Blend 3.0. I will be coming up with other examples soon.

57) So, what are waiting for!! Download it and try out ASAP.

So, Enjoy!!!