×
Namespaces

Variants
Actions
Revision as of 17:03, 2 October 2012 by pavan.pareta (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Auto-scrolling ListBox for Windows Phone

From Nokia Developer Wiki
Jump to: navigation, search

This article explains how to build auto scroll List Box

WP Metro Icon UI.png
SignpostIcon XAML 40.png
SignpostIcon WP7 70px.png
Article Metadata
Code ExampleTested with
SDK: Windows Phone 7.1
Devices(s): Nokia Lumia 710,800
Compatibility
Platform(s): Windows Phone 7.5 (mango)
Windows Phone 7.5
Article
Created: (03 Oct 2012)
Last edited: pavan.pareta (02 Oct 2012)

Contents

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.

List Item Structure.png

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

Wmdev-0000autoscroll.gif

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.

432 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×