Tuesday, October 19, 2010

New Silverilght/Windows Phone 7 Video Tutorial: Learn how to make a Turnstile Control

How to Implement the Windows Phone 7 Turnstile Control for Silverlight in a Real WP7Application



Hello All!
Brian Henderson Tweeted about this cool Turnstile control located on Codeplex.  I checked it out and realized it only showed how to show this control with Rectangles and only in a web  browser Silverlight page.  I wanted to show how to actually download the source and use it with real controls (Buttons, StackPanels, Images, etc.).  I also wanted to demonstrate how to use this control in a real Windows Phone 7 application.  So, in this 13 minute video I show you how to make use of the Windows Phone 7 Turnstile control from Codeplex. 
Specifically, I show you how to:
1. download the source from Codeplex;
2. create a new Windows Phone 7 application;
3. add the downloaded source project to your solution;
4. add a reference to the newly added project;
5. add a Turnstile control;
6. populate your Turnstile control with Images, Buttons and StackPanels;
7. add animate in and animate out Buttons;
8. create Click event handlers;
9. tell your Turnstile control (in code) to animate in or out depending on what Button was clicked.
So, rollup your sleeves, download the code from Codeplex here and get busy!
My Project Source (Turnstyle.zip): http://tinyurl.com/29c8fhq
Video: http://tinyurl.com/22u5846
PS: I’d like to thank Roberto Sonnino for developing this control.  Also, I thought that “Turnstile” was spelled “Turnstyle” so my source code will have a typo.  I thought that because Roberto lives in France that “Turnstile” was the French way of spelling it.  I was mistaken, I just don’t know how to spell very good :)

3 Comments for this entry

  • Hima 
    December 2nd, 2010 on 10:56 am
    Nice Posts and videos .
    If you can write a blogpost/ video on how to record the user input from the microphone of the client, save it to the server and again play the recorded voice to listen, that would really help site visitors . This is only my suggestion . thanks
  • Fast_Eddie 
    December 17th, 2010 on 12:28 pm
    Very cool and adds a nice finishing touch to an app!
    Here is an interesting usage…
    I added to my project and attempted to create a turnstile as a “switchboard” – a series of graphic panels within turnstile. Thus, selecting the initial button causes the turnstile panel to swing in, selecting an image on turnstile (mouseup on element) causes selection and turnstile to swing out. I have an issue in that it seems that even if turnstile is not visible, that mouseup fires based on position of screen. I am planning to simply add a memory variable to handle event (if turnstile is visible) but any ideas would be apprecaited.
  • Mac 
    March 26th, 2011 on 6:28 pm
    Thanks for your video. I didn’t understand the Roberto Sonnino project by first look but when I see your video I got the whole idea.

2 Trackbacks / Pingbacks for this entry


Posted by at No comments:
Labels: , , , ,

New Silverlight/Windows Phone 7 Video Tutorial: Use ManipulationDelta to Create a Multi-Touch Application


In this short 7 minute video I show you how to create a Windows Phone 7 application that has a draggable Ellipse that can be resized using multi-touch gestures.
Enjoy! Victor Gaudioso

3 Comments for this entry

1 Trackback or Pingback for this entry


Posted by at No comments:
Labels: , , , ,

Sunday, October 10, 2010

How is Blend Extensible?


A follower on Twitter asked me if I know anything about Blend extensibility.  The fact is, I think I know a little and I will share what I know.  If you happen to know more than I write about here please feel free to add it into the comments section.  As time goes on I will move those comments into the post itself (if they are correct, that is :)   ).
What is Extensibility?From what I understand, Extensibility is the ability to build functionality upon already existing functionality.  For example if I wanted to create my own Behavior I would extend the Behavior class and my new class would “inherit” all of the base functionality of a Behavior.  Thus I don’t have to re-write that base functionality every-time I want to make a new custom Behavior.

