BookControl - Usage tutorial
Last modified: April 10, 2012
The first steps
To start using BookControl for WP7 follow these steps:
- Install Bee Mobile Metropolis to you computer.
- Start Visual Studio 2010 and create a new project of type Windows Phone Application. You will find it in Silverlight for Windows Phone category.
- Browse to the installation folder on your hard drive.
- Read the AddControlsToToolbox.pdf file located in it to find out how to add Metropolis components to Toolbox of your Visual Studio.
- Delete all default control from the page (two TextBlocks and two Grids).
- Double click BookControl from the Toolbox to put it to your page.
- Set HorizontalAlignment property to Stretch.
- VerticalAlignment property to Top.
- Set Width property to Auto.
- Set Height property to 300.
Adding pages to BookControl
The pages of BookControl should be Canvas objects. Each Canvas object represents one page of BookControl. To add pages to BookControl, create Canvas objects first.
To display images in the BookControl, simply set its Background property to an ImageBrush. Property ImageSource of ImageBrush has to be attached to the actual image which you wish to display. You can load the images from your project’s resources, but you can also download them from the Internet (either from a URL or from a Web Service).
To add the Canvas objects to BookControl you can either use XAML or C#.
Example code for XAML:
<my:BookControl Name="bookControl1" HandleSize="120"> <Canvas Width="362" Height="478"> <Canvas.Background> <ImageBrush ImageSource="/BookControlSample1;component/Images/catStart.png" /> </Canvas.Background> </Canvas> </BookControl>
Let’s say we have a custom Canvas object which is described in XAML so:
<Canvas x:Class="BookControlTutorial.Page1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" d:DesignHeight="480" d:DesignWidth="480" Width="240" Height="300"> <Canvas.Background> <ImageBrush ImageSource="/BookControlTutorial;component/Images/Desert.jpg" Stretch="Fill" /> </Canvas.Background> </Canvas>
To add this Canvas object to BookControl use this code in your page’s constructor for example:
public MainPage() { InitializeComponent(); Page1 p1 = new Page1(); bookControl1.Children.Add(p1); }
Note that you can put any other controls on your Canvas objects and thus create an interesting and attractive GUI. You can also use BookControl to create:
- Catalogues
- Step-by-step wizards
- Data input forms
This concludes the tutorial for BookControl for WP7. Please send your feedback to support@beemobile4.net.