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:

Comments (30)

  1. Mitsu's blog says:

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

  2. Quelle surprise ! 😉

    Nice job Mitsu 🙂

  3. Venkat Polisetti says:

    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

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

  5. John Sells says:

    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

  6. rau says:

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

  7. AC says:

    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

  8. Mitsu Furuta says:

    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.

  9. shahbour says:

    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

  10. Mitsu Furuta says:

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

  11. anjali says:

    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.

  12. Mitsu Furuta says:

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

  13. houguan says:

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

  14. cmex says:

    som1 plz can help me with this error?

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

    plz mail me to etombi@gmail.com

  15. cmex says:

    sorry for stupid question :))) fixed

  16. Aaron says:

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

  17. Alex says:

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

  18. Mahesh says:

    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?

  19. Mike says:

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

  20. Jonathan says:

    I cannot get this to work in Silverlight 3 – can you help?

  21. Mike says:

    Hi, nice job!

    It works fine for me with Silverlight 3 after making the changes Venkat Polisetti suggested. You won’t be able to use the design view in Blend thought because it still has some issues there, I recommend you use Visual Studio for xaml and code-behind.

    I still have a question:

    When using a larger scale of the book (e.g. 1200×900) the corners where you can grab the pages are really small, is there a way to size them relative to the size of the page/book?

  22. Hassan says:

    Nice control

    Question: I need to move to a specific page in the book can any one propose a method

  23. Mitsu Furuta says:

    Yes, you can change the CurrentSheetIndex. See the demo application

  24. hello Mitsu,

    we are using your great control in our Silverlight app, which worked fine on SL3. unfortunately, the control does not work correctly when upgraded to SL4 – there is something wrong with controls (looks like loosing focus perhaps?) when both LTR and RTL page flip occurs. unfortunately, Microsoft released and update from SL3 to SL4 via Windows Update, which will affect our many clients, eventually rendering them unable to use our product in terms of a basic requirement, which is entering customer data to our database (the book control acts a form).

    we spent some time analysing the control's source, tried to experiment with changing Z-indexes (it seems that after a page flip occurs, the controls that are placed in .Page1 container have the input focus, instead of those on .Page0, which are actually visible, but are not "clickable"), but no luck. we weren't able to figure out why it happens (we think that it has something to do with rewriting the XAML parser in SL4).

    could we kindly ask you to take a look at this issue and possibly fix it? this is of great importance to us. we provide a demo app (http://www.web2officetest.co.uk/…/slbooktesttestpage.aspx), which when run on SL4, exposes this issue (at the very beginning, there's no input focus on rightPage.Page0, but when you click a visible text box and type something in, you will see the typed text apperar in a text box that lies in respective position to the one you clicked, but in Page1; the same occurs when flipping pages LTR and RTL).

    thanks in advance for your time and we hope that you could resolve this issue.

    best regards,

    Bart

  25. I forgot to post my email address. it's bartlomiej{[ dot ]}jendyk{[ at ]}winwinworld{[ dot ]}co{[ dot ]}uk

    best regards,

    Bart

  26. Simon says:

    Hi Mitsu,

    I've been experiencing the same issues with the book control under SL4.

    Just wondering if there had been any recent updates to the control to fix?

    Regards,

    Simon.

  27. Simon says:

    Hi Mitsu,

    I'm managed to fix the above SL4 issue by setting IsHitTestVisible="False" for both page2 and page1 ContentControls in the UCPage user control.  

    I'm not sure why the mouseover events are getting messed up in the first place ; I'm assuming it's to do with the XAML parser changes in SL4.

    Although I only view this as a work-around solution, since we only ever want to hit test page0, I think it should solve most of the issues people have with running the control under SL4.

    Cheers,

    Simon.

  28. A says:

    Hi excelent, let me ask, this version on silverligth applie for windows phone???, if not where i found some book control tha make the same effect in windows phone…

    A

  29. Tim says:

    How do you use this with WPF?

    Thanks

    Tim