Control.ClientRectangle vs Control.DisplayRectangle

LarsTech has provided a correct and sufficient answer already, but I wanted to know details about the individual sizes.
In my case I'm using a TabControl, which make things even more difficult, but I'll try to explain as clearly as possible.

The TabControl I used has 2 TabPages.
There are 2 buttons on the first TabPage, placed as shown in the screenshot. The 1st button is located at the lower edge of the TabPage; the 2nd button is located underneath the first one in the not visible part of the TabPage.
The actual height of the TabPage will be greater than the height of the TabControl because of TabPage1.AutoScroll=true, which you can see from the scroll bar on the right edge of the TabPage. The not visible area (containing "button2") was copied into this screenshot manually and is marked with black and yellow hatch.
There are no controls on the second TabPage.

Settings are as follows:

TabControl.ItemSize = {65; 21}
TabPage1.Padding = {0, 0, 0, 0} 
TabPage2.Padding = {3, 3, 3, 3}

enter image description here

This configuration results in these sizes:

in ctor:
              TabControl:   TabPage1:     TabPage2:
Size        = {300, 120}    {292,  91}    {292,  91}
ClientSize  = {300, 120}    {292,  91}    {292,  91}
DisplaySize = {292,  91}    {292,  91}    {286,  85}
// TabPages.Size.x = TabControl.Size.x - 2 * 4;                          ("2": left+right; "4": "frame" size between TabControl and TabPage)
// TabPages.Size.y = TabControl.Size.y - 2 * 4 - TabControl.ItemSize.y;  ("2": top+bottom; "4": like above)
// TabPage1: DisplaySize == ClientSize due to Padding=0; TabPage2: DisplaySize < ClientSize due to Padding=3

in Load():
              TabControl:   TabPage1:     TabPage2:
Size        = {300, 120}    {292,  91}    {292,  91}
ClientSize  = {300, 120}    {275,  91}    {292,  91}
DisplaySize = {292,  91}    {275, 142}    {286,  85}
// TabPage1: ClientSize.x < Size.x due to ScrollBar; DisplaySize.y > ClientSize.y due to Buttons on the TabPage and AutoScroll=true

after Resize of TabControl (height +60), all elements in Tab1 directly visible now:
              TabControl:   TabPage1:     TabPage2:
Size        = {300, 180}    {292, 151}    {292,  91}
ClientSize  = {300, 180}    {292, 151}    {292,  91}
DisplaySize = {292, 151}    {292, 151}    {286,  85}
// TabPage1: ClientSize.x == Size.x because ScrollBar is not needed and therefore not shown; DisplaySize.y == ClientSize.y because all Buttons are visible also without scrolling
// NOTICE: values of Tab2 are NOT UPDATED because Tab2 is not shown; Tab1 is the selected TabPage

As you can see from the values, the DisplaySize can be bigger than the ClientSize if scrolling is used.


The DisplayRectangle is the interior canvas of the control, so when you have a scrolling control, the DisplayRectangle would be larger than the ClientRectangle, which is only the area of what you see on the screen:

panel1.AutoScrollMinSize = new Size(0, panel1.Height * 2);
panel1.Paint += panel1_Paint;

void panel1_Paint(object sender, PaintEventArgs e) {
  e.Graphics.FillEllipse(Brushes.Red, panel1.DisplayRectangle);
  e.Graphics.DrawEllipse(Pens.Green, panel1.ClientRectangle);
}

enter image description here

Tags:

C#

.Net

Winforms