Welcome to MSDN Blogs Sign in | Join | Help

Mitsu's blog

Discussing topics related to .Net, WPF, C# and Linq
WPF and Silverlight BookControls: source code available

I have just finished converting the control to silverlight one week away from Silverlight 2 beta 2 release date, so I have been waiting for it !

SLBookControl

For people to be able to compare code (quite similar) and behavior between the WPF and the Silverlight control, I have kept the same codeplex project to host the whole solution.

So the address is still the same: http://www.codeplex.com/wpfbookcontrol and the project title has been renamed to 'WPF and Silverlight BookControls'.

The silverlight control is a bit different:

  • it's a UserControl.
  • the data connection natively proposes data virtualization.

The ItemsControl control does not allow data virtualization today. As I absolutely wanted it for this silverlight version, I voluntarily did not respect the ItemsSource behavior.

As a datasource, you have to provide a very simple interface:

public interface IDataProvider { object GetItem(int index); int GetCount(); }

The control will ask you on the fly for those two methods to dynamically retrieve needed pages.
In your application, just add a reference to SLMitsuControls. 

Then use it in your xaml page: in this sample, I am using a static content to defines pages.

<UserControl x:Class="SLBookDemoApp.Page" xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:SLMitsuControls;assembly=SLMitsuControls" Width="400" Height="300" Loaded="UserControl_Loaded"> <UserControl.Resources> <ItemsControl x:Name="pages"> <Button Content="Page 0" Click="Button_Click" /> <Button Content="Page 1" Background="Green" Click="Button_Click_1" /> <Button Content="Page 2" Background="Yellow" Click="Button_Click" /> <Button Content="Page 3" Background="Red" Click="Button_Click_1" /> </ItemsControl> </UserControl.Resources> <Grid> <local:UCBook x:Name="book" Margin="50" /> </Grid> </UserControl>

Then you must implement IDataProvider and call the SetData() method.

public partial class Page : UserControl, IDataProvider { public Page() { InitializeComponent(); } private void UserControl_Loaded(object sender, RoutedEventArgs e) { book.SetData(this); } #region IDataProvider Members public object GetItem(int index) { return pages.Items[index]; } public int GetCount() { return pages.Items.Count; } #endregion private void Button_Click(object sender, RoutedEventArgs e) { book.AnimateToNextPage(500); } private void Button_Click_1(object sender, RoutedEventArgs e) { book.AnimateToPreviousPage(500); } }

Let me remind you that you can find a good dynamic sample in this flickr application:

Posted: Tuesday, June 10, 2008 3:37 PM by mitsu

Comments

Mitsu's blog said:

Enjoy, Code is coming very soon.. [Update]: code is now available here ! Mitsu Move the mouse cursor

# June 10, 2008 10:00 AM

MatthieuMEZIL said:

Quelle surprise ! ;-)

Nice job Mitsu :-)

# June 10, 2008 3:49 PM

Venkat Polisetti said:

It's great that we have something similar to Flash now.

When I run your Silverlight sample from the download, some times I am getting an exception. I have put an issue under the issue tracker on codeplex and here is the link to it:

http://www.codeplex.com/wpfbookcontrol/WorkItem/View.aspx?WorkItemId=10376

I have also attached a screen shot of the exception to the issue on codeplex.

Thanks,

Venkat

# June 25, 2008 4:16 PM

Venkat Polisetti said:

ItemsControls seems to be the problem. I have replaced that with a custom class and it no longer throws that exception.

Please look at this post for source code.

http://venkatpolisetti.blogspot.com/2008/06/silverlight-page-turn-using-c.html

Venkat Polisetti

# June 28, 2008 10:17 PM

John Sells said:

Thanks for this very nice control.  I am using it on the referenced page with only one problem.

I am giving the control 56 png file for pages.  This takes some time to download.

What I can't figure out is how to indicate progress and/or completion.  The image and book loaded events fire before the images are ready.

I've also tried the UpdateProgress comtrol to no avail.

What am I missing?

Thanks,

John Sells (jhsgen at comcast.net

# September 1, 2008 2:34 PM

rau said:

Soory I'm have a trouble with these in the moment to load it seem a few message saying Source Controls

# December 17, 2008 11:13 AM

AC said:

Is it possible to change the book look to a right to left book, as the first page should be turned from the left and not right.

BR

# February 4, 2009 6:41 AM

mitsu said:

Yes it's possible and has already be done.

You can with a few lines of code make the control start on the last page but you must make your book have an odd number of pages (insert a first blank page if necessary). If not you will have two visible pages when placed on the last one.

# February 4, 2009 11:23 AM

shahbour said:

Great,

Can you show me how to do that, my idea was to put the CurrentIndex on last page and insert the pages in reverse order.

Is this what you mean by few lines, or there is other way i am missing.

Thanks

# February 5, 2009 3:47 AM

mitsu said:

Yes, that's it, + make your book have an odd number of pages.

# February 5, 2009 5:26 AM

anjali said:

Istead of showing images in each page, is it possible to show a canvas(textboxes, textblock, and other control grouped into a canvas) in each pages?

My aim is to show the profile of a person using this control, with each page showing different details like Personal details, Official details so on.

# April 17, 2009 2:01 AM

mitsu said:

Yes it is. You can add any visual you want. The demo application shows multiple kinds of content.

# April 18, 2009 4:42 PM

houguan said:

I wanted to keep/put the shadow after it finish turn the page. Can you please advise me how to do it?

# April 22, 2009 3:55 AM

cmex said:

som1 plz can help me with this error?

http://img516.imageshack.us/img516/8310/errorg.jpg

plz mail me to etombi@gmail.com

# April 23, 2009 4:03 AM

cmex said:

sorry for stupid question :))) fixed

# April 23, 2009 4:19 AM

Aaron said:

This is a great control. Have you thought of expanding the animations to allow the first and last element to animate like a hardcover?

# August 31, 2009 1:52 PM

Alex said:

Gorgeous! I wish to import this user control into Sketchflow in order to use it from the Assets panel. How can I do?

# September 10, 2009 3:29 AM

Mahesh said:

Thanks for the great article. Is there a way to add hyperlinks, so that when a page is clicked, it opens up a new browser window?

# September 18, 2009 3:38 PM

Mike said:

Have you received a reply on how to keep the shadow between the pages after the page is turned?

# November 15, 2009 3:53 PM
Leave a Comment

(required) 

(required) 

(optional)

(required) 

  
Enter Code Here: Required

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

Page view tracker