Custom AppointmentElement diplay problem

[Stephan]

Hello,

I have implemented a custom AppointmentElement and I habe a small display problem with it.

Here is a screenshot:

When the area of the appointment gets to small,  the arrow on the right is no longer drawn, but i want the element to always draw it and cut the text first.

Here is my implementation:

internal class CustomAppointmentElement : AppointmentElement
{
    private AppointmentsViewModel _appointmentsViewModel;
    private DockLayoutPanel _outerContainer;
    private StackLayoutElement _container;
    private LightVisualButtonElement _expandCollapseButton;
    private LightVisualElement _icon1;
    private LightVisualElement _icon2;
    private LightVisualElement _icon3;
    private LightVisualElement _timeText;
    private LightVisualElement _summaryText;
    private LightVisualElement _continueArrow;

    protected override void CreateChildElements()
    {
        base.CreateChildElements();
        this.Padding = new Padding(1, 0, 1, 0);

        _outerContainer = new DockLayoutPanel();
        _outerContainer.StretchHorizontally = true;
        _outerContainer.StretchVertically = true;
        _outerContainer.ShouldHandleMouseInput = false;
        _outerContainer.NotifyParentOnMouseInput = true;
        _outerContainer.LastChildFill = true;

        _continueArrow = new LightVisualElement();
        _continueArrow.Image = ArrowRightImage;
        _continueArrow.StretchHorizontally = false;

        _container = new StackLayoutElement();
        _container.Orientation = Orientation.Horizontal;
        _container.Alignment = ContentAlignment.MiddleLeft;
        _container.StretchHorizontally = false;
        _container.StretchVertically = true;
        _container.ShouldHandleMouseInput = false;
        _container.NotifyParentOnMouseInput = true;

        _expandCollapseButton = new LightVisualButtonElement();
        _expandCollapseButton.ShouldHandleMouseInput = true;
        _expandCollapseButton.Margin = new Padding(1, 1, 0, 1);
        _expandCollapseButton.NotifyParentOnMouseInput = false;
        _expandCollapseButton.Alignment = ContentAlignment.MiddleLeft;
        _expandCollapseButton.StretchHorizontally = false;
        _expandCollapseButton.StretchVertically = false;
        _expandCollapseButton.Click += _expandCollapseButton_Click;
        _expandCollapseButton.Image = GetButtonImage(false);

        _icon1 = new LightVisualElement();
        _icon1.ShouldHandleMouseInput = false;
        _icon1.Margin = new Padding(1, 1, 0, 1);
        _icon1.NotifyParentOnMouseInput = true;
        _icon1.Alignment = ContentAlignment.MiddleLeft;
        _icon1.StretchHorizontally = false;
        _icon1.StretchVertically = false;

        _icon2 = new LightVisualElement();
        _icon2.ShouldHandleMouseInput = false;
        _icon2.NotifyParentOnMouseInput = true;
        _icon2.Alignment = ContentAlignment.MiddleLeft;
        _icon2.StretchHorizontally = false;
        _icon2.StretchVertically = false;
        _icon2.Margin = new Padding(2, 1, 0, 1);

        _icon3 = new LightVisualElement();
        _icon3.ShouldHandleMouseInput = false;
        _icon3.NotifyParentOnMouseInput = true;
        _icon3.Alignment = ContentAlignment.MiddleLeft;
        _icon3.StretchHorizontally = false;
        _icon3.StretchVertically = false;
        _icon3.Margin = new Padding(2, 1, 0, 1);

        _timeText = new LightVisualElement();
        _timeText.Alignment = ContentAlignment.MiddleLeft;
        _timeText.ShouldHandleMouseInput = false;
        _timeText.NotifyParentOnMouseInput = true;
        _timeText.StretchHorizontally = false;
        _timeText.StretchVertically = false;
        _timeText.Margin = new Padding(2, 1, 2, 1);
        _timeText.ClipText = true;
        _timeText.TextWrap = false;
        _timeText.AutoEllipsis = true;

        _summaryText = new LightVisualElement();
        _summaryText.Alignment = ContentAlignment.MiddleLeft;
        _summaryText.ShouldHandleMouseInput = false;
        _summaryText.NotifyParentOnMouseInput = true;
        _summaryText.StretchHorizontally = false;
        _summaryText.StretchVertically = false;
        _summaryText.Margin = new Padding(2, 1, 2, 1);
        _summaryText.ClipText = true;
        _summaryText.TextWrap = false;
        _summaryText.AutoEllipsis = true;
        _summaryText.Font = new Font(_summaryText.Font, FontStyle.Bold);

        _container.Children.Add(_expandCollapseButton);
        _container.Children.Add(_icon1);
        _container.Children.Add(_icon2);
        _container.Children.Add(_icon3);
        _container.Children.Add(_timeText);
        _container.Children.Add(_summaryText);

        DockLayoutPanel.SetDock(_container, Telerik.WinControls.Layouts.Dock.Left);
        _outerContainer.Children.Add(_continueArrow);
        DockLayoutPanel.SetDock(_continueArrow, Telerik.WinControls.Layouts.Dock.Right);
        _outerContainer.Children.Add(_container);

        Children.Add(_outerContainer);
    }
}

