Posts Tagged ‘ blend 3 ’

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:
https://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 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/

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.   

 

New Silverlight 4 Video Tutorial: Making a Cool Webcam Application that can Save Images

Hello All,

In this new Silverlight Video Tutorial I show you how to use the new Webcam API to create a very cool Webcam application that allows you run your webcam, take snapshot images, place funny objects such as hats over your face, take snapshots and then save the image to you hard drive.  Kids get a Blast out of these kids of applications.  Below is all of the information you will need.  Enjoy!

Video Tutorial: http://tw0.us/5R9
My Sample Project: http://tw0.us/5NR
Project Download: http://tw0.us/5RA
Encoding Files (must be added to your project to save images): http://tw0.us/5RB
SaveTheImage.txt File: http://tw0.us/5Rh

A Rough Draft of my New Silverlight 4 Book (due out in 2010)

Apress/Friends of Ed has engaged me to write a follow up to my last book Foundation Blend 3 with Silverlight .  This new book will have all of the information from my last book as it is still relevant for Silverlight 4 but will also include the many wonderful new features of Silvelright 4.  I have created a rough draft for the Table of Contents for the new book and have decided to share it with you.  Please feel free to help me out and provide me with comments so that I can provide you with the best product to help those that are interested learn Silveright.

Table of Contents (working name: Foundation: Silverlight 4)

  1. Setting up the development environment (Blend 3 probably Blend 4 when released, Visual Studio 2010, Silverlight 4 Tools, Silverlight 4 Runtime)
  2. The Blend 3 (probably 4) Integrated Development Environment: The Toolbar, panels, artboard, workspace modes (Animation v Design)
  3. C#, XAML, and Object Oriented Programming
  4. Controls: Including the new Silverlight 4 Controls: ViewBox, RichTextArea ,  FlowDirection Property, the Improved DataGrid
  5. Timed Storyboards: Creating a Newton Cradle application
  6. Using the VSM and Blend 3’s State panel to create a Silverlight Media Player
  7. Behaviors: Included behaviors and custom behaviors: Using the FarseerPhysics engine to create a simple Silverlight 4 video game
  8. The Silverlight MediaElement: Create a video player application with Behaviors, XML serialization, and the new Silverlight 4 Drop property
  9. Using RIA services with the Silverlight 4 Network Authentication
  10. Events and EventHandlers including SL 4 right-click and MouseWheel event handling
  11. Classes and Interfaces
  12. ControlTemplates, Styles and Custom UserControls
  13. Writing a Custom Silverlight 4 Content Panel
  14. Writing a Silverlight 4 Out of the Browser application with Elevated Trust and the new Silverlight 4 COM API
  15. DataBinding: What is it? Improvements in Silverlight 4: DependencyObject Binding, StringFormat, TargetNullValue, FallbackValue
  16. Silverlight 4 Managed Extensibility Framework (MEF)
  17. Building a Sketchflow Prototype
  18.  The Silverlight 4 Printing and Open Save APIs: Create an Image Printer application
  19. Creating a Photobooth application with the Silverlight 4 Microphone and Webcam API
  20. Miscellaneous Silverlight 4 Features:  The Clipboard API,  Command support for Buttons,  HTML support, the Notification API, TextTrimming, Full Keyboard access in Full Screen,  Offline DRM support, Data Validation, ,Fluid user interface support, Implicit theming for Controls, Google Chrome support

 

 

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

New Codeplex Silvelright Project! Silverlight StoryboardHelper

Hello All!

I have finally done it; that is, add a project to codeplex! 

It consists of a Silverlight project (called StoryboarHelperProject) with a class called StoryboardHelper.cs.   Currently it has two public static methods called FadeInFrameworkElement and FadeIOutFrameworkElement. They allow you to specify a FrameworkElement to be faded in or out over a specified duration after a specified delay time.

It is my hope that people will add to the StoryboardHelper class to make this the most comprehensive Silverlight Storyboard helper class around!

Please take a look and start to contribute to your Silvelright Community today!

URL: http://slstoryboardhelper.codeplex.com/

Victor

New Silverlight Video Tutorial: How to use the Silverlight Toolkit’s WrapPanel to Create a Three Column ListBox

In this short six minute tutorial I show you how to use the Silverlight Toolkit’s WrapPanel to create a Silverlight ListBox that displays three colums of data. 

This feat is difficult in WPF but possible because of the WrapPanel.  Silverlight, however does not have a WrapPanel, that is until the Silverlight Toolkit came along! I show you how to replace the Silvelright ItemsPanel with the Toolkit’s WrapPanel and then tweak your ListBox so that it displays three colums of Data (ListBoxItems).

Video URL:  http://tw0.us/4oH

