Customizing the appearance of the list view item.

[Gopinath]

Hi,

I am trying to customize the appearance of the list view item and I followed the Shopping Cart List View example at the below location -

https://docs.telerik.com/devtools/winforms/knowledge-base/shopping-cart-lsitview-custom-item

The list view item is divided into two StackLayout elements and each element has further UI elements and buttons. The entire item is divided into 2 halves. I need to define the width of the each StackLayout element such that the element on the left occupies around 70% of the item width and the one on the right to have a 30% width.

Attached is an image for reference which shows the item is split into 2 halves. 

A sample code or pointers would be great.

Below is the code for the visual item as well.

 

using System;
using System.Drawing;
using System.Windows.Forms;
using Telerik.WinControls.UI;
using WFAInterplayPOS.Model.DataModel.Cart;
using WFAInterplayPOS.Service;

namespace WFAInterplayPOS.UserIterface.Restaurant
{
    public class ActiveCartVisualItem : SimpleListViewVisualItem
    {
        // Add button.
        private RadButtonElement AddButtonElement;
        // Remove button.
        private RadButtonElement RemoveButtonElement;
        // Details layout
        private StackLayoutElement DetailsStackLayout;
        // Buttons layout.
        private StackLayoutElement ButtonsStackLayout;
        // Title.
        private LightVisualElement TitleElement;
        // Viewitem layout.
        private StackLayoutElement ViewItemLayout;
        // Amount label.
        private RadLabelElement AmountLabelElement;

        /*
         * Overridden CreateChildElements()
         *
         * */
        protected override void CreateChildElements()
        {
            // base.CreateChildElements();
            base.CreateChildElements();

            // Viewitem layout.
            ViewItemLayout = new StackLayoutElement
            {
                Orientation = Orientation.Horizontal,
                ShouldHandleMouseInput = false,
                NotifyParentOnMouseInput = true,
                StretchHorizontally = true
            };

            // Build details layout.
            BuildDetailsLayout();

            // Build buttons layout.
            BuildButtonsLayout();

            // Add the visual elements.
            ViewItemLayout.Children.Add(DetailsStackLayout);
            ViewItemLayout.Children.Add(ButtonsStackLayout);
            Children.Add(ViewItemLayout);
        }

        /*
         * BuildDetailsLayout()
         *
         * */
        private void BuildDetailsLayout()
        {
            // Details layout.
            DetailsStackLayout = new StackLayoutElement
            {
                Orientation = Orientation.Vertical,
                ShouldHandleMouseInput = false,
                NotifyParentOnMouseInput = true,
                StretchHorizontally = true,
                Margin = new Padding(3, 3, 3, 3)
            };

            // Title element.
            TitleElement = new LightVisualElement
            {
                TextAlignment = ContentAlignment.MiddleLeft,
                StretchHorizontally = true,
                ShouldHandleMouseInput = false,
                NotifyParentOnMouseInput = true
            };
            DetailsStackLayout.Children.Add(TitleElement);

            // Amount label.
            AmountLabelElement = new RadLabelElement
            {
                Margin = new Padding(0, 3, 0, 3),
                TextAlignment = ContentAlignment.MiddleLeft
            };
            DetailsStackLayout.Children.Add(AmountLabelElement);
        }

        /*
         * BuildButtonsLayout()
         *
         * */
        private void BuildButtonsLayout()
        {
            // Buttons layout.
            ButtonsStackLayout = new StackLayoutElement
            {
                Orientation = Orientation.Horizontal,
                ShouldHandleMouseInput = false,
                NotifyParentOnMouseInput = true,
                StretchHorizontally = true,
                StretchVertically = true
            };

            // Remove button.
            RemoveButtonElement = new RadButtonElement
            {
                Margin = new Padding(3, 6, 0, 6),
                Text = "<html><size=13><b>-</b>",
                StretchVertically = true,
            };
            RemoveButtonElement.Click += RemoveButtonElement_Click;
            ButtonsStackLayout.Children.Add(RemoveButtonElement);

            // Add button.
            AddButtonElement = new RadButtonElement
            {
                Margin = new Padding(0, 6, 3, 6),
                Text = "<html><size=13><b>+</b>",
                StretchVertically = true,
            };
            AddButtonElement.Click += AddButtonElement_Click;
            ButtonsStackLayout.Children.Add(AddButtonElement);
        }

        /*
         * AddButtonElement_Click()
         *
         * */
        private void AddButtonElement_Click(object sender, EventArgs e)
        {

        }

        /*
         * RemoveButtonElement_Click()
         *
         * */
        private void RemoveButtonElement_Click(object sender, EventArgs e)
        {

        }

        protected override void SynchronizeProperties()
        {
            // base.SynchronizeProperties()
            base.SynchronizeProperties();

            // Other attributes.
            Text = "";
            var data = Data.DataBoundItem as LineItem;
            TitleElement.Text = "<html><size=10>" + data.quantity + " x " + data.name;
            AmountLabelElement.Text = "<html><size=10><color=red>" + data.subTotal.amount.ToString("C");
        }

        protected override Type ThemeEffectiveType
        {
            get
            {
                return typeof(SimpleListViewVisualItem);
            }
        }
    }
}

 

Thanks.

[Nadya | Tech Support Engineer]

Hello Gopinath,

The provided information is greatly appreciated. To achieve this, you should override the ArrangeOverride method in your ActiveCartVisualItem class. This method receives a parameter containing the available size for the children. Its main purpose is to arrange the children within the available area, in other words - to determine their position. You can arrange the rectangle that is associated with each child and position it in the area. You can access the DesiredSize property of every child and use it in the calculations.

Please refer to the following code snippet demonstrating how to position the DetailsStackLayout and the ButtonsStackLayout in a 70:30 proportion within the ViewItemLayout:

protected override SizeF ArrangeOverride(SizeF finalSize)
{
    SizeF s = base.ArrangeOverride(finalSize);
    this.DetailsStackLayout.Arrange(new RectangleF(0, 0, 0.7f * this.DesiredSize.Width, this.DesiredSize.Height));
    this.ButtonsStackLayout.Arrange(new RectangleF(0.7f * this.DesiredSize.Width, 0, 0.3f * this.DesiredSize.Width, this.DesiredSize.Height));
    return s;
}

The achieved result is demonstrated in the attached gif file. You can find information about layout logic in the following help article: https://docs.telerik.com/devtools/winforms/telerik-presentation-framework/layout/layout-logic#arrangeoverride

I hope this information helps. Should you have any other questions, I will be glad to help.

Regards,
Nadya
Progress Telerik