Hope you could help me solve it.

 

Regards,

Stephan

[Dinko | Tech Support Engineer]

Hi Stephan,

Thank you for the provided code snippet. 

I was able to observe the described behavior. When the TextWrap property is not set, some logic is triggered in the TextPrimitive which sets its width. That is why it is not working. A possible solution here is to set the AutoSize property to false and set the Size property of the TextPrimitive.

 _summaryText.Size = rectSummary.Size.ToSize();

You can check the attached project which contains the suggested approach.

Regards,
Dinko | Tech Support Engineer
Progress Telerik

[Dinko | Tech Support Engineer]

Hello Stephan,

Thank you for the provided details and Merry Christmas!

I have checked your scenario and if I have correctly understood it, reducing the size of the appointment will hide the arrow button on the right. To better test your case, I have created a sample project. When resizing the form, the right arrow button is always visible, even when the text is squished. The GIF file attached to this reply will show the steps on my side. I am also attaching my test project. Can you check it out and let me know what I am missing here?

Regards,
Dinko | Tech Support Engineer
Progress Telerik

[Dinko | Tech Support Engineer]

Hi Stephan,

Thank you for the updated project.

I see what you are trying to achieve here. This behavior is expected when adding custom elements and disabling the default text. You will need to create custom logic that will position the static elements and set the size of the text elements depending on their parent size. You could check the How to arrange elements in a custom RadTreeView node KB article which demonstrates how you can change the size of a text element in a completely custom panel which is very similar to your approach. You can use the approach in the article as a base and modify it to fit your scenario.

Regards,
Dinko | Tech Support Engineer
Progress Telerik

[Stephan]

Hello Dinko,

thanks for your reply and happy new year!

Seems that I forget some important lines of code in my first post. I checked your solution and updated it.

        public override void DrawEventText(IGraphics graphics)
        {
            //disable default text painting
            //base.DrawEventText(graphics);
        }

        public override void Synchronize()
        {
            base.Synchronize();

            if (Appointment == null)
                return;

            _summaryText.Text = Appointment.Summary;
            _timeText.Text = Appointment.Start.Date == Appointment.End.Date 
                ? $@"{Appointment.Start:t} - {Appointment.End:t}" 
                : $@"{Appointment.Start:g} - {Appointment.End:g}"; 
        }

Now the appointment is painted like in my first post. Hope you are now able to reproduce my issue.

Regards,

Stephan

[Stephan]

Hello Dinko,

I adapted the example for my purpose, but now I have a new problem. The TextPrimitive-Element does not respect the calculated final rectangle and so there is some clipping between 2 elements. Setting TextWrap to true is not an option, the text should not be drawn multiline and setting AutoEllipsis to true does also not work, only if i use it together with TextWrap:

