Sunday, February 12, 2012

New Silverlight Video Tutorial: Importing Photoshop Files into Expression Blend


Hello All!
In this new video tutorial I show you how you can easily import Photoshop PSD files into Expression Blend.  I show you how you can import the entire flattened image,  called aCompatibility Image or you can import only certain Photoshop Layers.  Enjoy:
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 victorgaudio

1 Comment for this entry

2 Trackbacks / Pingbacks for this entry

so

New Silverlight Video Tutorial: Make a Sliding Panel ALL in Blend (NO Code-Behind) with ONE Toggle Button


Hello All,
In my last two videos I showed how to make a sliding panel all in Blend, but I had to use two Buttons, one that would slide the panel in and one that would slide it out. In the Storyboards for SlideIn & SlideOut I just Collapsed the respective Button. I couldn’t figure out how to do it with only one Button.
So in my next video I showed how to slide the panel in/out with only one Button but had to switch over to Visual Studio and create a property called something like PanelIsShowing and then use that to run the appropriate Storyboard (Slide in or Slide out).
Then someone gave me the idea to use a Toggle Button. And then another reader asked that I make a new Video Tutorial showing how to use ONE (Toggle) Button and do it all in Blend.
So, that is exactly what I did. I:
1. Created a Rectangle for my sliding panel (and put sample data (ListBox) so it would havesome content;
2. Created an Ellipse and turned it into a ToggleButton;
3. Edited the built in Checked and Unchecked Visual States of the newly created Toggle Button (made the arrow “>” change directions depending on if it was Checked or Unchecked.
4. Created ShowPanel and HidePanel Storyboards;
5. Used two ControlStoryboard Behaviors and added them to the ToggleButton;
6. On Checked I ran the HidePanel Storyboard;
7. On Unchecked I ran the ShowPanel Storyboard (I had to play with these options to get it exactly right but I got it working perfectly);
So there you have it a way to make a Sliding Panel using one ToggleButton ALL in Blend, using a custom ToggleButton with custom Checked and Unchecked Visual States, Storyboards and ControlStoryboard Actions.
The video is about 20 minutes but most of that was me trying to figure out what Storyboard needed to be hooked up to the Checked vs Unchecked States. Watching me make mistakes will help you to avoid them yourself, or so I hope :)
So enjoy!
Victor Gaudioso
Founder, President, Organizer
Brought to you by the Los Angeles Silverlight Usergroup (LASLUGwww.laslug.com

2 Trackbacks / Pingbacks for this entry


Friday, February 10, 2012

A Question to you the reader…Need your feedback here to decide if I should do a Tutorial


Hello Loyal Readers!
I started doing this all in Blend with no code-behind to show/hide panels in Silverlight but I used two identical Buttons, one to show the panel and one to hide it and made them either Visible or Collapsed depending on what state the panel was currently in.
My Good friend Todd Knudsen (Twitter: DataArtist) asked me if I could do it with just one Button.
I tried by turning the StoryBoards into Visual States, creating a DataStore and using Conditions. But as soon as I used the ChangeDataStoreValue Behavior (for a bool property named IsPanelShowing) it seemed to step on the toes of my conditionals and thus making it not work all together.
So my idea was to make a code-behind (C#) property whereby I kept the state of the panel in a Boolean and ran the correct StoryBoard based upon that. It worked perfectly!
A reader left a comment and said “why not just use a ToggoleButton”? Great idea! Why didn’t I think of it?!
So I think that will be my next tutorial maybe “How to use ONE Button and slide a panel in or out depending on its current state using the Visual State Manager, a DataStore, a Conditional and a ToggleButtton All in Blend!”
Sound like a good tutorial or are all of you done with sliding panels?
Let me know in the comments and your feedback will determine if I do the tutorial or not.
Thanks, Victor Gaudioso
PS: When you give your opinion please try and suggest a tutorial that has been giving your grief…I may just take it on and even mention you as the tutorial idea contributor. T
hank You All! Victor Gaudioso
AND, you can find my 70+ Silverlight/WPF/Windows Phone 7 step by step Video Tutorials here:http://wp.me/pWN5M-bu
Victor

7 Comments for this entry


  • teoman

    Hello Victor,
    I could not watch all your tutorials, but the videos I watched was very very helpful and clear.
    Thanks for all that.
    If we come back your question, it would be great to see of all combinations of visual state manager, DataStore, togglebuttton in one tutorial.
    Thanks for your perfect help, keep going!

  • Victor

    I think that is a splendid idea and I will do just that Teoman!
    Victor

  • Victor

    Teoman, great idea and I did just that for you (and all other readers) This video shows how to make a Sliding Panel using a SINGLE ToggleButton with NO Code-Behind and ALL in Blend. Enjoy and remember to keep giving me ideas for new Video Tutorials (that goes for ALL Readers!) URL to new Post: http://wp.me/pWN5M-fy

  • Victor

    By the way, I happen to use Storyboards because in my opinion they give you more control. And then I used a ControlStoryboard Behavior but I just as easily could have used Visual States and a ControlVisualState Behavior. As for the DataStore, it is not needed as the ToggleButton, I fire one Storyboard on the Checked State of the ToggleButton and another Storyboard on the Unchecked State. So, a DataStore with Conditions are not needed. Make sense?
    Victor

  • DEBAL

    Hi Victor
    I need a video tutorial on Silver light Tree View Control . My requirement is very simple . I want to totally do this work in Expression Blend 4 (no code).
    Create a new project in blend and drag and drop a treeview control in MainPage.xamldesign page .
    Now I need a style for treeview , so that the connecting lines should be see all tree nodes, I have sent a mail to you in details at wpfauthor@gmail.com
    pl reply me , PL

  • Victor

    email me with more details at wpfauthor at gmail dot com. Victor

  • DEBAL

    Thanks a lots
    for your reply , I have sent a mail at wpfauthor@gmail.com, pl reply me . I just want to see connecting lines between tree node using blend4. pl help me Sir
originally posted http://www.windowspresentationfoundation.com/?p=960#comments

Thursday, February 9, 2012

Win a Free Month Pass to PluaralSight Online Training Courses from the MSFT Stack – Contest Closed


UPDATE: Hello LASLUGers! Thank you all for you entries but effective immediately the contest has been canceled. But not to worry, I will think of other ways to reward you for your efforts. As for the tutorials I made them all easy and with step-by-step instructions with video.
So, if you are serious about your desire to learn Silverlight/ WPF / Windows Phone 7 then you are in the right place.
Thankfully, I been given the God given talent to take any subject, no matter how difficult the subject matter may seem, and make it understandable so much so that I can have my 16 year old daughter (Brianna), who has no desire to be a programmer whatsoever, to follow along the video tutorial and complete it perfectly. She is very smart though but if you are reading this than I think you must be as well.
On a side note, soon I’ll be implementing a rating system to all 70+ video tutorials in place whereby I rate the tutorial between 1 and 10; 10 being the most difficult and 1 being simple enough that my preschool son (Luke) would he able to complete it (I don’t know that his attention span could handle it but if it were he would be able to complete it).
So, if you do want to learn Silverlight (that uses XAML which will be included in the Windows 8 SDK (WinRT)) then please pick a tutorial and give it a go as what you learn here will be transferable to developing applications for Win8.
Once you see how easy your chosen tutorial is then you can pick another
If you are so inclined send me a URL to your published work or just zip up your entire solution and send it to me so I can take a look. I ask this because I love to see what my “students” have created. Some even get a little over zealous and make the app do things that the tutorial didn’t ask of them; that is when I get really excited as I know they (you) really understand what you are doing and can even go above and beyond what the tutorial requested of you!
Good luck and I cannot wait to see your completed work. If you choose to zip up the Solution then email it to me at my personal email address: wpfauthor at gmail dot com.
Victor Gaudioso
Hello All,
PluralSight, which does online training courses of MSFT technologies was kind enough to donate me a bunch of one month free trial activation codes. All you need to do to win is follow ANY of my Silverlight Video Tutorials, show it to me and you get the prize. You can find all 75-or so Video Tutorials here: http://www.windowspresentationfoundation.com/?p=712 Some are very short and most are very easy. So, pick a short easy one and complete it and email me at my personal address wpfauthor at gmail dot com and I will email you back with the code. Good luck! Victor

3 Comments for this entry

  • Cindy K. 
    I am having a hard time viewing at least one of the videos. It tells me to install Silverlight, but when I click on that and let it try, it tells me I already have that version. I think the Silverlight version detection code is not detecting that I have the latest and should be fine to run the videos. What should I do?
  • Victor 
    Hello Cindy,
    If I were you I would go to the control panel (assuming you have a Windows-based PC) and uninstall anything having to do with Silverlight (excluding Visual Studio 2010 – leave that alone). Then go to a page that has Silverlight content (www.silverlight.net) and click on the Showcase button. It will eventually bring you to a site that has a very cool SL application. Then it should install the latest and greatest SL runtime. Do that and you should be good to go. Let me know if you have any problems after you try this. Thanks, Victor
    Victor Gaudioso
    The Los Angeles Silverlight Usergroup (LASLUG)
    http://www.laslug.com
    Founder, President, Organizer
    818.455.1994
  • Victor 
    Did you try my suggestion? Did it work? Victor

Sunday, February 5, 2012

All of my Silverlight/WP7 Video Tutorials in One Place (Updated 02.11.11)


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:
75. Microsoft Starter Kit Video Series: Creating a Silverlight Color Swatch Application  – a 10 part video series complete with sample project and assets (custom Behaviors, custom Panels, etc.): http://wp.me/pWN5M-fX
74. New Silverlight Video Tutorial: How to use a ToggleButton to create a Sliding Panel, ALL in Blend with ONLY ONE Button: http://wp.me/pWN5M-fy
73. New Silverlight Video Tutorial: How to make sliding panels that only uses one button (uses Code-Behind): http://wp.me/pWN5M-eN
72. New Silverlight Video Tutorial: How to make sliding panels ALL in Blend:http://tinyurl.com/6on9e8o
71. Windows Phone 7 (Mango): Making use of PageOrientations (Portrait, Landscape and PortraitOrLandscape):  http://tinyurl.com/44lvduo
70. How to create a Rotating Banner: http://wp.me/pWN5M-dG (30 min). Demo:http://tinyurl.com/3ql6e8o
69. How to create a SL4 Fake Windowmthat can be dragged, expanded and collapsed:http://wp.me/pWN5M-dC
68. New Silverlight 5 Video Tutorial: How to create Implicit DataTemplates:http://www.windowspresentationfoundation.com/?p=820
67. How to use the FluidMove Behavior: http://wp.me/pWN5M-d2
66. Use Blend’s Sketchflow Animation panel to create a Sketchflow animation to show users how to use your application: http://wp.me/pWN5M-cP
65. Use the LocalMessageSender/Receiver to send messages accross UserControls or even across Silverlight applications: http://wp.me/pWN5M-cC
64. Create a Data Store in Blend w Conditional Behaviors (GotoStateAction/SetDataStoreValueAction) & VSM: http://wp.me/pWN5M-ct
63. Learn how to use the Windows Phone 7 Turnstyle Control from Codeplex (13 min):http://wp.me/pWN5M-ca
62. How to make a Multi-Touch Windows Phone  7 Silverilght 4 application (6 min):http://wp.me/pWN5M-c5
61. How to build a Windows Phone 7 browser page with a WebBrowser control (if you have taken the 5 part tutorial consider this part 6):
http://wp.me/pWN5M-bU
60. Part 5: how to use the CaptureCameraTask to take an image from a menyItem btn:
http://wp.me/pWN5M-bO (Source Code: http://tinyurl.com/36lyfs7)
59. Part 4: Compose and send an email from a MenuItem: http://wp.me/pWN5M-bI
58. Part 3: Make a Phone call from a MenuItem: http://wp.me/pWN5M-bD
57: Part 2: Add new pages when the ApplicationBarIconButtons are clicked:http://wp.me/pWN5M-bp
56. Part 1: How to build a Windows Phone 7 (WP7) appliaction with an ApplicationBar complete with IconButtons and MenuItems: http://tinyurl.com/352fm4u
55. How to use a Behavior to fire methods from objects in Styles: http://tinyurl.com/33e444h
54. How to style a Silverlight HyperLink Button: http://tinyurl.com/365ubrv
53. How to create a ListBox with a static Image background: http://wp.me/pWN5M-aP
52. How to stream video to iPhone/Pad devices using IIS7 and HTML5:http://www.windowspresentationfoundation.com/?p=653
51. Use Silverlight to create Windows Phone 7 Series applications: http://wp.me/pWN5M-a0
50. How to do Hit Detection (HitTesting) in Silverlight based on Andy Beaulieu’s technique:http://tinyurl.com/2bgbp7s
49. How to add multiple BitmapEffects to one object in Silverlight: Post
48. How to build a Slider with a ToolTip that follows the thumb button and displays the value of the Slider: Post
47. How to build your very own TutorialCam like I use in my video tutorials! Post
46. Fire one of two Visual States based on the value of a Boolean variable: Post
45. How to add Fast Forward to the Silverlight MediaElement: Post
44. Create a custom ToolTip with a Delay: Post
43. Create a Silverlight Paging Systems to Load Pages on the Fly: Post
42. Create a Slide In/Out Navigation Panel: Post
41. How to use Joe Stegman’s PngEncoder to save an image from your Silverlight application:Post
40. How to create complex gradients: Post
39. My Blend IDE series – Part 1 – the Blend Toolbar: Blend1
38. My Learn Blend IDE series Part 2 – Layout Controls and User Input Controls: Blend2
37. My Learn Blend IDE series Part 3 – The Properties, Projects and Data panels: Blend3
36. My Learn Blend IDE series Part 4 – The Objects & Timeline and States panels: Blend4
35. My Learn Blend IDE series Part 5 – Blend’s Animation Workspace – Everything you need to know to create Storyboard Animations – Blend5
34. How to make a 3 column ListBox in Silverlight: Post
33. How to read XML into Silverlight and turn it into Native Silverlight Objects: Post
32. Create a default Silverlight 4 Out Of Browser app that allows you to create new OOB apps in mere seconds: Post
31. How to make a forever scrolling Silverligh banner: Post
30. How to create a Silverlight Color Resource in a ResourceDictionary: Post
29. How to make an Out of the Browser SL4 Web Browser Applicaiton: Post
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: Post
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: Post
26. Learn Silverlight with this new RefCard that I developed Post
25. Create a Functioning Login UserControl: Post
24. Use the FarseerPhysics Library to create a Ragdoll with simulated Physics: Post
23. Create a Sortable ObservableCollection: Post
22. Create a Silverlight Ragdoll with Simulated Physics: Post
21. How to create a functioning Silverlight Login UserControl: Post
20. How to create a Silverlight Timer using the DispatcherTimer class: Post
19. How to create custom RoutedEvents in Silverlight using Andrew Whiddett’s (IdentityMine) Eventing assembly reference: Post
18. Use the Silverlight Toolkit’s WrapPanel to create a ListBox that displays three rows of Data: Post
17. Create a Silverlight custom Silder: Post
16. How to create a Visual Tree Helper to locate FrameworkElements in the Visual Tree: Post
15. Using DataBinding to control the Visibility of any Silverlight Object using Blend and Visual Studio: Post
14. How to create a complete Sketchflow Prototype in Silverlight: Post
13. Creating a Custom Silverlight Button Just for Designers (using linear and radial gradients, the gradient tool and opacity masks): Post
12. Creating a Custom Silverlight Button: Post
11. Creating a Storyboard Helper Class: Post
10. Importing Photoshop PSD files into Expression Blend 3:
http://wp.me/pWN5M-1n
9. Creating Morphing Vector Path Storyboards in Blend
Post
8. Re-Creating a Metallic Logo in Vector using Blend 3
Post
7. Creating Timed Storyboard Animations
Post
6. Using TemplateBinding to Replace a ContentPresenter in a Silverlight Button
Post
5. Working with Data in BLend 3
Post
4. Silverlight 3 Behavior Tutorial Video
Post
3. This Tutorial will teach you how to create a Card Flipping Animation!
Post
2. Observable Collection Tutorial
http://is.gd/3ajLK
1. Silverlight Extended Drag and Drop Behavior:
Post
Enjoy! Victor


8 Comments for this entry


  • Russell Morgan

    Im new to Silverlight AND to WP7. I am Jamaican so I dont have much LOCAL resources to turn to, I am VERY GLAD I found your blog. Thank you EVER so much for taking the time out ot make these, and to post them for FREE!
    I do hope to become a veteran at WP7 and Silverlight, because they are both very interesting platforms in my views. And I would love to be able to make applications using them.
    I do hope you continue to offer this type of support and more to the community of established and aspiring developers.
    Thank you again!

  • JohnnySmoke

    happened to find your site by way of twitter. thanks for sharing the wealth with all of us who are eager to learn and could use a helping hand

  • Max Luong

    Met you at WP7 event in Costa Mesa (the Hilton). Keep you the great work.
    thanks again for all the resources.

  • Interlopul eusebiu

    This tutorial is really easy to follow! I can do it to!

  • Victor

    See Interlopul, it is not that hard; anyone can do it as long as you have someone to show you how. Victor

  • Davide

    Hi, i like your video, very easy to learn!
    Can i ask you to do some tutoria? i’m new on wp7, and i can’t find the resource i’m looking for…
    1) how to reload a page in my webBrowser…
    2) how to parse a json file taken from the web (i take the .php file that produce the json, and i’d a goal il this, now i have my string json = sr.ReadToEnd(); ready)
    3) how to have a button with a text on it and a background images
    4) check if the phone is online (3G or wifi, but at least one
    Thanks in advance!!!

  • prathima

    Hello Victor,
    Liked all your tutorials and it is very helpful in app development. Thank you so much.
    I am looking for flashcard related sample code in silverlight/xna, by any chance you have tutorial on this. Please let me know.
    Thanks in advance…

  • Keshawn Abell

    Say, you got a nice article. Great.

5 Trackbacks / Pingbacks for this entry