This is a migrated thread and some comments may be shown as answers.

GridLayoutRow ignoring sizing

4 Answers 102 Views
Panorama
This is a migrated thread and some comments may be shown as answers.
Czeshirecat
Top achievements
Rank 2
Iron
Iron
Czeshirecat asked on 08 Jul 2016, 09:55 AM

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

4 Answers, 1 is accepted

Sort by
0
Czeshirecat
Top achievements
Rank 2
Iron
Iron
answered on 09 Jul 2016, 07:23 AM

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?

0
Hristo
Telerik team
answered on 11 Jul 2016, 12:08 PM
Hi ,

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.
0
Czeshirecat
Top achievements
Rank 2
Iron
Iron
answered on 11 Jul 2016, 12:51 PM

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.}

0
Hristo
Telerik team
answered on 11 Jul 2016, 01:54 PM
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.
Tags
Panorama
Asked by
Czeshirecat
Top achievements
Rank 2
Iron
Iron
Answers by
Czeshirecat
Top achievements
Rank 2
Iron
Iron
Hristo
Telerik team
Share this question
or