Using Rotator to scroll text.

11 posts, 0 answers
  1. Jeff Bradshaw
    Jeff Bradshaw avatar
    27 posts
    Member since:
    Oct 2008

    Posted 29 May 2011 Link to this post

    Can I use the rotator to create a ticker on a window's program? (Ticker like the ticker on CNN at the bottom of the screen)

    TIA - Jeff.
  2. Stefan
    Admin
    Stefan avatar
    2891 posts

    Posted 01 Jun 2011 Link to this post

    Hi Jeff,

    Thank you for writing.

    You you can use RadRotator as a ticker to scroll text. Here are a few steps that you need to take to accomplish this behavior:
    • Dock the control to bottom and size it accordingly;
    • Add the desired text as RadLabelElements;
    • Change the LocationAnimation to (1,0) to move the items from right to left and to (-1,0) for left to right;
    • Set the desired interval between the news;
    • Start the rotator;
    Here is a sample implementation:
    public Form1()
    {
        InitializeComponent();
     
        radRotator1.LocationAnimation = new SizeF(1, 0);
        radRotator1.AnimationFrames = 30;
        radRotator1.Interval = 5000;
     
        RadLabelElement news1 = new RadLabelElement();
        news1.Text = "First news";
        RadLabelElement news2 = new RadLabelElement();
        news2.Text = "Second news";
        RadLabelElement news3 = new RadLabelElement();
        news3.Text = "Third news";
        RadLabelElement news4 = new RadLabelElement();
        news4.Text = "Forth news";
     
        radRotator1.Items.Add(news1);
        radRotator1.Items.Add(news2);
        radRotator1.Items.Add(news3);
        radRotator1.Items.Add(news4);
     
        radRotator1.Start();
         
        //if you want to hide the border, uncomment the following line
        //((BorderPrimitive)radRotator1.RotatorElement.Children[1]).Visibility = Telerik.WinControls.ElementVisibility.Collapsed;
    }

    I hope that the provided information addresses your question. Should you have any other questions, do not hesitate to contact us.
     
    Regards,
    Stefan
    the Telerik team
    Q1’11 SP1 of RadControls for WinForms is available for download; also available is the Q2'11 Roadmap for Telerik Windows Forms controls.
  3. UI for WinForms is Visual Studio 2017 Ready
  4. Mahmoud
    Mahmoud avatar
    8 posts
    Member since:
    Mar 2011

    Posted 30 Apr 2013 Link to this post

    Hi Stefan,

    Your example is really great, thank you very much.

    I have 2 issues that I would like to ask:

    1- How do we set the text alignment to be RTL, I tried setting all properties to RTL, none of them achieved that.

    2- Can we let text scroll just like we see scrolling bar on TV?

    Thanks for your help once again.

    -Mahmoud
  5. Mahmoud
    Mahmoud avatar
    8 posts
    Member since:
    Mar 2011

    Posted 30 Apr 2013 Link to this post

    Hi Stefan,

    Your example is really great, thank you very much.

    I have 2 issues that I would like to ask:

    1- How do we set the text alignment to be RTL, I tried setting all properties to RTL, none of them achieved that.

    2- Can we let text scroll just like we see scrolling bar on TV?

    Thanks for your help once again.

    -Mahmoud
  6. Stefan
    Admin
    Stefan avatar
    2891 posts

    Posted 03 May 2013 Link to this post

    Hi Mahmoud,

    Thank you for writing.

    To make the right align their text to the right side, you can use the following property:
    news1.TextAlignment = ContentAlignment.MiddleRight;

    However, I do not think that you would be able to overlap the items so that they can rotate one after the other. This would take completely different approach. Attached you can find a sample control that does the job. I hope that you find it useful.
     

    Greetings,
    Stefan
    the Telerik team
    WinForms Q1 2013 boasts PivotGrid, PDF Viewer, Chart enhancements and more. Check out all of the latest highlights.
  7. pbt
    pbt avatar
    4 posts
    Member since:
    Oct 2003

    Posted 28 Nov 2013 Link to this post

    Hi Stefan,

    This is a great example. However there is an issue which I cannot understand.

    I used RadLabelElements with HTML formatted text (within <html></html>). My content was a couple of long phrases and I noticed that the content of a RadLabelElement partially overlaps the content of the previous RadLabelElement.

    Is this a shortcoming of the RadLabelElement when used with html-formatted text ?

    I tried it with multiple short phrases and it works. However, once I insert a long phrase, problems start.

    Thank you for your time.

  8. Stefan
    Admin
    Stefan avatar
    2891 posts

    Posted 02 Dec 2013 Link to this post

    Hi Panayotis,

    Would you please send me a sample of the label initialization and the html string you use, so I can reproduce the undesired behavior and investigate the reasons causing it.

    Thank you in advance for your time and cooperation.

    Regards,
    Stefan
    Telerik
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WINFORMS.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  9. pbt
    pbt avatar
    4 posts
    Member since:
    Oct 2003

    Posted 30 Dec 2013 Link to this post

    Hi Stefan,

    If you just use the modified code below for file MyNewsReader.cs you will be able to generate to long messages (messages that will take more width that the available screen width) to see the issue. For your benefit, I have included two sample messages and the modified code of MyNewsReader.cs.

    Thank you!!

    ###   Form Load event   ###

    string sMessageContent = String.Empty;

    RadLabelElement radlbl = null;

    // add first message

    sMessageContent = "<span style=\"font-size: 28pt; font-family: Tahoma; color: #ab00cd;\">HELLO, THIS IS AN EXTREMELY LONG DUMMY MESSAGE AS AN ATTEMPT TO SHOW THE CONTENT OVERLAY ISSUE BETWEEN CONSECUTIVE ELEMENTS WITHIN A STACKLAYOUTPANEL.</span>";

    radlbl = new RadLabelElement() { TextWrap = false, Text = String.Format("<html>{0}</html>", sMessageContent) };

    myNewsReader1.Items.Add(radlbl);


    // add second message

    sMessageContent = "<span style=\"font-size: 28pt; font-family: Tahoma; color: #ab00cd;\">THIS IS ANOTHER VERY LONG DUMMY MESSAGE TO DEMONSTRATE THE ISSUE I AM HAVING WHEN TRYING TO SHOW HTML CONTENT AS A MARQUEE FROM RIGHT TO LEFT!</span>";

    radlbl = new RadLabelElement() { TextWrap = false, Text = String.Format("<html>{0}</html>", sMessageContent) };

    myNewsReader1.Items.Add(radlbl);


    ###   MyNewsReader.cs   ###

    using System;

    using System.Collections.Generic;

    using System.Linq;

    using System.Text;

    using Telerik.WinControls;

    using Telerik.WinControls.UI;

    using System.Windows.Forms;

    using System.Drawing;

    using System.ComponentModel;

    using Telerik.WinControls.Layouts;

    namespace _569811


    {


    [ToolboxItem(true)]

    public class MyNewsReader : RadControl



    {


    MyNewsReaderElement element;

    protected override void CreateChildItems(RadElement parent)


    {


    base.CreateChildItems(parent);

    element = new MyNewsReaderElement();

    this.RootElement.Children.Add(element);


    }


    protected override System.Drawing.Size DefaultSize


    {


    get



    {


    return new Size(300, 60);


    }

    }


    public MyNewsReaderElement Element


    {


    get



    {


    return element;


    }

    }


    [DesignerSerializationVisibility(DesignerSerializationVisibility.Content)]

    [Browsable(true)]

    public RadItemOwnerCollection Items


    {


    get



    {


    return this.element.Items;


    }

    }

    }


    public class MyNewsReaderElement : StackLayoutElement



    {


    RadItemOwnerCollection items;

    Timer timer;

    protected override void CreateChildElements()


    {


    base.CreateChildElements();

    this.DrawBorder = true;

    this.Orientation = Orientation.Horizontal;

    this.StretchHorizontally = true;

    this.StretchVertically = true;

    items = new RadItemOwnerCollection();

    items.ItemTypes = new Type[]


    {


    typeof(LightVisualElement),

    typeof(RadButtonElement),

    typeof(RadLabelElement),

    typeof(HtmlElement)


    };


    items.Owner = this;

    timer = new Timer();


    timer.Interval = 20;


    timer.Tick += new EventHandler(timer_Tick);


    timer.Start();

    }


    void timer_Tick(object sender, EventArgs e)


    {


    this.ItemsOffset -= 3;

    this.InvalidateMeasure();


    }


    protected override void ArrangeItemsHorizontaly(RectangleF clientRect, SizeF finalSize, float stretchableWidth, float spacing)


    {


    float totalWidth = 0;

    foreach (RadElement item in this.Children)


    {

    totalWidth += item.DesiredSize.Width;

    }


    if (ItemsOffset + totalWidth < 0)


    {


    ItemsOffset = (int)clientRect.Right - (int)totalWidth;


    }


    bool[] used = new bool[this.Children.Count];

    float x = clientRect.X + ItemsOffset;

    float y = clientRect.Y;


     


    for (int i = 0; i < this.Children.Count; i++)


    {


    RadElement element = this.Children[i];

    if (x + element.DesiredSize.Width > clientRect.Left)


    {


    this.ArrangeElement(element, clientRect, new RectangleF(x, y, element.DesiredSize.Width, clientRect.Height), finalSize);

    used[i] = true;


    }

    x += element.DesiredSize.Width + spacing;

    }


    if (totalWidth < clientRect.Width)


    {

    x += clientRect.Width - totalWidth;

    }


    for (int i = 0; i < this.Children.Count; i++)


    {


    RadElement element = this.Children[i];

    if (x + element.DesiredSize.Width < clientRect.Right && used[i] == false)


    {


    this.ArrangeElement(element, clientRect, new RectangleF(x, y, element.DesiredSize.Width, clientRect.Height), finalSize);


    }


    else



    {


    break;


    }

    x += element.DesiredSize.Width + spacing;

    }

    }


    #region Properties and Methods

    public RadItemOwnerCollection Items


    {


    get



    {


    return this.items;


    }

    }


    public int ItemsOffset { get; set; }

    public void BeginRotation()


    {

    timer.Start();

    }


    public void EndRotation()


    {

    timer.Stop();

    }


    #endregion



    }

    }


  10. George
    Admin
    George avatar
    500 posts

    Posted 02 Jan 2014 Link to this post

    Hi Panayotis,

    Thank you for replying.

    This misplacement of the text is due to the fact that you are formatting the text using html tags. This does not allow the RadLabelElement to measure its size accordingly. In this case you will need to manually measure the size of your element, however even this will not be 100% correct since there is no 100% accurate method in WinForms to measure the size of a text. First I recommend you to set the Font with code:
    sMessageContent = "<span style=\"color: #ab00cd;\">HELLO, THIS IS AN EXTREMELY LONG DUMMY MESSAGE AS AN ATTEMPT TO SHOW THE CONTENT OVERLAY ISSUE BETWEEN CONSECUTIVE ELEMENTS WITHIN A STACKLAYOUTPANEL.</span>";
    radlbl = new RadLabelElement() { TextWrap = false, Text = String.Format("<html>{0}</html>", sMessageContent) };
    radlbl.Font = new Font("Tahoma", 28);
    myNewsReader1.Items.Add(radlbl);

    Then you can replace the ArrangeItemsHorizontally method in the MyNewsReaderElement class to the following:
    protected override void ArrangeItemsHorizontaly(RectangleF clientRect, SizeF finalSize, float stretchableWidth, float spacing)
    {
        float totalWidth = 0;
        foreach (RadItem item in this.Children)
        {
            SizeF size = TextRenderer.MeasureText(item.Text, item.Font);
            typeof(RadElement).GetField("_desiredSize", System.Reflection.BindingFlags.NonPublic | System.Reflection.BindingFlags.Instance).SetValue(item, size);
     
            totalWidth += item.DesiredSize.Width;
        }
     
        if (ItemsOffset + totalWidth < 0)
        {
            ItemsOffset = (int)clientRect.Right - (int)totalWidth;
        }
     
        bool[] used = new bool[this.Children.Count];
        float x = clientRect.X + ItemsOffset;
        float y = clientRect.Y;
        for (int i = 0; i < this.Children.Count; i++)
        {
            RadElement element = this.Children[i];
            if (x + element.DesiredSize.Width > clientRect.Left)
            {
                this.ArrangeElement(element, clientRect, new RectangleF(x, y, element.DesiredSize.Width, clientRect.Height), finalSize);
                used[i] = true;
            }
            x += element.DesiredSize.Width + spacing;
        }
     
        if (totalWidth < clientRect.Width)
        {
            x += clientRect.Width - totalWidth;
        }
     
        for (int i = 0; i < this.Children.Count; i++)
        {
            RadElement element = this.Children[i];
            if (x + element.DesiredSize.Width < clientRect.Right && used[i] == false)
            {
                this.ArrangeElement(element, clientRect, new RectangleF(x, y, element.DesiredSize.Width, clientRect.Height), finalSize);
            }
            else
            {
                break;
            }
     
            x += element.DesiredSize.Width + spacing;
        }
    }

    If you need to further tune the example you can edit the size which is measured by the TextRenderer in the first loop. 

    I hope this helps. Let me know if I can assist you further.

    Regards,
    George
    Telerik
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WINFORMS.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  11. Eko
    Eko avatar
    3 posts
    Member since:
    Jan 2012

    Posted 23 Apr 2014 Link to this post

    Can you rewrite your demo on vb.net, it try to convert but not successfully

    Many Thanks
  12. George
    Admin
    George avatar
    500 posts

    Posted 25 Apr 2014 Link to this post

    Hello Eko,

    Thank you for replying.

    Below you can find the converted code:
    Protected Overrides Sub ArrangeItemsHorizontaly(clientRect As RectangleF, finalSize As SizeF, stretchableWidth As Single, spacing As Single)
        Dim totalWidth As Single = 0
        For Each item As RadItem In Me.Children
            Dim size As SizeF = TextRenderer.MeasureText(item.Text, item.Font)
            GetType(RadElement).GetField("_desiredSize", System.Reflection.BindingFlags.NonPublic Or System.Reflection.BindingFlags.Instance).SetValue(item, size)
     
            totalWidth += item.DesiredSize.Width
        Next
     
        If ItemsOffset + totalWidth < 0 Then
            ItemsOffset = CInt(clientRect.Right) - CInt(totalWidth)
        End If
     
        Dim used As Boolean() = New Boolean(Me.Children.Count - 1) {}
        Dim x As Single = clientRect.X + ItemsOffset
        Dim y As Single = clientRect.Y
        For i As Integer = 0 To Me.Children.Count - 1
            Dim element As RadElement = Me.Children(i)
            If x + element.DesiredSize.Width > clientRect.Left Then
                Me.ArrangeElement(element, clientRect, New RectangleF(x, y, element.DesiredSize.Width, clientRect.Height), finalSize)
                used(i) = True
            End If
            x += element.DesiredSize.Width + spacing
        Next
     
        If totalWidth < clientRect.Width Then
            x += clientRect.Width - totalWidth
        End If
     
        For i As Integer = 0 To Me.Children.Count - 1
            Dim element As RadElement = Me.Children(i)
            If x + element.DesiredSize.Width < clientRect.Right AndAlso used(i) = False Then
                Me.ArrangeElement(element, clientRect, New RectangleF(x, y, element.DesiredSize.Width, clientRect.Height), finalSize)
            Else
                Exit For
            End If
     
            x += element.DesiredSize.Width + spacing
        Next
    End Sub

    In future you can use our Online Converter for such purposes.

    I hope this will help.

    Regards,
    George
    Telerik
     
    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
     
Back to Top
UI for WinForms is Visual Studio 2017 Ready