GroupBox AutoSize + RadLabel = oversized header on HDPI

9 posts, 0 answers
  1. Jeremy
    Jeremy avatar
    12 posts
    Member since:
    Dec 2013

    Posted 10 Jan Link to this post

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

     

  2. Hristo
    Admin
    Hristo avatar
    1504 posts

    Posted 11 Jan Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Jeremy
    Jeremy avatar
    12 posts
    Member since:
    Dec 2013

    Posted 14 Jan Link to this post

    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.

  4. Jeremy
    Jeremy avatar
    12 posts
    Member since:
    Dec 2013

    Posted 14 Jan in reply to Hristo Link to this post

    Please rename file from JPG to ZIP. Hope it helps! Thanks.
  5. Hristo
    Admin
    Hristo avatar
    1504 posts

    Posted 14 Jan Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  6. Jeremy
    Jeremy avatar
    12 posts
    Member since:
    Dec 2013

    Posted 14 Jan in reply to Hristo Link to this post

    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. 

  7. Hristo
    Admin
    Hristo avatar
    1504 posts

    Posted 15 Jan Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  8. Jeremy
    Jeremy avatar
    12 posts
    Member since:
    Dec 2013

    Posted 15 Jan in reply to Hristo Link to this post

    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.

     

    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.

    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?

  9. Hristo
    Admin
    Hristo avatar
    1504 posts

    Posted 16 Jan Link to this post

    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. At 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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top