StackLayoutPanel - Size Items to Fit Parent Control

4 posts, 0 answers
  1. Simon
    Simon avatar
    27 posts
    Member since:
    Aug 2011

    Posted 21 Aug Link to this post

    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?
  2. Dimitar
    Admin
    Dimitar avatar
    1871 posts

    Posted 22 Aug Link to this post

    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.
  3. Simon
    Simon avatar
    27 posts
    Member since:
    Aug 2011

    Posted 22 Aug in reply to Dimitar Link to this post

    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

  4. Dimitar
    Admin
    Dimitar avatar
    1871 posts

    Posted 23 Aug Link to this post

    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.
Back to Top