Silverlight 2 Page Turn


Do you remember Silverlight 1.0 Page Turn Sample? I Do. It was probably the first Silverlight application I saw and I was delighted with it.


Then Silverlight 1.1 came up, followed by 2.0 Beta 1 and Beta 2 (soon we'll have RTM), Beta 2 and now 2.0 and this demo got behind.


Wouldn't it be great if we had a Page Turn 2.0 version, written on managed code? No more Javascript, better performance, 2.0 features...


Well, I believe I can help you - I took the 1.0 demo and fully translated it to C# with the minimal changes I could.


What does this means? Well... it works perfectly: managed code, single .xap file... but the application pattern is still the same we had on the original 1.0 sample - lots of string manipulation. Now it's up to you to take it and redesign it leveraging the new 2.0 framework.


You can see it running here. (Updated on 2008-10-15 for Silverlight 2.0 final)



 


When I was working on it a few things "bugged me" and I decided to change them. These are the extras I've added:



  • Page content configuration


The content of each page is now defined on a pageContent.xml file.



This means you can configure your "books" without coding. All you have to do is define your images on this XML file and copy the .xap to your web server (.xap available here). Try it!





  • Page labels


Instead of editing images just to add a title, set each page title, subtitle and foreground color on pageContent.xml.






 



  • Last page turn


Why should the last page be fixed? Not anymore.





  • Single image, two pages


Having a picture per page may be useful in some situations but most of the time what is desired is to have a single picture (with double width) spanning through a pair of pages. This release supports it.





  • Thumbnails scrolling


The original thumbnail scrolling exhibited some abrupt movements when entering the scroll area. The scroll algorithm was fully redesigned.





  • Hand-like cursor on draggable areas


This is one of those things you always forget to set till someone says to you: "How do I use this thing?". Thanks Bruno.




Wrap Up


Page Turn for Silverlight 2.0 binaries are available here.


A running demo can be seen here: PageTurn 2.


The original Silverlight 1.0 demo is still available here. Compare the differences.


Source code is now available here. (Updated on 2008-10-22)


Note that it wasn’t fully redesigned when ported from SL1.0 - this is not a good practice!


Pedro Fortes

PageTurn2 20081015a.zip

Comments (57)

  1. Nidge says:

    What would I need to change to have the app point to a different XML file each time – which is creted on the fly – such that users get to see their own ‘books’ ?

  2. ptadcs says:

    First you’ll need a way to authenticate your users on your website in a way that your Silverlight app can identify them.

    Then you have to change the XML document the app is using by a user-specific one.

    The sample uses a System.Xml.Linq.XDocument which is loaded from a System.Net.WebClient.OpenReadAsync(new Uri("pageContent.xml", UriKind.Relative)) call.

    You just have to change the way this System.Xml.Linq.XDocument is loaded.

  3. gf says:

    Looks good. Any chance of a Silverlight 2.0 version? It doesn’t work with the latest release.

  4. brad.covell says:

    Can you release or point to a location to get the source code now that Silverlight 2 has been released?

    Thanks

  5. robby says:

    hello,can you tell me where is the source code?

  6. Petyas says:

    Can you put here a complete source codes of your solution. Thanks

  7. RubiconData says:

    Regarding the source, are we soon close to "available very soon" 🙂

  8. ptadcs says:

    Source code is now available.

    Note that it wasn’t fully redesigned when ported from SL1.0 – this is not a good practice.

  9. jking says:

    Any interest in releasing the source code that creates the .xap file?  I’m interesting in seeing the code for the menu hover, I like how it enlarges and holds rather than retract like other demos I’ve seen.

  10. ptadcs says:

    The source code is already available. Look the "wrap up" section of this page.

    In Silverlight 2 animated properties are no longer set once the animations in the storyboard are complete, that’s why you have to set the desired property values in the Storyboard.Completed event. That was how I kept the thumbnail pictures open on menu hover.

  11. Badon says:

    i have a problem

    i try to debug the project

    and i get an error

    void DownloadAssets_OpenReadCompleted(object sender, System.Net.OpenReadCompletedEventArgs e)

           {

               //Read page info

                   StreamReader reader = new StreamReader(e.Result);

    the error is

    An exception occurred during the operation, making the result invalid.  Check InnerException for exception details.

    any ideas ?

  12. Brant says:

    I’m having real problems with this.

    Whenever I try to run this after I’ve downloaded it, I get a 4004 error.

    Google says that means there’s an error in the page.xaml.

    any idea?

  13. Anonymous says:

    Thanks!I Love Silverlight!I love your examples!

  14. Mike says:

    Is there anyway to easily resize this photo gallery?

  15. LeMinh says:

    I’m have the same problem and i’ve solved it by embed pageContent.xml as Resources in Build Action property

    I replace

    StreamReader reader = new StreamReader(e.Result);

    System.Xml.Linq.XDocument document = System.Xml.Linq.XDocument.Load(reader);

    by

    System.Xml.Linq.XDocument document = System.Xml.Linq.XDocument.Load(@"PageTurn2;component/pageContent.xml");

  16. ptadcs says:

    > Is there anyway to easily resize this photo gallery?

    You have 2 options:

    – Change the widths, heights, … along the code

    – On Page.xaml add a ScaleTransform (it’s much easier than the first approach but you’ll lose sharpness and performance).

       <Canvas x:Name="MainCanvas" Loaded="MainCanvas_Loaded">

             <Canvas.RenderTransform>

               <ScaleTransform x:Name=’myscale’ ScaleX=’0.7′ ScaleY=’0.7’/>

             </Canvas.RenderTransform>

    (…)

  17. kollas says:

    thank you very much, i had looking for this sample for longlong time.

  18. Dan says:

    What do you mean by

    – Change the widths, heights, … along the code

    thanks…

  19. Dan says:

    Could you elaborate on "change the widths, heights,… along the code

    I would like to use a photo album with photos 568×470 without resizing them manually to be 420×348 to fit the book page width. Or can I modify the book page width and height?

    thank you..

  20. Steven James says:

    Have you had anyone request the page turn to print a page or range of pages.  The reason why is for a manual.  Also, a table of contents and search feature?  I am asking for alot.

  21. ptadcs says:

    In the code you’ll find coordinates, like lineSegment points, animation variables, grids and images widths and heights, etc… using the values 420 (single page width), 570 (page height) and 840 (double page width).

    Those are the numbers you need to change if you want a different page size (unless you do a RenderTransform as explained before).

  22. Kunal says:

    how do i make the canvas background transparent. doesnt work when I set the background="transparent" attribute

  23. ekleeman says:

    I spent a good long while configuring a book with this. When I upload to my 2003 server none of the images download and I get an empty book. I have the same issue with Slide.Show2. It is extremely irritating that something works locally but images from the web server simply do not load.

  24. Slash says:

    Hi,

    Is there any way I can Change the angle of Page Turn. Say Now it is on Bottom Right, How Do I Make it to Top Right!

  25. Slask says:

    Its Nice to see an article like this, and first of all, I appreciate you to share such a fine article. My Doubt is How do I change the angle of the page turn. Eg, Now the page turn animation starts from bottom right, What if I need to make it from Top Right. I tried playing around changing the values, But couldn’t succeed

  26. ptadcs says:

    To change the angle of the page turn you have to change the math behind.

    Most of the calculus is done in the UpdateScene method of NavigationManager class.

    You’ll find several references to 570 (the page height). You’ll have to change the Y coordinates of the line segment points which make the “dogear”/clipping.

    You can try doing the symmetry at the end of the function, like:

    even/oddPointK.Point = new Point(even/oddPointK.Point.X, 570 – even/oddPointK.Point.Y);

    Unfortunately it is a little harder than just this. You’ll have to take a deeper look at the math behind… sorry… and good luck 🙂

  27. Raju says:

    Hi

    Its a nice article, i downloaded and integrated with my website, working fine but one issue is how to avoid the test on last page

    "Page Turn 2.0 by Pedro Fortes – Adapted from Page Turn Silverlight 1.0 Sample", please help me.have a great day..

  28. ptadcs says:

    Raju, the "credits" sentence is written on PageGenerator class (PageGenerator.cs file).

    You just have to comment those lines of code and recompile.

  29. Mahesh says:

    Hi,

    Great article and sample. Is this available in Silverlight 3? Also, can each page be a hyperlink that will open a website in a new window?

    Thanks

  30. ptadcs says:

    Mahesh, the code is for Silverlight 2 but it works fine on Silverlight 3 too.

    To add hyperlinks to the pages change the GetPageString method on PageGenerator class.

  31. prog.ahmed says:

    Great work but i have an idea i want to put zooming on page how can i do  it?

  32. ptadcs says:

    prog.ahmed:

    Assuming you don’t need/want to go into a Deep Zoom solution you can use a ScaleTransform transformation.

    Samples:

    http://msdn.microsoft.com/en-us/library/system.windows.media.scaletransform(VS.95).aspx

  33. Anjali says:

    I have resized the page according to the need but i could not find that from  where i can change the  height of the shadow of the page. its height is coming more than the page. Please help.

  34. anakin says:

    I tried to change the image size not to be 420*570, In the begining I thought is simple, but In the end I have to spend one week’s time to understand the algorithm behind. I can help you setup the different image width and height but I would like charge 10 bucks for a pizza. contact gmail: victoryclarion if you interested:)

  35. dbza says:

    Can I change the pages let say as a Canvas or Grid with some elements on it instead of using images?

    I want to make books which pages consists of not just images, but actual Silverlight elements

  36. Octopus says:

    Hi, may I know where to download your source code?

    When I tried to access the links you have provided, it gave me these:

    Informamos que o serviço de Personal Web Pages (PWP) da ZON NET foi descontinuado.

    Em breve, contamos ter mais novidades para todos os nossos Clientes.

    Thank you, and I look forward to your reply.

    P.S. This flipping is really cool 😀

  37. ptadcs says:

    The source code link was updated.

  38. Octopus says:

    Thank you so much, ptadcs 😀

    Can I ask a question to clarify something?

    E.g. I wanted to add a form into one of the pages, so what I need to change is PageGenerator.cs to add the specific controls?

  39. Octopus says:

    Hello again, I have a question to ask.

    Do you know how I can tweak the source such that the page turn would be enabled with a click?

    E.g. I click on the right page, it would flip and turn to the next page. And when I click on the left page, it would flip and return to the previous page.

    Any help is greatly appreciated, thanks again and have a nice day 😀

  40. Vintby says:

    I downloaded the source code & intgrated it to my site. But I can’t see image menu which is placed below the book in your sample. Can’t find the reason of it 🙁

    Please help

    Really fine sample – i like it. Spent some time just playing it =)

  41. ptadcs says:

    Octopos, in NavigationManager class you have a JumpToPage method that allows you to move to a specific page. However, it does not show the animation flip.

    Vintby, to display the image menu you have to click the white book icon on the lower right, below the page. Please check if you have to scroll down the web page to see it.

  42. Ioannis Gkoutsidis says:

    Hi,

    I'm currently trying to change the path of the images in the XML file, so as to make a "repository" folder, with no success.

    What I want to achieve is to have a folder "D:/Images/Pages/" with my photos and I assume that the paths in my XML file must point to the exact same directory (ie "D:/Images/Pages/page00.jpg").

    Am I missing anything?

    Thanks

  43. Ioannis Gkoutsidis says:

    Hi,

    when trying to change the photos path, all I get is a blank book (only annotations are shown but no images).

    So my question is: Do I have to change anything else except the photos' paths in my xml file, and what king of path should I use?

    Could you give me an example?

    Thanks!

  44. ptadcs says:

    Ioannis, the Path you specify in pageContent.xml must be a valid relative URI.

    When you specify “pages/page00.jpg” it maps to http://<website>/ClientBin/pages/page00.jpg and it will work if you have the standard folder structure. That’s why it won´t work with “D:/Images/Pages/page00.jpg”.

    You can create your folder structure inside ClientBin folder or you can change the code in page.xaml.cs file (methods DownloadAssets_DownloadStringCompleted and GetPagePath) to make it work outsite this folder.

  45. Nina says:

    Hey

    thats a really awesome work *thumps up*

    One question. Is it possible to create hyperlinks on several sites? For example, i have a picture for site 2, where are 4 other pictures in it. i want to click the picture and a popup appears. or it changes the pic on current site 3 to another pic for site 3… it that possible?

  46. Anonymous says:

    Hi,i need an application like this only but in the place of images i want to bind text pages like pdf files,

    and also i didnt got  how to bind pages to application

    please any one help me

  47. SilverLight for windows embedded says:

    This works in Silverlight for windows embedded?

    Thanks

    Andre

  48. dinesh says:

    How to configure for "books" without coding.

  49. ptadcs says:

    dinesh, all you have to do is define where your images are in pageContent.xml file.

  50. Hi, Thanks for sharing this project. I am new and less experienced that to be able to create a effect in page like this i mean the whole thing so i need a help on two things with this project:

    One: how to get rid of the page labels thing with its text and semi-transparent black bground?

    second one: how to create links for every individual page so user can have larger view of its current page content?

    lastly is there a tutorial book for this project or newer SL project like this?

    Thanks very much  again.

  51. Francisco Javier Gonzalez says:

    ¿Como puedo hacer que la imagen cargada se ajuste al tamaño de la pagina?

  52. Zhandos says:

    Hi. Thi is a aewsome project.

    I want to right-hand page is opened such a left one, it is possible?

  53. Zhandos says:

    Hi! thanks for this project.

    I want that right page ia opened such left one.

    It is possible?

  54. saurabh aggarwal says:

    hello!!!

    its seeems to be a gr8 project…..juz wana ask can i make some changes in source code and reuse it to intergrate with my website……

    pls reply as soon as possible

    thanxx alott

  55. ptadcs says:

    Sure, please feel free to do it…

  56. saurabh aggarwal says:

    hello thanx for your reply……… i have an existing website and want to open this project when a button is clicked from my page……..so how can i intergrate this project(use this as a sub page ) with a already created silverlight page (home page for my website)……………..pls reply as soon as possible…..pls pls

Skip to main content