Animate the page expanding in RadPageView with ExplorerBar view

RELATED TO:

AUTHOR: Dimitar Karamfilov

DATE POSTED: March 19, 2015

Problem
This article demonstrates how you can change the current page when a page is hovered and how you can animate the page expanding.

 
PageViewAnimation002

Solution
Firstly, you should create a new project and add a RadPageView to the form. Additionally, set the view mode to ExplorerBar and add some pages. The form should look like this:
 
PageViewAnimation001

The animation effect will be achieved by using a timer. On each timer tick the current page size should be increased until the page is fully expanded. This process can be started when a page is expanded – in the PageExpanded event handler. 
The expand on mouse hover functionality can be achieved by using the MouseHover event of the explorer bar items (the pages header). When a page header is hovered all pages should be collapsed and the current page expanded by using the timer.
In addition, the Bounds property changing should be suspended. This can be done in the header items’ RadPropertyChanging event handler.
The described approach can be implemented as follows:
 
[c#]
System.Windows.Forms.Timer timer;
RadPageViewPage currentPage;
 
public RadForm1()
{
    InitializeComponent();
 
    RadPageViewExplorerBarElement explorerBarElement = radPageView1.ViewElement as RadPageViewExplorerBarElement;
     
    foreach (RadPageViewExplorerBarItem item in explorerBarElement.Items)
    {
        item.MouseHover += item_MouseHover;
        item.AssociatedContentAreaElement.RadPropertyChanging += AssociatedContentAreaElement_RadPropertyChanging;
    }
 
    timer = new System.Windows.Forms.Timer();
    timer.Interval = 30;
    timer.Tick += timer_Tick;
    radPageView1.PageExpanded += radPageView1_PageExpanded;
}
 
void timer_Tick(object sender, EventArgs e)
{
    currentPage.PageLength += 20;
    if (currentPage.PageLength >= 300)
    {
        timer.Stop();
    }
}
 
void radPageView1_PageExpanded(object sender, RadPageViewEventArgs e)
{
    timer.Stop();
    currentPage = e.Page;
    currentPage.PageLength = 0;
    timer.Start();
}
 
void AssociatedContentAreaElement_RadPropertyChanging(object sender, RadPropertyChangingEventArgs args)
{
    if (args.Property.Name == "Bounds")
    {
        //suspend layout when animating
        args.Cancel = timer.Enabled;
    }
}
 
void item_MouseHover(object sender, EventArgs e)
{
    RadPageViewExplorerBarItem item = (RadPageViewExplorerBarItem)sender;
 
    RadPageViewExplorerBarElement explorerBarElement = radPageView1.ViewElement as RadPageViewExplorerBarElement;
    foreach (RadPageViewExplorerBarItem i in explorerBarElement.Items)
    {
        i.IsExpanded = false;
    }
 
    item.IsExpanded = true;
}

[VB]
Private timer As System.Windows.Forms.Timer
Private currentPage As RadPageViewPage
 
Public Sub New()
    InitializeComponent()
 
    Dim explorerBarElement As RadPageViewExplorerBarElement = TryCast(radPageView1.ViewElement, RadPageViewExplorerBarElement)
 
    For Each item As RadPageViewExplorerBarItem In explorerBarElement.Items
        AddHandler item.MouseHover, AddressOf item_MouseHover
        AddHandler item.AssociatedContentAreaElement.RadPropertyChanging, AddressOf AssociatedContentAreaElement_RadPropertyChangin
    Next item
 
    timer = New System.Windows.Forms.Timer()
    timer.Interval = 30
    AddHandler timer.Tick, AddressOf timer_Tick
    AddHandler radPageView1.PageExpanded, AddressOf radPageView1_PageExpanded
End Sub
 
Private Sub timer_Tick(ByVal sender As Object, ByVal e As EventArgs)
    currentPage.PageLength += 20
    If currentPage.PageLength >= 300 Then
        timer.Stop()
    End If
End Sub
 
Private Sub radPageView1_PageExpanded(ByVal sender As Object, ByVal e As RadPageViewEventArgs)
    timer.Stop()
    currentPage = e.Page
    currentPage.PageLength = 0
    timer.Start()
End Sub
 
Private Sub AssociatedContentAreaElement_RadPropertyChanging(ByVal sender As Object, ByVal args As RadPropertyChangingEventArgs)
    If args.Property.Name = "Bounds" Then
        'suspend layout when animating
        args.Cancel = timer.Enabled
    End If
End Sub
 
Private Sub item_MouseHover(ByVal sender As Object, ByVal e As EventArgs)
    Dim item As RadPageViewExplorerBarItem = DirectCast(sender, RadPageViewExplorerBarItem)
 
    Dim explorerBarElement As RadPageViewExplorerBarElement = TryCast(radPageView1.ViewElement, RadPageViewExplorerBarElement)
    For Each i As RadPageViewExplorerBarItem In explorerBarElement.Items
        i.IsExpanded = False
    Next i
 
    item.IsExpanded = True
End Sub

Files

More Resources

  • Forums

    Find answers to thousands of questions or reach out to our active community

  • Videos

    Over 100 videos on Telerik TV covering tips and tricks and new features in the controls

  • Demos

    Download 250+ C#/ VB.NET demos in a runnable Visual Studio project

  • Feedback Portal

    Vote and follow the features you want to see added to Telerik UI for WinForms

  • Documentation

    Detailed help articles and API references for all Telerik WinForms controls

  • Knowledge Base

    Tutorials and working examples on how to achieve common scenarios

  • Code Library

    Sample projects submitted by Telerik staff and community members

  • Blog

    Stay up-to-date with the latest functionality, how-to articles and industry trends

  • Release History

    Up-to-date release notes for all new features and improvements.