This is part 2 from an article on Telerik XAML Q3'11 Beta, authored by Michael Crump and Evan Hutnick. Part 1 | Part 3
SilverlightShow will occasionally publish content related to 3rd party Silverlight and Windows Phone products, following interest and article topic requests received through our surveys and feedback email (editorial at silverlightshow dot net).
Telerik XAML Q3’11 Beta
Part 2: RadVirtualizingWrapPanel
Here begins the second of three parts, which comprise Telerik XAML Q3’11 Beta—A Walkthrough. In case you missed it, with Telerik’s upcoming release in November you’ll have access to the official versions of RadBarCode, RadVirtualizingWrapPanel, and RadChartView—and a few sure-to-please extras.
To make the most of these articles, download the beta before getting started.
For an introductory overview you can check out the official beta announcement on our Silverlight Team blog.
Introducing RadVirtualizingWrapPanel
RadVirtualizingWrapPanel boosts the performance of your ListBox/ListView when binding to a large amount of data. The control generates only the visible items and positions them in sequential order from left to right and top to bottom, breaking the content to the next line at the edge of its containing box.
You can check out the VisualizingWrapPanel demos here.
Let’s Get Buildin’
We are going to build a sample project that uses Telerik’s RadVirtualizingWrapPanel in Silverlight 4.
Open Visual Studio 2010, select a new Silverlight Project, and give it any name that you want. In this example, I have given it the name of RadVirtualizingWrapPanelSample.
We are going to need to add one reference to our project in order to use Telerik’s VirtualizingWrapPanel.
- Telerik.Windows.Controls
Make sure that you select 2011.3.1020.1040 as the version number to ensure that you are using the Q3 Beta release.
With the reference added, we now need to add the Telerik XAML Namespace to our MainPage.xaml file. Simply double-click the MainPage.xaml file and add the following code snippet:
1: xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
Now, we must add a Listbox to our grid and define an ItemTemplate as shown below:
1: <Grid x:Name="LayoutRoot" Background="White">
2: <ListBox Name="listBox1">
3: <ListBox.ItemTemplate>
4: <DataTemplate>
5: <StackPanel Orientation="Vertical">
6: <TextBlock Text="{Binding Author}" />
7: <TextBlock Text="{Binding Description}" />
8: <TextBlock Text="{Binding ReleaseDate}" />
9: <HyperlinkButton Content="Listen to this Episode" NavigateUri="{Binding Link}" TargetName="_blank" />
10: </StackPanel>
11: </DataTemplate>
12: </ListBox.ItemTemplate>
13: </ListBox>
14: </Grid>
Let’s go ahead and add the following code to our MainPage.xaml.cs: (This will add 40,000 items to our ListBox)
1: public class Podcast
2: {
3: public string Description { get; set; }
4: public DateTime ReleaseDate { get; set; }
5: public Uri Link { get; set; }
6: public string Author { get; set; }
7: }
8:
9: public partial class MainPage : UserControl
10: {
11:
12: public List<Podcast> _samplePodcastList;
13:
14: public MainPage()
15: {
16: InitializeComponent();
17: Loaded += new RoutedEventHandler(MainPage_Loaded);
18: }
19:
20: void MainPage_Loaded(object sender, RoutedEventArgs e)
21: {
22: _samplePodcastList = new List<Podcast>();
23:
24: for (int i = 0; i < 40000; i++)
25: {
26: Podcast PD = new Podcast();
27:
28: PD.Description = string.Format("Description{0} ", i.ToString());
29: PD.ReleaseDate = DateTime.Now.AddDays(-10000).AddHours(i);
30: PD.Link = new Uri(string.Format("http://www.podcast.com/{0}", i.ToString()));
31: PD.Author = string.Format("FirstName {0}. LastName {1}", i.ToString(), i.ToString());
32:
33:
34: _samplePodcastList.Add(PD);
35: }
36:
37: listBox1.ItemsSource = _samplePodcastList;
38: }
39: }
At this point, if we run our application, we should get the following:
This result, however, is not exactly what we want. It is not a WrapPanel and it is very slow navigating the 40,000 items bound to it.
With those 40,000 items in mind, let’s head back into our MainPage.xaml and add the Telerik VirtualizingWrapPanel inside our ListBox’s ItemsPanel, using the following code snippet:
1: <ListBox.ItemsPanel>
2: <ItemsPanelTemplate>
3: <telerik:VirtualizingWrapPanel ItemWidth="250" />
4: </ItemsPanelTemplate>
5: </ListBox.ItemsPanel>
Now, if we run the application, we will see something much better:
We now have our items in the ListBox using a WrapPanel and it is very easy to scroll hundreds of thousands of records.
Meanwhile, our completed MainPage.xaml file should look like the following:
1: <UserControl x:Class="RadVirtualizingWrapPanelSample.MainPage"
2: xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4: xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
5: xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
6: xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
7: mc:Ignorable="d"
8: d:DesignHeight="300" d:DesignWidth="400">
9:
10: <Grid x:Name="LayoutRoot" Background="White">
11: <ListBox Name="listBox1">
12: <ListBox.ItemTemplate>
13: <DataTemplate>
14: <StackPanel Orientation="Vertical">
15: <TextBlock Text="{Binding Author}" />
16: <TextBlock Text="{Binding Description}" />
17: <TextBlock Name="txtReleaseDate" Text="{Binding ReleaseDate}" />
18: <HyperlinkButton Content="Listen to this Episode" NavigateUri="{Binding Link}" TargetName="_blank" />
19: </StackPanel>
20: </DataTemplate>
21: </ListBox.ItemTemplate>
22:
23: <ListBox.ItemsPanel>
24: <ItemsPanelTemplate>
25: <telerik:VirtualizingWrapPanel ItemWidth="250" />
26: </ItemsPanelTemplate>
27: </ListBox.ItemsPanel>
28: </ListBox>
29: </Grid>
30: </UserControl>
Thanks for Reading
We hope this article has you convinced at how easy it is to get started with Telerik’s RadVirtualizingWrapPanel. Don’t forget to check out parts one and three of Telerik XAML Q3’11 Beta—A Walkthrough: each discussing RadBarCode and ChartView, respectively.
If you enjoyed this article, you can find similar postings by XAML Evangelist, Michael Crump, on his Telerik blog.