Welcome to MSDN Blogs Sign in | Join | Help

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.

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

Published Monday, October 06, 2008 11:37 AM by ptadcs
Filed under:

Attachment(s): PageTurn2 20081015a.zip

Comment Notification

If you would like to receive an email when updates are made to this post, please register here

Subscribe to this post's comments using RSS

Comments

# re: Silverlight 2 Beta 2 Page Turn

Wednesday, October 08, 2008 6:30 PM by Nidge

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' ?

# re: Silverlight 2 Beta 2 Page Turn

Thursday, October 09, 2008 5:29 AM by ptadcs

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.

# re: Silverlight 2 Beta 2 Page Turn

Wednesday, October 15, 2008 7:57 AM by gf

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

# re: Silverlight 2 Beta 2 Page Turn

Wednesday, October 15, 2008 8:57 AM by brad.covell

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

Thanks

# re: Silverlight 2 Page Turn

Sunday, October 19, 2008 11:17 AM by robby

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

# re: Silverlight 2 Page Turn

Wednesday, October 22, 2008 5:51 AM by Petyas

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

# re: Silverlight 2 Page Turn

Wednesday, October 22, 2008 11:46 AM by RubiconData

Regarding the source, are we soon close to "available very soon" :-)

# re: Silverlight 2 Page Turn

Wednesday, October 22, 2008 4:50 PM by ptadcs

Source code is now available.

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

# re: Silverlight 2 Page Turn

Monday, October 27, 2008 4:24 PM by jking

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.

# re: Silverlight 2 Page Turn

Monday, October 27, 2008 5:31 PM by ptadcs

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.

# re: Silverlight 2 Page Turn

Wednesday, October 29, 2008 4:46 AM by Badon

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 ?

# re: Silverlight 2 Page Turn

Tuesday, November 04, 2008 2:57 PM by Brant

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?

# re: Silverlight 2 Page Turn

Sunday, November 09, 2008 11:01 PM by Anonymous

Thanks！I Love Silverlight!I love your examples!

# re: Silverlight 2 Page Turn

Wednesday, November 12, 2008 2:04 PM by Mike

Is there anyway to easily resize this photo gallery?

# re: Silverlight 2 Page Turn

Friday, November 14, 2008 3:37 AM by LeMinh

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");

# re: Silverlight 2 Page Turn

Friday, November 14, 2008 8:00 AM by ptadcs

> 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>

(...)

# re: Silverlight 2 Page Turn

Wednesday, November 19, 2008 8:53 AM by kollas

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

# re: Silverlight 2 Page Turn

Monday, December 08, 2008 3:05 PM by Dan

What do you mean by

- Change the widths, heights, ... along the code

thanks...

# re: Silverlight 2 Page Turn

Monday, December 08, 2008 6:33 PM by Dan

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..

# re: Silverlight 2 Page Turn

Tuesday, December 16, 2008 4:25 PM by Steven James

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.

# re: Silverlight 2 Page Turn

Wednesday, December 17, 2008 4:50 AM by ptadcs

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).

# re: Silverlight 2 Page Turn

Saturday, December 20, 2008 6:22 PM by Kunal

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

# re: Silverlight 2 Page Turn

Thursday, December 25, 2008 4:50 PM by ekleeman

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.

# re: Silverlight 2 Page Turn

Tuesday, May 19, 2009 1:22 PM by Slash

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!

# re: Silverlight 2 Page Turn

Tuesday, May 19, 2009 1:25 PM by Slask

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

# re: Silverlight 2 Page Turn

Friday, May 22, 2009 6:43 AM by ptadcs

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 :)

Leave a Comment

(required) 
required 
(required) 
 
Page view tracker