Archive for the ‘ Demos ’ Category

All of My Silverlight Video Tutorials in One Place (revised again 05.12.10)

This post was commented on by Microsoft’s own Scott Guthrie (the Gu) on 5.31.10

Hello All,

This is a post that keeps growing day by  day so I need to update its postion to be at the top of my blog as the content grows. So, here it is again by popular demand:

49. How to add multiple BitmapEffects to one object in Silverlight: http://wp.me/pxXri-7K

48. How to build a Slider with a ToolTip that follows the thumb button and displays the value of the Slider: http://tinyurl.com/37ms8fl

 47. How to build your very own TutorialCam like I use in my video tutorials! http://wp.me/pxXri-75

46. Fire one of two Visual States based on the value of a Boolean variable: http://wp.me/pxXri-71

45. How to add Fast Forward to the Silverlight MediaElement: http://wp.me/pxXri-6V

44. Create a custom ToolTip with a Delay: http://tinyurl.com/24cqcqu

43. Create a Silverlight Paging Systems to Load Pages on the Fly: http://wp.me/pxXri-6H

42. Create a Slide In/Out Navigation Panel: http://wp.me/pxXri-6B

41. How to use Joe Stegman’s PngEncoder to save an image from your Silverlight application: http://wp.me/pxXri-6y

40. How to create complex gradients: http://tinyurl.com/ycjcpd5

39. My Blend IDE series – Part 1 – the Blend Toolbar: http://tinyurl.com/yh48uh8

38. My Learn Blend IDE series Part 2 – Layout Controls and User Input Controls: http://tinyurl.com/yblcjyk

37. My Learn Blend IDE series Part 3 – The Properties, Projects and Data panels: http://tinyurl.com/ykvcdkk 

36. My Learn Blend IDE series Part 4 – The Objects & Timeline and States panels: http://tinyurl.com/y8ztcds

35. My Learn Blend IDE series Part 5 - Blend’s Animation Workspace – Everything you need to know to create Storyboard Animations -  http://wp.me/pxXri-56

34. How to make a 3 column ListBox in Silverlight: http://tinyurl.com/yhxspew

33. How to read XML into Silverlight and turn it into Native Silverlight Objects: http://tinyurl.com/ybm27su

32. Create a default Silverlight 4 Out Of Browser app that allows you to create new OOB apps in mere seconds: http://wp.me/pxXri-4h

31. How to make a forever scrolling Silverligh banner: http://tinyurl.com/ykkd7kl

30. How to create a Silverlight Color Resource in a ResourceDictionary: http://tinyurl.com/yhxc28z

29. How to make an Out of the Browser SL4 Web Browser Applicaiton: http://tw0.us/5jy

28. Use the new Silverlight 4 Webcam API to create a cool webcam app that even let’s you save images to your hard drive: http://tw0.us/5RD

27. Use the new Silverlight 4 COM API to make an Out of the Browser application that is able to open a MS Word document: http://tw0.us/5NN

26. How to make a Timer by using the DispatcherTimer class: http://tw0.us/4my

25. Create a Functioning Login UserControl: http://tw0.us/4o3

24. Use the FarseerPhysics Library to create a Ragdoll with simulated Physics: http://tw0.us/4pA

23. Create a Sortable ObservableCollection: http://tw0.us/5G0

22. Create a Silverlight Ragdoll with Simulated Physics: http://tw0.us/4pA

21. How to create a functioning Silverlight Login UserControl: http://tw0.us/4o3

20. How to create a Silverlight Timer using the DispatcherTimer class: http://tw0.us/4my

19. How to create custom RoutedEvents in Silverlight using Andrew Whiddett’s (IdentityMine) Eventing assembly reference: http://tw0.us/4cU

18. Use the Silverlight Toolkit’s WrapPanel to create a ListBox that displays three rows of Data: http://tw0.us/4aV

17. Create a Silverlight custom Silder: http://tw0.us/4LZ

16. How to create a Visual Tree Helper to locate FrameworkElements in the Visual Tree: http://tw0.us/46C

