WPF Book control


[Update: WPFBookControl now available on codeplex: http://www.codeplex.com/wpfbookcontrol]


After a long time of work on my free time here is finally a first version of the flip page demo (http://blogs.msdn.com/mitsu/archive/2006/11/05/flip-page-demo-using-wpf.aspx).


I have created a WPF control so every one can use it easilly. It’s an ItemsControl. You can add any kind of items to the ‘Items’ collection (using code or markup) or connect a collection to the ‘ItemsSource’ property.


<controls:Book x:Name=”myBook” Width=”600″ Height=”400″>
<local:UCCube />
<local:UCControls />
<local:UCClippingTransparency />
<local:UCClippingTransparency />
<local:UCClipping />
<local:UCClipping />
<local:UCTriggers />
<local:UCFixedDocument />
<local:UCDataBindingTransformation />
<local:UCXaml />
<local:UCAbout />
</controls:Book>

Each item will be placed in a new page inside the control. You can also define an ItemTemplate if you want to customize a page border for example.


<controls:Book x:Name=”myBook” Width=”600″ Height=”400″>
<controls:Book.ItemTemplate>
<DataTemplate>
<Border BorderThickness=”4″ BorderBrush=”Gray” Background=”Transparent”>
<ContentControl Content=”{Binding .}” />
</Border>
</DataTemplate>
</controls:Book.ItemTemplate>

</controls:Book>

preview 


The source code contains a demo application with a large video file (32Mb). You can find attached to this post 3 zip files:



  • binaries only without the video file
  • binaries + video file
  • source code + binaries + video file (largest one)
  • source code + binaries without video file

[Update: WPFBookControl now available on codeplex: http://www.codeplex.com/wpfbookcontrol]


You can have a video preview of this control in this post of my friend Benjamin.

Comments (106)

  1. Voici un contrôle WPF prêt à l’utilisation. Aussi simple à utiliser qu’un ListBox avec un rendu un peu

  2. Mitsu Furuta , Microsoft France , vient de terminer son controle de "Flip Page" que tout le monde attendait:

  3. wouahhhh 🙂 la classe mitsu 🙂

    ;););)

  4. PoluxX says:

    Yeah, bien joué Mitsu, je teste ça dès que possible chez moi !!!

    Mitsu c’est le French WPF Roxxor !!

  5. orion says:

    extra, merci mistu !

  6. Après avoir vu fonctionner en vidéo la première version j’avais vraiment hâte de voir le code. Trop fort ce Mitsu 😉

  7. CeluiQuiAttendait says:

    Ah Enfin…

    Magnifique ! un grand merci pour le partage des sources.

    Encore Bravo.

  8. Mitsuru Futura one of the author on my website Tech Head Brothers just released an awesome demo of what

  9. Very nicely done!  I love it.

  10. WPF Book control par Mitsu Furata

  11. Very good Mitsu san, thank you. 😉

  12. romagny13 says:

    Magnifique ce sont des choses comme cela qui donnent vraiment envie de développer avec WPF

    bravo et merci 🙂

  13. Mitsuru Furuta a développé et mis à disposition un contrôle WPF (Book ), qui permet de composer et de

  14. rodrigoratan says:

    congratulations mitsu! very good piece of software!! 😀

  15. Mitsu פרסם את ה Control החדש שהוא כתב. מאוד מרשים, תורידו את זה ותריצו. מאחר וה Control הזה הוא בעצם

  16. malabar says:

    En VB, ça donne quoi le code? !

  17. Mick Lohan says:

    Excellent – just what I was looking for

  18. Mitsu's blog says:

    Following my previous post , here is an easy to deploy clickonce version: http://wpf.netfx3.com/direct/wpfbookcontrol/publish.htm

  19. Suite à mon précédent post , voici une version clickonce simple à déployer : http://wpf.netfx3.com/direct/wpfbookcontrol/publish.htm

  20. davide says:

    molto bello e utile

  21. Srikanth says:

    Looks like web 3.0 app for me :). Nice work Mitsuru!

  22. WPF Book control by Mitsu Furata

  23. Visual Studio Orcas Beta 1 is available for download . Though quite similar to the March CTP in terms

  24. Merci beaucoup de ce super code. Au plaisir de te rencontrer sur paris.

  25. ça déchire grave ! 😉

  26. Prabu says:

    It’s very nice. Thanks to mitsu. Hope will gets no.of amazing things like it.

  27. Mete says:

    Hi!

    I am a 16 year old student from Turkey. I was searching for tutorials and other educational stuff on the net and found your wonderful software.But I have some Questions to ask I would be very glad if you can answer them as soon as possible…

    1-How can I add a hole new page here in to your software I am trying this for days…

    2-How can we export such an Itemscontrol without losing the resource files

    thanx..

  28. Mitsu Furuta says:

    Thank you Mete,

    Using markup, you can add any control inside the Book definition: <Book> <AnyControl/> </Book>.

    Could you be more accurate for question 2 ? In my sample, the Book control is already contained in a separated dll so you can just reference it from VS or Blend.

    Mitsu. You can answer me by email if you want.

  29. Animate Flip with button says:

    Can your next and previous buttons animate a flip instead of just switching pages?  I like the animation, but would like to implement a simple version of it when the Next button is clicked.

  30. Brian says:

    Can your next and previous buttons animate a flip instead of just switching pages?  I like the animation, but would like to implement a simple version of it when the Next button is clicked.

  31. Brian says:

    Page flip doesn’t work when bound to an ObservableCollection of objects that contains an InkCanvas.  The Ink from 1 even page carries through to all even pages. Same with odd pages.

  32. Mitsu Furuta says:

    Hi Brian,

    I am affraid the InkCanvas does not support rotation. I have the same pb with the Frame control if you want to display html content.

    For the automatic animation when clicking the Next/Previous buttons, I thought about it. It not very hard but if I make a direct animation between the two opposite corners it’s not very nice because no rotation. It would be nice to have an more complex path make the animation more realistic. I will try to do that when having some time.

    Mitsu

  33. Aleks says:

    Mitsu I have one question about this control.

    Can it load swf files in the page ?

    I am now configurating my pc to test wpf and I can’t try the control yet.

    Aleks

  34. Mitsu Furuta says:

    No you can’t,

    The page content must be a full WPF content supporting rotation and clipping. If any control includes a win32 surface (IE, swf), it will appear in the page but won’t turn during the animation.

  35. logan says:

    Hi,

    I tried this out but I don’t see any animation when I click on the next page button.

    I’m on WinXP Media center with .NET 3.0, WPF extensions for VS 2005, and Blend installed.

    Can you please help?

    Thanks.

    Best Regards,

    Hitesh

  36. logan says:

    Hello Mitsu,

    It’s a great piece of control! Thanks for creating it!! I didn’t know that I had to click on bottom of the page and then move it for the page to be flipped, I apologize for my last post.

    Now I have the same question as Brian, can you implement an animation for the Next button? So that the animation happens automatically? And why not add a page delete effect, where the page can be removed from the book.

    Kindly give some pointers on it as I’m fairly new to WPF.

    Thanks.

    Best Regards,

    Hitesh

  37. pb says:

    Super control, merci.

    Mais je constate une erreur lorsque ce control est utilisé dans une application xbap.

    Dans Book.xaml l’affectation de "onRightMouseDoubleClicke" à MouseDoubleClick génère une erreur : impossible de trouver CreateDelegate_ ????

    Merci.

  38. Have you guys seen the WPF Book control? It&#39;s been done in Flash before but this .WPF version is

  39. Philippe says:

    Mitsu,

    Un grand merci pour la mise à dispo gracieuse de ce travail Wordl Class !

    Webcasts, tutoriaux, sources UC… grâce à toi le .net (en français) devient plus simple. Merci.

  40. MS Blog says:

    Beaucoup d&#39;entre vous ont déjà vu la démonstration de Mitsu Furata consistant à créer une application

  41. Mitsu's blog says:

    Here is a beautiful WPF application that is using my WPFBookControl : http://mangareader.wordpress.com/

  42. Voici une très jolie application écrite avec le WPFBookControl que j’avais développé il y a quelque temps:

  43. Voici une très jolie application écrite avec le WPFBookControl que j&#39;avais développé il y a quelque

  44. Manga Reader, le lecteur de book Manga en WPF

  45. Ozzy says:

    How hard would it be to make this into a Silverlight 2 control?

  46. Obaid says:

    Your control is great. I’m using it to develop a print preview app.

    Right now I’m stumbling into a problem i.e. here we have requirement that different pages could be of different colors. To acheive this I have created a custom control which displays a single page as a transperant bitmap image inside a border. I’m adding this control as Book item. Since I want different colors for the borders background, I defined PrintContext class which presently contains a single color property. I asssign this to DataContext property of Book’s parent that is a use control. I change this context’s color property thru a Combobox selection change event. Now I a wrote code in code-behind to bind my custom control’s border’s background property to the above datacontext defined in its ancestor.

    AcrobatPage page = new AcrobatPage()

    Binding binding = new Binding("UniversalBackground");

    binding.Mode = BindingMode.OneWay;

    page.SetBinding(BackgroundProperty, binding);

    but it is not working. Could u please guide me in this.

    Thanks

    -Obaid

  47. Mitsu Furuta says:

    Hi Obaid,

    I assume that the source of the binding object is a PrintContext object. Is your BackgroundProperty a dependency property ?

    Do you have an exception or nothing appears ?

    Is the first time binding working ?

  48. Vinoth says:

    Hi Mitsu,

     Thanks for this control. We actually expected this control. this book have two pages in one sheet, But we have one issue, we want to use one page per one sheet, we will have 2 sheets (left and right) each will have child controls Page. Whether this is possible ??

    Thanks in advance,

    Vinoth

  49. Après une soirée à coder, voici ma première petite application WPF. En utilisant le control WPFControlBook

  50. Après une soirée à coder, voici ma première petite application WPF. En utilisant le control WPFControlBook

  51. rcr says:

    Hi Mitsu,

    Its a great control. Is is possible to make a page as a double page, ie)I need to have a single control, which spans across two pages.

    Thanks

    Clement

  52. Vous connaissez sans doute d&#233;j&#224; Mitsu Furuta pour ses sessions techniques avanc&#233;es sur

  53. Mathou says:

    How can i turn several pages by programming.

  54. Mitsu Furuta says:

    Hi!

    There is a CurrentSheetIndex property that you can play on.

  55. Techniques says:

    By Don Burnett I have always loved comic books as a kid. It wasn’t until I was an adult that I saw the

  56. Anonymous says:

    By Don Burnett I have always loved comic books as a kid. It wasn’t until I was an adult that I saw the Japanese versions of comics, as full graphics novels. Now they are making the transition to online as many publications have (including the New York

  57. Mathou says:

    To continue with the "how can I" theme:

    How can I shunt the autoturn (it’s when the graphic powerless config is detected by my app), to have directly the foward page ?

    I also have listview/gridview with combo that must be filling after the page is turned, wich event can call my method ?

  58. Mitsu Furuta says:

    You can change the CurrentSheetIndex value to navigate without turning pages.

  59. Oxycodone and oxycontin. Compare oxycontin to oxycodone. Oxycontin vs. oxycodone.

  60. Lord Dante III says:

    Реальная вещь, и что самое главное работает просто идеально. Искал долго, и наконец нашел. Спасибо.

  61. Tom says:

    Mitsu,

    Excellent control.  I’m using it in a Silverlight application that allows users to create a photo album with text and pictures that the user can freely place move, rotate and size (I can provide a link when it’s ready).  I do have one question.  How do I reference the Canvas control of the pages being displayed (both of them)?  I need to save the changes that the user makes at some point like when the pageturn event occurs.  Currently I allow them to make changes in a static Canvas and then display them in the book control to view the album.  It would be great if they could stay in the "book" mode all of the time.

    Thanks

    Tom

  62. Mitsu Furuta says:

    Hi Tom,

    If your canvas belongs to the databound collection (a collection of visuals) then you can retrieve inside the collection using the page index.

    If your canvas is defined in a resource or template, you must use the VisualTreeHelper to retrieve it in the control tree. No other way.

    Mitsu

  63. Ricardo Perdigao says:

    Hi Mitsu,

    Is there a way to implement the same fuctionality (Having pages as UseControls) on SLBookDemoApp? Basically a SLBookDemoApp with the functionality of BookDemoApp.

    I am trying to use your presentation application as a Canvas and instatiate other Silverlight Pages on the Web. My issue is:

    – The BookDemo Solution does not allow me to instantiate Silverlight Controls on the Pages(Blacklight for Example).

    – The SLBookDemo Solution is not designed to support  User Controls.

    I am new to Silverlight, any directions would be appreciated !

    Awesome work by the way !

    Ricardo Perdigao

  64. Anosa says:

    I love your control, it’s really nice, I had a question how can I fire an event every time a page is tunred, what type of event will that be?

  65. siva says:

    hi all,

    i created gridview in listview.now i want code for show and hiding the gridview.

  66. ab says:

    slt merci pour ce control book mais mon problème c’est que je voudrais recuperer des données dans une base de donnée SQL pour tracer un Graphique pour l’afficher dans l’une des pages mon mail:shimomura@live.fr

  67. microsoft_kc says:

    Hi,

    Can anybody tell me how can I achieve the following with this control:

    The current control is using the Portrait mode. But, I want to develop a book which will be in Landscape mode.

    How can I achieve this? Any suggestion?????

  68. AChurikov says:

    Excellent! I’m planning to add multitouch functionality to your control.

  69. M.Yousry says:

    Hello Mitsu

    thank you for your efforts

    I am new to programming … i want the easiest way to use this control as a custom control

    would you please tell me how to do that or use this control in my project

  70. Mitsu Furuta says:

    There is a very simple demo application provided with the source code. Just look at it.

  71. robinlolo says:

    i already did that

    but i don’t know how to add the control from ur source code to my project

  72. robinlolo says:

    Please guys tell me how to add this control to my project i am new to WPF and programming plz help me i need this control so much

  73. Mitsu Furuta says:

    Look at the demo app !! 🙂

    1- add a reference to the library containing the control.

    2- In your xaml file, now add an xml namespace prefix targeting this library (like in the demo app).

    3- now you can add the BookControl using the prefix.

  74. Cheng Teck says:

    Hi Mitsu..

    Great control you have there..

    I wonder if it can support RenderTransform?

    I am doing a Windows 7 Multitouch Application based on your control.

    After implementing, I should be suppose to rotate, translate and enlarge your book control.

    However I run into some problem.. Can you help me with it?

    The error in the Windows1.Xaml

    Cannot set Name attribute value ‘_rotate’ on element ‘RotateTransform’. ‘RotateTransform’ is under the scope of element ‘Book’, which already had a name registered when it was defined in another scope.

    That portion of code of the book control in the Windows1.Xaml is below

    <controls:Book x:Name="myBook" Width="600" Height="400" Margin="25">

                       <controls:Book.RenderTransform>

                           <TransformGroup>

                               <RotateTransform x:Name="_rotate" Angle="0"></RotateTransform>

                               <ScaleTransform x:Name="_rotate" ScaleX="1" ScaleY="1"></ScaleTransform>

                               <TranslateTransform x:Name="_rotate" X="0" Y="0"></TranslateTransform>

                           </TransformGroup>

                       </controls:Book.RenderTransform>

                       <controls:Book.ItemTemplate>

    <DataTemplate>

    <Border BorderThickness="4" BorderBrush="Gray" Background="Transparent">

    <ContentControl Content="{Binding .}" />

    </Border>

    </DataTemplate>

    </controls:Book.ItemTemplate>

    <local:UCCube />

    <local:UCControls />

    <local:UCClippingTransparency />

    <local:UCClippingTransparency />

    <local:UCClipping />

    <local:UCClipping />

    <local:UCTriggers />

    <local:UCFixedDocument />

    <local:UCDataBindingTransformation />

    <local:UCXaml />

    <local:UCAbout />

    <local:UCTheEnd />

    </controls:Book>

  75. Mitsu Furuta says:

    Hi Cheng,

    Did you try to put it in another parent (a border for example) and then play with the border transformations.

    If you are implementing multitouch in a generic way (like surface Api), maybe you should better do it in a separated control.

    Regards,

    Mitsu

  76. Cheng Teck says:

    Oh.. Thanks for the advice..

    I am following this example..

    http://www.codeproject.com/Articles/41711/Windows-7-Multitouch-Application-Development-Part-I.aspx

    I have a problem..

    How do I add item into the collection?

    I can’t add item inside the collection..

    This is what I get..

    [IMG]http://i28.tinypic.com/5u0py9.png[/IMG]

  77. Cheng Teck says:

    Hi again..

    I manage to add items inside my collection with the following code..

    <Grid>

           <StackPanel Margin="18,36,60,126" Name="stackPanel1">

               <controls:Book x:Name="myBook" Width="600" Height="400">

                   <local:UCStart />

                   <local:UCSecond />

                   <local:UCThird />

               </controls:Book>

           </StackPanel>

       </Grid>

    From the code above, I have 3 pages..

    First Page is UCStart

    Second Page is UCSecond

    Third Page is UCThird

    However, when I deploy the application, it only show the first page.. There is no animation for me to turn the page.. =(

    Picture of what i see..

    http://tinypic.com/r/2guze34/3

    Can you help me?

  78. Cheng Teck says:

    Never mind.. =D

    I got it to work..

    I realised I forgotten about this line..

    <controls:Book.ItemTemplate>

                       <DataTemplate>

                           <Border BorderThickness="1" BorderBrush="Gray" Background="Transparent">

                               <ContentControl Content="{Binding .}" />

                           </Border>

                       </DataTemplate>

                   </controls:Book.ItemTemplate>

    My bad.. Sorry..

    Thanks alot for the help.. =D

  79. Kishore says:

    Hi Mitsu.. Excellent work.

     How can i resize the page programatically by avoiding the ViewBox. I removed the Viewbox and now it is wokring perfect. But if i change the resolution the border automatically expands but the page is not expanding automatically. But if i click on the Next button and previous button once the layout is automatically adjusted to the new Size.

  80. Danny says:

    Mitsu, I am on a project and have used your control with SL3 and have Visifire Charts on each page.  It works great and you have to be praised-  I do have a need that I do not see exposed.  I am putting a row of four buttons outside of the book to change chart types (pages)  It works, but now the client has asked to see page turning on the clicks.  I need to turn one, two, or three pages instead of just left one or right one page.  Can this be done at this time?  Many thanks, Danny

  81. Allan says:

    @Kishore

    I ran into the same issue you had with resizing.  I’m pretty new to WPF so I am not sure if this is the ‘correct’ fix but it works.

    In the BookPage class I connected to the SizeChanged Event as follows.  This sets the clipping rectangle to the new size of the page and avoids having to navigate backwards and forwards to get the resized pages displayed correctly.

    void BookPage_SizeChanged(object sender, SizeChangedEventArgs e)

           {

               RectangleGeometry rg = (RectangleGeometry)clippingPage0.Geometry1;

               rg.Rect = new Rect(e.NewSize);

           }

  82. EKA says:

    Hi,

    Great control.

    I can’t open the WPF project in VS 2008 Express. Any suggestions?

    Is it only for non-Express versions? Does it work for VS 2010 Beta?

    Thanks.

  83. med says:

    Thanks a lot mitsu, finaly i find a good raison to translate to WPF.

    Thanks for your sharing!

  84. yuya says:

    Bonjour,

    En WPF, peut-on rajouter des pages dynamiquement? C’est dommage qu’il n’y ai pas de mybook.pages.add par exemple

    Merci d’avance!

  85. Mitsu Furuta says:

    On peut ajouter des pages dynamiquement !

    book.Items.Add(visual);

    ou par binding en ajoutant un nouvel élément dans une observablecollection.

  86. hoon says:

    Hi, Thanks for your sharing.

    but i have some trouble to transform your control.

    i wrapped your control into Viewport2DVisual3D,then..

    when i tried to turn some pages, It throw InvalidOperationException.

    forgive my bad english.

  87. Can your next and previous buttons animate a flip instead of just switching pages?  I like the animation, but would like to implement a simple version of it when the Next button is clicked.

    http://www.chaussurestnfr.com

    good

  88. Mitsu Furuta says:

    Oui, il y a des methodes publiques qui tournent les pages de manières animées. Voir l’application de démo

  89. khokhar.hassan says:

    Hi, i am new to WPF and your book control, i need to switch(like next and previous options) to specific page in the book, can you help me in this regard.

    thanks

  90. Mitsu Furuta says:

    Yes, you can change the CurrentSheetIndex value. You also have animated MoveToNext() and MoveToPrevious() methods. See the demo app.

  91. khokhar.hassan says:

    Thanks it works, one thing i want to know regarding sheet i.e. a sheet contains two pages view of book at one time or one page represents sheet index.

  92. Hassan says:

    I need to know how can i raise page changed event, whenever a page is turned. Also i looked at the demo application and unable to find relevant help. Please reply

  93. Adam says:

    The book does not support turn page from page center, it is not reasonable. Can you implement it?

  94. Subhash says:

    Hi ,

        I am facing a problem in this book control.

    The default behaviour of this control is that it will display the first page on the right side upon rendering

    but I want to display both  left and right pages together  when the control render first time.

  95. jim says:

    Hi Mitsu,

    I saw this question popped up in previous comments, but I couldn't find an answer. Is there a way in your nice control to span 1 control over 2 pages (left and right)?

    Thanks

  96. Bamshad A says:

    Thank you very much

    we used this control and it was really nice and impressive

    The code also was not buggy and everything was working properly

    Thanks again

    Bamshad

  97. Great control says:

    Great control.

    I can't open the WPF project in VS 2008 Express. Any suggestions?

  98. Raghu says:

    Great website without any explanation gave sample ultimate u r rocking 😀

  99. Vipul Patel says:

    Hi Mitsu,

    First of all, excellent example… thanks for sharing…

    now i am using it in surface 2 application…and I have replaced Mouse events with TouchDown, TouchMove, TouchLeave and TouchUp events.

    However it fires TouchDown and TouchLeave events and executes normally(similar like your code)… but TouchMove and TouchUp events are not firing and because of that Flip animation is not working….

    please help me ….

    Waiting for your reply…

    Thanks again…

  100. Manal Dadge says:

    Hi Mitsu,

    Even i want to use ur application on Surface 2.0.Plz help me.

    I m having the same problem as my friend Vipul patel above is facing.Plz help me.

    my email addess is manaldadge@gmail.com

  101. Musakkhir Sayyed says:

    How to bind 10 images in book control on button click.

  102. Musakkhir says:

    How to Store current image from WPF Book Control in ListBox.

  103. Neeta says:

    how to add touch manipulation code for the same.

Skip to main content