WPF and Silverlight BookControls: source code available

Article
06/10/2008

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 !

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: https://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="https://schemas.microsoft.com/client/2007" 
    xmlns:x="https://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

Anonymous
June 10, 2008
Enjoy, Code is coming very soon.. [Update]: code is now available here ! Mitsu Move the mouse cursor
Anonymous
June 10, 2008
Quelle surprise ! ;-) Nice job Mitsu :-)
Anonymous
June 25, 2008
The comment has been removed
Anonymous
June 28, 2008
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
Anonymous
September 01, 2008
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
Anonymous
December 17, 2008
Soory I'm have a trouble with these in the moment to load it seem a few message saying Source Controls
Anonymous
February 03, 2009
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
Anonymous
February 04, 2009
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.
Anonymous
February 04, 2009
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
Anonymous
February 04, 2009
Yes, that's it, + make your book have an odd number of pages.
Anonymous
April 16, 2009
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.
Anonymous
April 18, 2009
Yes it is. You can add any visual you want. The demo application shows multiple kinds of content.
Anonymous
April 21, 2009
I wanted to keep/put the shadow after it finish turn the page. Can you please advise me how to do it?
Anonymous
April 22, 2009
som1 plz can help me with this error? http://img516.imageshack.us/img516/8310/errorg.jpg plz mail me to etombi@gmail.com
Anonymous
April 22, 2009
sorry for stupid question :))) fixed
Anonymous
August 31, 2009
This is a great control. Have you thought of expanding the animations to allow the first and last element to animate like a hardcover?
Anonymous
September 09, 2009
Gorgeous! I wish to import this user control into Sketchflow in order to use it from the Assets panel. How can I do?
Anonymous
September 18, 2009
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?
Anonymous
November 15, 2009
Have you received a reply on how to keep the shadow between the pages after the page is turned?
Anonymous
January 14, 2010
hi, you page http://www.codeplex.com/wpfbookcontrol has bad link "demo application" (http://wpf.netfx3.com/direct/wpfbookcontrol/publish.htm). Link not open... (((
Anonymous
February 23, 2010
I cannot get this to work in Silverlight 3 - can you help?
Anonymous
April 01, 2010
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. 1200x900) 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?
Anonymous
May 12, 2010
Nice control Question: I need to move to a specific page in the book can any one propose a method
Anonymous
May 12, 2010
Yes, you can change the CurrentSheetIndex. See the demo application
Anonymous
June 06, 2010
The comment has been removed
Anonymous
June 06, 2010
The comment has been removed
Anonymous
July 17, 2010
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.
Anonymous
July 21, 2010
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.
Anonymous
September 14, 2011
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
Anonymous
August 09, 2012
How do you use this with WPF? Thanks Tim

Share via

WPF and Silverlight BookControls: source code available

Comments

Additional resources