StackLayoutPanel - Size Items to Fit Parent Control

[Simon]

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?

[Dimitar]

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

[Simon]

Hi 

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

[Dimitar]

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