The calculated rectangles seem OK to me and do not intersect, but the final drawn text from "_summaryText" collides with the image from "_continueArrow".

    internal class CustomAppointmentElement : AppointmentElement
    {
        private AppointmentsViewModel _appointmentsViewModel;
        private LightVisualButtonElement _expandCollapseButton;
        private ImagePrimitive _icon1;
        private ImagePrimitive _icon2;
        private ImagePrimitive _icon3;
        private TextPrimitive _timeText;
        private TextPrimitive _summaryText;
        private ImagePrimitive _continueArrow;
        
        protected override Type ThemeEffectiveType
        {
            get
            {
                return typeof(AppointmentElement);
            }
        }

        

        protected override void CreateChildElements()
        {
            base.CreateChildElements();
            this.Padding = new Padding(1, 0, 1, 0);
            this.StretchHorizontally = true;

            _expandCollapseButton = new LightVisualButtonElement();
            _expandCollapseButton.ShouldHandleMouseInput = true;
            _expandCollapseButton.Margin = new Padding(1, 1, 0, 1);
            _expandCollapseButton.NotifyParentOnMouseInput = false;
            _expandCollapseButton.Alignment = ContentAlignment.MiddleLeft;
            _expandCollapseButton.Click += _expandCollapseButton_Click;
            _expandCollapseButton.Image = GetButtonImage(false);
            Children.Add(_expandCollapseButton);

            _icon1 = new ImagePrimitive();
            _icon1.ShouldHandleMouseInput = false;
            _icon1.Margin = new Padding(1, 1, 0, 1);
            _icon1.NotifyParentOnMouseInput = true;
            _icon1.Alignment = ContentAlignment.MiddleLeft;
            Children.Add(_icon1);

            _icon2 = new ImagePrimitive();
            _icon2.ShouldHandleMouseInput = false;
            _icon2.NotifyParentOnMouseInput = true;
            _icon2.Alignment = ContentAlignment.MiddleLeft;
            _icon2.Margin = new Padding(2, 1, 0, 1);
            Children.Add(_icon2);

            _icon3 = new ImagePrimitive();
            _icon3.ShouldHandleMouseInput = false;
            _icon3.NotifyParentOnMouseInput = true;
            _icon3.Alignment = ContentAlignment.MiddleLeft;
            _icon3.Margin = new Padding(2, 1, 0, 1);
            Children.Add(_icon3);

            _timeText = new TextPrimitive();
            _timeText.Alignment = ContentAlignment.MiddleLeft;
            _timeText.ShouldHandleMouseInput = false;
            _timeText.NotifyParentOnMouseInput = true;
            _timeText.Margin = new Padding(2, 1, 2, 1);
            _timeText.TextWrap = false;
            _timeText.AutoEllipsis = false;
            Children.Add(_timeText);

            _summaryText = new TextPrimitive();
            _summaryText.Alignment = ContentAlignment.MiddleLeft;
            _summaryText.ShouldHandleMouseInput = false;
            _summaryText.NotifyParentOnMouseInput = true;
            _summaryText.Margin = new Padding(2, 1, 2, 1);
            _summaryText.TextWrap = false;
            _summaryText.AutoEllipsis = false;
            _summaryText.Font = new Font(_summaryText.Font, FontStyle.Bold);
            Children.Add(_summaryText);


            _continueArrow = new ImagePrimitive();
            _continueArrow.Image = ArrowRightImage;
            _continueArrow.ShouldHandleMouseInput = false;
            _continueArrow.NotifyParentOnMouseInput = true;
            _continueArrow.Alignment = ContentAlignment.MiddleLeft;
            _continueArrow.Margin = new Padding(2, 1, 0, 1);
            Children.Add(_continueArrow);
        }


        public override void DrawEventText(IGraphics graphics)
        {
            //disable default text painting
            //base.DrawEventText(graphics);
        }


        public override void Synchronize()
        {
            base.Synchronize();

            if (Appointment == null)
                return;

            _summaryText.Text = Appointment.Summary;
            _timeText.Text = Appointment.Start.Date == Appointment.End.Date 
                ? $@"{Appointment.Start:t} - {Appointment.End:t}" 
                : $@"{Appointment.Start:g} - {Appointment.End:g}"; 
        }


        protected override SizeF ArrangeOverride(SizeF finalSize)
        {
            var availableSize = base.ArrangeOverride(finalSize);
            float width = this.Padding.Horizontal;
            var elements = new VisualElement[] { _continueArrow, _icon1, _icon2, _icon3, _expandCollapseButton };

            foreach (var element in elements)
            {
                if (element.Visibility != ElementVisibility.Collapsed)
                    width += element.DesiredSize.Width + element.Margin.Horizontal;
            }

            if (width < availableSize.Width)
            {
                var topLeftCorner = new PointF(this.Padding.Left, 0);

                if (_expandCollapseButton.Visibility != ElementVisibility.Collapsed)
                {
                    var rectEcb = new RectangleF(topLeftCorner.X + _expandCollapseButton.Margin.Left, 
                        topLeftCorner.Y + _expandCollapseButton.Margin.Top, 
                        _expandCollapseButton.DesiredSize.Width + _expandCollapseButton.Margin.Right, 
                        availableSize.Height - _expandCollapseButton.Margin.Vertical);

                    _expandCollapseButton.Arrange(rectEcb);
                    topLeftCorner = new PointF(rectEcb.Right, 0);
                }

                if (_icon1.Visibility != ElementVisibility.Collapsed)
                {
                    var rectIcon1 = new RectangleF(topLeftCorner.X + _icon1.Margin.Left, 
                        topLeftCorner.Y + _icon1.Margin.Top, 
                        _icon1.DesiredSize.Width + _icon1.Margin.Right, 
                        availableSize.Height - _icon1.Margin.Vertical);

                    _icon1.Arrange(rectIcon1);
                    topLeftCorner = new PointF(rectIcon1.Right, 0);
                }

                if (_icon2.Visibility != ElementVisibility.Collapsed)
                {
                    var rectIcon2 = new RectangleF(topLeftCorner.X + _icon2.Margin.Left, 
                        topLeftCorner.Y + _icon2.Margin.Top, 
                        _icon2.DesiredSize.Width + _icon2.Margin.Right, 
                        availableSize.Height - _icon2.Margin.Vertical);

                    _icon2.Arrange(rectIcon2);
                    topLeftCorner = new PointF(rectIcon2.Right, 0);
                }

                if (_icon3.Visibility != ElementVisibility.Collapsed)
                {
                    var rectIcon3 = new RectangleF(topLeftCorner.X + _icon3.Margin.Left, 
                        topLeftCorner.Y + _icon3.Margin.Top, 
                        _icon3.DesiredSize.Width + _icon3.Margin.Right, 
                        availableSize.Height - _icon3.Margin.Vertical);
                    _icon3.Arrange(rectIcon3);
                    topLeftCorner = new PointF(rectIcon3.Right, 0);
                }

                var textWidth = availableSize.Width - width;
                var timeWidth = Math.Min(textWidth, _timeText.DesiredSize.Width) + _timeText.Margin.Horizontal;

                var rectTime = new RectangleF(topLeftCorner.X + _timeText.Margin.Left, 
                    topLeftCorner.Y + _timeText.Margin.Top, 
                    timeWidth - _timeText.Margin.Horizontal, 
                    availableSize.Height - _timeText.Margin.Vertical);

                _timeText.Arrange(rectTime);
                topLeftCorner = new PointF(topLeftCorner.X + timeWidth, 0);

                var summaryWidth = Math.Max(textWidth - timeWidth, 0);

                var rectSummary = new RectangleF(topLeftCorner.X + _summaryText.Margin.Left, 
                    topLeftCorner.Y + _summaryText.Margin.Top, 
                    summaryWidth - _summaryText.Margin.Horizontal, 
                    availableSize.Height - _timeText.Margin.Vertical);

                _summaryText.Arrange(rectSummary);
                topLeftCorner = new PointF(topLeftCorner.X + summaryWidth, 0);

                if (_continueArrow.Visibility != ElementVisibility.Collapsed)
                {
                    var rectArrow = new RectangleF(topLeftCorner.X + _continueArrow.Margin.Left, 
                        topLeftCorner.Y + _continueArrow.Margin.Top, 
                        _continueArrow.DesiredSize.Width + _continueArrow.Margin.Right, 
                        availableSize.Height - _continueArrow.Margin.Vertical);
                    _continueArrow.Arrange(rectArrow);
                }
            }

            return availableSize;
        }
    }

 

