GridLayoutRow ignoring sizing

[Czeshirecat]

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

[Czeshirecat]

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?

[Hristo]

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

[Czeshirecat]

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

[Hristo]

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