Creating Image Lists Using Expression Blend

Take the following steps in Microsoft Expression Blend to create an image list using LEADTOOLS ImageViewer control.

Create a Microsoft Expression Blend project and set it up to use LEADTOOLS WPF controls. Make your project Name and Window Title "MyList."

Open the XAML and clear its content then paste the code below instead:

MainWindow.xaml

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:Leadtools_Controls_Wpf="clr-namespace:Leadtools.Controls;assembly=Leadtools.Controls.Wpf" 
    x:Class="MyList.MainWindow" 
    x:Name="Window" 
    Title="MyList"  
    Width="640" 
    Height="480"> 
    <Grid x:Name="LayoutRoot"> 
        <Leadtools_Controls_Wpf:ImageViewer x:Name="_imageList" Margin="10" ItemSpacing="10,10" ItemSize="150,150" HorizontalAlignment="Left" Width="180" ItemBorderThickness="1" SelectedItemBackgroundColor="LightSkyBlue" Loaded="ImageViewer_Loaded"> 
            <Leadtools_Controls_Wpf:ImageViewer.ViewLayout> 
                <Leadtools_Controls_Wpf:ImageViewerVerticalViewLayout Columns="1"/> 
            </Leadtools_Controls_Wpf:ImageViewer.ViewLayout> 
 
            <Leadtools_Controls_Wpf:ImageViewer.InteractiveModes> 
                <Leadtools_Controls_Wpf:ImageViewerSelectItemsInteractiveMode IsEnabled="True"/> 
            </Leadtools_Controls_Wpf:ImageViewer.InteractiveModes> 
        </Leadtools_Controls_Wpf:ImageViewer> 
    </Grid> 
</Window>

Open the code behind file and clear its content then paste the code below instead:

MainWindow.xaml.cs

using Leadtools; 
using Leadtools.Codecs; 
using Leadtools.Controls; 
using System.IO; 
using System.Windows; 
 
namespace MyList 
{ 
    /// <summary> 
    /// Interaction logic for MainWindow.xaml 
    /// </summary> 
    public partial class MainWindow : Window 
    { 
        public MainWindow() 
        { 
            InitializeComponent(); 
        } 
 
        static class LEAD_VARS 
        { 
            public const string ImagesDir = @"C:\Users\Public\Documents\LEADTOOLS Images"; 
        } 
 
        LeadSize _imageSize = LeadSize.Create(130, 130); 
 
        private void ImageViewer_Loaded(object sender, RoutedEventArgs e) 
        { 
            AddItem(Path.Combine(LEAD_VARS.ImagesDir, @"ImageProcessingDemo\NaturalFruits.jpg")); 
            AddItem(Path.Combine(LEAD_VARS.ImagesDir, @"ImageProcessingDemo\Ani.gif")); 
            AddItem(Path.Combine(LEAD_VARS.ImagesDir, @"ImageProcessingDemo\Image2.jpg")); 
            AddItem(Path.Combine(LEAD_VARS.ImagesDir, @"ImageProcessingDemo\Fruits.jpg")); 
        } 
 
        private void AddItem(string fileName) 
        { 
            using (RasterCodecs codecs = new RasterCodecs()) 
            { 
                _imageList.BeginUpdate(); 
 
                RasterImage rasterImage = codecs.Load(fileName); 
 
                LeadRect destRect = LeadRect.Create(0, 0, _imageSize.Width, _imageSize.Height); 
                LeadRect imageRect = ImageViewer.GetDestinationRectangle( 
                   rasterImage.ImageWidth, 
                   rasterImage.ImageHeight, 
                   destRect, 
                   ControlSizeMode.Fit, 
                   ControlAlignment.Near, 
                   ControlAlignment.Near); 
 
                RasterImage thumbnail = rasterImage.CreateThumbnail( 
                   imageRect.Width, 
                   imageRect.Height, 
                   32, 
                   RasterViewPerspective.TopLeft, 
                   RasterSizeFlags.Resample); 
 
                ImageViewerItem item = new ImageViewerItem(); 
                item.Image = thumbnail; 
 
                _imageList.Items.Add(item); 
 
                _imageList.EndUpdate(); 
            } 
        } 
    } 
}

Press F5 to build your application. This will take a few seconds. When it is done, you'll have a scrollable image list. Click any image in the list to select it: