Improve performance on LibraryBar and LibraryStack control

by Semper IT Services 11. June 2012 10:54

For a customer I had to build an application that looked like the original Photo application that is available for Surface 1. One of the main points in this application is the use of the "LibraryBar" and "LibraryStack" control. There is a very good examples on how to use these controls available on the MSDN forum:
http://msdn.microsoft.com/en-us/library/ff727821.aspx

Soon after starting the development I noticed that performance of this control was not good when I started filling the control with more and more images. Some of these images where quite large this dramatically impacted the performance of scrolling or browsing through the Library.

To overcome this problem I decided to create Thumbnails to show inside of the control and use the actual full-size image only after it has been dragged out of the control onto the Surface.

The code is all based on the MSDN example with some custom changes:

C#

#region OnInitialized
protected override void OnInitialized(EventArgs e)
{
    base.OnInitialized(e);

    // Create an ObservableCollection, and add the items.
    ObservableCollection<DataThumbnail> items = new ObservableCollection<DataThumbnail>();

    items.Add(new DataThumbnail(@"..\Resources\Image-1.png", "Group 1"));
    items.Add(new DataThumbnail(@"..\Resources\Image-2.png", "Group 1"));
    items.Add(new DataThumbnail(@"..\Resources\Image-3.png", "Group 1"));
    items.Add(new DataThumbnail(@"..\Resources\Image-4.png", "Group 2"));
    items.Add(new DataThumbnail(@"..\Resources\Image-5.png", "Group 2"));
    items.Add(new DataThumbnail(@"..\Resources\Image-6.png", "Group 2"));
    items.Add(new DataThumbnail(@"..\Resources\Image-7.png", "Group 3"));
    items.Add(new DataThumbnail(@"..\Resources\Image-8.png", "Group 3"));

    libContainer.ItemsSource = items;

    // Get the default view and establish grouping.
    ICollectionView defaultView = CollectionViewSource.GetDefaultView(items);
    defaultView.GroupDescriptions.Add(new PropertyGroupDescription("GroupName"));
}
#endregion

C# DataThumbnail

/// <summary>
/// Represents an image thumbnail with an associated group name.
/// </summary>
public class DataThumbnail
{
    #region Fields

    private string imageFile;
    private string groupName;
    private BitmapImage thumbnail;

    #endregion

    #region Constructor

    /// <summary>
    /// Creates a new instance of the DataThumbnail class.
    /// </summary>
    /// <param name="imageFile">The file name of the image.</param>
    /// <param name="groupName">The group name for the image.</param>
    public DataThumbnail(string imageFile, string groupName)
    {
        this.imageFile = imageFile;
        this.groupName = groupName;
        this.thumbnail = GetReducedBitmapImage(new Uri(imageFile, UriKind.Relative));
    }

    #endregion

    #region Properties

    /// <summary>
    /// Gets the ImageFile of this instance.
    /// </summary>
    public string ImageFile
    {
        get { return imageFile; }
    }

    /// <summary>
    /// Gets the group name of this instance.
    /// </summary>
    public string GroupName
    {
        get { return groupName; }
    }

    /// <summary>
    /// Gets the thumbnail image
    /// </summary>
    public BitmapSource Thumbnail
    {
        get { return thumbnail; }
    }

    #endregion

    private BitmapImage GetReducedBitmapImage(Uri imgUri)
    {
        // Define a BitmapImage.
        BitmapImage bi = new BitmapImage();

        // Begin initialization.
        bi.BeginInit();

        // Set properties.
        bi.CacheOption = BitmapCacheOption.OnLoad;
        bi.DecodePixelHeight = 200;
        bi.UriSource = imgUri;

        // End initialization.
        bi.EndInit();

        return bi;
    }
}

XAML

<s:SurfaceWindow.Resources>
    <DataTemplate x:Key="ContainerItemTemplate">
        <Image Source="{Binding Thumbnail}" />
    </DataTemplate>
</s:SurfaceWindow.Resources>

<s:LibraryContainer x:Name="libContainer" CanSwitchViewingMode="True" ViewingMode="Stack" SelectedStackIndex="0" Visibility="Visible">
    <s:LibraryContainer.BarView>
        <s:BarView ItemTemplate="{StaticResource ContainerItemTemplate}" Rows="2"/>
    </s:LibraryContainer.BarView>
    <s:LibraryContainer.StackView>
        <s:StackView ItemTemplate="{StaticResource ContainerItemTemplate}" />
    </s:LibraryContainer.StackView>
</s:LibraryContainer>

I hope this helps you to improve performance on your LibraryBar and LibraryStack controls.

Tags: , ,

PixelSense | Surface

Add comment

  Country flag

biuquote
  • Comment
  • Preview
Loading

Semper IT Services

Semper IT Services is a dynamic and enthusiastic IT company. With years of experience in many industries almost any IT challenge can be solved.

Early 2009 Semper IT Services decided to focus on the Microsoft Surface. Alongside Surface also other touch devices like Windows 8, Windows 7 and Windows Phone 7 became a priority. After a couple of years Semper IT Services now has lots of experience with Multitouch.

Month List