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

Customized ListViewItem align problems and others

5 Answers 379 Views
ListView
This is a migrated thread and some comments may be shown as answers.
Leandro
Top achievements
Rank 1
Leandro asked on 30 Aug 2019, 06:12 PM

     Hey guys, I'm using RadListView with Customized Items and I have some problems that I need help, please check Image attached

this is my custom item class:

class MensagensCustomListView : SimpleListViewVisualItem
    {
        LightVisualElement tituloElement;
        LightVisualElement descricaoElement;
         
        LightVisualElement textoImageDestaqueElement;
        LightVisualElement nossoObterElement;
        LightVisualElement fecharElement;
        StackLayoutPanel stackLayout;
 
        private void Elemento_MouseLeave(object sender, EventArgs e)
        {
            BackColor = Color.Transparent;
            BorderColor = Color.FromArgb(221, 221, 221);
            fecharElement.Visibility = ElementVisibility.Hidden;
        }
 
        private void Elemento_MouseEnter(object sender, EventArgs e)
        {
            BackColor = Color.White;
            BorderColor = Color.Black; this.BorderGradientStyle = GradientStyles.Solid;
            var bound = Data.DataBoundItem as notificacao_model;
            if (bound.pode_fechar_notificacao)
                fecharElement.Visibility = ElementVisibility.Visible;
            else
                fecharElement.Visibility = ElementVisibility.Hidden;
        }
 
 
        protected override void CreateChildElements()
        {
            base.CreateChildElements();
            stackLayout = new StackLayoutPanel
            {
                Orientation = System.Windows.Forms.Orientation.Vertical,
                ShouldHandleMouseInput = false,
                NotifyParentOnMouseInput = true,
            };
 
            textoImageDestaqueElement = new LightVisualElement
            {
                Font = new Font("Segoe UI", 8, FontStyle.Italic, GraphicsUnit.Point),
                ForeColor = Color.Gray,
                TextAlignment = ContentAlignment.MiddleLeft,
                Margin = new System.Windows.Forms.Padding(1, 3, 0, 0),
                Text = "Destaque",
                ShouldHandleMouseInput = false,
                NotifyParentOnMouseInput = true,
                Visibility = ElementVisibility.Collapsed,
            };
            stackLayout.Children.Add(textoImageDestaqueElement);
 
            var stackLayoutHorizontal = new StackLayoutPanel
            {
                ShouldHandleMouseInput = false,
                NotifyParentOnMouseInput = true,
                Orientation = Orientation.Horizontal
            };
 
            tituloElement = new LightVisualElement
            {
                TextAlignment = System.Drawing.ContentAlignment.MiddleLeft,
                TextWrap = true,
                Margin = new System.Windows.Forms.Padding(3, 1, 3, 1),
                Font = new System.Drawing.Font("Segoe UI", 9, System.Drawing.FontStyle.Bold, System.Drawing.GraphicsUnit.Point),
                ForeColor = System.Drawing.Color.FromArgb(51, 3, 0),
                StretchHorizontally = true,
                ShouldHandleMouseInput = false,
                NotifyParentOnMouseInput = true,
            };
            stackLayoutHorizontal.Children.Add(tituloElement);
 
            fecharElement = new LightVisualElement
            {
                Font = new System.Drawing.Font("Arial", 10, System.Drawing.FontStyle.Bold, System.Drawing.GraphicsUnit.Point),
                ForeColor = System.Drawing.Color.Black,
                Text = "x",
                StretchHorizontally = false,
                DisableHTMLRendering = false,
                BackColor = Color.FromArgb(230, 230, 230),
                EnableHighlight = true,
                HighlightColor = Color.FromArgb(240, 240, 240),
                Padding = new Padding(5, 2, 5, 2),
                DrawFill = true,
                ToolTipText = "Fechar Mensagem",
                NumberOfColors = 1,
                Visibility = ElementVisibility.Collapsed,
            };
            fecharElement.MouseEnter += Elemento_MouseEnter;
            fecharElement.MouseLeave += Elemento_MouseLeave;
            fecharElement.Click += FecharElement_Click;
            stackLayoutHorizontal.Children.Add(fecharElement);
 
            stackLayout.Children.Add(stackLayoutHorizontal);
 
            descricaoElement = new LightVisualElement
            {
                TextAlignment = System.Drawing.ContentAlignment.MiddleLeft,
                Margin = new System.Windows.Forms.Padding(3, 1, 3, 1),
                Font = new System.Drawing.Font("Segoe UI", 8, System.Drawing.FontStyle.Regular, System.Drawing.GraphicsUnit.Point),
                ForeColor = System.Drawing.Color.FromArgb(60, 60, 60),
                ShouldHandleMouseInput = false,
                NotifyParentOnMouseInput = true,
            };
 
            stackLayout.Children.Add(descricaoElement);
 
            nossoObterElement = new LightVisualElement
            {
                Margin = new System.Windows.Forms.Padding(190, 5, 3, 0),
                Font = new System.Drawing.Font("Segoe UI", 8, FontStyle.Regular, System.Drawing.GraphicsUnit.Point),
                ForeColor = Color.FromArgb(153, 153, 153),
                Text = "Mensagem da Obter",
                ShouldHandleMouseInput = false,
                NotifyParentOnMouseInput = true,
            };
            stackLayout.Children.Add(nossoObterElement);
 
            Children.Add(stackLayout);
 
            Margin = new Padding(6, 0, 0, 0);
            Padding = new System.Windows.Forms.Padding(1);
            BackColor = Color.FromArgb(245, 245, 245);
            BorderColor = Color.FromArgb(221, 221, 221);
            BorderGradientStyle = GradientStyles.Solid;
            DrawBorder = true;
            DrawFill = true;
            Shape = new RoundRectShape
            {
                BottomLeftRounded = true,
                BottomRightRounded = true,
                TopLeftRounded = true,
                TopRightRounded = true,
                Radius = 3
            };
 
            this.MouseEnter += Elemento_MouseEnter;
            this.MouseLeave += Elemento_MouseLeave;
 
            //SetMouseEnterLeave(stackLayout, stackLayoutHorizontal, textoImageDestaqueElement, tituloElement, descricaoElement, nossoObterElement, fecharElement, this);
        }
 
      
        private void FecharElement_Click(object sender, EventArgs e)
        {
            var bound = Data.DataBoundItem as notificacao_model;
            Data.ListView.Items.Remove(Data);
            this.Visibility = ElementVisibility.Collapsed;
            if (bound != null)
            {
                bound.notificacao_fechada = true;
                bound.OnFechar();
            }
        }
 
        protected override void SynchronizeProperties()
        {
            var bound = Data.DataBoundItem as notificacao_model;
            if (bound != null)
            {
                tituloElement.Text = bound.titulo;
                if (bound.descricao.IsNotNullOrEmpty())
                {
                    descricaoElement.Visibility = ElementVisibility.Visible;
                    descricaoElement.Text = bound.descricao;
                }
                else
                    descricaoElement.Visibility = ElementVisibility.Collapsed;
 
                if (bound.destaque == true)
                {
                    textoImageDestaqueElement.DrawImage = true;
                    textoImageDestaqueElement.Visibility = ElementVisibility.Visible;
                    if (textoImageDestaqueElement.Image == null)
                        textoImageDestaqueElement.Image = new Bitmap(Properties.Resources.favicon.ToBitmap(), new Size(16, 16));
                }
                else
                    textoImageDestaqueElement.Visibility = ElementVisibility.Collapsed;
 
                if (bound.mensagem_da_obter)
                    nossoObterElement.Visibility = ElementVisibility.Visible;
                else
                    nossoObterElement.Visibility = ElementVisibility.Collapsed;
 
            }
        }
    }

