Partager via

WPF Book control

  • Article

[Update: WPFBookControl now available on codeplex: https://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 (https://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: https://www.codeplex.com/wpfbookcontrol ]

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

Comments

  • Anonymous
    April 17, 2007
    PingBack from http://benjamingauthey.com/PermaLink,guid,dc6ae566-8427-4ee1-8c8f-a75a6b96cbd4.aspx

  • Anonymous
    April 17, 2007
    Voici un contrôle WPF prêt à l'utilisation. Aussi simple à utiliser qu'un ListBox avec un rendu un peu

  • Anonymous
    April 18, 2007
    Mitsu Furuta , Microsoft France , vient de terminer son controle de "Flip Page" que tout le monde attendait:

  • Anonymous
    April 18, 2007
    wouahhhh :) la classe mitsu :) ;););)

  • Anonymous
    April 18, 2007
    Yeah, bien joué Mitsu, je teste ça dès que possible chez moi !!! Mitsu c'est le French WPF Roxxor !!

  • Anonymous
    April 18, 2007
    extra, merci mistu !

  • Anonymous
    April 18, 2007
    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 ;-)

  • Anonymous
    April 18, 2007
    Ah Enfin... Magnifique ! un grand merci pour le partage des sources. Encore Bravo.

  • Anonymous
    April 18, 2007
    The comment has been removed

  • Anonymous
    April 18, 2007
    Very nicely done!  I love it.

  • Anonymous
    April 18, 2007
    WPF Book control par Mitsu Furata

  • Anonymous
    April 18, 2007
    Very good Mitsu san, thank you. ;-)

  • Anonymous
    April 18, 2007
    Magnifique ce sont des choses comme cela qui donnent vraiment envie de développer avec WPF bravo et merci :)

  • Anonymous
    April 18, 2007
    Mitsuru Furuta a développé et mis à disposition un contrôle WPF (Book ), qui permet de composer et de

  • Anonymous
    April 18, 2007
    congratulations mitsu! very good piece of software!! :D

  • Anonymous
    April 18, 2007
    Mitsu פרסם את ה Control החדש שהוא כתב. מאוד מרשים, תורידו את זה ותריצו. מאחר וה Control הזה הוא בעצם

  • Anonymous
    April 19, 2007
    beautiful!

  • Anonymous
    April 19, 2007
    En VB, ça donne quoi le code? !

  • Anonymous
    April 19, 2007
    Excellent - just what I was looking for

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

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

  • Anonymous
    April 20, 2007
    molto bello e utile

  • Anonymous
    April 21, 2007
    Looks like web 3.0 app for me :). Nice work Mitsuru!

  • Anonymous
    April 21, 2007
    WPF Book control by Mitsu Furata

  • Anonymous
    April 22, 2007
    Visual Studio Orcas Beta 1 is available for download . Though quite similar to the March CTP in terms

  • Anonymous
    April 23, 2007
    Merci beaucoup de ce super code. Au plaisir de te rencontrer sur paris.

  • Anonymous
    April 24, 2007
    ça déchire grave ! ;-)

  • Anonymous
    May 07, 2007
    It's very nice. Thanks to mitsu. Hope will gets no.of amazing things like it.

  • Anonymous
    May 19, 2007
    The comment has been removed

  • Anonymous
    May 19, 2007
    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.

  • Anonymous
    August 09, 2007
    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.

  • Anonymous
    August 09, 2007
    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.

  • Anonymous
    August 09, 2007
    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.

  • Anonymous
    August 09, 2007
    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

  • Anonymous
    August 29, 2007
    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

  • Anonymous
    September 02, 2007
    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.

  • Anonymous
    September 03, 2007
    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

  • Anonymous
    September 03, 2007
    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

  • Anonymous
    September 05, 2007
    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.

  • Anonymous
    September 15, 2007
    The comment has been removed

  • Anonymous
    October 25, 2007
    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.

  • Anonymous
    December 05, 2007
    Beaucoup d&#39;entre vous ont déjà vu la démonstration de Mitsu Furata consistant à créer une application

  • Anonymous
    January 16, 2008
    Here is a beautiful WPF application that is using my WPFBookControl : http://mangareader.wordpress.com/

  • Anonymous
    January 16, 2008
    Voici une très jolie application écrite avec le WPFBookControl que j'avais développé il y a quelque temps:

  • Anonymous
    January 16, 2008
    Voici une très jolie application écrite avec le WPFBookControl que j&#39;avais développé il y a quelque

  • Anonymous
    January 25, 2008
    Manga Reader, le lecteur de book Manga en WPF

  • Anonymous
    March 31, 2008
    How hard would it be to make this into a Silverlight 2 control?

  • Anonymous
    May 08, 2008
    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

  • Anonymous
    May 08, 2008
    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 ?

  • Anonymous
    May 16, 2008
    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

  • Anonymous
    May 18, 2008
    Après une soirée à coder, voici ma première petite application WPF. En utilisant le control WPFControlBook

  • Anonymous
    May 19, 2008
    Après une soirée à coder, voici ma première petite application WPF. En utilisant le control WPFControlBook

  • Anonymous
    May 20, 2008
    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

  • Anonymous
    June 01, 2008
    Vous connaissez sans doute d&#233;j&#224; Mitsu Furuta pour ses sessions techniques avanc&#233;es sur

  • Anonymous
    July 06, 2008
    How can i turn several pages by programming.

  • Anonymous
    July 09, 2008
    Hi! There is a CurrentSheetIndex property that you can play on.

  • Anonymous
    July 17, 2008
    The comment has been removed

  • Anonymous
    July 17, 2008
    The comment has been removed

  • Anonymous
    August 20, 2008
    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 ?

  • Anonymous
    September 16, 2008
    You can change the CurrentSheetIndex value to navigate without turning pages.

  • Anonymous
    November 09, 2008
    Oxycodone and oxycontin. Compare oxycontin to oxycodone. Oxycontin vs. oxycodone.

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

  • Anonymous
    November 18, 2008
    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

  • Anonymous
    November 23, 2008
    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

  • Anonymous
    January 15, 2009
    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

  • Anonymous
    February 14, 2009
    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?

  • Anonymous
    February 20, 2009
    hi all, i created gridview in listview.now i want code for show and hiding the gridview.

  • Anonymous
    May 08, 2009
    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

  • Anonymous
    July 27, 2009
    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?????

  • Anonymous
    August 08, 2009
    Excellent! I'm planning to add multitouch functionality to your control.

  • Anonymous
    August 19, 2009
    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

  • Anonymous
    August 19, 2009
    There is a very simple demo application provided with the source code. Just look at it.

  • Anonymous
    August 19, 2009
    i already did that but i don't know how to add the control from ur source code to my project

  • Anonymous
    August 24, 2009
    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

  • Anonymous
    August 26, 2009
    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.

  • Anonymous
    September 03, 2009
    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>

  • Anonymous
    September 03, 2009
    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

  • Anonymous
    September 03, 2009
    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]

  • Anonymous
    September 06, 2009
    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?

  • Anonymous
    September 06, 2009
    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

  • Anonymous
    October 06, 2009
    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.

  • Anonymous
    December 03, 2009
    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

  • Anonymous
    January 11, 2010
    @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);        }

  • Anonymous
    January 12, 2010
    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.

  • Anonymous
    February 06, 2010
    Thanks a lot mitsu, finaly i find a good raison to translate to WPF. Thanks for your sharing!

  • Anonymous
    February 11, 2010
    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!

  • Anonymous
    February 15, 2010
    On peut ajouter des pages dynamiquement ! book.Items.Add(visual); ou par binding en ajoutant un nouvel élément dans une observablecollection.

  • Anonymous
    February 18, 2010
    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.

  • Anonymous
    March 11, 2010
    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

  • Anonymous
    May 09, 2010
    Oui, il y a des methodes publiques qui tournent les pages de manières animées. Voir l'application de démo

  • Anonymous
    May 12, 2010
    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

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

  • Anonymous
    May 12, 2010
    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.

  • Anonymous
    May 25, 2010
    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

  • Anonymous
    November 05, 2010
    The book does not support turn page from page center, it is not reasonable. Can you implement it?

  • Anonymous
    November 14, 2010
    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.

  • Anonymous
    June 13, 2011
    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

  • Anonymous
    June 15, 2011
    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

  • Anonymous
    March 05, 2012
    Great control. I can't open the WPF project in VS 2008 Express. Any suggestions?

  • Anonymous
    April 17, 2012
    Great website without any explanation gave sample ultimate u r rocking :D

  • Anonymous
    June 29, 2013
    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...

  • Anonymous
    August 09, 2013
    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

  • Anonymous
    November 13, 2013
    How to bind 10 images in book control on button click.

  • Anonymous
    December 02, 2013
    How to Store current image from WPF Book Control in ListBox.

  • Anonymous
    August 20, 2015
    how to add touch manipulation code for the same.