locked
How to make a book flipping effect in an image album or childwindow by using expression blend 4? RRS feed

  • Question

  • Hello

    i am new in expression blend.i m working on a kids learning project.i want to create a childwindow that contain alphabets and want to add flipping effect on it.can any body tell me step by step that how can i do it by using expression blend 4.there are many topics related to this,that i have found but i m not very familiar with xaml so it is very difficult to me to understanding and write whole code for creating effects.   



    • Edited by Wajdan Ali Tuesday, June 12, 2012 1:10 AM
    Tuesday, June 12, 2012 1:08 AM

Answers

  • Hello Wajdan Ali,

    there is no book control in Blend control library, so, you will have to use a third party control, for example the RadBook control from telerik. Some times ago telerik provided a developer license for (amongst other) RadBook control. But I don't if telerik still provides this license model.

    If you choose RadBook for example, of course there will be some xaml, but the main part will be created from code behind. If you are interested in a working project sample, I could provide you some code, which will be VB.NET. But this would be quite exactly what you need, because I created a solution with a RadBook control inside a regular silverlight childwindow (which was quite tricky to implement, because in my solution the childwindow appears and all the users gets is the flippage book, with no visual frame of the childwindow).

    Please let me know an I will provide the source code, but remeber, in order to use this you need a valid license from telerik.

    Until recenty, Rick Barazza provided the best blog article about "the secret behind the flip page technique", which was technical but absolutely brilliant. Unfortunately, this blog post no longer exists. But the source code, he provided still does. With this, you could create your own flip page effect for silverlight. But therefore you would need to code.

    Edit: Here is a link for the flip page technique using the html5 canvas; from brilliant Rick Barraza. Of course, this is not silverlight, but if you are interested in the math behind the flip page technique, this will we very helpful.

    Regards,

    Martin


    • Edited by Martin Krüger Tuesday, June 12, 2012 7:14 AM added link
    • Marked as answer by Wajdan Ali Thursday, July 19, 2012 4:25 PM
    Tuesday, June 12, 2012 7:06 AM
  • Hi,

       in addition to Martin here you can find a free book control.

    I have access to telerik controls source code and the one from telerik at a first look seems better but also the one from mitsu could be a good starting point

    hth


    Gian Paolo Santopaolo - @gsantopaolo
    Founder and CTO Software Lab
    softwarelab.it - digitalshopwindow.com - thedarksideof.net
    Disclaimer: This post is provided "AS IS" with no warranties, and confer no rights.

    • Marked as answer by Wajdan Ali Thursday, July 19, 2012 4:25 PM
    Thursday, June 14, 2012 10:08 PM
  • I think you're looking for the turnstileTransition. It makes transitions between pages kinda like a page turning in a book. You may need a reference added to the "Microsoft.Phone.Controls.Toolkit.dll"  Then you'll need a block of code on the page you want the transition to animate on that looks similar to this:

    	<toolkit:TransitionService.NavigationInTransition>
    		<toolkit:NavigationInTransition>
              	<toolkit:NavigationInTransition.Forward>
    				<toolkit:TurnstileTransition Mode="ForwardIn"/>
            	</toolkit:NavigationInTransition.Forward>
        	</toolkit:NavigationInTransition>
    	</toolkit:TransitionService.NavigationInTransition>
    
    	<toolkit:TransitionService.NavigationOutTransition>
    		<toolkit:NavigationOutTransition>
    	    	<toolkit:NavigationOutTransition.Backward>
    	      		<toolkit:TurnstileTransition Mode="BackwardOut"/>
    	    	</toolkit:NavigationOutTransition.Backward>
    	  	</toolkit:NavigationOutTransition>
    	</toolkit:TransitionService.NavigationOutTransition>

    Then you'll also have to go into the App.xmal.cs and find the 'RootFrame' object. It should look like, "RootFrame = new PhoneApplicationFrame(); But you should change it to, "RootFrame = new TransitionFrame();" That should work. I think, let us know if it does. If the turnstileTransition isnt the one you like, there are others that come with that toolkit. Just browse them.
    • Proposed as answer by Classic Run Monday, June 18, 2012 1:43 AM
    • Marked as answer by Wajdan Ali Thursday, July 19, 2012 4:25 PM
    Monday, June 18, 2012 1:43 AM

