Control.ClientRectangle vs Control.DisplayRectangle

Question

I understand the concept of Client Rectangle regarding a Form/Control,
yet I don't understand what the difference is between
Control.ClientRectangle and Control.DisplayRectangle..

After reading the MSDN pages for both of these properties, it is not clear when one of them would return a different value from the other..

The MSDN page for .ClientRectangle says:

The client area of a control is the bounds of the control, minus the nonclient elements, such as: Title Bar, Border, Scroll Bars, and Menu.

That's pretty clear.

Yet the MSDN page for .DisplayRectangle says:

For the base control class, this is equal to the client rectangle.
However, inheriting controls might want to change this if their client area differs from their display area.

That's not so clear now.. Where, in an inheriting control, would I want to make the .DisplayRectangle value different from the .ClientRectangle one?

Control.ClientRectangle:
https://msdn.microsoft.com/en-us/library/system.windows.forms.control.clientrectangle.aspx

Control.DisplayRectangle:
https://msdn.microsoft.com/en-us/library/system.windows.forms.control.displayrectangle.aspx

Answer 1

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);
}

Answer 2

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}

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.