15. Using DataBinding to control the Visibility of any Silverlight Object using Blend and Visual Studio: http://is.gd/4jUYJ

14. How to create a complete Sketchflow Prototype in Silverlight: http://is.gd/41pjN

13. Creating a Custom Silverlight Button Just for Designers (using linear and radial gradients, the gradient tool and opacity masks): http://is.gd/3XAcr

12. Creating a Custom Silverlight Button: http://is.gd/3X1eZ

11. Creating a Storyboard Helper Class:  http://is.gd/3mjXW

10. Importing Photoshop PSD files into Expression Blend 3:
http://is.gd/3f53d

9. Creating Morphing Vector Path Storyboards in Blend
http://tw0.us/4oI

8. Re-Creating a Metallic Logo in Vector using Blend 3
http://tw0.us/4oL
 
7. Creating Timed Storyboard Animations
http://tw0.us/4oK
 
6. Using TemplateBinding to Replace a ContentPresenter in a Silverlight Button
http://tw0.us/4oJ
 
5. Working with Data in BLend 3
http://tw0.us/4oN
 
4. Silverlight 3 Behavior Tutorial Video
http://is.gd/3ajTP
 
3. This Tutorial will teach you how to create a Card Flipping Animation!
http://is.gd/3ajpa 

2. Observable Collection Tutorial
http://is.gd/3ajLK

1. Silverlight Extended Drag and Drop Behavior:
http://victorgaudioso.wordpress.com/2009/07/07/extended-drag-and-drop-behavior/q

Enjoy! Victor

New Video Tutorial: How to Create Custom RoutedEvents in Silverlight

My Good Friend Andrew Whiddett, CTO of IdentityMine wrote a great solution to be able to make Custom RoutedEvents available in Silverlight (currently custom RoutedEvents are only available in WPF).  RoutedEvents as you may or may not know, are the backbone of what makes the Model View View Model development pattern work.  Now, because of Andrew’s genius you can use it in Silverlight too!

Here is a link to the video showing you exactly how to use it: http://tw0.us/4oC

The URL to the dll: http://tw0.us/4cS

The URL to my project: http://tw0.us/4cT

Have fun and Enjoy!  And a Special thanks to my good friend and former mentor, Andrew Whiddett.

Victor

New Silverlight Video Tutorial: How to Make a Slide In/Out Navigation Bar – All in Blend

In this video tutorial I show you how to use Behaviors and the Visual State Manager to create a navigation bar that slides in when the user places their mouse at the top of the page and then slides away when they move their mouse away from the navigation.  You can see it yourself in action Here.

Video: http://tinyurl.com/26bj94d

My Source: http://tinyurl.com/296dqog

Enjoy! Victor Gaudioso

Los Angeles Silverlight Usergroup Meeting: Presenting Windows Phone 7 – Event-In-a-Box – June 16, 2010

 Hello All!

The June 16th Los Angeles Silvelright Usergroup meeting is going to be a very special one.  Not only will one of the foremost experts in the world, Jason Cook, present on Behaviors but yours truly will present on Windows Phone 7!

Microsoft has sent me a special materials dubbed Event-In-a-Box.  This special promotional material includes a pre-defined training regime as well as some pretty cool stuff to give away!  There will be free shirts, mobile cases, USB drives and Window-Clings!

Make sure and join the LA Silverlight Usergroup if you have not done so already and attend our June 16th meeting!  You can join and get meeting details at www.laslug.com

See you there!

New Speaking Event: Microsoft Book Signing/Silverlight 4 Presentation

Hello All!

On Saturday June 19th, 2010 from 7:00 to 9:00 pm (PST) I will be signing copies of my latest book Foundation Blend 3 with Silverlight and presenting/demoing the new features of Silverlight 4 at the Microsoft Store in Mission Viejo, California! 

Join me as I show how to use the new Webcam and COM APIs, show how to build Out-Of-Browser (OOB) Silverlight applications and talk about Sketchflow Prototyping with Silverlight.

There will be plenty of prizes and give-aways from our sponsors.  Microsoft will be giving away copies of the Expression Blend Suite, Apress will be giving away some of its most popular book titles based on .NET technologies and finally DevExpress will be giving away copies of its popular Silverlight Tools.

