FNCPageControl component.not correctly repaint after sizing form.

WIERZBICKI_Stephane1 · January 18, 2023, 4:01pm

Hello,

I have some drawing glitches with FNCPageControl component.
Component do not correctly repaint after sizing the form.

Just paste the components hereunder into a VCL Form

object TMSFNCPageControl1: TTMSFNCPageControl
  AlignWithMargins = True
  Left = 3
  Top = 160
  Width = 495
  Height = 231
  Align = alBottom
  ParentDoubleBuffered = False
  Anchors = [akLeft, akTop, akRight, akBottom]
  DoubleBuffered = False
  ParentColor = True
  TabOrder = 0
  Fill.Kind = gfkNone
  Stroke.Kind = gskNone
  TabAppearance.Font.Charset = DEFAULT_CHARSET
  TabAppearance.Font.Color = clWindowText
  TabAppearance.Font.Height = -11
  TabAppearance.Font.Name = 'Segoe UI'
  TabAppearance.Font.Style = []
  TabAppearance.Fill.Color = 16578806
  TabAppearance.DownFill.Color = 15776936
  TabAppearance.DownStroke.Color = 15702829
  TabAppearance.HoverFill.Color = 16380654
  TabAppearance.HoverStroke.Color = 15702829
  TabAppearance.TextSpacing = 0.000000000000000000
  TabAppearance.TextColor = 8026746
  TabAppearance.ActiveTextColor = 4539717
  TabAppearance.HoverTextColor = 8026746
  TabAppearance.DownTextColor = 4539717
  TabAppearance.ShowFocus = False
  TabAppearance.CloseStroke.Width = 2.000000000000000000
  TabAppearance.CloseDownStroke.Width = 2.000000000000000000
  TabAppearance.CloseHoverStroke.Width = 2.000000000000000000
  TabAppearance.BadgeFont.Charset = DEFAULT_CHARSET
  TabAppearance.BadgeFont.Color = 139
  TabAppearance.BadgeFont.Height = -11
  TabAppearance.BadgeFont.Name = 'Segoe UI'
  TabAppearance.BadgeFont.Style = [fsBold]
  ButtonAppearance.Fill.Color = 15385233
  ButtonAppearance.DownFill.Color = 15119995
  ButtonAppearance.HoverFill.Color = 15650471
  ButtonAppearance.CloseIcon.Data = {
    0D544164765356474269746D6170EF0000003C7376672077696474683D223234
    707822206865696768743D2232347078222076696577426F783D223020302032
    342032342220786D6C6E733D22687474703A2F2F7777772E77332E6F72672F32
    3030302F737667222066696C6C3D226E6F6E65223E3C70617468207374726F6B
    653D2263757272656E74436F6C6F7222207374726F6B652D6C696E656361703D
    22726F756E6422207374726F6B652D6C696E656A6F696E3D22726F756E642220
    7374726F6B652D77696474683D22322220643D224D3132203132203720376D35
    2035203520356D2D352D3520352D356D2D3520352D352035222F3E3C2F737667
    3E}
  ButtonAppearance.InsertIcon.Data = {
    0D544164765356474269746D6170DF0200003C3F786D6C2076657273696F6E3D
    22312E302220656E636F64696E673D225554462D38223F3E0A3C73766720786D
    6C6E733D22687474703A2F2F7777772E77332E6F72672F323030302F73766722
    20786D6C6E733A786C696E6B3D22687474703A2F2F7777772E77332E6F72672F
    313939392F786C696E6B222077696474683D223234707822206865696768743D
    2232347078222076696577426F783D2230203020323420323422207665727369
    6F6E3D22312E31223E0A3C672069643D227375726661636531223E0A3C706174
    68207374796C653D22207374726F6B653A6E6F6E653B66696C6C2D72756C653A
    6E6F6E7A65726F3B66696C6C3A7267622830252C30252C3025293B66696C6C2D
    6F7061636974793A313B2220643D224D203132203620432031322E3431343036
    3220362031322E373520362E3333353933382031322E373520362E3735204C20
    31322E37352031312E3235204C2031372E32352031312E323520432031372E36
    36343036322031312E32352031382031312E3538353933382031382031322043
    2031382031322E3431343036322031372E3636343036322031322E3735203137
    2E32352031322E3735204C2031322E37352031322E3735204C2031322E373520
    31372E323520432031322E37352031372E3636343036322031322E3431343036
    3220313820313220313820432031312E3538353933382031382031312E323520
    31372E3636343036322031312E32352031372E3235204C2031312E3235203132
    2E3735204C20362E37352031322E3735204320362E3333353933382031322E37
    3520362031322E3431343036322036203132204320362031312E353835393338
    20362E3333353933382031312E323520362E37352031312E3235204C2031312E
    32352031312E3235204C2031312E323520362E373520432031312E323520362E
    3333353933382031312E35383539333820362031322036205A204D2031322036
    20222F3E0A3C2F673E0A3C2F7376673E0A}
  ButtonAppearance.TabListIcon.Data = {
    0D544164765356474269746D6170D90000003C7376672077696474683D223234
    707822206865696768743D2232347078222076696577426F783D223020302032
    342032342220786D6C6E733D22687474703A2F2F7777772E77332E6F72672F32
    3030302F737667223E3C70617468207374726F6B653D2263757272656E74436F
    6C6F7222207374726F6B652D6C696E656361703D22726F756E6422207374726F
    6B652D6C696E656A6F696E3D22726F756E6422207374726F6B652D7769647468
    3D22322220643D226D31372031302D3520352D352D35222066696C6C3D226E6F
    6E65222F3E3C2F7376673E}
  ButtonAppearance.ScrollNextIcon.Data = {
    0D544164765356474269746D6170D80000003C7376672077696474683D223234
    707822206865696768743D2232347078222076696577426F783D223020302032
    342032342220786D6C6E733D22687474703A2F2F7777772E77332E6F72672F32
    3030302F737667223E3C706174682066696C6C3D226E6F6E6522207374726F6B
    653D2263757272656E74436F6C6F7222207374726F6B652D6C696E656361703D
    22726F756E6422207374726F6B652D6C696E656A6F696E3D22726F756E642220
    7374726F6B652D77696474683D22322220643D226D31302037203520352D3520
    35222F3E3C2F7376673E}
  ButtonAppearance.ScrollPreviousIcon.Data = {
    0D544164765356474269746D6170D80000003C7376672077696474683D223234
    707822206865696768743D2232347078222076696577426F783D223020302032
    342032342220786D6C6E733D22687474703A2F2F7777772E77332E6F72672F32
    3030302F737667223E3C706174682066696C6C3D226E6F6E6522207374726F6B
    653D2263757272656E74436F6C6F7222207374726F6B652D6C696E656361703D
    22726F756E6422207374726F6B652D6C696E656A6F696E3D22726F756E642220
    7374726F6B652D77696474683D22322220643D226D313420372D352035203520
    35222F3E3C2F7376673E}
  TabSize.Margins.Left = 8.000000000000000000
  TabSize.Margins.Top = 8.000000000000000000
  TabSize.Margins.Right = 8.000000000000000000
  TabSize.Margins.Bottom = 8.000000000000000000
  Pages = <
    item
      Text = 'Client Documents'
      Bitmaps = <>
      DisabledBitmaps = <>
      UseDefaultAppearance = True
    end
    item
      Text = 'Garanties Documents'
      Bitmaps = <>
      DisabledBitmaps = <>
      UseDefaultAppearance = True
    end>
  ExplicitLeft = 8
  ExplicitTop = 155
  object TMSFNCPageControl1Page1: TTMSFNCPageControlContainer
    AlignWithMargins = True
    Left = 0
    Top = 29
    Width = 495
    Height = 202
    Margins.Left = 0
    Margins.Top = 29
    Margins.Right = 0
    Margins.Bottom = 0
    Align = alClient
    ParentDoubleBuffered = False
    DoubleBuffered = True
    TabStop = False
    TabOrder = 1
    Visible = False
    ExplicitWidth = 612
    ExplicitHeight = 446
    PageIndex = 1
    IsActive = False
  end
  object TMSFNCPageControl1ClientsDocuments: TTMSFNCPageControlContainer
    AlignWithMargins = True
    Left = 0
    Top = 29
    Width = 495
    Height = 202
    Margins.Left = 0
    Margins.Top = 29
    Margins.Right = 0
    Margins.Bottom = 0
    Align = alClient
    ParentDoubleBuffered = False
    DoubleBuffered = True
    TabStop = False
    TabOrder = 0
    ExplicitWidth = 612
    ExplicitHeight = 446
    PageIndex = 0
    IsActive = True
  end
end

Within IDE

When run

When resized

PS: DPI Screen is set to 100

Pieter_Scheldeman · January 19, 2023, 8:26am

I noticed the property ParentDoubleBuffered is set to False, please set it to True to fix the transparency issue. We also noticed an issue with the missing icons. Please use the following code to fix the icon:

procedure TForm23.FormCreate(Sender: TObject);
begin
  TMSFNCPageControl1.ButtonAppearance.ScrollNextIcon.LoadFromResource('TMSFNCTABSETNEXTSVG', HInstance);
  TMSFNCPageControl1.ButtonAppearance.ScrollPreviousIcon.LoadFromResource('TMSFNCTABSETPREVIOUSSVG', HInstance);
end;

We'll investigate a proper solution here.

WIERZBICKI_Stephane1 · January 19, 2023, 8:47am

Hi Pieter,

Unfortunately, this did not solve my problem. The page control still shows the white background and the resizing still behaves strangely. I will wait for a fix.

Regards,
Stéphane

Pieter_Scheldeman · January 19, 2023, 9:09am

Hi,

Can you set the DoubleBuffered property to true, in the DFM code this was set to False. It's required to allow transparency.

WIERZBICKI_Stephane1 · January 19, 2023, 10:05am

I'm puzzled :
I confirm that it is well working on an empty project but I'm still getting issues with my real project.
Let me find a way to reproduce it

Pieter_Scheldeman · January 19, 2023, 10:13am

About the missing icons: this is because both TMS VCL UI Pack & TMS FNC UI Pack are installed. You can fix this by including AdvTypes unit in the uses list.