Welcome to MSDN Blogs Sign in | Join | Help

Mitsu's blog

Discussing topics related to .Net, WPF, C# and Linq
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.

Posted: Wednesday, April 18, 2007 10:22 AM by mitsu
Filed under: , ,

Comments

Mitsuru FURUTA - Microsoft FRANCE said:

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

# April 18, 2007 5:54 AM

Thomas Lebrun said:

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

# April 18, 2007 8:11 AM

Laurent Kempé said:

wouahhhh :) la classe mitsu :)

;););)

# April 18, 2007 9:27 AM

PoluxX said:

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

Mitsu c'est le French WPF Roxxor !!

# April 18, 2007 10:35 AM

orion said:

extra, merci mistu !

# April 18, 2007 10:47 AM

Matthieu MEZIL said:

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 ;-)

# April 18, 2007 11:21 AM

CeluiQuiAttendait said:

Ah Enfin...

Magnifique ! un grand merci pour le partage des sources.

Encore Bravo.

# April 18, 2007 11:33 AM

Laurent Kempé said:

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

# April 18, 2007 12:47 PM

Robby Ingebretsen said:

Very nicely done!  I love it.

# April 18, 2007 2:20 PM

Mattk's Weblog said:

WPF Book control par Mitsu Furata

# April 18, 2007 2:27 PM

Mark Wisecarver said:

Very good Mitsu san, thank you. ;-)

# April 18, 2007 3:57 PM

romagny13 said:

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

bravo et merci :)

# April 18, 2007 4:16 PM

Olivier Dewit said:

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

# April 18, 2007 5:42 PM

rodrigoratan said:

congratulations mitsu! very good piece of software!! :D

# April 18, 2007 11:30 PM

It's All About Causality said:

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

# April 19, 2007 2:19 AM

Joseph Cooney said:

beautiful!

# April 20, 2007 1:22 AM

malabar said:

En VB, ça donne quoi le code? !

# April 20, 2007 4:52 AM

Mick Lohan said:

Excellent - just what I was looking for

# April 20, 2007 5:18 AM

Mitsu's blog said:

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

# April 20, 2007 5:21 AM

Mitsuru FURUTA - Microsoft FRANCE said:

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

# April 20, 2007 5:30 AM

davide said:

molto bello e utile

# April 20, 2007 10:56 AM

Srikanth said:

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

# April 21, 2007 2:55 PM

Mattk's Weblog said:

WPF Book control by Mitsu Furata

# April 22, 2007 6:23 AM

Charlie Calvert's Community Blog said:

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

# April 23, 2007 12:04 AM

Choulant Noham (pc152) said:

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

# April 23, 2007 10:47 AM

Benjamin AUMAILLE said:

ça déchire grave ! ;-)

# April 24, 2007 9:41 AM

Prabu said:

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

# May 7, 2007 11:04 AM

Mete said:

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

# May 19, 2007 5:55 PM

mitsu said:

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.

# May 20, 2007 5:11 AM

Animate Flip with button said:

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.

# August 9, 2007 10:52 AM

Brian said:

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.

# August 9, 2007 10:52 AM

Brian said:

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.

# August 9, 2007 12:44 PM

mitsu said:

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

# August 9, 2007 2:32 PM

Aleks said:

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

# August 30, 2007 4:18 AM

mitsu said:

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.

# September 2, 2007 6:54 PM

logan said:

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

# September 3, 2007 5:59 PM

logan said:

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

# September 4, 2007 4:20 AM

pb said:

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.

# September 5, 2007 11:36 AM

Noticias externas said:

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

# September 15, 2007 11:09 PM

Philippe said:

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.

# October 25, 2007 10:18 AM

MS Blog said:

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

# December 5, 2007 1:59 PM

Benjamin Gauthey - Microsoft Enthusiast Evangelist said:

# December 15, 2007 9:20 PM

Mitsu's blog said:

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

# January 16, 2008 1:43 PM

Mitsuru FURUTA - Microsoft FRANCE said:

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

# January 16, 2008 1:48 PM

Noticias externas said:

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

# January 16, 2008 2:06 PM

Name of the blog said:

Manga Reader, le lecteur de book Manga en WPF

# January 25, 2008 5:50 PM

Ozzy said:

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

# March 31, 2008 9:53 PM

Obaid said:

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

# May 8, 2008 3:33 PM

mitsu said:

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 ?

# May 8, 2008 7:21 PM

Vinoth said:

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

# May 17, 2008 5:08 AM

Blog Technique d'Audrey PETIT said:

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

# May 18, 2008 2:38 PM

Blog Technique d'Audrey PETIT said:

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

# May 19, 2008 9:24 AM

rcr said:

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

# May 21, 2008 1:41 AM

Christophe Lauer, Blog Edition said:

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

# June 1, 2008 11:57 AM

Mathou said:

How can i turn several pages by programming.

# July 7, 2008 4:15 AM

mitsu said:

Hi!

There is a CurrentSheetIndex property that you can play on.

# July 9, 2008 4:09 PM

Techniques said:

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

# July 17, 2008 1:11 PM

TrackBack said:

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

# July 17, 2008 1:14 PM

Mathou said:

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 ?

# August 20, 2008 9:54 AM

mitsu said:

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

# September 16, 2008 4:05 PM

Compare oxycontin to oxycodone. said:

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

# November 9, 2008 11:04 PM

Lord Dante III said:

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

# November 10, 2008 4:59 AM

Tom said:

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

# November 18, 2008 10:03 AM

mitsu said:

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

# November 23, 2008 4:47 PM

Ricardo Perdigao said:

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

# January 15, 2009 2:58 PM

Anosa said:

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?

# February 15, 2009 5:33 AM

siva said:

hi all,

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

# February 21, 2009 6:29 AM

ab said:

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

# May 9, 2009 4:35 AM

microsoft_kc said:

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?????

# July 28, 2009 5:25 AM

AChurikov said:

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

# August 8, 2009 2:32 PM

M.Yousry said:

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

# August 19, 2009 8:50 AM

mitsu said:

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

# August 19, 2009 9:30 AM

robinlolo said:

i already did that

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

# August 19, 2009 10:15 AM

robinlolo said:

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

# August 24, 2009 9:29 AM

mitsu said:

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.

# August 26, 2009 5:19 PM

Cheng Teck said:

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>

# September 4, 2009 2:33 AM

mitsu said:

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

# September 4, 2009 2:56 AM

Cheng Teck said:

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]

# September 4, 2009 4:27 AM

Cheng Teck said:

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?

# September 6, 2009 11:12 PM

Cheng Teck said:

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

# September 6, 2009 11:15 PM

Kishore said:

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.

# October 7, 2009 5:57 AM
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