Telerik XAML Q3’11 Beta—A Walkthrough Part 2: RadVirtualizingWrapPanel

The original version of this post can be found on SilverlightShow.net.

 

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 RadChartingKit—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.

1. 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:

            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:

<Grid x:Name="LayoutRoot" Background="White">

        <ListBox Name="listBox1">

            <ListBox.ItemTemplate>

                <DataTemplate>

                    <StackPanel Orientation="Vertical">

                        <TextBlock Text="{Binding Author}" />

                        <TextBlock Text="{Binding Description}" />

                        <TextBlock Text="{Binding ReleaseDate}" />

   <HyperlinkButton Content="Listen to this Episode" NavigateUri="{Binding Link}" TargetName="_blank" />

                    </StackPanel>

                </DataTemplate>

            </ListBox.ItemTemplate>      

        </ListBox>

    </Grid>

 

 

Let’s go ahead and add the following code to our MainPage.xaml.cs:

public class Podcast

    {

        public string Description { get; set; }

        public DateTime ReleaseDate { get; set; }

        public Uri Link { get; set; }

        public string Author { get; set; }

    }

 

    public partial class MainPage : UserControl

    {

 

        public List<Podcast> _samplePodcastList;

 

        public MainPage()

        {

            InitializeComponent();

            Loaded += new RoutedEventHandler(MainPage_Loaded);

        }

 

        void MainPage_Loaded(object sender, RoutedEventArgs e)

        {

            _samplePodcastList = new List<Podcast>();

 

            for (int i = 0; i < 40000; i++)

            {

                Podcast PD = new Podcast();

 

    PD.Description = string.Format("Description{0} ", i.ToString());

    PD.ReleaseDate = DateTime.Now.AddDays(-10000).AddHours(i);

    PD.Link = new Uri(string.Format("http://www.podcast.com/{0}", i.ToString()));

    PD.Author = string.Format("FirstName {0}. LastName {1}", i.ToString(), i.ToString());

               

 

                _samplePodcastList.Add(PD);

            }

 

            listBox1.ItemsSource = _samplePodcastList;

        }

    }

 

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:

<ListBox.ItemsPanel>

      <ItemsPanelTemplate>

            <telerik:VirtualizingWrapPanel ItemWidth="250" />

      </ItemsPanelTemplate>

</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:

<UserControl x:Class="RadVirtualizingWrapPanelSample.MainPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"

    mc:Ignorable="d"

    d:DesignHeight="300" d:DesignWidth="400">

 

    <Grid x:Name="LayoutRoot" Background="White">

        <ListBox Name="listBox1">

            <ListBox.ItemTemplate>

                <DataTemplate>

                    <StackPanel Orientation="Vertical">

                        <TextBlock Text="{Binding Author}" />

                        <TextBlock Text="{Binding Description}" />

                        <TextBlock Name="txtReleaseDate" Text="{Binding ReleaseDate}" />

                        <HyperlinkButton Content="Listen to this Episode" NavigateUri="{Binding Link}" TargetName="_blank" />

                    </StackPanel>

                </DataTemplate>

            </ListBox.ItemTemplate>

 

            <ListBox.ItemsPanel>

                <ItemsPanelTemplate>

                    <telerik:VirtualizingWrapPanel ItemWidth="250" />

                </ItemsPanelTemplate>

            </ListBox.ItemsPanel>

        </ListBox>

    </Grid>

</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 ChartingKit, respectively.