Click here to Skip to main content
Click here to Skip to main content
Technical Blog

Implementing a Silverlight based ‘Vertical’ tickertape

, 14 May 2009 CPOL
Rate this:
Please Sign up or sign in to vote.
IntroductionI have a need of a ‘mash-up’ of business headlines for one of my current projects. For this I want an area where headlines enter at the bottom and the other headlines scroll up, vanishing at the top. If there are no new headlines, then the first headline appears at the bottom.Now gene

Introduction

I have a need of a ‘mash-up’ of business headlines for one of my current projects. For this I want an area where headlines enter at the bottom and the other headlines scroll up, vanishing at the top. If there are no new headlines, then the first headline appears at the bottom.

Now generally when I work I like to build from the base up, build a part of the solution and then build on that. So for this reason the article does not deal with collecting the news – I’ll leave that one for another article. This will deal with just the scrolling region.

Creating a Scrolling Region

Now to have a 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>

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

Next we check to see if in adding the entry the display area needs to scroll and to do this we compare our ‘UsedHeight’ with the actual height of the StackPanel

if (UsedHeight > sp.ActualHeight) 
{
.

Now if it has scrolled, certain items will have vanished off the top of the region. So the application loops through each entry to see if it any part of the entry has gone over the top and then removes it.

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
    }
}

We also remove the space used by the entry from our used space counter.

And that is how to create a scrollable region. I’ll be doing the actual collection of news items later and will likely post how that works at that point.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Paul S. Chapman
Software Developer (Senior) Simplicita Online
United Kingdom United Kingdom
UK based IT Consultant. Started in 1985 selling home computers such as the Sinclair ZX Spectrum, BBC Model B and Commodore 64, and in 1987 moved into development, starting first with Torch Computers, developing software for the XXX UNIX Workstation.
 
Currently developing a new Azure/Silverlight based website/desktop applications for a new startup, hoping to launch in late 2009/early 2010

Comments and Discussions

 
GeneralDo you have the actual Silverlight code project. Pinmemberdream4jung21-Apr-10 9:57 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.1411023.1 | Last Updated 14 May 2009
Article Copyright 2009 by Paul S. Chapman
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid