Customized ListViewItem align problems and others

[Leandro]

     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;

            }
        }
    }

[Dess | Tech Support Engineer, Principal]

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

[Leandro]

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)

[Leandro]

I don't want the poopup to grow beyond or on the taskbar

[Dess | Tech Support Engineer, Principal]

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

[Leandro]

With your example code I've done it, thanks!