Getting Height of innerControl

[DenisCL]

Hello,

I meet difficulties to autoresize my Pageview (in explorerBar mode)
I add several PageviewPage inside, and I would like to get the inner control container height in order to autoresize my page view.

When Pages are collapsed, I would like to set my pageview's height
(see attached picture collapsed.png)

I put autosize mode of my PageView à true.But it's not autosizing.
I tried the RadPageViewExplorerBarElement as children[0] of my pageview. But the autosize mode is not the good one too.
I also tried the RadPageViewContentAreaElement but not working.

What is the container inside my pageview which contains the RadPageViewPages?
This container is autoscrolled (my page view is not autoscrolled) and seems autosize.
We can see the vertical scroll of this container on picture container.png (yellow painted).
What is this container? I really need to get his height.

As far I know, it's not the pageview, explorerbar, contentArea neither.

Maybe you know a better way to autosize my pageview following the collapsed and extand event?
Please let me know.

Thanks a lot for help.

Regards



 

[Richard Slade]

Hi DenisCL,

Can you try this please:

+ Add a RadPageView to a form.
+ Set the initial height to 150
+ Add 4 RadPagesViewPages
+ Add the following code:

Private Sub RadPageView1_PageExpanded(ByVal sender As System.Object, ByVal e As Telerik.WinControls.UI.RadPageViewEventArgs) Handles RadPageView1.PageExpanded
    Me.RadPageView1.Height = 435
End Sub
Private Sub RadPageView1_PageCollapsed(ByVal sender As System.Object, ByVal e As Telerik.WinControls.UI.RadPageViewEventArgs) Handles RadPageView1.PageCollapsed
    Dim opened As Boolean
    For Each page As RadPageViewPage In Me.RadPageView1.Pages
        If page.IsContentVisible And Not Object.Equals(page, e.Page) Then
            opened = True
            Exit For
        End If
    Next
    If Not opened Then
        Me.RadPageView1.Height = 150
    End If
End Sub

Let me know if that helps, or if you need more information

Richard

[DenisCL]

Hello Richard,

I tried your example and here is the result:

 - The collapsed page is good. But this value 150, it's the 4 pages Headers's heights + the pageview header right?
Is there a way to get this programatically?
 - when I expand one Tab, the pageview expand too but the 435 for height seems too little. The scroll bar appears (cf expanded.jpg)
 - I tried to put 440, too little but 450 there's a wierd behavior: When I click to the last page for expanding it, the others pages disappear
 - Another point: when I put a breakpoint on my event collapsed. If I reduce the opened panel, the page has his IsContentVisible at true even if i've just collapsed it. I'm of course not on Collapsing event. (cf wierdBehavior.jpg)

Actually since I would like to let user expand all panels, I need my page view to always follow my pages height. That's why I was asking for Header's height for calculating each time it's collapsed or expanded.

here is my code:

private void container_PageCollapsed(object sender, RadPageViewEventArgs e)
{
    container.Size = new Size(container.Width, container.Height - e.Page.Height);
    this.Size = new Size(this.Width, container.Height);
}

private void container_PageExpanded(object sender, RadPageViewEventArgs e)
{
    container.Size = new Size(container.Width, container.Height + e.Page.Height);
    this.Size = new Size(this.Width, container.Height);
}

When form is loaded I resize my pageview for having the initial good size:

public void ResizeContainer()
       {
           container.Size = new Size(container.Width, (container.Controls.Count * _iCollapsedPageHeight));
           this.Size = new Size(this.Width, container.Height);
       }

_CollapsedPageHeight is actually a constant value I tried to find (collapsedPageHeight)

Finally, can you try to reprduce the weird behavior listed before?
And what are pages default header height and pageview header height? Can I get it programmatically?

Thanks for help
Best Regards

[Richard Slade]

Hi DenisCL

You can get the height of each of the pages (the header section) using:

Me.RadPageView1.ViewElement.Items(0).Size.Height

You can get the height of the titlebar using:

Me.RadPageView1.RootElement.Children(0).Children(1).Size.Height

