RadPageViewPage on mouseover event

6 posts, 0 answers
  1. nestodre
    nestodre avatar
    5 posts
    Member since:
    Mar 2015

    Posted 11 Mar 2015 Link to this post

    Hi guys,

    I'm working with RadPageView and I want to catch MouseHover event of RadPageView.
    In details, I want to focus and expand a PageViewPage when the mouse hover on the header.
    For example, I have 1 RadPageView named "Page View", and it have 2 PageViewPage: "A" and "B". I want to expand the content of page "A" and page "B" when mouse is moving over them.

    Can u give me some advise?

    Thanks,
    (Sorry for my bad English)
  2. Stefan
    Admin
    Stefan avatar
    2891 posts

    Posted 12 Mar 2015 Link to this post

    Hello Nestodre,

    Thank you for writing.

    Can you please specify which ViewMode of RadPageView are you using - outlook, explorer bar, etc?

    I am looking forward to your reply.

    Regards,
    Stefan
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for WinForms is Visual Studio 2017 Ready
  4. Stefan
    Admin
    Stefan avatar
    2891 posts

    Posted 12 Mar 2015 Link to this post

    I have just noticed the other threads of yours, where you mention you use the ExplorerBar mode. Here is how to achieve this in it:
    protected override void OnLoad(EventArgs e)
    {
        base.OnLoad(e);
     
        AddPageView();
        radPageView1.ViewMode = PageViewMode.ExplorerBar;
        RadPageViewExplorerBarElement explorerBarElement = radPageView1.ViewElement as RadPageViewExplorerBarElement;
        foreach (var item in explorerBarElement.Items)
        {
            item.MouseHover += item_MouseHover;
        }
    }
     
    void item_MouseHover(object sender, EventArgs e)
    {
        RadPageViewExplorerBarItem item = (RadPageViewExplorerBarItem)sender;
        item.IsExpanded = !item.IsExpanded;
    }

    I hope that you find this information useful. Should you have any other questions, do not hesitate to contact us.

    Regards,
    Stefan
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  5. nestodre
    nestodre avatar
    5 posts
    Member since:
    Mar 2015

    Posted 12 Mar 2015 in reply to Stefan Link to this post

    Hi Stefan,
    Thank for your support.
    I have 2 more questions :D

    - When I expand 1 item, I want to collapse all of the others. I tried to use "foreach" for all items in explorerBarElement.Items but it didn't work. I found that this 'item' is belong to RadPageViewItem, different from RadPageViewExplorerBarItem, so the property IsExpand is not available. How can I check which one is expanded?

    I have tried this and it worked, but I think this way is not optimized:

    // save the item that's explored
    rivate RadPageViewExplorerBarItem exploredItem;
     
    void item_MouseHover(object sender, EventArgs e)
            {
                if(this.exploredItem != null)
                    this.exploredItem.IsExpanded = false;
                RadPageViewExplorerBarItem item = (RadPageViewExplorerBarItem)sender;
                item.IsExpanded = true;
                this.exploredItem = item;
            }

    - And the other question is about the animation of expanding page, I used your advise and found that after I hover 1 element, it takes about 0.5 sec to expand it, it's not smooth. So can I define some animations for this action?

    Thank you so much for your help :-)
  6. Stefan
    Admin
    Stefan avatar
    2891 posts

    Posted 13 Mar 2015 Link to this post

    Hi Quan,

    1. You can just cast the RadPageViewItem to RadPageViewExplorerBarItem. When you are in explorer bar view, this cast will pass and you will have access to the IsExpanded property:
    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;
    }

    2. In regards to the animation, RadPageView does not feature expand animation, however, you could use a timer and the PageLength property to achieve such. Here is an example:
    protected override void OnLoad(EventArgs e)
    {
        base.OnLoad(e);
     
        AddPageView();
        radPageView1.ViewMode = PageViewMode.ExplorerBar;
     
        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();
        }
    }
     
    System.Windows.Forms.Timer timer;
    RadPageViewPage currentPage;
    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;
    }

    I hope that you find this information useful.

    Regards,
    Stefan
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  7. nestodre
    nestodre avatar
    5 posts
    Member since:
    Mar 2015

    Posted 13 Mar 2015 in reply to Stefan Link to this post

    Thank for your reply.
    It's worked! :D
    Have a nice weekend Stefan!
Back to Top
UI for WinForms is Visual Studio 2017 Ready