×
Namespaces

Variants
Actions
(Difference between revisions)

Auto-scrolling ListBox for Windows Phone

From Nokia Developer Wiki
Jump to: navigation, search
Vaishali Rawat (Talk | contribs)
(Vaishali Rawat - - Custom List Box definition (in XAML))
hamishwillee (Talk | contribs)
m (Hamishwillee -)
 
(9 intermediate revisions by 5 users not shown)
Line 1: Line 1:
[[Category:Windows Phone]][[Category:UI]][[Category:Silverlight]][[Category:Code Examples]]
+
[[Category:UI on Windows Phone]][[Category:XAML]][[Category:Code Examples]][[Category:Windows Phone 7.5]]
 
{{Abstract|This code example explains how to create a [http://msdn.microsoft.com/en-us/library/ms611062(v=vs.95).aspx ListBox] which automatically scrolls through and highlights its items.}}
 
{{Abstract|This code example explains how to create a [http://msdn.microsoft.com/en-us/library/ms611062(v=vs.95).aspx ListBox] which automatically scrolls through and highlights its items.}}
  
Line 27: Line 27:
 
== Introduction ==
 
== Introduction ==
  
Auto scrolling lists are useful for displaying information that is regularly updated, but where there is also value in showing historical and trend information (for example, stock market updates, data feeds, flight information display systems, social network status/data update etc).
+
Auto scrolling lists are not only useful for displaying informations that is regularly updated, but also where some meaningful information may be displayed. It can be a pattern, trend or some historical information (for example, stock market updates, data feeds, flight information display systems, social network status/data update etc).
  
The auto-scrolling {{Icode|ListBox}} provided by this article is displayed in the animated gif below. The box navigates to each item in turn (ensuring it is visible) using [http://msdn.microsoft.com/en-us/library/system.windows.controls.listbox.scrollintoview(v=vs.95).aspx ListBox:ScrollIntoView()] and highlights the item by setting it as ''Selected''. At the end of the list the selection returns to the first item and repeats the iteration. A [http://msdn.microsoft.com/en-us/library/system.windows.threading.dispatchertimer.aspx DispatcherTimer] is used to control the rate of movement through the items.
+
The auto-scrolling {{Icode|ListBox}} illustrated in this article is displayed in the animated gif image below. The box navigates to each item in turn (ensuring it is visible) using [http://msdn.microsoft.com/en-us/library/system.windows.controls.listbox.scrollintoview(v=vs.95).aspx ListBox:ScrollIntoView()] and highlights the item by setting it as ''Selected''. At the end of the list, the selection returns to the first item and repeats the iteration. A [http://msdn.microsoft.com/en-us/library/system.windows.threading.dispatchertimer.aspx DispatcherTimer] is used to control the rate of movement through the items.
  
 
[[File:Wmdev-0000autoscroll.gif|frame|none|Auto scrolling list]]
 
[[File:Wmdev-0000autoscroll.gif|frame|none|Auto scrolling list]]
Line 45: Line 45:
  
 
The XAML definition for the {{Icode|ListBox}} is given below:
 
The XAML definition for the {{Icode|ListBox}} is given below:
 +
 
<code xml>
 
<code xml>
 
<!--ContentPanel - place additional content here-->
 
<!--ContentPanel - place additional content here-->
Line 71: Line 72:
  
 
== Sample List Data ==
 
== Sample List Data ==
The sample list data is defined in the C# code behind, as shown below. Note that as required in the XAML binding definition above the properties are named {{Icode|Name }}, {{Icode|Group}}, and {{Icode|ImagePath}},  
+
The sample list data is defined in the C# code behind, as shown below. Note that as required in the XAML binding definition above the properties are named {{Icode|Name}}, {{Icode|Group}}, and {{Icode|ImagePath}},  
  
 
<code csharp>
 
<code csharp>
Line 82: Line 83:
 
</code>
 
</code>
  
We then create instances of this data class for the list items, and set them as the source for the {{Icode|ListBox}}.  
+
We then create instances of this data class for the list items and set them as the source for the {{Icode|ListBox}}.  
 
<code csharp>
 
<code csharp>
 
//SimpleItems is a list containing items of class SampleData
 
//SimpleItems is a list containing items of class SampleData
Line 106: Line 107:
 
</code>
 
</code>
  
When the timer triggers we call the {{Icode|timer_Tick}} event handler, which scrolls to the current index and marks it as selected, and then updates the index. After the last item is highlighted the index is reset to the first item.
+
When the timer is triggerd, we call the {{Icode|timer_Tick}} event handler, which scrolls to the current index and marks it as selected, and then updates the index. After the last item is highlighted the index is reset to the first item.
 
<code csharp>
 
<code csharp>
 
void timer_Tick(object sender, EventArgs e)
 
void timer_Tick(object sender, EventArgs e)
Line 126: Line 127:
 
</code>
 
</code>
  
Run it using F5 key  
+
Run it using F5 key.
  
 
== References ==
 
== References ==
Line 138: Line 139:
  
 
== Sample Code==
 
== Sample Code==
You can download sample code from [[File:WmDevAutoScrollListBox.zip]].
+
You can download sample code from [[Media:WmDevAutoScrollListBox.zip]].

Latest revision as of 08:48, 2 July 2013

This code example explains how to create a ListBox which automatically scrolls through and highlights its items.

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: pavan.pareta (02 Oct 2012)
Last edited: hamishwillee (02 Jul 2013)

Contents

[edit] Introduction

Auto scrolling lists are not only useful for displaying informations that is regularly updated, but also where some meaningful information may be displayed. It can be a pattern, trend or some historical information (for example, stock market updates, data feeds, flight information display systems, social network status/data update etc).

The auto-scrolling ListBox illustrated in this article is displayed in the animated gif image below. The box navigates to each item in turn (ensuring it is visible) using ListBox:ScrollIntoView() and highlights the item by setting it as Selected. At the end of the list, the selection returns to the first item and repeats the iteration. A DispatcherTimer is used to control the rate of movement through the items.

Auto scrolling list

[edit] Architectural overview

The main components of this solution are listed below:

  1. Custom List Control (XAML) - definition of the List and appearance of its list items in XAML
  2. Sample List Data - C# class defining the format of data to be displayed in the ListBox along with instances of the class that are bound to the ListBox
  3. Dispatcher Timer API - C# code for iterating through the list items.

These are discussed in the following sections

[edit] Custom List Box definition (in XAML)

The XAML definition for the ListBox is given below:

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

The ListBox has the name lstSample, and is defined in terms of a DataTemplate. The template describes the appearance of each item and includes named bindings for each element of those items. In this example, a list component item will contain an image, user name and group as shown below:

List item template

[edit] Sample List Data

The sample list data is defined in the C# code behind, as shown below. Note that as required in the XAML binding definition above the properties are named Name, Group, and ImagePath,

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

We then create instances of this data class for the list items and set them as the source for the ListBox.

//SimpleItems is a list containing items of class SampleData
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"}
};
 
//Bind the list data to the ListBox (note that lstSample is the name of the list defined in the XAML)
this.lstSample.ItemsSource = SimpleItems;

[edit] Dispatcher Timer API

Finally we will call the DispatcherTimer API to iterate through the items.

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

When the timer is triggerd, we call the timer_Tick event handler, which scrolls to the current index and marks it as selected, and then updates the index. After the last item is highlighted the index is reset to the first item.

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.

[edit] References

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


~ Happy Coding ~

[edit] Sample Code

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

This page was last modified on 2 July 2013, at 08:48.
444 page views in the last 30 days.
×