Customized ListViewItem align problems and others

6 posts, 1 answers
  1. Leandro
    Leandro avatar
    48 posts
    Member since:
    Jul 2015

    Posted 30 Aug 2019 Link to this post

         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;
     
                }
            }
        }
  2. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    3891 posts

    Posted 02 Sep 2019 Link to this post

    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.
  3. Leandro
    Leandro avatar
    48 posts
    Member since:
    Jul 2015

    Posted 03 Sep 2019 Link to this post

    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)

  4. Leandro
    Leandro avatar
    48 posts
    Member since:
    Jul 2015

    Posted 03 Sep 2019 Link to this post

    I don't want the poopup to grow beyond or on the taskbar
  5. Answer
    Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    3891 posts

    Posted 04 Sep 2019 Link to this post

    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.
  6. Leandro
    Leandro avatar
    48 posts
    Member since:
    Jul 2015

    Posted 06 Sep 2019 in reply to Dess | Tech Support Engineer, Sr. Link to this post

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