Regards,

Stephan

[Stephan]

Hello Dinko,

thanks for your help. This works perfectly. I also set the autosize property of the first TextPrimitive to false and and calculated its desired with via

var desiredTimeTextWidth = (float) Math.Ceiling(RadGdiGraphics.MeasurementGraphics.MeasureString(_timeText.Text, _timeText.Font).Width);

Now both TextPrimitives are shown right.

Here are the final methods shared for everyone

protected override void CreateChildElements()
{
    base.CreateChildElements();
    this.Padding = new Padding(1, 0, 1, 0);
    this.StretchHorizontally = true;

    _expandCollapseButton = new LightVisualButtonElement();
    _expandCollapseButton.ShouldHandleMouseInput = true;
    _expandCollapseButton.Margin = new Padding(1, 1, 0, 1);
    _expandCollapseButton.NotifyParentOnMouseInput = false;
    _expandCollapseButton.Alignment = ContentAlignment.MiddleLeft;
    _expandCollapseButton.Click += _expandCollapseButton_Click;
    _expandCollapseButton.Image = GetButtonImage(false);
    Children.Add(_expandCollapseButton);

    _icon1 = new ImagePrimitive();
    _icon1.ShouldHandleMouseInput = false;
    _icon1.Margin = new Padding(1, 1, 0, 1);
    _icon1.NotifyParentOnMouseInput = true;
    _icon1.Alignment = ContentAlignment.MiddleLeft;
    Children.Add(_icon1);

    _icon2 = new ImagePrimitive();
    _icon2.ShouldHandleMouseInput = false;
    _icon2.NotifyParentOnMouseInput = true;
    _icon2.Alignment = ContentAlignment.MiddleLeft;
    _icon2.Margin = new Padding(2, 1, 0, 1);
    Children.Add(_icon2);

    _icon3 = new ImagePrimitive();
    _icon3.ShouldHandleMouseInput = false;
    _icon3.NotifyParentOnMouseInput = true;
    _icon3.Alignment = ContentAlignment.MiddleLeft;
    _icon3.Margin = new Padding(2, 1, 0, 1);
    Children.Add(_icon3);

    _timeText = new TextPrimitive();
    _timeText.AutoSize = false;
    _timeText.StretchHorizontally = true;
    _timeText.Alignment = ContentAlignment.MiddleLeft;
    _timeText.ShouldHandleMouseInput = false;
    _timeText.NotifyParentOnMouseInput = true;
    _timeText.Margin = new Padding(2, 1, 2, 1);
    _timeText.TextWrap = false;
    _timeText.AutoEllipsis = true;
    Children.Add(_timeText);

    _summaryText = new TextPrimitive();
    _summaryText.AutoSize = false;
    _summaryText.StretchHorizontally = true;
    _summaryText.Alignment = ContentAlignment.MiddleLeft;
    _summaryText.ShouldHandleMouseInput = false;
    _summaryText.NotifyParentOnMouseInput = true;
    _summaryText.Margin = new Padding(2, 1, 2, 1);
    _summaryText.TextWrap = false;
    _summaryText.AutoEllipsis = true;
    _summaryText.Font = new Font(_summaryText.Font, FontStyle.Bold);
    Children.Add(_summaryText);

    _continueArrow = new ImagePrimitive();
    _continueArrow.Image = ArrowRightImage;
    _continueArrow.ShouldHandleMouseInput = false;
    _continueArrow.NotifyParentOnMouseInput = true;
    _continueArrow.Alignment = ContentAlignment.MiddleLeft;
    _continueArrow.Margin = new Padding(2, 1, 0, 1);
    Children.Add(_continueArrow);
}

