Thumbnail in WPF

This article demonstrates how to create thumbnail images in WPF using XAML and C#.

Create a Thumbnail

The BitmapImage class is used to create a thumbnail in WPF. The DecodePixelWidth and DecodePixelHeight properties are used to set the size of the bitmap from an image and this bitmap can be displayed in an Image control.

 

The BitmapImage element in XAML represents a Bitmap Image control at design-time. The following code snippet creates a BitmapImage element and set its DecodePixelWidth and DecodePixelHeight attributes.

 

<Image Width="120" Height="120" HorizontalAlignment="Center">

                <Image.Source>              

                    <BitmapImage DecodePixelWidth="100" DecodePixelHeight="100" UriSource="Garden.jpg" />

                </Image.Source>

</Image>

 

Listing 40 shows a Window with two Image controls. First Image control display an image in its original size and second control displays its thumbnail size.

 

<Window x:Class="ThumbnailSample.MainWindow"

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

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

        Title="MainWindow" Height="350" Width="625">

    <Grid Margin="10,10,10,10" Name="LayoutRoot">

        <Image Source="Garden.jpg" HorizontalAlignment="Left" />

 

        <Border BorderBrush="Gray" BorderThickness="2" HorizontalAlignment="Right"

                Width="130" Height="130">

            <Image Width="120" Height="120" HorizontalAlignment="Center">

                <Image.Source>              

                    <BitmapImage DecodePixelWidth="100" DecodePixelHeight="100" UriSource="Garden.jpg" />

                </Image.Source>

            </Image>

        </Border>

 

    </Grid>

</Window>

Listing 40

The output of Listing 40 generates Figure 44 where the left side image is the original image and right side image is the thumbnail preview of the image.

 

Figure 44

The code listed in Listing 41 creates a thumbnail at run-time by creating a BitmapImage object and setting its DecodePixelWidth and DecodePixelHeight properties.

 

private void CreateATyhumbnail()

{

    // Create an Image control

    Image thumbnailImage = new Image();

    thumbnailImage.Width = 130;

 

    // Create a BitmapImage and sets its DecodePixelWidth and DecodePixelHeight

    BitmapImage bmpImage = new BitmapImage();

    bmpImage.BeginInit();

    bmpImage.UriSource = new Uri(@"Garden.jpg", UriKind.RelativeOrAbsolute);

    bmpImage.DecodePixelWidth = 120;

    bmpImage.DecodePixelHeight = 120;

    bmpImage.EndInit();

    // Set Source property of Image

    thumbnailImage.Source = bmpImage;

 

    LayoutRoot.Children.Add(thumbnailImage);

}

 

Listing 41