WPF and Silverlight BookControls: source code available

  • Article

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 !

SLBookControl

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: