GroupBox AutoSize + RadLabel = oversized header on HDPI

[Jeremy]

Hello
I have some problem with displaying RadGroupBox on HDPI that host in UserControl/System.Windows.Form and must be AutoSize = true.
In our scenario, the RadGroupBox contains RadLabel and must change size depending on the size of the text. So we set AutoSize = true. However such RadGroupBox have incorrect font scaling in the header, the font becomes at least 2 times larger than it should be, and if GB is in the scrolling container (like in the example below) even larger. 

If groupbox is hosted in RadForm the bug is not reproducible. 

I use Telerik 2018.3.1016.20 with .Net 3.5 
I very much rely on your help and advice.

Here are examples of my code and screenshots from different DPI. 

100% (Form) https://c2n.me/3Z4oYcS
100% (RadForm) https://c2n.me/3Z4p2L0
200% (Form) https://clip2net.com/s/3Z4pjSv
200% (RadForm) https://clip2net.com/s/3Z4pbV0

using System.ComponentModel;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Windows.Forms;
using Telerik.WinControls;
using Telerik.WinControls.Primitives;
using Telerik.WinControls.UI;

namespace PP.DesignExamples.BugsForTelerik
{
    public class Form6 : Form
    {
        private RadScrollablePanel actionsScroll;
        private RadGroupBox gbAutosizeTrue;
        private RadLabel lblAutosizeTrueContent;
        private RadGroupBox gbAutosizeFalse;
        private RadLabel lblAutosizeFalseContent;

        public Form6()
        {
            InitializeComponent();
        }

