Cheap Windows Hosting Tutorial – Implementing a Silverlight Based ‘Vertical’ Tickertape

ByAlexia Pamelov

best and cheap Silverlight hosting, best and excellent Silverlight hosting, cheap and affordable Silverlight hosting, cheap Silverlight hosting, cheap windows Silverlight hosting, reliable Silverlight hosting

Cheap Windows Hosting Tutorial – Implementing a Silverlight Based ‘Vertical’ Tickertape

CheapWindowsHosting.com | Best and Cheap Silverlight hosting. In this post I will share anout implementing a silverlight Based ‘Vertical’ Tickertape.

Creating a Scrolling Region

Now to have an area of a Silverlight scroll an area, we can use the <ScrollViewer> tag. This tag is replaced around whatever mark up we want to scroll. For the news feed or this example, this will be a StackPanel, which will be orientated Vertical.

<ScrollViewer x:Name="ScrollRegion"
VerticalScrollBarVisibility="Hidden"
HorizontalScrollBarVisibility="Hidden"
BorderThickness="0"
Background="White"
Height="150"
Width="200"
Cursor="Hand"> 
<StackPanel x:Name="ItemsStack" Orientation="Vertical" > 
</StackPanel> 
</ScrollViewer> 

Best and cheap SilverLight Hosting >> Click Here

The above code creates a scrollable region containing a stack with no border, white background. At the moment, the stack panel is empty – this is because the content will be added by the code behind.

Creating Our ‘Sample’ Headings

As this is an example, just to get an idea I’m not using real headlines but the Knights of the Roundtable. This is defined as an array of strings thus:

String[] Knights = { 
"King Arthur", 
"Sir Lancelot", 
"Sir Gawain", 
"Sir Geraint", 
"Sir Gareth", 
"Sir Gaheris", 
"Sir Bedivere", 
"Sir Galahad", 
"Sir Kay", 
"Sir Bors de Ganis", 
"Sir Lamorak", 
"Sir Tristan", 
"Sir Percivale"
};

Adding Our ‘Sample’ Headings

Adding entries to our stack panel is fairly simple. We first get a reference to the stack panel, create a textblock, set the text to our next entry and add the textblock to the Children of the StackPanel.

StackPanel sp = FindName("ItemsStack") as StackPanel;
TextBlock tb = new TextBlock();
tb.Text = Knights[0];
sp.Children.Add(tb);

Setting Up the Automatic Addition of Entries

We need our application to automatically add new entries to the news feed every so often. To do this, we need something that fires after a predetermined period of time and for this, we use the DispatchTimer class.

DispatcherTimer dispatchTimer;
.
.
.
public Page()
{
InitializeComponent();
.
.
.
dispatchTimer = new DispatcherTimer();
dispatchTimer.Interval = new TimeSpan(0, 0, 30); // 30 Seconds
dispatchTimer.Tick +=new EventHandler(dispatchTimer_Tick);
dispatchTimer.Start();

What we now need is for new headings to be added to the display each time the interval fires and for this we define a handler for the Tick event.

Adding is the same as the section above, but there are a number of additional activities that must be dealt with when adding more than the first entry. First we need to know how much space is taken up by the new heading. Once we have added the text to it, Silverlight provides the height taken up by it from the ‘ActualHeight’ property.

UsedHeight += tb.ActualHeight; // increment the area that has been filled up till now

if (UsedHeight > sp.ActualHeight)
{
.

for (i = 0; i < sp.Children.Count; i++)
{
TextBlock tbVisible = sp.Children[i] as TextBlock;
ItemHeight += tbVisible.ActualHeight;
if ((ItemHeight <= UsedHeight - sp.ActualHeight) || 
((ItemHeight - tbVisible.ActualHeight)) < (UsedHeight - sp.ActualHeight))
{
UsedHeight -= tbVisible.ActualHeight; // remove from the used height, the space taken by the item
sp.Children.RemoveAt(i); // now remove the item from the stackpanel
}
}