I'd suggest the code below. It's in explorerbar mode but acts like a cross between explorer bar and outlook, so each page can be expanded, but will only allow one page to be expanded at a time so as to maintain a maximum height (the height of all the colapsed items, plus the content of the expanded item

Imports Telerik.WinControls.UI
Imports Telerik.WinControls

Public Class Form1

    Private m_ColapsedHeight As Integer

    Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load

        Me.RadPageView1.ViewMode = PageViewMode.ExplorerBar
        m_ColapsedHeight = (Me.RadPageView1.ViewElement.Items(0).Size.Height * Me.RadPageView1.Pages.Count) + Me.RadPageView1.RootElement.Children(0).Children(1).Size.Height
        Me.RadPageView1.Height = m_ColapsedHeight
    End Sub


    Private Sub RadPageView1_PageExpanded(ByVal sender As System.Object, ByVal e As Telerik.WinControls.UI.RadPageViewEventArgs) Handles RadPageView1.PageExpanded
        For Each page As RadPageViewPage In Me.RadPageView1.Pages
            If Not Object.Equals(e.Page, page) Then
                page.IsContentVisible = False
            End If
        Next
        Me.RadPageView1.Height = m_ColapsedHeight + e.Page.PageLength
    End Sub

    Private Sub RadPageView1_PageCollapsed(ByVal sender As System.Object, ByVal e As Telerik.WinControls.UI.RadPageViewEventArgs) Handles RadPageView1.PageCollapsed
        Dim opened As Boolean
        For Each page As RadPageViewPage In Me.RadPageView1.Pages
            If page.IsContentVisible And Not Object.Equals(page, e.Page) Then
                opened = True
                Exit For
            End If
        Next
        If Not opened Then
            Me.RadPageView1.Height = m_ColapsedHeight
        End If
    End Sub
End Class

hope that helps, but if you need more info, just let me know.

Richard

[Richard Slade]

Hello, 

Thee seems to be an issue with the above as the inner content area is reduced after the second expand/collapse. I will get back to you shortly on this. 

Richard

[Richard Slade]

Hello,

This isn't very elegant but it does work.

Imports Telerik.WinControls.UI
Imports Telerik.WinControls

Public Class Form1

    Private m_ColapsedHeight As Integer

    Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load

        Me.RadPageView1.ViewMode = PageViewMode.ExplorerBar
        m_ColapsedHeight = (Me.RadPageView1.ViewElement.Items(0).Size.Height * Me.RadPageView1.Pages.Count) + Me.RadPageView1.RootElement.Children(0).Children(1).Size.Height
        Me.RadPageView1.Height = m_ColapsedHeight

        For Each page As RadPageViewPage In Me.RadPageView1.Pages
            AddHandler page.VisibleChanged, AddressOf PageResize
        Next
    End Sub

    Private Sub RadPageView1_PageExpanded(ByVal sender As System.Object, ByVal e As Telerik.WinControls.UI.RadPageViewEventArgs) Handles RadPageView1.PageExpanded
        For Each page As RadPageViewPage In Me.RadPageView1.Pages
            If Not Object.Equals(e.Page, page) Then
                page.IsContentVisible = False
            End If
        Next
    End Sub

    Private Sub RadPageView1_PageCollapsed(ByVal sender As System.Object, ByVal e As Telerik.WinControls.UI.RadPageViewEventArgs) Handles RadPageView1.PageCollapsed
        Dim opened As Boolean
        For Each page As RadPageViewPage In Me.RadPageView1.Pages
            If page.IsContentVisible And Not Object.Equals(page, e.Page) Then
                opened = True
                Exit For
            End If
        Next
        If Not opened Then
            Me.RadPageView1.Height = m_ColapsedHeight
        End If
    End Sub

    Private Sub PageResize(ByVal sender As Object, ByVal e As EventArgs)
        For Each page As RadPageViewPage In Me.RadPageView1.Pages
            page.Height = 294
            page.Width = 274
            If page.IsContentVisible Then
                Me.RadPageView1.Height = m_ColapsedHeight + page.Height
            End If
        Next
    End Sub


End Class

Let me know if you need more help
Richard

[DenisCL]

Hello Richard,

I tried to apply your code in my program, but I have some results not good.
Actually, the PageView1.ViewElement.Items[0].Size.Height as PageView1.RootElement.Children[0].Children[1].Size.Height are both at 0.

Just before, I add my PageViewPages with that code:

RadPageViewPage tabPage = new RadPageViewPage();

tabPage.Margin = new Padding(0);

tabPage.Padding = new Padding(0);

tabPage.Size = new Size(this.container.Width, tabPage.Height);

tabPage.AutoSize = true;

tabPage.AutoSizeMode = AutoSizeMode.GrowAndShrink;

tabPage.Text = "test";

tabPage.Controls.Add(pControl); //pControl is a UserControl


this.PageView1.Pages.Add(tabPage);

Do I have to do something special for having these Height values?

Thanks for help

[Richard Slade]

Hello,

did you try the example above exactly as-is? It has 4 pages, and should re-size as you want it.
If it doesn't please could you post a screenshot of the issue that you are experiencing?

thanks
Richard

[DenisCL]

Here is the code I'm using in a new project, in order to use only your code.

public partial class Form1 : Form
   {
       private int _iTotalCollapsedHeight;

       public Form1()
       {
           InitializeComponent();
       }

       private void Form1_Load(object sender, EventArgs e)
       {
           radPageView1.ViewMode = PageViewMode.ExplorerBar;
           _iTotalCollapsedHeight = (radPageView1.ViewElement.Items[0].Size.Height * radPageView1.Pages.Count) + radPageView1.RootElement.Children[0].Children[1].Size.Height;
           radPageView1.Size = new Size(radPageView1.Width, _iTotalCollapsedHeight);

           foreach (RadPageViewPage page in radPageView1.Pages)
           {
               page.VisibleChanged += new EventHandler(PageResize);
           }
       }

       void PageResize(object sender, EventArgs e)
       {
           radPageView1.Size = new Size(radPageView1.Width, _iTotalCollapsedHeight);
           foreach(RadPageViewPage page in radPageView1.Pages)
           {
               page.Size = new Size(274, 294);
               if (page.IsContentVisible)
               {
                   radPageView1.Size = new Size(radPageView1.Width, radPageView1.Height + page.Height);
               }
           }
       }
   }

I delete collapse and extand events because i'm my code, several pages can be opened. The total height has to be calculated then.

This code is working, but if you expand more than 1 page, you can see the scroll bar appearing.
I don't know what this Delta comes from.

Do you have any information about that, in order to calculator the right height?

Thanks for help.

[Richard Slade]

HI,

If you can open more than one page at a time, then your control could expand to a size much larger than the form, or the screen. I developed the above for you so that you would have a maximum known height.

My understanding is that you want to have a PageView that will expand and shrink dynamically. Having an unknown number of pages open when it expands may cause issues.

Is this what you are trying to do? I.e. you need the control to expand no matter how many pages are open?

thanks

Richard

[DenisCL]

That's it.

I have an unknowns number of pages. It can be 1,2 and sometimes maybe 10.

Each pages contains a control, so each page is autosized. But all controls added has the same Size.

If you expand 2 pages, the height of pageview  should be the height of the 2 pages extanded + the 2 headers of pages + the pageview header.
 It's apparently working with the code I last gave to you. But actually, there this little delta added, and i'm not sure where it comes from...

When I add by programming 2 tab pages with pageview.Pages.Add(), just after the radPageView1.ViewElement.Items[0].Size.Height =0.
after adding with Pages.Add(), should I do a special refresh of container?

Using a new project with the pages added directly with designer works..

I'm missing something with that.

[Richard Slade]

Hi,

The last change required to rid the control of the scrollbar is really small. just replace the Resize method with this one. It just adds on some padding which should give you your final solution.

void PageResize(object sender, EventArgs e)
{
    radPageView1.Size = new Size(radPageView1.Width, _iTotalCollapsedHeight);
    foreach (RadPageViewPage page in radPageView1.Pages)
    {
        page.Size = new Size(274, 294);
        if (page.IsContentVisible)
        {
            radPageView1.Size = new Size(radPageView1.Width, radPageView1.Height + page.Height + 5);
        }
    }
}

hope this helps. If you find that you have enough with this, please remember to mark as answer. Otherwise let me know if you need anything else.

Regards,

Richard

[Richard Slade]

One last thing. You can actually remove resetting the Page.Size now as you are not using the other events.
this leaves the resize method as

void PageResize(object sender, EventArgs e)
{
    radPageView1.Size = new Size(radPageView1.Width, _iTotalCollapsedHeight);
    foreach (RadPageViewPage page in radPageView1.Pages)
    {
        if (page.IsContentVisible)
        {
            radPageView1.Size = new Size(radPageView1.Width, radPageView1.Height + page.Height + 5);
        }
    }
}

Best wishes
Richard

[Stefan]

Hello DenisCL,

Thank you for writing and please excuse me for the delayed reply, I was trying to find the best solution for your case.

Currently, the "delta" is coming from the borders of the control. It is possible to completely remove them by using the following code:

radPageView1.ViewElement.BorderWidth = 0;

Please let me know if this works for you.

I am looking forward to your reply.
 
Best wishes,
Stefan
the Telerik team

[DenisCL]

Thanks for your time.

Actually the + 5 padding is better than this last one.

Indeed,  putting the border size at 0 make my container without border. It's not really esthétic.

I checked with the same viewElement.Border on pages, but it doesn't exists.

If you have a solution...

Best regards

[Richard Slade]

Hello DennisCL,

I'm glad that this is working for you. If you are happy with this, then please mark as answer. Is there something else that you need to be happy with this solution?

thanks
richard

[DenisCL]

Hello Richard,

It's ok right now. I'll use this code, if I meet some troubles with it in future, i'll come back to you.

Thanks for your help.

Best regards

[Richard Slade]

Hi DenisCL,

Glad that has worked for you, and yes, please let me know if there's anything else
All the best
Richard

[DenisCL]

Hello,

I come back to you with this post in order to get some information on a little refresh problem.

I attached a screenshot to this post. As you can see, when I use PageView and the code we talked about before for getting the right height (depending of pages collapsed or extanded), I have this little refreshing problem occuring.

It wasn't a problem at the begining but lately, we got some clients support on "item hidden".

Do you have any solution to display it correctly?
FYI, we used a little delta (+5) to get the final right height of pageview.

It depends of the scrolling. if scrolling with arrow scroll button (step by step), there is not refresh problem.
if I scroll with the mouse, faster, it appears.

Thanks a lot

Best regards

[Richard Slade]

Hello,

Please could you post a full exmaple that replicates the issue which will assist me to look into this for you?
Thanks
Richard