Rank 1
TIA - Jeff.
10 Answers, 1 is accepted
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;
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.
Stefan
the Telerik team
Rank 1
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
Rank 1
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
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
Rank 2
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.
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
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 >>
Rank 2
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
}
}
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
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 >>
Rank 1
Many Thanks
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 NextEnd SubIn future you can use our Online Converter for such purposes.
I hope this will help.
Regards,
George
Telerik