protected override SizeF ArrangeOverride(SizeF finalSize)
{
    var availableSize = base.ArrangeOverride(finalSize);
    float width = this.Padding.Horizontal;
    var elements = new VisualElement[] { _continueArrow, _icon1, _icon2, _icon3, _expandCollapseButton };

    foreach (var element in elements)
    {
        if (element.Visibility != ElementVisibility.Collapsed)
            width += element.DesiredSize.Width + element.Margin.Horizontal;
    }

    if (width < availableSize.Width)
    {
        var topLeftCorner = new PointF(this.Padding.Left, 0);

        if (_expandCollapseButton.Visibility != ElementVisibility.Collapsed)
        {
            var rectEcb = new RectangleF(topLeftCorner.X + _expandCollapseButton.Margin.Left, 
                topLeftCorner.Y + _expandCollapseButton.Margin.Top, 
                _expandCollapseButton.DesiredSize.Width + _expandCollapseButton.Margin.Right, 
                availableSize.Height - _expandCollapseButton.Margin.Vertical);

            _expandCollapseButton.Arrange(rectEcb);
            topLeftCorner = new PointF(rectEcb.Right, 0);
        }

        if (_icon1.Visibility != ElementVisibility.Collapsed)
        {
            var rectIcon1 = new RectangleF(topLeftCorner.X + _icon1.Margin.Left, 
                topLeftCorner.Y + _icon1.Margin.Top, 
                _icon1.DesiredSize.Width + _icon1.Margin.Right, 
                availableSize.Height - _icon1.Margin.Vertical);

            _icon1.Arrange(rectIcon1);
            topLeftCorner = new PointF(rectIcon1.Right, 0);
        }

        if (_icon2.Visibility != ElementVisibility.Collapsed)
        {
            var rectIcon2 = new RectangleF(topLeftCorner.X + _icon2.Margin.Left, 
                topLeftCorner.Y + _icon2.Margin.Top, 
                _icon2.DesiredSize.Width + _icon2.Margin.Right, 
                availableSize.Height - _icon2.Margin.Vertical);

            _icon2.Arrange(rectIcon2);
            topLeftCorner = new PointF(rectIcon2.Right, 0);
        }

        if (_icon3.Visibility != ElementVisibility.Collapsed)
        {
            var rectIcon3 = new RectangleF(topLeftCorner.X + _icon3.Margin.Left, 
                topLeftCorner.Y + _icon3.Margin.Top, 
                _icon3.DesiredSize.Width + _icon3.Margin.Right, 
                availableSize.Height - _icon3.Margin.Vertical);
            _icon3.Arrange(rectIcon3);
            topLeftCorner = new PointF(rectIcon3.Right, 0);
        }

        var desiredTimeTextWidth = (float) Math.Ceiling(RadGdiGraphics.MeasurementGraphics.MeasureString(_timeText.Text, _timeText.Font).Width);
        var textWidth = availableSize.Width - width;
        var timeWidth = Math.Min(textWidth, desiredTimeTextWidth) + _timeText.Margin.Horizontal;

        var rectTime = new RectangleF(topLeftCorner.X + _timeText.Margin.Left, 
            topLeftCorner.Y + _timeText.Margin.Top, 
            timeWidth - _timeText.Margin.Horizontal, 
            availableSize.Height - _timeText.Margin.Vertical);

        _timeText.Arrange(rectTime);
        _timeText.Size = rectTime.Size.ToSize();
        topLeftCorner = new PointF(topLeftCorner.X + timeWidth, 0);

        var summaryWidth = Math.Max(textWidth - timeWidth, 0);

        var rectSummary = new RectangleF(topLeftCorner.X + _summaryText.Margin.Left, 
            topLeftCorner.Y + _summaryText.Margin.Top, 
            summaryWidth - _summaryText.Margin.Horizontal, 
            availableSize.Height - _summaryText.Margin.Vertical);

        _summaryText.Arrange(rectSummary);
        _summaryText.Size = rectSummary.Size.ToSize();
        topLeftCorner = new PointF(topLeftCorner.X + summaryWidth, 0);

        if (_continueArrow.Visibility != ElementVisibility.Collapsed)
        {
            var rectArrow = new RectangleF(topLeftCorner.X + _continueArrow.Margin.Left, 
                topLeftCorner.Y + _continueArrow.Margin.Top, 
                _continueArrow.DesiredSize.Width + _continueArrow.Margin.Right, 
                availableSize.Height - _continueArrow.Margin.Vertical);
            _continueArrow.Arrange(rectArrow);
        }
    }

    return availableSize;
}

Regards,

Stephan