Revision as of 17:05, 2 October 2012

This article explains how to build auto scroll List Box

Introduction

This article explains how to scroll list box programmatically that seem circular scroll, a list box in Windows Phone application. When you want to show dynamically added list item will automatically show on the screen. This concept can be use in multiple domains to represent dynamic data on the phone screen such as banking, stock market, social network status/data update etc. In Windows Phone list box control contain ScrollIntoView() method that allows you to scroll particular list box item.

Require component for this solution:

1. Custom List Control with XAML
2. Sample Data Class
3. Sample Data Load
4. Dispatcher Timer API

Development

Design Custom List using XAML: It’s totally depended on the requirement how data will be represent on the screen. In this example a list component will contain an image, user name and group.

XAML Code

<!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <StackPanel Orientation="Horizontal">
                <ListBox x:Name="lstSample">
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal">
                                <Image Source="{Binding ImagePath}" Stretch="None"/>
                                <StackPanel Orientation="Vertical">
                                    <TextBlock Text="{Binding Name}" FontSize="45"/>
                                    <TextBlock Text="{Binding Group}" FontSize="25"/>
                                </StackPanel>
                            </StackPanel>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>
            </StackPanel>
        </Grid>

Sample Data Class

This class contains only required data members. C# Code:

 public class SampleData
    {
        public string ImagePath { get; set; }
        public string Name { get; set; }
        public string Group { get; set; }
    }

Sample Data Load

Call the following code snippet in the constructor to load a Sample Data List and set item source of List Item Control with SimpleItems object of sample data. C# code:

SimpleItems = new List<SampleData>() 
{ 
	new SampleData(){Name = "User1:", ImagePath="/Images/user.png", Group ="wiki"},
	new SampleData(){Name = "User2:", ImagePath="/Images/user.png", Group="froum"},
	new SampleData(){Name = "User3:", ImagePath="/Images/user.png", Group ="nokia"}
};
 
// set data Source to list 
this.lstSample.ItemsSource = SimpleItems;

Dispatcher Timer API

Finally we will call the DispatcherTimer API to Scroll list item certain time of period. C# code:

// DispatcherTimer object declaration in constructor
timer = new DispatcherTimer();
timer.Interval = TimeSpan.FromMilliseconds(1500); //delayed for 1.5 seconds
timer.Tick += new EventHandler(timer_Tick);

DispatcherTimer Event Handler

void timer_Tick(object sender, EventArgs e)
        {
            lstSample.ScrollIntoView(lstSample.Items[index]); //scroll to the current item
            lstSample.SelectedIndex = index; //highlight the selected item in the list box scroller
            SampleData item = (SampleData)lstSample.Items[index]; // getting the current item
 
            if (index < lstSample.Items.Count - 1)
            {
                index++;
            }
            else
            {
                lstSample.ScrollIntoView(lstSample.Items[0]); //scroll to the first item
                index = 0; //reset the index when it reaches to the last item
            }
        }

Run it using F5 key

Output Screen

References

1. ScrollIntoView()
2. List<T> Class
3. DispatcherTimer Class
4. Bar for Windows Phone

~ Happy Coding ~

Sample Code

You can download sample code from File:WmDevAutoScrollListBox.zip.