My Project URL: http://tw0.us/4aS

Enjoy

New Video Tutorial: How to Create a Custom Silverlight Slider

A reader emailed me and asked me how to create a custom Slider in Silverlight.  I told him how but thought that you might want to know how to do it as well.  So I created this very short video tutorial that shows you how. 

http://tw0.us/4oF

Come to the Los Angeles Silverlight User Group Kick Off Event!

Hello Everyone!

If you are in the Los Angeles area and are a Silverlight or WPF developer then you need to come to our kick off event!  If you are someone who is just wanting to learn Silverlight then this event is for you too! 

Rick Barraza and I will both be presenting.  There will be food, discussion, demos, prizes and raffles.  Make sure and register today at www.laslug.com

See You There!

New Video Tutorial: How to Make a Silverlight Visual Tree Helper to help you find FrameworkElements in the Visual Tree

In this video I first show you how to cycle through all FrameworkElements in the main Grid.  I then show you how to make a new class called  “>VTreeHelper with a Static method that allows you to loop trough the main Grid and look for a FrameworkElement by name.  I show you how to use this to enter the name of a FrameworkElement and then set its Visibility to Collapsed.

This tutorial is for developers and not designers.

Enjoy:

URL:  http://tw0.us/46A

Project: http://tw0.us/46B

My Speaking Schedule from Oct. to Dec. 2009

Greetings All!

Below is a list of Silverlight Presenation engagements I have booked for Oct., Nov., and Dec. 2009.  If you are in Southern California I urge you to stop by and check it out; I am going to show off some awesome features of Silverlight and Blend.

First Event: LA Silverlight User Group:

Date: Oct. 28, 2009

Time: 700pm – 900pm

Address:
Microsoft LA    
333 South Grand Ave, Suite 3300
Los Angeles, CA 90071

Presenters:
Victor Gaudioso
Rick Barraza

My Presentation:
1. Working with Sample Data in Blend 3:
     a. Blend 3’s Data panel;
     b. Creating Sample Data in Blend;
          A. Showing Sample Data in a ListBox using List Mode;
          B. Editing the ListBox DataTemplate to change the way the Sample Data is displayed;
          C. Showing Sample Data in a TextBlock using Details Mode;
          D. Importing XML and creating a Data Source;
     c. Creating a Data Object in Visual Studio;
     d. Creating an Observable Collection of Data Objects in Visual Studio;
     e. Creating a DataSource from the Observable Collection in Blend;
     f. Binding the DataSource to a ListBox in Blend

Second Event: LA Dot Net, the Premiere Los Angeles .NET Developers Group

Date: Nov. 2, 2009

Time: 700pm – 900pm

Address: UCLA

Presenters: Victor Gaudioso

My Presentation: To Be Determined (TBD)

Third Event: LA C# (www.lacsharp.org)

Date: Dec. 1, 2009

Address:
Manhattan Beach

Time: 600 pm – 8:30 pm

Presenters: Victor Gaudioso

My Presentation: TBD

Fourth Event: SocalDotNet (www.socaldotnet.org) 

Date: Dec. 2, 2009

Time: 600 – 8:30 pm

Address: Buena Park

Presenters: Victor Gaudioso

My Presentation: TBD

For more information email me at wpfauthor at gmail dot com.

Victor

Click HERE for my Bio

New Silverlight Video Tutorial: Visibility Binding – Data Binding an Object’s Visibility to a Boolean Property

Hello All,

Is this tutorial I show you how you can use DataBinding to bind an object’s Visiblity to a boolean property using a VisibilityConverter and a DependencyProptery. 

You can find the code for the DependencyProperty and VisibilityConverter in this text file (the video will show you how/when to use it) Here:

You can download my zipped application Here:

Finally, you can watch the video Here:

Enjoy!

Victor

New Silverlight Video Tutorial: How to Create a Complete Sketchflow Prototype Application

Hello All!

In this video tutorial I show you how to create a complete Silveright Sketchflow Prototype complete with Navigation Screens, Component Screens, Interactive Buttons, Visual States,  adding and saving comments, loading comments, and finally the creation of Word documentation (Wireframes).  If you have ever wanted to know everything about Sketchflow this is the video for you. 

So if you have been wondering what all the hype is surrounding this new feature of  Blend 3 then fire up your copy of Blend and watch this video.

Enjoy! Victor

URL: http://is.gd/3Ztog

PS: This video was created with Expression Encoder3 Screen Capture

New Video Tutorial: How to make a Silverlight Glassy Button for Designers