Blend Custom Controls are Extensible:
When you create custom controls in Blend they are highly extensible.  How you ask:
1. Context Menus – When you create custom controls you have the ability to add items into the default context menu.   For example if you had a custom LoginControl you could create a Context Menu Option for something like “Add a Remember Me” Button.
2. Categorization of Properties – When you create a custom control you can not only add properties that will show up in the Properties panel but you can even tell that property where to show up (other than the default Misc. bucket).  For instance, if you have a custom layout property called VerticleOrientation you could specify that property go into the Layout bucket of the Properties panel.  Further, Blend will give you custom adorners for certain properties, out of the box.  For example, if your property is a Double then you get a slider adorner.  If your property is a Color property you will get the ink chooser.  Blend will do this automatically.
3. Customization of Custom Control Adorers – This allows you to build custom controls that have adorners at design-time that allow you to easily customize that control.  For example, say I have a Custom DialogBoxControl and I want the designer to easily change the background color.  Well, I could add a design-time adorner of a color picker and have that value show up as the background of the control.
4. Setting Default Properties – This allows you to set default properties for your custom controls.  This will allow your deisgner to quickly see what properties you have exposed in your custom control.
Blend Project Types and Templates are Extensible
This means that you can build upon the basic functionality of Project Types and Templates to add your own custom ones.  For example, say you want everyone of your projects to have a left, vertical navigation bar.  Well you would build a template that would do exactly that.
Silverlight Behaviors are Extensible
This allows you to build upon the basic functionality of a Behavior and make your very own custom Behaviors.  For instance in this video tutorial I show you how to create your very own Behavior that changes the color of an object when clicked and then back to its original color when the mouse is released.  I then show you how to use it in Blend.
Like I said there are more examples of Blend’s Extensibility and I will leave it up to other readers to provide more examples but this should give you a good foundation and understanding of what Extensibility is and how Blend and Silverlight are Extensible.
Thanks!  Victor Gaudioso

1 Comment for this entry

  • Martin Krüger 
    October 12th, 2010 on 7:53 am
    Hello Victor,
    I would like to point to the extensibilty of Expression Blend 4 itself.
    If someone wants to write a custom Blend 4 extension I recommend the posts of Timmy Kokke on that topic:
    Building extensions for Expression Blend 4 using MEF http://tinyurl.com/2ch2sln
    Building a real extension for Expression Blend http://tinyurl.com/27p9px5
    Adding options in Expression Blend extensions http://tinyurl.com/25ocbyz
    Additionally there is a useful article on Silverlight design time extensibility from Justin Angel http://tinyurl.com/yd6ycyg
    Using the basic articles from Timmy Kokke I created my own little Expression Blend 4 Add-In http://tinyurl.com/2amwtes
    Unfortunately there is no official documentation on the Microsoft.Expression.[...] assemblies. But the articles mentioned above are a very good starting point for own exploration of the extensibility of Expression Blend itself.
    Regards,
    Martin

1 Trackback or Pingback for this entry


Posted by at No comments:
Labels: ,

Saturday, October 9, 2010

New Windows Phone 7 / Silverlight Video Tutorial: How to make a Browser Application


In this 15 minute video I show you how to create a new WP7 application, add an ApplicationBar, add an ApplicationBarIconButton that when clicked loads a new Browser page.  I then show you how to add a TextBox, a Go Button and a WebBrowser control.  I then show you how to load whatever URL you type into the TextBox load into the WebBrowser control.
This could be considered Part 6 of the 5 part sereies on how to make a cool WP7 application, and you can certainly use it to build out your browser page that you created in the 5 part series; but I also wanted to make this application independent of that tutorial.  Meaning, this tutorial will still be relevant to you even if you have not taken the previous 5 part tutorial.  So, in summary this tutorial will be good for you if you have or have not watched the 5 part tutorial.

3 Comments for this entry

  • Proto-Bytes 
    October 21st, 2010 on 4:04 am
    Have you entered the “The Code Project” Win phone contest yet?
    @ProtoBytes
  • Christian 
    February 11th, 2011 on 6:23 pm
    LOL, great tutorial… But 1 major comment… Was that an Iphone message notification going off during the video?
    Tsk Tsk…
    victor, I am trying to contact you if you would be interested in doing a book of tutorials just like this video with the concept of making WP7 applications using Blend… and getting the code ready for a developer… to get people over from the Flash / PSD / Illustrator world.
  • Victor 
    February 18th, 2011 on 2:51 pm
    Proto, I have not entered the contest, been a little too busy at the moment.
    Christian, Uhh that was my wife’s iPhone you heard LOL
    Victor Gaudioso

7 Trackbacks / Pingbacks for this entry


Posted by at No comments:
Labels: , , , , , ,
Subscribe to: Posts (Atom)