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

StackLayoutPanel - Size Items to Fit Parent Control

3 Answers 700 Views

Panel

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

Simon asked on 22 Aug 2017, 03:28 AM

stacklayout.png

I'm using a RadListView with custom items. The custom item has a stacklayoutpanel with horizontal orientation. The stackLayoutPanel contains 2 images then some text then another image, as per the attached screenshot. I'd like to lay things out so that the red cross image is always at the far right of the listview, with empty space between the text and the red cross. The listview is anchored so that if the form is resized, the listview resizes with it and I'd like the red cross to adjust itself so it's always at the far right when the listview is resized. How do I achieve this?

3 Answers, 1 is accepted

answered on 22 Aug 2017, 07:36 AM

Hi Simon,

You need to use StackLayoutElement and set its StretchHorizontally property to true. Here is an example that shows how you should set the image alignment as well:

public class MyCustomVisualItem : SimpleListViewVisualItem

{

private RadButtonElement buttonElement1;

private RadButtonElement buttonElement2;

private LightVisualElement imageElement;

private StackLayoutElement stackLayout;

protected override void CreateChildElements()

{

base.CreateChildElements();

this.stackLayout = new StackLayoutElement();

this.stackLayout.Orientation = Orientation.Horizontal;

this.stackLayout.StretchHorizontally = true;

this.stackLayout.ShouldHandleMouseInput = false;

this.stackLayout.NotifyParentOnMouseInput = true;

this.buttonElement1 = new RadButtonElement();

this.buttonElement1.Text = "Button1";

this.stackLayout.Children.Add(this.buttonElement1);

this.buttonElement2 = new RadButtonElement();

this.buttonElement2.Text = "Button2";

this.stackLayout.Children.Add(this.buttonElement2);

this.imageElement = new LightVisualElement();

this.imageElement.StretchHorizontally = true;

this.imageElement.ShouldHandleMouseInput = false;

this.imageElement.NotifyParentOnMouseInput = true;

this.imageElement.DrawImage = true;

this.imageElement.ImageLayout = ImageLayout.None;

this.imageElement.ImageAlignment = ContentAlignment.MiddleRight;

this.imageElement.TextImageRelation = TextImageRelation.TextBeforeImage;

this.imageElement.Image = Image.FromFile(@"C:\img\delete.png");

this.stackLayout.Children.Add(this.imageElement);

this.Children.Add(this.stackLayout);

}

protected override Type ThemeEffectiveType

{

get

{

return typeof(SimpleListViewVisualItem);

}

I hope this will be useful. Let me know if you have additional questions.

Regards,
Dimitar
Progress Telerik

Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.

answered on 23 Aug 2017, 01:43 AM

result.png

howitshouldlook.png

I'm doing something similar with the below code but it's not working properly. I've attached a screenshot of the result and another screenshot of how I'd like it to look.

Public Class AttachmentItem2
Inherits SimpleListViewVisualItem

Shared IMAGE_DELETE As Image = My.Resources.Delete_16x16
Shared IMAGE_REORDER As Image = My.Resources.Reorder_16x16
Shared IMAGE_FILE_PDF As Image = My.Resources.PDF_16x16
Shared IMAGE_FILE_EMAIL As Image = My.Resources.eMail_16x16
Shared IMAGE_FILE_WORD As Image = My.Resources.Word_16x16
Shared IMAGE_FILE_EXCEL As Image = My.Resources.Excel_16x16
Shared IMAGE_FILE_IMAGE As Image = My.Resources.Image_16x16
Shared IMAGE_FILE_UNKNOWN As Image = My.Resources.Unknown_16x16

Private StackLayoutOuter As StackLayoutElement
Private StackLayoutContent As StackLayoutElement
Private lineElement As RadLineItem
Private ReorderImage As LightVisualElement
Private FileImage As LightVisualElement
Private DisplayName As LightVisualElement
Private DeleteImg As LightVisualElement

Protected Overrides Sub CreateChildElements()
MyBase.CreateChildElements()

Dim DefaultHeight As Integer = 18

Me.StackLayoutOuter = New StackLayoutElement
With Me.StackLayoutOuter
.Orientation = Orientation.Vertical
.StretchHorizontally = True
.ShouldHandleMouseInput = False
.NotifyParentOnMouseInput = True
End With

Me.StackLayoutContent = New StackLayoutElement
With Me.StackLayoutContent
.Orientation = Orientation.Horizontal
.ShouldHandleMouseInput = False
.NotifyParentOnMouseInput = True
.StretchHorizontally = True
End With
Me.StackLayoutOuter.Children.Add(Me.StackLayoutContent)

Me.lineElement = New RadLineItem
With Me.lineElement
.LineColor = Color.LightGray
.AutoSize = True
.AutoSizeMode = RadAutoSizeMode.FitToAvailableSize
End With
Me.StackLayoutOuter.Children.Add(Me.lineElement)

Me.ReorderImage = New LightVisualElement
With ReorderImage
.Size = New Size(16, 16)
.MaxSize = New Size(16, 16)
.Alignment = ContentAlignment.MiddleLeft
.DrawImage = True
.AutoSize = False
.Image = IMAGE_REORDER
.ShouldHandleMouseInput = False
.NotifyParentOnMouseInput = True
End With
Me.StackLayoutContent.Children.Add(Me.ReorderImage)

Me.FileImage = New LightVisualElement
With FileImage
.Size = New Size(16, 16)
.MaxSize = New Size(16, 16)
.Alignment = ContentAlignment.MiddleLeft
.DrawImage = True
.AutoSize = False
.ShouldHandleMouseInput = False
.NotifyParentOnMouseInput = True
End With
Me.StackLayoutContent.Children.Add(Me.FileImage)

Me.DisplayName = New LightVisualElement()
With Me.DisplayName
.TextAlignment = ContentAlignment.MiddleLeft
.Alignment = ContentAlignment.MiddleLeft
.ShouldHandleMouseInput = False
.NotifyParentOnMouseInput = True
.AutoSize = True
.StretchHorizontally = True
End With
Me.StackLayoutContent.Children.Add(Me.DisplayName)

Me.DeleteImg = New LightVisualElement
With DeleteImg
.Size = New Size(16, 16)
.MaxSize = New Size(16, 16)
.AutoSize = False
.DrawImage = True
.Image = IMAGE_DELETE
.Tag = Me
.ShouldHandleMouseInput = True
.NotifyParentOnMouseInput = False
End With
Me.StackLayoutContent.Children.Add(Me.DeleteImg)

Me.Children.Add(Me.StackLayoutOuter)

End Sub

answered on 23 Aug 2017, 07:46 AM

Hello Simon,

In general, you should leave the size to be calculated by the layout element. Here is how you can achieve the desired layout:

Public Class MyCustomVisualItem

Inherits SimpleListViewVisualItem

Private StackLayoutOuter As StackLayoutElement

Private StackLayoutContent As StackLayoutElement

Private lineElement As RadLineItem

Private ReorderImage As LightVisualElement

Private FileImage As LightVisualElement

Private DisplayName As LightVisualElement

Private DeleteImg As LightVisualElement

Protected Overrides Sub CreateChildElements()

MyBase.CreateChildElements()

Dim image = System.Drawing.Image.FromFile("C:\img\delete.png")

Dim DefaultHeight As Integer = 18

Me.StackLayoutOuter = New StackLayoutElement()

StackLayoutOuter.BorderColor = Color.Red

StackLayoutOuter.DrawBorder = True

StackLayoutOuter.Orientation = Orientation.Vertical

StackLayoutOuter.StretchHorizontally = True

StackLayoutOuter.StretchVertically = True

StackLayoutOuter.ShouldHandleMouseInput = False

StackLayoutOuter.NotifyParentOnMouseInput = True

StackLayoutContent = New StackLayoutElement()

StackLayoutContent.Orientation = Orientation.Horizontal

StackLayoutContent.ShouldHandleMouseInput = False

StackLayoutContent.NotifyParentOnMouseInput = True

StackLayoutContent.StretchHorizontally = True

StackLayoutOuter.Children.Add(Me.StackLayoutContent)

lineElement = New RadLineItem()

lineElement.LineColor = Color.LightGray

lineElement.AutoSizeMode = RadAutoSizeMode.FitToAvailableSize

StackLayoutOuter.Children.Add(Me.lineElement)

ReorderImage = New LightVisualElement()

ReorderImage.StretchHorizontally = False

ReorderImage.Alignment = ContentAlignment.MiddleLeft

ReorderImage.DrawImage = True

ReorderImage.Image = image

ReorderImage.ShouldHandleMouseInput = False

ReorderImage.NotifyParentOnMouseInput = True

StackLayoutContent.Children.Add(Me.ReorderImage)

FileImage = New LightVisualElement()

FileImage.StretchHorizontally = False

FileImage.Alignment = ContentAlignment.MiddleLeft

FileImage.DrawImage = True

FileImage.ShouldHandleMouseInput = False

FileImage.NotifyParentOnMouseInput = True

FileImage.Image = image

StackLayoutContent.Children.Add(Me.FileImage)

DisplayName = New LightVisualElement()

DisplayName.TextAlignment = ContentAlignment.MiddleLeft

DisplayName.Alignment = ContentAlignment.MiddleLeft

DisplayName.ShouldHandleMouseInput = False

DisplayName.NotifyParentOnMouseInput = True

DisplayName.StretchHorizontally = True

DisplayName.Text = "DisplayName"

StackLayoutContent.Children.Add(Me.DisplayName)

DeleteImg = New LightVisualElement()

DeleteImg.ImageLayout = ImageLayout.None

DeleteImg.TextImageRelation = TextImageRelation.TextBeforeImage

DeleteImg.DrawImage = True

DeleteImg.Image = image

DeleteImg.Tag = Me

DeleteImg.ShouldHandleMouseInput = True

DeleteImg.NotifyParentOnMouseInput = False

DeleteImg.StretchHorizontally = False

StackLayoutContent.Children.Add(Me.DeleteImg)

Me.Children.Add(Me.StackLayoutOuter)

End Sub

Protected Overrides ReadOnly Property ThemeEffectiveType() As Type

Get

Return GetType(SimpleListViewVisualItem)

End Get

End Property

End Class

Please let me know if there is something else I can help you with.

Regards,
Dimitar
Progress Telerik

Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.