In my recent video tutorial on how to create a custom Silverlight Button Control I showed how to make a set of Rectangles that look like a glassy button.  I then showed how to turn it into an actual Silverlight Button.  I got an email from a reader/friend named Partick telling me that the information was very useful but the button itself was not very convincing as a glassy button.  He suggested that I make a tutorial that was aimed at designers showing them how to re-create convincing glassy buttons like ones shown here: http://www.netdenizen.com/buttonmill/recent.php

I told him that would be a good idea and asked him which button he suggest I show how to re-create.  He told me that he liked the round button (the third one from the top on the URL above).

I went ahead and made the video for him.  Now, because of time contraints I could not make the custom Silverlight Button look EXACTLY like the one he showed me but I could show him, and others, the tools by which they could re-create these and other such buttons that are 100% acurate, design-wise of course.

Please keep in mind that this video tutorial is just for designers.  Enjoy!

URL: http://is.gd/3XzGB

Victor Gaudioso

Video Tutorial: Creating a Custom Silverlight Button

Hello All,

In this video tutorial I show you how to use a series of Rectangles with gradients to make a blue glassy custom Button in Silverlight.  Once I show you how to create the custom Button in Blend I show you how to switch over to Visual Studio and create an event handler for it.

URL: http://is.gd/3X1eZ

Had a great presentation at Flashapaloozastock IV on Silverlight Sketchflow Prototyping

I just finished my presentation on Silverlight Sketchflow Prototyping at Los Angeles FlashapaloozaStock IV.  It went very well.  I made a screencast of the presentation.  The audio was a little messed up for the first few minutes.  The crowd was still very interested and seemed to enjoy the presentation.  You can see the presentation screencast here: http://windowspresentationfoundation.com/SketchflowDemo_FlashapaloozastockIV.wmv

Thanks to R Blank of the Rich Media Institute for the chance to present at Flashapaloozastock IV!

Flashapaloozastock 10.03.09!

It is that time again, the most fun Flash/RIA event in Los Angeles.  Great speakers, potential employers, amazing demos and a great free party afterwards.   Check it out: http://www.fitc.ca/events/about/?event=95

Also, yours truly will be presenting on Sketchflow Prototyping at 12:45.  Here is an outline of my presentation:

Sketchflow Prototyping:

1. Allows client to experiment with a dynamic, designless User Interface;
2. Allows developer to convey design intent and intended interaction;
3. Allow for delivering compelling proposals to clients quickly and cost effectively;
4. Allows for quick and easy feedback from clients;
5. Allows for a great starting point for wireframe documentation.
6. Demo

New Silverlight Video Tutorial: How to Create a Storyboard Helper Class

Hello All!

In this video tutorial I show you how to create a Storyboad Helper class.  This class has two static methods, FadeInFe and FadeOutFe (Fe stands for FrameworkElement).  These allow you to call these methods and pass in Any FrameworkElement and specify a duration (how long in will take to fade in or out the FrameworkElement) as well as a delay (how long it takes before the Storyboard will begin).  The methods return you a Storyboard and then all you have to do is tell the newly created Storyboard to begin.  This helper class is a must for anyone who wants to do a lot of Storyboard creation in code-behind!

Enjoy!

Video URL: http://tw0.us/4oD

Project URL: http://is.gd/3mi7M

New Silverlight Video Tutorial: Importing Photoshop Files into Expression Blend 3

Hello All!

In this new video tutorial I show you how you can easily import Photoshop PSD files into Expression Blend 3.  I show you how you can import the entire flattened image,  called a Compatibility Image or you can import only certain Photoshop Layers.  Enjoy:

http://tw0.us/4oE

If you would like to be alerted of new video tutorials email me at wpfauthor at gmail dot com with the subject line “Silverlight Email List”

You can also follow me on Twitter to hear about new video tutorials.  Just follow victorgaudioso

All of my Video Tutorials in One Place

Hell All!

I realized that I have all of my video tutorial links spread out across a bunch of different posts.  So I decided to compile a list of URLs for all of my video tutorials and blog it.  So, here is the Silverlight video tutorial list:

How to create Custom RoutedEvents in Silverlight (Thanks to Andrew Whiddett and IdentityMine for this One): http://tw0.us/4cU

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

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

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

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

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

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

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

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

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

Creating Morphing Vector Path Storyboards in Blend
http://is.gd/2R1br

Re-Creating a Metallic Logo in Vector using Blend 3
http://is.gd/2ONQR
 
Creating Timed Storyboard Animations
http://is.gd/2M7m9
 
Using TemplateBinding to Replace a ContentPresenter in a Silverlight Button
http://is.gd/2GDRy
 
Working with Data in BLend 3
http://is.gd/3ak0Q
 
Silverlight 3 Behavior Tutorial Video
http://is.gd/3ajTP
 
This Tutorial will teach you how to create a Card Flipping Animation!
http://is.gd/3ajpa 

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

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

Enjoy! Victor