Customized ListViewItem : auto size in middle & resize

1 Answer 44 Views
Top achievements
Rank 1
Vincent asked on 19 May 2021, 02:17 PM | edited on 19 May 2021, 02:17 PM

Hi !

I'm using a customized listviewitem and i've got this problem, after 2 days on a listviewitem ! :

see attach.

my vertical StackLayoutElement not take availble size.

i want only this part take availble and resize when resize my form

 private class interlocuteurVisualItem : SimpleListViewVisualItem
            private LightVisualElement entite;
            private LightVisualElement localisation_Add;
            private LightVisualElement localisation_Com;
            private LightVisualElement typeInterlocuteur;            

            protected override void CreateChildElements()
                this.AutoSizeMode = Telerik.WinControls.RadAutoSizeMode.FitToAvailableSize;

                StackLayoutElement layoutPanel = new StackLayoutElement();
                layoutPanel.Orientation = Orientation.Horizontal;
                layoutPanel.MinSize = new Size(layoutPanel.MinSize.Width, 100);                

                this.entite = new LightVisualElement();
                this.entite.TextWrap = true;
                this.entite.MinSize = new Size(200, 80);
                this.entite.Size = new Size(200, 80);
                this.entite.DrawBorder = true;                    
                this.entite.StretchHorizontally = false;
                this.entite.Alignment = ContentAlignment.MiddleLeft;
                this.entite.TextAlignment = ContentAlignment.MiddleLeft;

                StackLayoutElement layoutPanel_Localisation = new StackLayoutElement();
                layoutPanel_Localisation.Orientation = Orientation.Vertical;
                layoutPanel_Localisation.AutoSize = true;
                layoutPanel_Localisation.AutoSizeMode = Telerik.WinControls.RadAutoSizeMode.FitToAvailableSize;
                layoutPanel_Localisation.Alignment = ContentAlignment.MiddleLeft;
                layoutPanel_Localisation.StretchHorizontally = true;
                layoutPanel_Localisation.StretchVertically = true;

                //Localisation adresse
                this.localisation_Add = new LightVisualElement();               
                this.localisation_Add.Alignment = ContentAlignment.BottomLeft;
                this.localisation_Add.TextAlignment = ContentAlignment.MiddleLeft;
                this.localisation_Add.DrawBorder = true;
                this.localisation_Add.TextWrap = true;
                this.localisation_Add.StretchHorizontally = true;

                //Localisation CP & Commune
                this.localisation_Com = new LightVisualElement();
                this.localisation_Com.Alignment = ContentAlignment.BottomLeft;
                this.localisation_Com.TextAlignment = ContentAlignment.MiddleLeft;
                this.localisation_Com.TextWrap = true;
                this.localisation_Com.DrawBorder = true;
                this.localisation_Com.StretchHorizontally = true;


                // typeInterlocuteur
                this.typeInterlocuteur = new LightVisualElement();
                this.typeInterlocuteur.MinSize = new Size(200, 80);
                this.typeInterlocuteur.Size = new Size(200, 80);
                this.typeInterlocuteur.StretchHorizontally = false;
                this.typeInterlocuteur.TextWrap = true;
                this.typeInterlocuteur.TextAlignment = ContentAlignment.MiddleLeft;
                this.typeInterlocuteur.DrawBorder = true;



            protected override void SynchronizeProperties()

                Text = "";
                entite.Text = Convert.ToString(Data["NomEntite"]);
                localisation_Add.Text = $"{Data["Adresse"]}";
                localisation_Com.Text = $"{Data["CodePostal"]} {Data["Commune"]}";
                typeInterlocuteur.Text = Convert.ToString(Data["TypeInterlocuteur"]);

            protected override Type ThemeEffectiveType
                    return typeof(SimpleListViewVisualItem);


1 Answer, 1 is accepted

Sort by
Dess | Tech Support Engineer, Principal
Telerik team
answered on 20 May 2021, 10:21 AM
Hello, Vincent,

RadListView offers the AllowArbitraryItemHeight and AllowArbitraryItemWidth properties. If set to true, they allow the visual items to be sized according to the required space to fit the content. In addition, the StackLayoutElement, contained in the custom SimpleListViewVisualItem class, offers the StretchHorizontally and StretchVertically properties. This allows stretching the container according to the size RadListView offers. The contained LightVisualElement inside the StackLayoutElement also allows you to specify the vertical/horizontal stretching.
I have attached my sample project for your reference which result is illustrated in the gif file.

I hope this information helps. If you need any further assistance please don't hesitate to contact me. 

Dess | Tech Support Engineer, Sr.
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at

Top achievements
Rank 1
commented on 20 May 2021, 11:55 AM

Thanks for help ! it's work, before my post i've tested with AllowArbitraryItemWidth to my radListView but with no result, and omitted the first item stackLayoutElement. sorry for my stupid question. worked on winform since months, after many years in webforms, too many properties and possibilities
Asked by
Top achievements
Rank 1
Answers by
Dess | Tech Support Engineer, Principal
Telerik team
Share this question