Compartir a través de

Silverlight 2 Page Turn

  • Artículo

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

  • Anonymous
    October 08, 2008
    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' ?

  • Anonymous
    October 08, 2008
    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.

  • Anonymous
    October 14, 2008
    Looks good. Any chance of a Silverlight 2.0 version? It doesn't work with the latest release.

  • Anonymous
    October 15, 2008
    Can you release or point to a location to get the source code now that Silverlight 2 has been released? Thanks

  • Anonymous
    October 19, 2008
    hello,can you tell me where is the source code?

  • Anonymous
    October 21, 2008
    Can you put here a complete source codes of your solution. Thanks

  • Anonymous
    October 22, 2008
    Regarding the source, are we soon close to "available very soon" :-)

  • Anonymous
    October 22, 2008
    Source code is now available. Note that it wasn’t fully redesigned when ported from SL1.0 - this is not a good practice.

  • Anonymous
    October 27, 2008
    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.

  • Anonymous
    October 27, 2008
    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.

  • Anonymous
    October 28, 2008
    The comment has been removed

  • Anonymous
    November 04, 2008
    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?

  • Anonymous
    November 09, 2008
    Thanks！I Love Silverlight!I love your examples!

  • Anonymous
    November 12, 2008
    Is there anyway to easily resize this photo gallery?

  • Anonymous
    November 13, 2008
    The comment has been removed

  • Anonymous
    November 14, 2008
    > 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> (...)

  • Anonymous
    November 19, 2008
    thank you very much, i had looking for this sample for longlong time.

  • Anonymous
    December 08, 2008
    What do you mean by

  • Change the widths, heights, ... along the code thanks...

  • Anonymous
    December 08, 2008
    Could you elaborate on "change the widths, heights,... along the code I would like to use a photo album with photos 568x470 without resizing them manually to be 420x348 to fit the book page width. Or can I modify the book page width and height? thank you..

  • Anonymous
    December 16, 2008
    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.

  • Anonymous
    December 16, 2008
    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).

  • Anonymous
    December 20, 2008
    how do i make the canvas background transparent. doesnt work when I set the background="transparent" attribute

  • Anonymous
    December 25, 2008
    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.

  • Anonymous
    May 19, 2009
    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!

  • Anonymous
    May 19, 2009
    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

  • Anonymous
    May 21, 2009
    The comment has been removed

  • Anonymous
    August 05, 2009
    The comment has been removed

  • Anonymous
    August 06, 2009
    Raju, the "credits" sentence is written on PageGenerator class (PageGenerator.cs file). You just have to comment those lines of code and recompile.

  • Anonymous
    September 18, 2009
    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

  • Anonymous
    October 08, 2009
    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.

  • Anonymous
    January 09, 2010
    Great work but i have an idea i want to put zooming on page how can i do  it?

  • Anonymous
    January 15, 2010
    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

  • Anonymous
    January 31, 2010
    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.

  • Anonymous
    February 14, 2010
    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:)

  • Anonymous
    February 28, 2010
    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

  • Anonymous
    March 24, 2010
    The comment has been removed

  • Anonymous
    March 24, 2010
    The source code link was updated.

  • Anonymous
    March 31, 2010
    Thank you so much, ptadcs :D 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?

  • Anonymous
    March 31, 2010
    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 :D

  • Anonymous
    April 24, 2010
    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 =)

  • Anonymous
    April 25, 2010
    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.

  • Anonymous
    June 06, 2010
    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

  • Anonymous
    June 06, 2010
    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!

  • Anonymous
    June 06, 2010
    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.

  • Anonymous
    June 19, 2010
    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?

  • Anonymous
    November 13, 2010
    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

  • Anonymous
    November 15, 2010
    This works in Silverlight for windows embedded? Thanks Andre

  • Anonymous
    November 15, 2010
    Andre, I don’t think it would work without some rewrite. Check here: www.microsoft.com/.../silverlightforwe.mspx blogs.msdn.com/.../silverlight-for-windows-embedded-ce-6-0-first-sample-codes-stress-and-multiple-instances-of-a-control-in-separate-dll.aspx

  • Anonymous
    December 13, 2010
    How to configure for "books" without coding.

  • Anonymous
    February 14, 2011
    dinesh, all you have to do is define where your images are in pageContent.xml file.

  • Anonymous
    June 20, 2011
    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.

  • Anonymous
    September 07, 2011
    ¿Como puedo hacer que la imagen cargada se ajuste al tamaño de la pagina?

  • Anonymous
    April 13, 2012
    Hi. Thi is a aewsome project. I want to right-hand page is opened such a left one, it is possible?

  • Anonymous
    April 13, 2012
    Hi! thanks for this project. I want that right page ia opened such left one. It is possible?

  • Anonymous
    September 01, 2012
    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

  • Anonymous
    September 01, 2012
    Sure, please feel free to do it...

  • Anonymous
    September 23, 2012
    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