XE2 Update 4 TFrame with TPageControl behaves oddly with anchored controls

Question

I cannot seem to find a resolution for this problem and am hoping someone here can direct me or assist me. I will try and explain from a dummy test program I did that fails in the same manner as my application.

I have frame that has all anchors checked (Left, Top, Right, Bottom). There is a TPageControl on the frame that is aligned client. I have a tabsheet defined in the page control that contains a single panel. I made the panel large enough to cover most of the tabsheet with the exception of a nice margin around the edges. For the sake of easily seeing the problem I changed the color of the panel to yellow. I centered the panel and checked all anchors of the panel as well.

Next I created a form and set the color to green. I dropped the frame on the form and with the color differences it's easy to see the green background of the form, the tab sheet (which in my case was basically white) and the yellow panel on the tab sheet. Everything looks as expected.

Now I run the test app and at runtime everything looks good except the yellow panel on the tabsheet is too wide for the tab sheet and the caption of the panel is not centered as expected (I'm sure it's centered but the panel is just too wide for the tabsheet). Now if you resize the form it all moves as expected (the panel keeps it's position on the tab sheet and the tab sheet on the form) but you just can't see the full contents of the panel because the right side is cut off (not in the example because we didn't put anything on it but definitely in our applications).

We have recently converted our applications from Delphi 7 into Delphi XE2 and we have but a handful of frames. All work ok (the same as D7) with the exception of those that contain a tab sheet.

Is there a bug in XE2 or are we doing something wrong?

What we want to have happen is that when we drop the frame on a form and get it sized appropriately, we want the frame to expand in width and height. The same is true for contents of the tab sheet(s) contained on the frame. But it just doesn't work anymore.

Is this a known problem or is there a work around for it?

Not sure if this will help or not but this is the DFM of the frame if it makes more sense:

  object Frame3: TFrame3
  Left = 0
  Top = 0
  Width = 200
  Height = 100
  Anchors = [akLeft, akTop, akRight, akBottom]
  TabOrder = 0
  object pgc1: TPageControl
    Left = 0
    Top = 0
    Width = 200
    Height = 100
    ActivePage = ts1
    Align = alClient
    TabOrder = 0
    object ts1: TTabSheet
      Caption = 'TPageControl'
      DesignSize = (
        192
        72)
      object pnl1: TPanel
        Left = 3
        Top = 10
        Width = 180
        Height = 51
        Anchors = [akLeft, akTop, akRight, akBottom]
        Caption = 'pnl1'
        Color = clYellow
        ParentBackground = False
        TabOrder = 0
      end
    end
  end

Answer 1

I was able to resolve my issue by changing the technique I used to align the panel. Instead of centering the panel in the tab sheet with nice margins on all sides and setting the left, top, right and bottom anchors of the panel, I instead set the panel to align alClient, set the AlignWithMargins property to true and set the appropriate margins for left, top, right and bottom to achieve the desired effect. Much thanks to @Sertac for pointing me in the right direction.