GridLayoutRow ignoring sizing

5 posts, 0 answers
  1. Czeshirecat
    Czeshirecat avatar
    14 posts
    Member since:
    Jun 2016

    Posted 08 Jul Link to this post

    Hi

    My layoutgrid is 2 columns, 4 rows and Im seeing the control ignoring both width and  ProportionalHeightWeight settings I set. 

    Rather than 20:80 I'm seeing 50:50 for columns, rather than 10:10:70:10 for rows I'm seeing 25:25:25:25.

    What am I missing please?

    001.private void CreateElements()
    002.{
    003.  _layoutPanel = new GridLayout();
    004.  _layoutPanel.Columns.Clear();
    005.  _layoutPanel.Rows.Clear();
    006. 
    007.  //add columns
    008.  _layoutPanel.Columns.Add(new GridLayoutColumn()
    009.  {
    010.    SizingType = GridLayoutSizingType.Proportional,
    011.    ProportionalWidthWeight = 20
    012.  });
    013.  _layoutPanel.Columns.Add(new GridLayoutColumn()
    014.  {
    015.    SizingType = GridLayoutSizingType.Proportional,
    016.    ProportionalWidthWeight = 80
    017.  });
    018. 
    019.  // Add rows
    020.  CreateTitleRow();
    021.  CreateImageRow();
    022.  CreateTimeRow();
    023.  CreateBeginRow();
    024. 
    025.  // Add rows to the layout
    026.  _layoutPanel.Rows.Add(_titleRow);
    027.  _layoutPanel.Rows.Add(_imageRow);
    028.  _layoutPanel.Rows.Add(_timeRow);
    029.  _layoutPanel.Rows.Add(_beginRow);
    030. 
    031.  // Add items to the panel
    032.  _layoutPanel.Children.Add(_planTitle);
    033.  _layoutPanel.Children.Add(_planImage);
    034.  _layoutPanel.Children.Add(_totalTime);
    035.  _layoutPanel.Children.Add(_beginButton);
    036. 
    037.  // Add layout panel to children
    038.  Children.Add(_layoutPanel);
    039.}
    040. 
    041.private void CreateTitleRow()
    042.{
    043.  _titleRow = new GridLayoutRow();
    044.  _titleRow.SizingType = GridLayoutSizingType.Proportional;
    045.  _titleRow.ProportionalHeightWeight = 10;
    046. 
    047.  // Set the title of the plan 0,0
    048.  _planTitle = new LightVisualElement();
    049.  _planTitle.SetValue(GridLayout.ColSpanProperty, 2);
    050.  _planTitle.SetValue(GridLayout.ColumnIndexProperty, 0);
    051.  _planTitle.SetValue(GridLayout.RowIndexProperty, 0);
    052.  _planTitle.AutoEllipsis = true;
    053.  _planTitle.TextAlignment = ContentAlignment.MiddleLeft;
    054.  _planTitle.Text = _wplan == null ? "Free" : string.Format("{0} {1}", _index, _wplan.PlanName);
    055.}// function
    056. 
    057.private void CreateImageRow()
    058.{
    059.  _imageRow = new GridLayoutRow();
    060.  _imageRow.SizingType = GridLayoutSizingType.Proportional;
    061.  _imageRow.ProportionalHeightWeight = 70;
    062. 
    063.  // Image 0,1
    064.  _planImage = new LightVisualElement();
    065.  _planImage.SetValue(GridLayout.ColSpanProperty, 2);
    066.  _planImage.SetValue(GridLayout.ColumnIndexProperty, 0);
    067.  _planImage.SetValue(GridLayout.RowIndexProperty, 1);
    068.  _planImage.BackgroundImageLayout = ImageLayout.Stretch;
    069.  _planImage.BackgroundImage = _backImage;
    070.}// function
    071. 
    072.private void CreateTimeRow()
    073.{
    074.  _timeRow = new GridLayoutRow();
    075.  _timeRow.SizingType = GridLayoutSizingType.Proportional;
    076.  _timeRow.ProportionalHeightWeight = 10;
    077. 
    078.  // Total time 0,2 and 1,2
    079.  _totalTime = new LightVisualElement();
    080.  _totalTime.AutoEllipsis = true;
    081.  _totalTime.SetValue(GridLayout.ColumnIndexProperty, 1);
    082.  _totalTime.SetValue(GridLayout.RowIndexProperty, 2);
    083.  _totalTime.Text = _wplan == null ? "-hr -mins" : _wplan.CreationDate.ToLongDateString();
    084.}// function
    085. 
    086. 
    087.private void CreateBeginRow()
    088.{
    089.  _beginRow = new GridLayoutRow();
    090.  _beginRow.SizingType = GridLayoutSizingType.Proportional;
    091.  _beginRow.ProportionalHeightWeight = 10;
    092. 
    093.  // Begin button 0,3
    094.  _beginButton = new LightVisualElement();
    095.  _beginButton.SetValue(GridLayout.ColSpanProperty, 2);
    096.  _beginButton.SetValue(GridLayout.ColumnIndexProperty, 0);
    097.  _beginButton.SetValue(GridLayout.RowIndexProperty, 3);
    098.  _beginButton.AutoEllipsis = true;
    099.  _beginButton.Text = "Begin Workout";
    100.}// function
  2. Czeshirecat
    Czeshirecat avatar
    14 posts
    Member since:
    Jun 2016

    Posted 09 Jul in reply to Czeshirecat Link to this post

    The sample code I based mine on was from http://docs.telerik.com/devtools/winforms/panorama/custom-tiles which also shows the same behaviour. In the case of this sample code, the rows are set to 33:33:34%, but if those values are changed to 10:20:70 then the proportionality setting is ignored.

    In the books demo, no layoutgrid is used and instead the lightvisualelements are docked. These work as expected.

    Is there some setting I should be using in the panorama itself so that the layoutgrid works as it should?

  3. UI for WinForms is Visual Studio 2017 Ready
  4. Hristo Merdjanov
    Admin
    Hristo Merdjanov avatar
    711 posts

    Posted 11 Jul Link to this post

    Hi Czeshirecat,

    Thank you for writing.

    In order to use the ProportionalWidthWeight property of the GridLayout element one should set its StretchHorizontally and StretchVertically properties to false: GridLayout.

    Regarding the panorama control and the discussed example you can change the CreateChildElements method of the custom tile class this way: 
    protected override void CreateChildElements()
    {
        base.CreateChildElements();
     
        layoutPanel = new GridLayout();
     
        this.StretchVertically = false;
        this.StretchHorizontally = false;
         
        //...
    }

    The documentation article will also be updated accordingly.

    I hope this helps. Should you have further questions please do not hesitate to write back.

    Regards,
    Hristo Merdjanov
    Telerik by Progress
    Check out the Windows Forms project converter, which aids the conversion process from standard Windows Forms applications written in C# or VB to Telerik UI for WinForms. For more information check out this blog post and share your thoughts.
  5. Czeshirecat
    Czeshirecat avatar
    14 posts
    Member since:
    Jun 2016

    Posted 11 Jul in reply to Hristo Merdjanov Link to this post

    Hello. Thankyou for the reply.

    I've retried the demo code with these new values but it's still failing and is splitting the rows into 33:33:33 and not the values I've entered.

     

    001.using System;
    002.using System.ComponentModel;
    003.using System.Drawing;
    004.using pulse.move.factories;
    005.using Telerik.WinControls.Layouts;
    006.using Telerik.WinControls.UI;
    007.using Telerik.WinControls.XmlSerialization;
    008. 
    009.namespace pulse.smartcentre.newgui.Members
    010.{
    011.  [Localizable(false)]
    012.  class dPlanTileElement : RadTileElement
    013.  {
    014.    LightVisualElement _subject;
    015.    LightVisualElement _startTime;
    016.    LightVisualElement _endTime;
    017.    LightVisualElement _alarmIcon;
    018.    GridLayout _layoutPanel;
    019. 
    020.    protected override void CreateChildElements()
    021.    {
    022.      base.CreateChildElements();
    023. 
    024.      StretchVertically = false;
    025.      StretchHorizontally = false;
    026. 
    027.      _layoutPanel = new GridLayout();
    028.      _layoutPanel.Columns.Clear();
    029.      _layoutPanel.Rows.Clear();
    030.      //add columns
    031.      _layoutPanel.Columns.Add(new GridLayoutColumn()
    032.      {
    033.        SizingType = GridLayoutSizingType.Proportional,
    034.        ProportionalWidthWeight = 50
    035.      });
    036.      _layoutPanel.Columns.Add(new GridLayoutColumn()
    037.      {
    038.        SizingType = GridLayoutSizingType.Proportional,
    039.        ProportionalWidthWeight = 50
    040.      });
    041.      //add rows
    042.      _layoutPanel.Rows.Add(new GridLayoutRow()
    043.      {
    044.        SizingType = GridLayoutSizingType.Proportional,
    045.        ProportionalHeightWeight = 10
    046.      });
    047.      _layoutPanel.Rows.Add(new GridLayoutRow()
    048.      {
    049.        SizingType = GridLayoutSizingType.Proportional,
    050.        ProportionalHeightWeight = 10
    051.      });
    052.      _layoutPanel.Rows.Add(new GridLayoutRow()
    053.      {
    054.        SizingType = GridLayoutSizingType.Proportional,
    055.        ProportionalHeightWeight = 80
    056.      });
    057. 
    058.      _subject = new LightVisualElement();
    059.      _subject.Text = "WinForms Conference";
    060.      _subject.Font = new System.Drawing.Font("Consolas", 18, FontStyle.Underline);
    061.      _subject.BackColor = Color.Aqua;
    062.      _subject.TextAlignment = ContentAlignment.MiddleLeft;
    063.      _subject.Padding = new System.Windows.Forms.Padding(20, 0, 0, 0);
    064.      _subject.SetValue(GridLayout.RowIndexProperty, 0);
    065.      _subject.SetValue(GridLayout.ColumnIndexProperty, 0);
    066.      _subject.SetValue(GridLayout.ColSpanProperty, 2);
    067. 
    068.      _startTime = new LightVisualElement();
    069.      _startTime.Text = "Start: " + DateTime.Now.ToShortDateString();
    070. 
    071.      _startTime.SetValue(GridLayout.RowIndexProperty, 1);
    072.      _startTime.SetValue(GridLayout.ColumnIndexProperty, 0);
    073. 
    074.      _endTime = new LightVisualElement();
    075.      _endTime.Text = "End: " + DateTime.Now.AddDays(3).ToShortDateString();
    076.      _endTime.SetValue(GridLayout.RowIndexProperty, 1);
    077.      _endTime.SetValue(GridLayout.ColumnIndexProperty, 1);
    078. 
    079.      _alarmIcon = new LightVisualElement();
    080.      _alarmIcon.Image = NewClassFactory.StockImageRepository.EmptyUserLarge.GetThumbnailImage(35, 35, null, IntPtr.Zero);
    081.      _alarmIcon.ImageLayout = System.Windows.Forms.ImageLayout.None;
    082.      _alarmIcon.Padding = new System.Windows.Forms.Padding(0, 0, 10, 0);
    083.      _alarmIcon.ImageAlignment = ContentAlignment.MiddleRight;
    084.      _alarmIcon.SetValue(GridLayout.RowIndexProperty, 2);
    085.      _alarmIcon.SetValue(GridLayout.ColumnIndexProperty, 1);
    086. 
    087.      this._layoutPanel.Children.Add(_subject);
    088.      this._layoutPanel.Children.Add(_startTime);
    089.      this._layoutPanel.Children.Add(_endTime);
    090.      this._layoutPanel.Children.Add(_alarmIcon);
    091.      this.Children.Add(_layoutPanel);
    092.    }
    093. 
    094.    public dPlanTileElement()
    095.    {
    096.      this.BackColor = ColorTranslator.FromHtml("#008de7");
    097.    }
    098. 
    099.    protected override Type ThemeEffectiveType
    100.    {
    101.      get
    102.      {
    103.        return typeof(RadTileElement);
    104.      }
    105.    }
    106. 
    107. 
    108.  }
    109.}

  6. Hristo Merdjanov
    Admin
    Hristo Merdjanov avatar
    711 posts

    Posted 11 Jul Link to this post

    Hello,

    Thank you for writing back.

    Please excuse me for sending you the wrong snippet. These properties need to be set on the GridLayout instance: 
    protected override void CreateChildElements()
    {
        base.CreateChildElements();
     
        layoutPanel = new GridLayout();
     
        layoutPanel.Columns.Clear();
        layoutPanel.Rows.Clear();
     
        this.layoutPanel.StretchVertically = false;
        this.layoutPanel.StretchHorizontally = false;
        
       //...
    }

    I am also attaching to this thread my sample project.

    I hope this helps. Please let me know if you need further assistance.

    Regards,
    Hristo Merdjanov
    Telerik by Progress
    Check out the Windows Forms project converter, which aids the conversion process from standard Windows Forms applications written in C# or VB to Telerik UI for WinForms.For more information check out this blog post and share your thoughts.
Back to Top
UI for WinForms is Visual Studio 2017 Ready