        private void InitializeComponent()
        {
            actionsScroll = new RadScrollablePanel();
            gbAutosizeTrue = new RadGroupBox();
            lblAutosizeTrueContent = new RadLabel();
            gbAutosizeFalse = new RadGroupBox();
            lblAutosizeFalseContent = new RadLabel();
            ((ISupportInitialize)(actionsScroll)).BeginInit();
            actionsScroll.PanelContainer.SuspendLayout();
            actionsScroll.SuspendLayout();
            ((ISupportInitialize)(gbAutosizeTrue)).BeginInit();
            gbAutosizeTrue.SuspendLayout();
            ((ISupportInitialize)(lblAutosizeTrueContent)).BeginInit();
            ((ISupportInitialize)(gbAutosizeFalse)).BeginInit();
            gbAutosizeFalse.SuspendLayout();
            ((ISupportInitialize)(lblAutosizeFalseContent)).BeginInit();
            SuspendLayout();
            //
            // actionsScroll
            //
            actionsScroll.BackColor = Color.Transparent;
            actionsScroll.Dock = DockStyle.Fill;
            actionsScroll.ForeColor = Color.Transparent;
            actionsScroll.Location = new Point(0, 0);
            actionsScroll.Margin = new Padding(0);
            actionsScroll.MaximumSize = new Size(205, 0);
            actionsScroll.MinimumSize = new Size(205, 0);
            actionsScroll.Name = "actionsScroll";
            actionsScroll.Padding = new Padding(0);
            //
            // actionsScroll.PanelContainer
            //
            actionsScroll.PanelContainer.BackColor = Color.Transparent;
            actionsScroll.PanelContainer.Controls.Add(gbAutosizeTrue);
            actionsScroll.PanelContainer.Controls.Add(gbAutosizeFalse);
            actionsScroll.PanelContainer.Location = new Point(0, 0);
            actionsScroll.PanelContainer.Margin = new Padding(0);
            actionsScroll.PanelContainer.Size = new Size(205, 423);
            //
            //
            //
            actionsScroll.RootElement.MaxSize = new Size(205, 0);
            actionsScroll.RootElement.MinSize = new Size(205, 0);
            actionsScroll.Size = new Size(205, 423);
            actionsScroll.TabIndex = 4;
            ((RadScrollablePanelElement)(actionsScroll.GetChildAt(0))).Padding = new Padding(0);
            ((FillPrimitive)(actionsScroll.GetChildAt(0).GetChildAt(0))).Visibility = ElementVisibility.Hidden;
            ((BorderPrimitive)(actionsScroll.GetChildAt(0).GetChildAt(1))).Width = 0F;
            ((BorderPrimitive)(actionsScroll.GetChildAt(0).GetChildAt(1))).LeftWidth = 0F;
            ((BorderPrimitive)(actionsScroll.GetChildAt(0).GetChildAt(1))).TopWidth = 0F;
            ((BorderPrimitive)(actionsScroll.GetChildAt(0).GetChildAt(1))).RightWidth = 0F;
            ((BorderPrimitive)(actionsScroll.GetChildAt(0).GetChildAt(1))).BottomWidth = 0F;
            ((BorderPrimitive)(actionsScroll.GetChildAt(0).GetChildAt(1))).Visibility = ElementVisibility.Hidden;
            //
            // gbAutosizeTrue
            //
            gbAutosizeTrue.AccessibleRole = AccessibleRole.Grouping;
            gbAutosizeTrue.AutoSize = true;
            gbAutosizeTrue.BackColor = Color.Transparent;
            gbAutosizeTrue.Controls.Add(lblAutosizeTrueContent);
            gbAutosizeTrue.Dock = DockStyle.Top;
            gbAutosizeTrue.GroupBoxStyle = RadGroupBoxStyle.Office;
            gbAutosizeTrue.HeaderText = "AutoSize = true";
            gbAutosizeTrue.Location = new Point(0, 100);
            gbAutosizeTrue.MinimumSize = new Size(0, 100);
            gbAutosizeTrue.Name = "gbAutosizeTrue";
            gbAutosizeTrue.Padding = new Padding(4, 28, 4, 0);
            //
            //
            //
            gbAutosizeTrue.RootElement.AutoSize = false;
            gbAutosizeTrue.RootElement.MinSize = new Size(0, 100);
            gbAutosizeTrue.Size = new Size(205, 100);
            gbAutosizeTrue.TabIndex = 8;
            gbAutosizeTrue.Text = "AutoSize = true";
            ((RadGroupBoxElement)(gbAutosizeTrue.GetChildAt(0))).Padding = new Padding(4, 28, 4, 0);
            ((FillPrimitive)(gbAutosizeTrue.GetChildAt(0).GetChildAt(0).GetChildAt(0))).BackColor = Color.FromArgb(176, 223, 226);
            ((GroupBoxHeader)(gbAutosizeTrue.GetChildAt(0).GetChildAt(1))).GroupBoxStyle = RadGroupBoxStyle.Office;
            ((GroupBoxHeader)(gbAutosizeTrue.GetChildAt(0).GetChildAt(1))).ForeColor = Color.DodgerBlue;
            ((FillPrimitive)(gbAutosizeTrue.GetChildAt(0).GetChildAt(1).GetChildAt(0))).BackColor = Color.Transparent;
            ((FillPrimitive)(gbAutosizeTrue.GetChildAt(0).GetChildAt(1).GetChildAt(0))).SmoothingMode = SmoothingMode.None;
            ((FillPrimitive)(gbAutosizeTrue.GetChildAt(0).GetChildAt(1).GetChildAt(0))).AutoSize = true;
            ((FillPrimitive)(gbAutosizeTrue.GetChildAt(0).GetChildAt(1).GetChildAt(0))).Margin = new Padding(0);
            ((TextPrimitive)(gbAutosizeTrue.GetChildAt(0).GetChildAt(1).GetChildAt(2).GetChildAt(1))).Text = "AutoSize = true";
            ((TextPrimitive)(gbAutosizeTrue.GetChildAt(0).GetChildAt(1).GetChildAt(2).GetChildAt(1))).LineLimit = false;
            ((TextPrimitive)(gbAutosizeTrue.GetChildAt(0).GetChildAt(1).GetChildAt(2).GetChildAt(1))).Font = new Font("Arial", 11.25F, FontStyle.Bold, GraphicsUnit.Point, 0);
            ((TextPrimitive)(gbAutosizeTrue.GetChildAt(0).GetChildAt(1).GetChildAt(2).GetChildAt(1))).Margin = new Padding(7, 0, 0, 0);
            ((TextPrimitive)(gbAutosizeTrue.GetChildAt(0).GetChildAt(1).GetChildAt(2).GetChildAt(1))).Alignment = ContentAlignment.MiddleLeft;
            //
            // lblAutosizeTrueContent
            //
            lblAutosizeTrueContent.Dock = DockStyle.Top;
            lblAutosizeTrueContent.Location = new Point(4, 28);
            lblAutosizeTrueContent.Margin = new Padding(16);
            lblAutosizeTrueContent.Name = "lblAutosizeTrueContent";
            //
            //
            //
            lblAutosizeTrueContent.RootElement.MaxSize = new Size(0, 0);
            lblAutosizeTrueContent.Size = new Size(197, 18);
            lblAutosizeTrueContent.TabIndex = 2;
            lblAutosizeTrueContent.Text = "description will be here";
            ((RadLabelElement)(lblAutosizeTrueContent.GetChildAt(0))).TextAlignment = ContentAlignment.MiddleLeft;
            ((RadLabelElement)(lblAutosizeTrueContent.GetChildAt(0))).Text = "description will be here";
            ((FillPrimitive)(lblAutosizeTrueContent.GetChildAt(0).GetChildAt(0))).AutoSizeMode = RadAutoSizeMode.Auto;
            ((FillPrimitive)(lblAutosizeTrueContent.GetChildAt(0).GetChildAt(0))).StretchHorizontally = false;
            //
            // gbAutosizeFalse
            //
            gbAutosizeFalse.AccessibleRole = AccessibleRole.Grouping;
            gbAutosizeFalse.BackColor = Color.Transparent;
            gbAutosizeFalse.Controls.Add(lblAutosizeFalseContent);
            gbAutosizeFalse.Dock = DockStyle.Top;
            gbAutosizeFalse.GroupBoxStyle = RadGroupBoxStyle.Office;
            gbAutosizeFalse.HeaderText = "AutoSize = false";
            gbAutosizeFalse.Location = new Point(0, 0);
            gbAutosizeFalse.MinimumSize = new Size(0, 100);
            gbAutosizeFalse.Name = "gbAutosizeFalse";
            gbAutosizeFalse.Padding = new Padding(4, 28, 4, 0);
            //
            //
            //
            gbAutosizeFalse.RootElement.AutoSize = false;
            gbAutosizeFalse.RootElement.MinSize = new Size(0, 100);
            gbAutosizeFalse.Size = new Size(205, 100);
            gbAutosizeFalse.TabIndex = 8;
            gbAutosizeFalse.Text = "AutoSize = false";
            ((RadGroupBoxElement)(gbAutosizeFalse.GetChildAt(0))).Padding = new Padding(4, 28, 4, 0);
            ((FillPrimitive)(gbAutosizeFalse.GetChildAt(0).GetChildAt(0).GetChildAt(0))).BackColor = Color.FromArgb(176, 223, 226);
            ((GroupBoxHeader)(gbAutosizeFalse.GetChildAt(0).GetChildAt(1))).GroupBoxStyle = RadGroupBoxStyle.Office;
            ((GroupBoxHeader)(gbAutosizeFalse.GetChildAt(0).GetChildAt(1))).ForeColor = Color.DodgerBlue;
            ((FillPrimitive)(gbAutosizeFalse.GetChildAt(0).GetChildAt(1).GetChildAt(0))).BackColor = Color.Transparent;
            ((FillPrimitive)(gbAutosizeFalse.GetChildAt(0).GetChildAt(1).GetChildAt(0))).SmoothingMode = SmoothingMode.None;
            ((FillPrimitive)(gbAutosizeFalse.GetChildAt(0).GetChildAt(1).GetChildAt(0))).AutoSize = true;
            ((FillPrimitive)(gbAutosizeFalse.GetChildAt(0).GetChildAt(1).GetChildAt(0))).Margin = new Padding(0);
            ((TextPrimitive)(gbAutosizeFalse.GetChildAt(0).GetChildAt(1).GetChildAt(2).GetChildAt(1))).Text = "AutoSize = false";
            ((TextPrimitive)(gbAutosizeFalse.GetChildAt(0).GetChildAt(1).GetChildAt(2).GetChildAt(1))).LineLimit = false;
            ((TextPrimitive)(gbAutosizeFalse.GetChildAt(0).GetChildAt(1).GetChildAt(2).GetChildAt(1))).Font = new Font("Arial", 11.25F, FontStyle.Bold, GraphicsUnit.Point, 0);
            ((TextPrimitive)(gbAutosizeFalse.GetChildAt(0).GetChildAt(1).GetChildAt(2).GetChildAt(1))).Margin = new Padding(7, 0, 0, 0);
            ((TextPrimitive)(gbAutosizeFalse.GetChildAt(0).GetChildAt(1).GetChildAt(2).GetChildAt(1))).Alignment = ContentAlignment.MiddleLeft;
            //
            // lblAutosizeFalseContent
            //
            lblAutosizeFalseContent.Dock = DockStyle.Top;
            lblAutosizeFalseContent.Location = new Point(4, 28);
            lblAutosizeFalseContent.Margin = new Padding(16);
            lblAutosizeFalseContent.Name = "lblAutosizeFalseContent";
            //
            //
            //
            lblAutosizeFalseContent.RootElement.MaxSize = new Size(0, 0);
            lblAutosizeFalseContent.Size = new Size(197, 18);
            lblAutosizeFalseContent.TabIndex = 2;
            lblAutosizeFalseContent.Text = "description will be here";
            ((RadLabelElement)(lblAutosizeFalseContent.GetChildAt(0))).TextAlignment = ContentAlignment.MiddleLeft;
            ((RadLabelElement)(lblAutosizeFalseContent.GetChildAt(0))).Text = "description will be here";
            ((FillPrimitive)(lblAutosizeFalseContent.GetChildAt(0).GetChildAt(0))).AutoSizeMode = RadAutoSizeMode.Auto;
            ((FillPrimitive)(lblAutosizeFalseContent.GetChildAt(0).GetChildAt(0))).StretchHorizontally = false;
            //
            // Form6
            //
            AutoScaleDimensions = new SizeF(6F, 13F);
            AutoScaleMode = AutoScaleMode.Font;
            ClientSize = new Size(311, 423);
            Controls.Add(actionsScroll);
            Name = "Form6";
            Text = "Form6";
            actionsScroll.PanelContainer.ResumeLayout(false);
            actionsScroll.PanelContainer.PerformLayout();
            ((ISupportInitialize)(actionsScroll)).EndInit();
            actionsScroll.ResumeLayout(false);
            ((ISupportInitialize)(gbAutosizeTrue)).EndInit();
            gbAutosizeTrue.ResumeLayout(false);
            gbAutosizeTrue.PerformLayout();
            ((ISupportInitialize)(lblAutosizeTrueContent)).EndInit();
            ((ISupportInitialize)(gbAutosizeFalse)).EndInit();
            gbAutosizeFalse.ResumeLayout(false);
            gbAutosizeFalse.PerformLayout();
            ((ISupportInitialize)(lblAutosizeFalseContent)).EndInit();
            ResumeLayout(false);

        }
    }
}

 