Join us for an evening of book signing, food and drinks, presentations and everything Silverlight!  attendance is free but RSVP as space is limited. 

See you there!

Just some of the free give-aways from DevExpress:

Just some of the free give-away prizes from DevExpress.

 Sponsored By:

 

New Silverlight Video Tutorial: How to create a Slider with a ToolTip that shows the Value of the Slider

Hello All!

Recently I was asked to make a ToolTip that now only followed the Thumb of the Slider but also showed the value of what the slider was (see image above).  I thought about this and I came up with a pretty quick solution.  There may be other ways to do it but watch the short 1o minute video to see how I did it.

See it in action: http://tinyurl.com/39mbakt

Video: http://tinyurl.com/2wjzcps

Source Code: http://tinyurl.com/2wxln7j

Enjoy!

New Silverlight Video Tutorial: How to Build Your Very Own TutorialCam

 

Hello All!

IMPORTANT: Watching the video I see I said “I am going to Undo that…”  To Undo in Blend hit Control+Z

I have been asked repeatedly for the source code for the camera application I use to show myself when filming Silverlight video tutorials.  Well, I decided to make a tutorial on how to build your very own TutorialCam (shown above).  I takes about 27 minutes but is much easier than you would think.  There are a lot of little things that you need to do but it is fun and when you are done you will be ready to make your very own Silverlight video tutorials just like me and possibly get MSFT MVP along the way.

Enjoy!

Victor

Video: http://tinyurl.com/2um4w4a

Source Code: http://tinyurl.com/28dw5ok

New Silverlight Video Tutorial: How to Fire a Visual State based upon the value of a Boolean Variable

Hello All!

In this short 7.44 minute video I show you how you can, with one line of C# code fire one of two Visual States based upon the value of a Boolean variable, one if it is true or another one if it is false.  This is much easier than evaluating the variable yourself and then firing each VisualState manually.  Enjoy!

Video: http://tinyurl.com/2wj7fvu

My Source Code: http://tinyurl.com/36mro2k

http://tinyurl.com/2wj7fvu

New Silverlight Video Tutorial: How to Create Fast Forward for the MediaElement

Hello All!

As you probably already know there is no “built-in” way to accomplish Fast Forward with the Silverlight MediaElement.  So, in this 24 minute video I show you how to:

1. Create a new Silverlight application;
2. Add a MediaElement, a Fast Forward Button and a TextBlock for the video’s position information;
3. Create a PlayState Enum and a DispatcherTimer
4. Then on click of the button I show you how to a. Make the video Fast Forward at 1x speed and b. click it again for 2x speed.

If you are doing video this is a must for any self-respecting video player!

Enjoy!

Video: http://tinyurl.com/3933h8t
Demo (see the Fast Forward button in action here): http://tinyurl.com/32kfu8q
Download my Source Code: http://tinyurl.com/265n5he

(My Source code is not downloading well for me and a few others, if that is the case Michael Washington, MVP has hosted the source on his servers: download here: http://tinyurl.com/2dwgsnm)  Thank you Michael

New Silverlight Video Tutorial: How to Create a Silverlight Paging System to Load new Pages

Toaday I got a comment from a blog reader named Fracisco…I think he wanted to know how to load new pages into a Silverlight website.  Just for him, and because I think many of you have the same problem, I made a video tutorial where I show you how to:

1. Create a Content Holder UserControl;

2. Make two pages called HomePage and AboutUs

3. In App.xaml load ContentHolder instead of MainPage.xaml (the default action of a SL app)

4. Create a SwitchContent method that takes a UserControl as its argument; this method will load the requested page into the ContentHolder control

5. Make a Nav UserControl that has Buttons that load the associated page into the ContentHolder UserControl

6. Add the Nav control to each page

7. Create EventHandlers in the Nav.xaml.cs to load the associated content into the ContentHolder User

8. VIOLA! You will then have a Silverlight paging system that loads any page, on Demand into your MainPage.xaml!

Enjoy!

Working Example: http://windowspresentationfoundation.com/Tutorials/PagingSystem/Site/ (from the source code below)

My Project: http://tinyurl.com/27ofjwd

Video: http://tinyurl.com/27es9lv (Running Time: 17 Minutes)

Hi Victor
I’m very new to blend and I need a very basic code to make that button call an hyperlink to create live buttons in blend to be used in Expressions 3 to call the other pages in my site, I try the help in blend (the sample code there only give an error at time to run it) and look in your book Expression blend 3 but I can’t find the answer to to this simple task. Can you help?

New Silverlight Video Tutorial: How to Save an Image in Your Silverlight Applications

Hello All,

I get asked this question probably more than most and that is, how can I save an image to my hard drive from my Silverlight applications.  Well the answer is, I use Joe Stegman’s PngEncoder.cs to do the job.  It works so well and you can implement it in about 5 minutes.  Don’t believe me?  Watch this 7 minute video where I show you how to create a new Silverlight application, add an image to it, add two class files and one method and then save an image right from my Silverlight application.

Video: http://tinyurl.com/34b6lqp

Source Files:

The SaveTheImage Method (text file) http://tinyurl.com/34xu9ms

My PhotoboothApp http://tinyurl.com/3957u55

The PngEncoder.cs file: http://tinyurl.com/28u26mq

The EditiableImage.cs file: http://tinyurl.com/2uuhvrn

 

New Silverlight Video Tutorial: How to Create Gradients

Hello All!

In doing a lot of speaking engagements I get asked lots of Silverlight questions.  From these questions I have noticed a pattern emerging whereby many people have a terrible time working with gradients.  Of course the real trick, as is with anything, is practice but before one can start to practice they have to understand the tools of the trade.  So, in this short, 10 minute video I show you how to duplicate a somewhat complex gradient while along the way explaining the tools required to do the job; namely, the Gradient tool, the color palette and the Gradient Eyedropper tools. 

With this video and a little practice you too will be able to duplicate the most complex of gradients all on your own!

So, roll up your sleeves, fire up Expression Blend and Get To It!

http://www.windowspresentationfoundation.com/Tutorials/Gradients/

New Silverlight Video Tutorial: The Blend IDE – Part 5 – Creating Storyboard in Blend’s Animation Workspace

 

Hello All,

In this, Part 5 of the Learn Blend IDE series I show you how to create Storyboard animations with Blend’s Animation Workspace.  Learn about the Animation Timeline panel, how to create, duplicate, rename, delete and reverse Storyboards.  Learn how to zoom in on the Timeline and how to change the frame rate snap resolution.  Even learn about animation Easing functions to give your animation simulated physics.  Finally learn how to use the ControlStoryboardAction Behavior to control your Storyboards.

Video: http://windowspresentationfoundation.com/Tutorials/BlendIDE/Part5/

New Silverlight Video Tutorial: How to import XML and turn it into native Silverlight Objects

In this  video tutorial I show you how to:

1. Create a new Silverlight application and website

2. Create a new XML file

3. Read the XML file into the application

4. Create a Sigleton DataFactory

5. Deserialize the XML into Native Silverlight Objects.

Video: http://tinyurl.com/ya5f29r

Source Code:  http://tinyurl.com/ybzj7pk

Enjoy!  Victor Gaudioso

Learn Flash ActionScript for Free

My pal R Blank of the Rich Media Institute is trying to get people into Flash so he is holding a couple of Flash courses, FREE!  Wow! If you ever wanted to learn Flash this is your chance.  I will speak with R and maybe offer a similar Free course in Silverlight.  Stay tuned for that but in the meantime check the date and times for the Free Flash courses:

Free through February 28th
Introduction to ActionScript Development with FDT
http://www.richmediainstitute.com/catalog.php?item=70
30 minute introduction to the world’s most powerful ActionScript editor with Alan Klement
Free through February 15th
Comprehensive ActionScript 3
http://www.richmediainstitute.com/catalog.php?item=72
Over 9 hours of AS3 training with R Blank

You can email R directly at — r at richmediainstitute dot com

Good luck with your new career as a Flash developer!

Victor

Join me at the Super Happy Dev House Event Jan. 16, Mountainview CA

Hello All,

The Super Happy Dev House is: 

 ”The premier monthly hackathon event that combines serious and not-so-serious productivity with a fun and exciting party atmosphere.

 SuperHappyDevHouse is a non-exclusive event intended for creative and curious people interested in technology. We’re about knowledge sharing, technology exploration, and ad-hoc collaboration. Come to have fun, build things, learn things, and meet new people. It’s called hacker culture, and we’re here to encourage it.”

I will be presenting on the new features of Silverlight 4! Click HERE to find out more!

See you there!

Great Presentation at SoCalDotNET Usergroup in Buena Park

Hello All,

Lastnight I had the great privillege of presenting Silverlight 4 to the SoCalDotNET Usergroup in Buena Park.  I showed some cool new features of Silverlight 4 as well as a quick demo of Sketchflow Prototyping.  They were a great, smart crowd. 

You can view the video Here: http://tinyurl.com/yj8yrnb

I will be posting the applications I made shortly. 

Victor

How to Create a Silverlight Color Resource in a ResourceDictionary

Some have complained that page 33 of my book, Foundation Blend 3 with Silverlight tells how to make a Color Resource in a Resource Dictionary.  However, because of reasons that are not completely clear to me what I show is not possible to do in Blend for a Silverlight application.  For that reason I have written a short tutorial on how to do just that.  You can read it below with no images or download the Word version here: http://tinyurl.com/y9zcp5k

NOTE: The Word version has the images. 

Create the Rectangle

1. From the toolbar select the Rectangle tool and draw a Rectangle on the Artboard  like I have done in Figure 1.

 Figure 1. Draw a Rectangle

2. On the  Properties panel select Gradient Brush for the Fill property like I am about to do in Figure 2.  

 Figure 2. Give the Rectangle a Gradient Fill.

Creating the Color Resource

 1. Leave the default Black to White Gradient and click advanced icon next to the Fill property (it looks like a little white square (see Figure 3).

 Figure  3. Click the advanced icon next to the Fill property.

2. In the Advanced menu click Convert to New Resource.

 3. When the Create Color Resource dialog box appears give the Resource a Name of BlackToWhiteGradient (don’t hit OK yet) like I am doing in Figure  4.

Figure  4. Name the new resource BlackToWhiteGradient.

4. Now click the New ResourceDictionary button like am doing in Figure 5.

 Figure  5. Click the New button.

5. When the New Item dialog appears make sure that Resource Dictionary is selected .  Leave the default name and click OK like I am doing in Figure  6.

 Figure 6. The New Item dialog box.

7. Once you click OK you will again see the Create Color Resource dialog box but now the Resource Dictionary option is enabled and Checked.  You can now Click OK to create the new ResourceDictionary and add the BlackToWhite color resource to it like I am doing in Figure 7.

Figure 7. You now can click OK to create a new ResourceDictionary with the BlackToWhiteGradient in it.

 Using the new BlackToWhite Color Resource

Now that you have made a new Color Resource in a new ResourceDictionary it is time to show you how to make use of it.  Let’s do that now.

  1. Select the Rectangle on the toolbar
  2. Draw a new Rectangle out on the Artboard.
  3. Your new Rectangle might have a default black and white gradient because it was the last color we used.  So to change it select the Fill property for the new Rectangle and click Solid color brush like I am doing in Figure 8.

Figure 8. Change the new Rectangle’s Fill to a Solid Color Brush.

4. Now to change the Fill to the Resource click the Advanced icon next to the Fill Property

5. Click Local Resource > BlackToWhiteGradient like I am doing in Figure  9.

 Figure  9. Used the Advanced icon to change the fill to use the BlackToWhiteGradient color resource from the ResourceDictionary that we created earlier.

Summary

In this short exercise we created a Rectangle with a black/white gradient Fill.  We then turned that Fill into a Color Resource inside of a ResourceDictionary that we created.  We then created a new Rectangle and reset the Fill to a Solid Color Brush. Finally we set the Fill of the new Rectangle to the BlackToWhiteGradient we created earlier.   

 

The Los Angeles Silverlight Usergroup December Meeting was Awesome

Hello All,

We had a great LASLUG meeting on the 18th of December.  Tim Mustain, CTO of SpeakTECH showed us a Silverlight solution for digital Daileys (dailies are a film print, video tape, or now digital format of the footage shot during the day of production) that they built for one of the major movie studios.  Not only did Tim show us how it worked from a user’s perspective but he was kind enough to delve into the actual code!  I am pretty sure that everyone there, including myself learned a thing or two if not much more than that.  I myself probably learned about 5 new things about Silverlight that I hadn’t known prior to Tim’s talk.  That is a pretty tall order for someone who has written books on the subject.

I then proceeded to show off some cool new features of Silverlight 4.  On stage I created the following Silverlight apps:

1) I created a Webcam application using the new Webcam API.  Source Code: http://tinyurl.com/ybdo2s3

2. I created an Out Of the Browser (OOB) application with Elevated Trust using the COM Interop API that started up an instance of MSFT Word and created a new Document that contained the text that we typed into the TextBox in the Silverlight application. Source Code: http://tinyurl.com/yd9gu2b

3. I then created an app using the new DROP API that allowed you to drop and image from your hard drive onto the app that the app would then display. Source Code: http://tinyurl.com/y9l36td

Unfortunately I forgot to record Tim’s presentation and I am kicking myself for that.  But I did remember to record my presentation (I swear it was a mistake!)

You can see my presentation here: http://tinyurl.com/ydmcxek

You can download the source code for the projects I created during my presentation from the URLs above next to the description of the apps.

Thanks to everyone for coming and to Jason Campbell of MSFT for providing the space, the gourmet pizza and getting Tim from SpeakTECH to present!

New Silverlight 4 Video Tutorial: How to use the COM API to Open Word in an Out of the Browser SL4 App

Hello All!

Finally my first Silverlight 4 video tutorial is here. I took a great video tutorial from Jesse Liberty on how to use this API to open Excel and create a new Workbook.  So, I thought it would be cool to show you how to use the COM API to open MSFT Word and create a new Document and add your own text to it.  So, that is what I did.  Please enjoy and leave me a comment to let me know what you thought of it!

Victor

Video URL :http://tw0.us/5NL
The Source Files:  http://tw0.us/5NM

My Silverlight 4 Presentation at LA C# Usergroup in Manhatten Beach, CA (12.01.09)

Hello All!

The LA C# Usergroup in Manhattan Beach was kind enough to invite me to present on Silverlight 4 last night and it went very well.  The members were very into everything .NET and very interested to hear what Silverlight had to offer.  As always I talked about Silverlight and then proceeded to code some cool samples for them right on stage. 

I made three applications while presenting: a SL4 Drop application, a simple physics enabled Asteroids game, and a Webcam application.  I also recorded the entire two hour session.  So, below you can download the source code for the demos I made, view the running demos and even watch the presentation.

Enjoy and thank you very much LA C# Usergroup, I had a BLAST!

Presentation Video | 1st half: http://tw0.us/5Kz

Presentation Video | 2nd half: http://tw0.us/5fG

Webcam App:
Project Source Code: http://tw0.us/5JA
Running Application:  http://tw0.us/5Ky

  
DropDemo Source Code: http://tw0.us/5JB

Asteroids:
Project Source Code: http://tw0.us/5JC
Running Application: http://tw0.us/5Kx

Blog Page for LA C# Presentation:

My Blog: www.victorgaudioso.wordpress.com
Blog of all of my Video Tutorials: http://tw0.us/4cV

New Silverlight Video Tutorial: How to make a Timer Using the DispatcherTimer Class

In this short video I show you how to create a Silverlight Timer using the DispatcherTimer class. I then show you a real world example where you would use a timer in Silverlight.

Video: http://tw0.us/4o6

Project Download: http://tw0.us/4mr

Follow

Get every new post delivered to your Inbox.