5 Answers, 1 is accepted

Sort by
0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 02 Sep 2019, 11:01 AM

Hello, Leandro,  

Following the provided code snippet, I have prepared a sample project where the RadListView control uses the custom SimpleListViewVisualItem

When the text is so long that it doesn't fit the available space, you can replace the StackLayoutPanel with a StackLayoutElement. Thus, the text will be wrapped:

As to the "X" button, make sure that the StackLayoutElement that hosts the "X" element is stretched horizontally:

I have attached my sample project for your reference.

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

 

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Leandro
Top achievements
Rank 1
answered on 03 Sep 2019, 03:16 PM

Thanks, with your example I've could achieve my needs.There is another thing, this listview meant to be a notification center, and to make this wonderfull I'm trying to do an "autosize" function, since there is no autosize property, how can I increase the height of this listview as more notification appears, setting the max height of the PoopupContainer as the Screen.WorkingArea.Height - PoopupContainer.StartPosition.Y. (And I don't know if these are the real properties)

0
Leandro
Top achievements
Rank 1
answered on 03 Sep 2019, 03:18 PM
I don't want the poopup to grow beyond or on the taskbar
0
Accepted
Dess | Tech Support Engineer, Principal
Telerik team
answered on 04 Sep 2019, 01:36 PM
Hello, Leandro,    

Note that if you set the AllowArbitraryItemHeight property to true, this will size the items according to the size each item needs to fit the available content. If you need to enlarge the RadListView control when adding items at run time, you can iterate the Items collection and sum the total height of all items. Then, if the calculated height exceeds the screen height,limit the height to the screen height. Otherwise, use the calculated height. You can find below a sample code snippet which illustrates the idea:
 
        BindingList<notificacao_model> items = new BindingList<notificacao_model>();

        public RadForm1()
        {
            InitializeComponent();
            new RadControlSpyForm().Show();
            this.radListView1.VisualItemCreating += radListView1_VisualItemCreating;
            
            for (int i = 0; i < 10; i++)
            {
                items.Add(new notificacao_model(i % 2 == 0,i % 2 == 0, string.Concat(Enumerable.Repeat("Title" + i, 2)),"Description" + i, i % 2 == 0,i % 2 == 0));
            }
            this.radListView1.DataSource = items;

            this.radListView1.AllowArbitraryItemHeight = true;
            this.radListView1.Items.CollectionChanged += Items_CollectionChanged;
        }

        private void Items_CollectionChanged(object sender, Telerik.WinControls.Data.NotifyCollectionChangedEventArgs e)
        {
            Recalculate();
        }
 
        private void Recalculate()
        {
            int totalHeight = 0;
            foreach (ListViewDataItem item in this.radListView1.Items)
            {
                totalHeight += item.ActualSize.Height;
            }
            Size screenSize = new Size(Screen.AllScreens[Screen.AllScreens.Length - 1].Bounds.Width * Screen.AllScreens.Length, 
                Screen.PrimaryScreen.Bounds.Height);
            this.radListView1.Size = new Size(this.radListView1.Width,Math.Min(totalHeight+20, screenSize.Height-50) );
        }

Should you have further questions please let me know.

 

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Leandro
Top achievements
Rank 1
answered on 06 Sep 2019, 12:18 PM
With your example code I've done it, thanks!
Tags
ListView
Asked by
Leandro
Top achievements
Rank 1
Answers by
Dess | Tech Support Engineer, Principal
Telerik team
Leandro
Top achievements
Rank 1
Share this question
or