[Hristo]

Hello Jeremy,

We are not aware of a similar issue in the RadLabel nor in the RadGroupBox controls. I also tested a sample project and the controls were scaled properly on my end. Please note that I am using a user control having a label and the group box. The user control added to the standard form is not scaled at all while the one added to the RadForm is scaled. 

I am sending you attached my project. Can you please check how it will run on your end? In case the issue persists please let me know how I can observe it locally. If possible please also send me your project so that I can investigate it.

One more thing, please also make sure that you are working with the Winforms designer only on machines which are at 96 DPI (100%). Otherwise, you are risking to double-scale your app in a DPI-aware environment. This is a Visual Studio issue and it is logged here: https://visualstudio.uservoice.com/forums/121579-visual-studio-ide/suggestions/7373263-winforms-designer-dpi-lock.

Regards,
Hristo
Progress Telerik

[Jeremy]

Hello Hristo, thanks for your reply. Your example works fine, but it is not what I try to achieve, so I have changed you example to reproduce issue.

Changes are:

1) Office theme

2) RadLabel inside RadGroupBox

3) Autosize=true for RadGroupBox and RadLabel 

 

But I can't upload zip file. Only images are allowed to be attach.

[Jeremy]

Please rename file from JPG to ZIP. Hope it helps! Thanks.

[Hristo]

Hi Jeremy,

Having the AutoSize property of the group box set to true will result in calling its scale method twice and this is causing the double scaling. You can prevent the double scaling by setting the ScaleChildren property of the user control to false: 

public partial class GroupBoxUC : UserControl
{
    public GroupBoxUC()
    {
        InitializeComponent();
    }

    protected override bool ScaleChildren
    {
        get
        {
            return false;
        }
    }
}

I hope this will help. Let me know if you need further assistance.

Regards,
Hristo
Progress Telerik

[Jeremy]

Hi Hristo,

Your solutions works fine, thank you. But I wonder if having ScaleChildren=false can cause issues with other Telerik controls. Can I keep ScaleChildren=false if UserControl contains many different controls, including RadButton, RadListView, other UserControls, TableLayoutPanel, etc.?

 

What should I do if RadGroupBox is placed directly on Form? Can I keep ScaleChildren=false for entire Form? 

Thanks in advance. 

[Hristo]

Hello Jeremy,

Thank you for writing back.

Setting the ScaleChildren property to false in the user control could potentially affect other container controls as well. In the context of the group-box that is the only way to prevent the double scaling when using the control in the user control as seen in your project. If you add the control to the form it should not scale twice.

Regards,
Hristo
Progress Telerik

[Jeremy]

Hello Hristo,

It does scale twice when I add RadGroupBox directly to common Form (not RadForm) with autosize=true. Please set AutoSize=true for second groupbox on the form in the example I sent before.

 

[quote]Hristo said: Setting the ScaleChildren property to false in the user control could potentially affect other container controls as well. In the context of the group-box that is the only way to prevent the double scaling when using the control in the user control as seen in your project.[/quote]

Please correct me if I got it wrong. If we want to use RadGroupBox in UserControl(or Form) we have two options:

1) Set ScaleChildren=false and AutoSize=true, and check if any issues with scaling appear for child controls. If any issue appears - fix scaling manually

2) Set AutoSize=false, and calculate size manually

Other words we need to choose what we want more AutoSize or HDPI scaling?

[Hristo]

Hello Jeremy,

The system is calling the ScaleControl method of the group box twice when it is added in the user control. At the same time, we are relying on this method and the provided factor to do the scaling. the end, this results in double scaling. I can suggest creating a user control only with the group box and the label just as in the sample project and have the ScaleChildren property return false.

Regards,
Hristo
Progress Telerik