All replies

  • Hello Wajdan Ali,

    there is no book control in Blend control library, so, you will have to use a third party control, for example the RadBook control from telerik. Some times ago telerik provided a developer license for (amongst other) RadBook control. But I don't if telerik still provides this license model.

    If you choose RadBook for example, of course there will be some xaml, but the main part will be created from code behind. If you are interested in a working project sample, I could provide you some code, which will be VB.NET. But this would be quite exactly what you need, because I created a solution with a RadBook control inside a regular silverlight childwindow (which was quite tricky to implement, because in my solution the childwindow appears and all the users gets is the flippage book, with no visual frame of the childwindow).

    Please let me know an I will provide the source code, but remeber, in order to use this you need a valid license from telerik.

    Until recenty, Rick Barazza provided the best blog article about "the secret behind the flip page technique", which was technical but absolutely brilliant. Unfortunately, this blog post no longer exists. But the source code, he provided still does. With this, you could create your own flip page effect for silverlight. But therefore you would need to code.

    Edit: Here is a link for the flip page technique using the html5 canvas; from brilliant Rick Barraza. Of course, this is not silverlight, but if you are interested in the math behind the flip page technique, this will we very helpful.

    Regards,

    Martin


    • Edited by Martin Krüger Tuesday, June 12, 2012 7:14 AM added link
    • Marked as answer by Wajdan Ali Thursday, July 19, 2012 4:25 PM
    Tuesday, June 12, 2012 7:06 AM
  • Hi,

       in addition to Martin here you can find a free book control.

    I have access to telerik controls source code and the one from telerik at a first look seems better but also the one from mitsu could be a good starting point

    hth


    Gian Paolo Santopaolo - @gsantopaolo
    Founder and CTO Software Lab
    softwarelab.it - digitalshopwindow.com - thedarksideof.net
    Disclaimer: This post is provided "AS IS" with no warranties, and confer no rights.

    • Marked as answer by Wajdan Ali Thursday, July 19, 2012 4:25 PM
    Thursday, June 14, 2012 10:08 PM
  • I think you're looking for the turnstileTransition. It makes transitions between pages kinda like a page turning in a book. You may need a reference added to the "Microsoft.Phone.Controls.Toolkit.dll"  Then you'll need a block of code on the page you want the transition to animate on that looks similar to this:

    	<toolkit:TransitionService.NavigationInTransition>
    		<toolkit:NavigationInTransition>
              	<toolkit:NavigationInTransition.Forward>
    				<toolkit:TurnstileTransition Mode="ForwardIn"/>
            	</toolkit:NavigationInTransition.Forward>
        	</toolkit:NavigationInTransition>
    	</toolkit:TransitionService.NavigationInTransition>
    
    	<toolkit:TransitionService.NavigationOutTransition>
    		<toolkit:NavigationOutTransition>
    	    	<toolkit:NavigationOutTransition.Backward>
    	      		<toolkit:TurnstileTransition Mode="BackwardOut"/>
    	    	</toolkit:NavigationOutTransition.Backward>
    	  	</toolkit:NavigationOutTransition>
    	</toolkit:TransitionService.NavigationOutTransition>

    Then you'll also have to go into the App.xmal.cs and find the 'RootFrame' object. It should look like, "RootFrame = new PhoneApplicationFrame(); But you should change it to, "RootFrame = new TransitionFrame();" That should work. I think, let us know if it does. If the turnstileTransition isnt the one you like, there are others that come with that toolkit. Just browse them.
    • Proposed as answer by Classic Run Monday, June 18, 2012 1:43 AM
    • Marked as answer by Wajdan Ali Thursday, July 19, 2012 4:25 PM
    Monday, June 18, 2012 1:43 AM
  • Thank u so much Martin.i have found telerik book control that are free.my problem has been resolved...again thanks :-)

    wajdan

    Thursday, July 19, 2012 4:27 PM