Autoplaying the Pages of a C1MultiPage

ComponentOne MultiPage for ASP.NET AJAX: MultiPage for ASP.NET AJAX Task-Based Help > Setting C1MultiPage Behaviors > Autoplaying the Pages of a C1MultiPage

By setting a single property, you can make the C1MultiPage control automatically navigate between pages. You can also customize autoplay by setting the delay between page transitions. This topic will show you how to set autoplay and customize its delay time in Design view, in Source view, and in code.

Setting up Autoplay in Design View

To set up auto play, complete the following steps:

1. Click C1MultiPage's smart tag () to open the C1MultiPage Tasks menu and select MultiPage Designer.

The C1MultiPage Designer Form opens.

2. Use the Add Child Item button to add three C1PageViews to the C1MultiPage control.

3. Set the ContentUrl property to the following for each of your new pages:

• C1PageView1 – "http://www.microsoft.com"

• C1PageView2 – "http://www.google.com"

• C1PageView3 – "http://www.componentone.com"

4. In treeview, select C1MultiPage1 to reveal a list of its properties and set the following.

• Set the AutoPlay property to True.

• Set the Delay property. For this example, we are going to set it to "1500" milliseconds so that 1.5 seconds will pass before the page will switch.

Note: If you want the C1MultiPage control to stop autoplaying after one course, set its Loop property to False.

5. Press OK and run the project.

Setting up Autoplay in Source View

To set up auto play in source view, please complete the following steps:

1. Add a C1MultiPage control to your project.

2. Create three C1PageViews, add them to the C1MultiPage, and set their ContentUrl properties by adding the following HTML between the <cc1:C1MultiPage> tags:

<cc1:C1PageView ID="C1PageView1" runat="server" _designerRegion="0" ContentUrl="http://msdn.microsoft.com">

</cc1:C1PageView>

<cc1:C1PageView ID="C1PageView2" runat="server" ContentUrl="http://www.google.com">

</cc1:C1PageView>

<cc1:C1PageView ID="C1PageView3" runat="server" ContentUrl="http://www.componentone.com">

</cc1:C1PageView>

</PageViews>

3. To set up AutoPlay in Source view, add AutoPlay="True" and "Delay="1500" to the <cc1:C1MultiPage> tag. Your HTML should resemble the following:

<cc1:C1MultiPage ID="C1MultiPage1" runat="server" Height="250px"

VisualStylePath="~/C1WebControls/VisualStyles" Width="300px" AutoPlay="True" Delay="1500">

Setting up AutoPlay Property in Code

To set up autoplay on your C1MultiPage control, complete the following steps:

1. Add a C1MultiPage control to your project.

2. Import the following namespace into your project:

• Visual Basic

Imports C1.Web.UI.Controls.C1MultiPage

• C#

Using C1.Web.UI.Controls.C1MultiPage;

3. Create three C1PageViews by adding the following code to the Page_Load event:

• Visual Basic

'Create three new C1PageViews

Dim C1PageView01 As New C1PageView()

Dim C1PageView02 As New C1PageView()

Dim C1PageView03 As New C1PageView()

• C#

//Create three new C1PageViews

C1PageView C1PageView01 = new C1PageView();

C1PageView C1PageView02 = new C1PageView();

C1PageView C1PageView03 = new C1PageView();

4. Set the ContentUrl property of each page:

• Visual Basic

'Add content to the C1PageViews

C1PageView01.ContentUrl = "http://msdn.microsoft.com"

C1PageView02.ContentUrl = "http://www.google.com"

C1PageView03.ContentUrl = "http://www.componentone.com"

• C#

//Add content to the C1PageViews

C1PageView01.ContentUrl = "http://msdn.microsoft.com";

C1PageView02.ContentUrl = "http://www.google.com";

C1PageView03.ContentUrl = "http://www.componentone.com";

5. Add the C1PageViews to the C1MultiPage control:

• Visual Basic

'Add the new C1PageViews to the C1MultiPage

C1MultiPage1.Controls.Add(C1PageView01)

C1MultiPage1.Controls.Add(C1PageView02)

C1MultiPage1.Controls.Add(C1PageView03)

• C#

//Add the new C1PageViews to the C1MultiPage

C1MultiPage1.Controls.Add(C1PageView01);

C1MultiPage1.Controls.Add(C1PageView02);

C1MultiPage1.Controls.Add(C1PageView03);

6. Set the AutoPlay and Delay properties by adding the following code to your Page_Load event:

• Visual Basic

C1MultiPage1.AutoPlay = True

C1MultiPage1.Delay = 1500

• C#

C1MultiPage1.AutoPlay = true;

C1MultiPage1.Delay = 1500;

7. Run the program.

This Topic Illustrates the Following:

A C1MultiPage control can be set up to automatically play through its pages in a variety of speeds. When you run the program, observe that your C1MultiPage automatically cycles through each page.